import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { Loader2, Globe } from "lucide-react";
import { ANIMATIONS, ANIMATION_DELAYS } from "@/constants/animations";
import { PRIMARY_COLOR, PRIMARY_COLOR_HOVER } from "@/lib/common";

export interface SubdomainFormProps {
  subdomain: string;
  onSubdomainChange: (value: string) => void;
  error: string;
  isSubmitting: boolean;
  mounted: boolean;
  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
}

const slideIn = (mounted: boolean) =>
  mounted ? ANIMATIONS.slideIn.mounted : ANIMATIONS.slideIn.unmounted;

export function SubdomainForm({
  subdomain,
  onSubdomainChange,
  error,
  isSubmitting,
  mounted,
  onSubmit,
}: SubdomainFormProps) {
  return (
    <form onSubmit={onSubmit} className="flex flex-col gap-4" noValidate>
      {error && (
        <p
          role="alert"
          className="animate-[fadeIn_0.3s_ease-in-out,slideDown_0.3s_ease-in-out] flex items-center gap-1.5 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-600"
        >
          <span className="inline-block h-1 w-1 rounded-full bg-red-400 flex-shrink-0" />
          {error}
        </p>
      )}

      {/* Field card */}
      <div
        className={cn(
          "overflow-hidden rounded-xl border border-slate-100 bg-slate-50/60",
          ANIMATIONS.slideIn.base,
          slideIn(mounted)
        )}
      >
        <div className="px-3.5 pt-3.5 pb-3.5">
          <Field>
            <FieldLabel
              htmlFor="subdomain"
              className="mb-1.5 block text-[10px] font-semibold uppercase tracking-widest text-slate-400"
            >
              Subdomain Name
            </FieldLabel>
            <div
              className={cn(
                "group relative",
                ANIMATIONS.slideIn.base,
                ANIMATION_DELAYS.short,
                slideIn(mounted)
              )}
            >
              <Globe className="absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-400 transition-colors duration-200 group-focus-within:text-[#428B4D]" />
              <Input
                id="subdomain"
                type="text"
                placeholder="e.g. beta-launch"
                required
                disabled={isSubmitting}
                value={subdomain}
                onChange={(e) => onSubdomainChange(e.target.value)}
                className={cn(
                  "pl-9 h-9 rounded-lg border-slate-200 bg-white/80 text-sm placeholder:text-slate-400",
                  "shadow-sm transition-all duration-200",
                  "focus-visible:bg-white focus-visible:ring-2 focus-visible:ring-[#428B4D]/20 focus-visible:shadow-none"
                )}
              />
            </div>
            <p
              className={cn(
                "mt-1.5 text-[10px] text-slate-400",
                ANIMATIONS.slideIn.base,
                ANIMATION_DELAYS.medium,
                slideIn(mounted)
              )}
            >
              Use hyphenated lowercase words. Existing names redirect to that workspace.
            </p>
          </Field>
        </div>
      </div>

      {/* Submit button */}
      <div
        className={cn(
          ANIMATIONS.fadeIn.base,
          ANIMATION_DELAYS.medium,
          mounted ? ANIMATIONS.fadeIn.mounted : ANIMATIONS.fadeIn.unmounted
        )}
      >
        <Button
          type="submit"
          disabled={isSubmitting}
          aria-disabled={isSubmitting}
          className={cn(
            "relative w-full overflow-hidden rounded-xl h-9 text-xs font-bold uppercase tracking-[0.3em] text-white",
            "transition-all duration-300 hover:scale-[1.015] hover:brightness-110 active:scale-[0.99]",
            "disabled:opacity-60 disabled:hover:scale-100 disabled:hover:brightness-100 disabled:cursor-not-allowed",
          )}
          style={{
            background: `linear-gradient(135deg, ${PRIMARY_COLOR} 0%, ${PRIMARY_COLOR_HOVER} 100%)`,
            boxShadow: "0 4px 18px -2px rgba(66,139,77,0.40)",
          }}
        >
          {/* Shimmer sweep */}
          {!isSubmitting && (
            <span
              className="pointer-events-none absolute inset-0 -translate-x-full skew-x-[-12deg] bg-white/20"
              style={{ animation: "shimmer 2.4s ease-in-out infinite" }}
              aria-hidden
            />
          )}
          {isSubmitting ? (
            <span className="relative flex items-center justify-center gap-2">
              <Loader2 className="h-3.5 w-3.5 animate-spin" />
              Processing…
            </span>
          ) : (
            <span className="relative">Continue</span>
          )}
        </Button>
      </div>
    </form>
  );
}