"use client";

import type { FormEvent } from "react";
import { useId, useState } from "react";
import { Loader2 } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";

type FormState = {
  name: string;
  email: string;
  role: string;
  scope: string;
  notes: string;
  terms: boolean;
};

type FormStatus = "idle" | "submitting" | "success";

const initialState: FormState = {
  name: "",
  email: "",
  role: "",
  scope: "",
  notes: "",
  terms: false
};

export function CompositeForm() {
  const [state, setState] = useState<FormState>(initialState);
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [status, setStatus] = useState<FormStatus>("idle");

  const nameId = useId();
  const emailId = useId();
  const roleId = useId();
  const scopeId = useId();
  const notesId = useId();
  const termsId = useId();

  const fieldIds = {
    name: `name-${nameId}`,
    email: `email-${emailId}`,
    role: `role-${roleId}`,
    scope: `scope-${scopeId}`,
    notes: `notes-${notesId}`,
    terms: `terms-${termsId}`
  };

  const validate = () => {
    const nextErrors: Record<string, string> = {};

    if (state.name.trim().length < 2) {
      nextErrors.name = "Ingresa un nombre valido.";
    }

    if (!state.email.includes("@") || state.email.trim().length < 5) {
      nextErrors.email = "Ingresa un email valido.";
    }

    if (!state.role) {
      nextErrors.role = "Selecciona un rol.";
    }

    if (!state.scope) {
      nextErrors.scope = "Selecciona un tipo de proyecto.";
    }

    if (state.notes.trim().length < 10) {
      nextErrors.notes = "Agrega al menos 10 caracteres.";
    }

    if (!state.terms) {
      nextErrors.terms = "Debes aceptar las condiciones.";
    }

    return nextErrors;
  };

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (status === "submitting") return;

    const nextErrors = validate();
    setErrors(nextErrors);

    if (Object.keys(nextErrors).length > 0) {
      setStatus("idle");
      return;
    }

    setStatus("submitting");

    setTimeout(() => {
      setStatus("success");
    }, 1200);
  };

  const updateField = <K extends keyof FormState>(key: K, value: FormState[K]) => {
    setState((prev) => ({ ...prev, [key]: value }));
    if (status !== "idle") {
      setStatus("idle");
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <div className="grid gap-4 md:grid-cols-2">
        <div className="space-y-2">
          <Label htmlFor={fieldIds.name}>Nombre</Label>
          <Input
            id={fieldIds.name}
            value={state.name}
            onChange={(event) => updateField("name", event.target.value)}
            placeholder="Tu nombre completo"
            aria-invalid={Boolean(errors.name)}
            aria-describedby={errors.name ? `${fieldIds.name}-error` : undefined}
            className={cn(errors.name && "border-destructive/60")}
          />
          {errors.name ? (
            <p id={`${fieldIds.name}-error`} className="text-xs text-destructive">
              {errors.name}
            </p>
          ) : null}
        </div>

        <div className="space-y-2">
          <Label htmlFor={fieldIds.email}>Email</Label>
          <Input
            id={fieldIds.email}
            type="email"
            value={state.email}
            onChange={(event) => updateField("email", event.target.value)}
            placeholder="tu@email.com"
            aria-invalid={Boolean(errors.email)}
            aria-describedby={errors.email ? `${fieldIds.email}-error` : undefined}
            className={cn(errors.email && "border-destructive/60")}
          />
          {errors.email ? (
            <p id={`${fieldIds.email}-error`} className="text-xs text-destructive">
              {errors.email}
            </p>
          ) : null}
        </div>
      </div>

      <div className="grid gap-4 md:grid-cols-2">
        <div className="space-y-2">
          <Label htmlFor={fieldIds.role}>Rol</Label>
          <Select value={state.role} onValueChange={(value) => updateField("role", value)}>
            <SelectTrigger
              id={fieldIds.role}
              aria-invalid={Boolean(errors.role)}
              className={cn(errors.role && "border-destructive/60")}
            >
              <SelectValue placeholder="Selecciona un rol" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="frontend">Frontend</SelectItem>
              <SelectItem value="product">Product</SelectItem>
              <SelectItem value="founder">Founder</SelectItem>
              <SelectItem value="estudiante">Estudiante</SelectItem>
            </SelectContent>
          </Select>
          {errors.role ? (
            <p className="text-xs text-destructive">{errors.role}</p>
          ) : null}
        </div>

        <div className="space-y-2">
          <Label htmlFor={fieldIds.scope}>Tipo de proyecto</Label>
          <Select
            value={state.scope}
            onValueChange={(value) => updateField("scope", value)}
          >
            <SelectTrigger
              id={fieldIds.scope}
              aria-invalid={Boolean(errors.scope)}
              className={cn(errors.scope && "border-destructive/60")}
            >
              <SelectValue placeholder="Selecciona el alcance" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="saas">SaaS</SelectItem>
              <SelectItem value="ecommerce">Ecommerce</SelectItem>
              <SelectItem value="portfolio">Portafolio</SelectItem>
              <SelectItem value="interno">Producto interno</SelectItem>
            </SelectContent>
          </Select>
          {errors.scope ? (
            <p className="text-xs text-destructive">{errors.scope}</p>
          ) : null}
        </div>
      </div>

      <div className="space-y-2">
        <Label htmlFor={fieldIds.notes}>Notas</Label>
        <Textarea
          id={fieldIds.notes}
          value={state.notes}
          onChange={(event) => updateField("notes", event.target.value)}
          placeholder="Describe que necesitas y cual es el objetivo."
          rows={4}
          aria-invalid={Boolean(errors.notes)}
          aria-describedby={errors.notes ? `${fieldIds.notes}-error` : undefined}
          className={cn(errors.notes && "border-destructive/60")}
        />
        {errors.notes ? (
          <p id={`${fieldIds.notes}-error`} className="text-xs text-destructive">
            {errors.notes}
          </p>
        ) : null}
      </div>

      <div className="flex items-start gap-3">
        <Checkbox
          id={fieldIds.terms}
          checked={state.terms}
          onCheckedChange={(checked) => updateField("terms", Boolean(checked))}
          aria-invalid={Boolean(errors.terms)}
        />
        <div className="space-y-1">
          <Label htmlFor={fieldIds.terms} className="text-sm">
            Acepto recibir actualizaciones sobre el registro.
          </Label>
          {errors.terms ? (
            <p className="text-xs text-destructive">{errors.terms}</p>
          ) : null}
        </div>
      </div>

      {status === "success" ? (
        <div
          role="status"
          className="rounded-xl border border-primary/30 bg-primary/10 px-4 py-3 text-sm text-primary"
        >
          Formulario enviado. Te responderemos pronto.
        </div>
      ) : null}

      <Button type="submit" disabled={status === "submitting"}>
        {status === "submitting" ? (
          <>
            <Loader2 className="h-4 w-4 animate-spin" />
            Enviando...
          </>
        ) : (
          "Enviar formulario"
        )}
      </Button>
    </form>
  );
}