import { createFileRoute } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { Photo } from "@/components/site/look";
import { Frame, PageIntro } from "@/components/site/shell";
import { Button, Field, Input, TextArea } from "@/components/ui";
import { getPreferredLocale, getShell, sendContact } from "@/lib/clinic/api";
import { useI18n } from "@/lib/i18n/context";

export const Route = createFileRoute("/contact")({
  loader: async () => getShell({ data: await getPreferredLocale() }),
  component: ContactPage,
});

function ContactPage() {
  const initial = Route.useLoaderData();
  const { locale, t } = useI18n();
  const [shell, setShell] = useState(initial);
  const [form, setForm] = useState({ name: "", email: "", phone: "", message: "", preference: "email" });
  const [error, setError] = useState("");
  const [sent, setSent] = useState(false);
  useEffect(() => {
    if (shell.locale === locale) return;
    let live = true;
    getShell({ data: locale }).then((next) => { if (live) setShell(next); });
    return () => { live = false; };
  }, [locale, shell.locale]);
  return (
    <Frame shell={shell}>
      <PageIntro kicker={t("contact.kicker")} title={t("contact.title")} lead={t("contact.lead")} image="/clinic/exterior.jpg" />
      <div className="mx-auto grid max-w-7xl gap-10 px-5 pb-16 md:grid-cols-[1.1fr_0.9fr] md:px-6">
        <form className="grid gap-4" onSubmit={async (event) => {
          event.preventDefault();
          const result = await sendContact({ data: { ...form, locale } });
          if (!result.ok) { setError(t(`errors.${result.error}`)); return; }
          setSent(true);
          toast.success(t("contact.success"));
        }}>
          <Field label={t("common.name")} error={error}><Input required value={form.name} onChange={(event) => setForm({ ...form, name: event.target.value })} /></Field>
          <Field label={t("common.email")}><Input type="email" required value={form.email} onChange={(event) => setForm({ ...form, email: event.target.value })} /></Field>
          <Field label={t("common.phone")}><Input value={form.phone} onChange={(event) => setForm({ ...form, phone: event.target.value })} /></Field>
          <Field label={t("contact.preference")}>
            <select className="h-11 rounded-md border border-line bg-ivory px-3" value={form.preference} onChange={(event) => setForm({ ...form, preference: event.target.value })}>
              <option value="email">{t("contact.emailPref")}</option>
              <option value="phone">{t("contact.phonePref")}</option>
            </select>
          </Field>
          <Field label={t("common.message")}><TextArea required value={form.message} onChange={(event) => setForm({ ...form, message: event.target.value })} /></Field>
          <Button type="submit">{t("contact.submit")}</Button>
          {sent ? <p>{t("contact.success")}</p> : null}
          <p className="text-sm text-muted">{t("common.previewOnly")}</p>
        </form>
        <aside className="rounded-xl bg-paper p-6">
          <h2 className="font-display text-3xl text-forest">{t("contact.address")}</h2>
          <p className="mt-2">{shell.address}</p>
          <p className="text-sm text-muted">{shell.city}</p>
          <h2 className="mt-6 font-display text-3xl text-forest">{t("contact.hours")}</h2>
          <p className="mt-2">{shell.hours}</p>
          <p className="mt-4 text-sm">{shell.phone}</p>
          <p className="text-sm">{shell.email}</p>
          <div className="mt-6 overflow-hidden rounded-[1.35rem]">
            <Photo src="/clinic/exterior.jpg" alt="" className="aspect-square w-full object-cover" />
            <p className="p-3 text-sm text-muted">{t("contact.mapNote")}</p>
          </div>
          <p className="mt-4 text-sm">{shell.visitNote}</p>
        </aside>
      </div>
    </Frame>
  );
}