import { useState, type FormEvent } from "react";
import type { ContactFormBlock } from "@/types/sections";
import { useLocale } from "@/i18n/LocaleContext";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { UI } from "@/i18n/translations";
import { useToast } from "@/hooks/use-toast";

export function ContactForm({ block }: { block: ContactFormBlock }) {
  const { t } = useLocale();
  const { toast } = useToast();
  const [submitting, setSubmitting] = useState(false);

  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setSubmitting(true);
    // Phase 2: send to WP/SMTP. For now: friendly toast.
    setTimeout(() => {
      toast({ description: t(UI.form.soon) });
      setSubmitting(false);
    }, 300);
  };

  return (
    <section className="py-16 md:py-20">
      <div className="container max-w-2xl">
        <h2 className="font-display italic text-3xl sm:text-4xl md:text-5xl text-primary text-balance">
          {t(block.title)}
        </h2>
        {block.intro && (
          <div
            className="mt-4 text-foreground/80 leading-relaxed"
            dangerouslySetInnerHTML={{ __html: t(block.intro) }}
          />
        )}
        <form onSubmit={onSubmit} className="mt-8 grid gap-5">
          <div className="grid gap-2">
            <Label htmlFor="name">{t(UI.form.name)}</Label>
            <Input id="name" name="name" required />
          </div>
          <div className="grid gap-2">
            <Label htmlFor="email">{t(UI.form.email)}</Label>
            <Input id="email" name="email" type="email" required />
          </div>
          <div className="grid gap-2">
            <Label htmlFor="subject">{t(UI.form.subject)}</Label>
            <Input id="subject" name="subject" required />
          </div>
          <div className="grid gap-2">
            <Label htmlFor="message">{t(UI.form.message)}</Label>
            <Textarea id="message" name="message" rows={6} required />
          </div>
          <Button type="submit" disabled={submitting} className="rounded-sm w-fit">
            {t(UI.cta.send)}
          </Button>
        </form>
      </div>
    </section>
  );
}