"use client";

import { useState } from "react";
import { Check, Send } from "lucide-react";
import type { Dictionary } from "@/i18n";

/* Static export has no backend, so the form composes a pre-filled email to the
   church inbox via mailto — the visitor's own mail client does the sending. */
export function ContactForm({
  dict,
  email,
}: {
  dict: Dictionary;
  email?: string;
}) {
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({ name: "", email: "", subject: "", message: "" });

  const update = (k: keyof typeof form) => (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
    setForm((f) => ({ ...f, [k]: e.target.value }));

  const onSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const to = email || "";
    const subject = encodeURIComponent(form.subject || `Message from ${form.name}`);
    const body = encodeURIComponent(
      `${form.message}\n\n— ${form.name}\n${form.email}`,
    );
    if (to) window.location.href = `mailto:${to}?subject=${subject}&body=${body}`;
    setSent(true);
  };

  const field =
    "h-12 w-full rounded-sm border border-line bg-bg px-4 text-ink outline-none transition placeholder:text-muted focus:border-brand-bright focus:bg-surface";

  if (sent) {
    return (
      <div className="flex flex-col items-start gap-3 rounded-2xl border border-line bg-surface p-8 shadow-card">
        <span className="grid h-12 w-12 place-items-center rounded-full bg-brand/10 text-brand">
          <Check className="size-6" />
        </span>
        <h3 className="text-2xl">{dict.contact.sent}</h3>
        <p className="text-ink-soft">{dict.contact.sentNote}</p>
        {email && (
          <p className="text-sm text-muted">
            {dict.contact.mailFallback}{" "}
            <a className="font-semibold text-brand-bright hover:underline" href={`mailto:${email}`}>
              {email}
            </a>
          </p>
        )}
      </div>
    );
  }

  return (
    <form onSubmit={onSubmit} className="rounded-2xl border border-line bg-surface p-6 shadow-card sm:p-8">
      <div className="grid gap-5 sm:grid-cols-2">
        <label className="block">
          <span className="mb-1.5 block text-sm font-semibold text-ink">{dict.contact.name}</span>
          <input required value={form.name} onChange={update("name")} placeholder={dict.contact.namePh} className={field} />
        </label>
        <label className="block">
          <span className="mb-1.5 block text-sm font-semibold text-ink">Email</span>
          <input required type="email" value={form.email} onChange={update("email")} placeholder={dict.contact.emailPh} className={field} />
        </label>
      </div>
      <label className="mt-5 block">
        <span className="mb-1.5 block text-sm font-semibold text-ink">{dict.contact.subject}</span>
        <input value={form.subject} onChange={update("subject")} placeholder={dict.contact.subjectPh} className={field} />
      </label>
      <label className="mt-5 block">
        <span className="mb-1.5 block text-sm font-semibold text-ink">{dict.contact.message}</span>
        <textarea
          required
          rows={5}
          value={form.message}
          onChange={update("message")}
          placeholder={dict.contact.messagePh}
          className="w-full rounded-sm border border-line bg-bg px-4 py-3 text-ink outline-none transition placeholder:text-muted focus:border-brand-bright focus:bg-surface"
        />
      </label>
      <button
        type="submit"
        className="mt-6 inline-flex h-12 items-center justify-center gap-2 rounded-sm bg-brand px-7 text-sm font-semibold text-bg transition hover:bg-brand-deep"
      >
        {dict.contact.send}
        <Send className="size-4" />
      </button>
    </form>
  );
}