"use client";

import { useState } from "react";
import { useTranslations, useLocale } from "next-intl";
import { Send, Check, AlertCircle } from "lucide-react";
import { Button } from "@/components/ui/button";

type Status = "idle" | "loading" | "success" | "error";

export function ContactForm() {
  const t = useTranslations("contact");
  const locale = useLocale();
  const isRtl = locale === "fa";
  const [status, setStatus] = useState<Status>("idle");
  const [form, setForm] = useState({ name: "", email: "", subject: "", message: "" });

  function set(field: keyof typeof form) {
    return (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
      setForm((prev) => ({ ...prev, [field]: e.target.value }));
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setStatus("loading");
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      setStatus(res.ok ? "success" : "error");
      if (res.ok) setForm({ name: "", email: "", subject: "", message: "" });
    } catch {
      setStatus("error");
    }
  }

  const inputClass =
    "w-full rounded-lg border border-border bg-surface px-4 py-3 text-sm text-text-primary placeholder:text-text-secondary focus:border-accent/50 focus:outline-none transition-colors";

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div className="grid gap-4 sm:grid-cols-2">
        <div>
          <label className="mb-1.5 block font-mono text-xs text-text-secondary">{t("name")}</label>
          <input required value={form.name} onChange={set("name")} className={inputClass} placeholder={isRtl ? "علی تقوی" : "Your name"} />
        </div>
        <div>
          <label className="mb-1.5 block font-mono text-xs text-text-secondary">{t("email")}</label>
          <input required type="email" value={form.email} onChange={set("email")} className={inputClass} placeholder="hello@example.com" />
        </div>
      </div>

      <div>
        <label className="mb-1.5 block font-mono text-xs text-text-secondary">{t("subject")}</label>
        <input value={form.subject} onChange={set("subject")} className={inputClass} placeholder={isRtl ? "موضوع پیام (اختیاری)" : "Subject (optional)"} />
      </div>

      <div>
        <label className="mb-1.5 block font-mono text-xs text-text-secondary">{t("message")}</label>
        <textarea
          required
          rows={6}
          value={form.message}
          onChange={set("message")}
          className={`${inputClass} resize-none`}
          placeholder={isRtl ? "پیامت را اینجا بنویس..." : "Your message..."}
        />
      </div>

      {status === "success" && (
        <div className="flex items-center gap-2 rounded-lg border border-success/30 bg-success/10 px-4 py-3 text-sm text-success">
          <Check size={15} />
          {t("success")}
        </div>
      )}
      {status === "error" && (
        <div className="flex items-center gap-2 rounded-lg border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger">
          <AlertCircle size={15} />
          {t("error")}
        </div>
      )}

      <Button type="submit" size="lg" disabled={status === "loading"} className="w-full sm:w-auto">
        <Send size={15} />
        {status === "loading" ? t("sending") : t("send")}
      </Button>
    </form>
  );
}
