"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import { CheckCircle2, Send, Mail } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";
import { useLanguage } from "@/components/language-provider";

export function ContactForm({ compact = false }: { compact?: boolean }) {
  const { t } = useLanguage();
  const [status, setStatus] = useState<"idle" | "sending" | "sent">("idle");

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus("sending");
    await new Promise((r) => setTimeout(r, 900));
    setStatus("sent");
  }

  if (status === "sent") {
    return (
      <motion.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        className="flex h-full flex-col items-center justify-center gap-4 rounded-2xl border border-emerald-200 bg-emerald-50/60 p-10 text-center"
      >
        <span className="flex h-14 w-14 items-center justify-center rounded-full bg-emerald-500 text-white">
          <CheckCircle2 className="h-6 w-6" />
        </span>
        <h3 className="font-display text-xl font-semibold text-steel-900">
          {t.contact.thankYouTitle}
        </h3>
        <p className="max-w-sm text-sm leading-relaxed text-steel-600">
          {t.contact.thankYouBody}
        </p>
        <button
          type="button"
          onClick={() => setStatus("idle")}
          className="mt-2 text-sm font-semibold text-steel-900 underline-offset-4 hover:underline"
        >
          {t.contact.thankYouAgain}
        </button>
      </motion.div>
    );
  }

  const f = t.contact.form;

  return (
    <form
      onSubmit={onSubmit}
      className={cn(
        "flex h-full flex-col gap-5 rounded-2xl border border-steel-100 bg-white p-6 sm:p-8",
        !compact && "shadow-[0_30px_80px_-40px_rgba(15,26,42,0.2)]"
      )}
    >
      {/* Header — gives the form visual weight that matches the details card */}
      <header className="flex items-start gap-4 border-b border-steel-100 pb-5">
        <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-steel-900 text-white">
          <Mail className="h-5 w-5" />
        </span>
        <div>
          <h3 className="font-display text-lg font-semibold text-steel-900">
            {f.submit}
          </h3>
          <p className="mt-0.5 text-sm text-steel-600">{t.contact.description}</p>
        </div>
      </header>

      <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
        <Field label={f.name} htmlFor="name">
          <Input id="name" name="name" required placeholder={f.namePh} />
        </Field>
        <Field label={f.company} htmlFor="company">
          <Input id="company" name="company" placeholder={f.companyPh} />
        </Field>
      </div>
      <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
        <Field label={f.email} htmlFor="email">
          <Input id="email" name="email" type="email" required placeholder={f.emailPh} />
        </Field>
        <Field label={f.phone} htmlFor="phone">
          <Input id="phone" name="phone" type="tel" placeholder={f.phonePh} />
        </Field>
      </div>
      <Field label={f.message} htmlFor="message" className="flex-1">
        <Textarea
          id="message"
          name="message"
          required
          placeholder={f.messagePh}
          className="min-h-[160px] flex-1"
        />
      </Field>

      <div className="mt-auto flex flex-col gap-4 border-t border-steel-100 pt-5">
        <p className="text-xs text-steel-500">{f.privacy}</p>
        <Button
          type="submit"
          size="lg"
          variant="primary"
          disabled={status === "sending"}
          className="w-full sm:w-auto"
        >
          {status === "sending" ? f.sending : f.submit}
          {status === "idle" && <Send />}
        </Button>
      </div>
    </form>
  );
}

function Field({
  label,
  htmlFor,
  children,
  className,
}: {
  label: string;
  htmlFor: string;
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <div className={cn("flex flex-col gap-2", className)}>
      <Label htmlFor={htmlFor}>{label}</Label>
      {children}
    </div>
  );
}