import { createFileRoute, Link } from "@tanstack/react-router";
import { CalendarPlus, Images, LayoutGrid, MapPin, Phone, UserRound } from "lucide-react";
import { useEffect, useState } from "react";
import { FaqCards } from "@/components/site/faq-list";
import { Photo } from "@/components/site/look";
import { Frame, Kicker } from "@/components/site/shell";
import { getHome, getPreferredLocale } from "@/lib/clinic/api";
import { formatMoney } from "@/lib/clinic/locale";
import { useI18n } from "@/lib/i18n/context";

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

function Home() {
  const initial = Route.useLoaderData();
  const { locale, t } = useI18n();
  const [data, setData] = useState(initial);
  useEffect(() => {
    if (data.locale === locale) return;
    let live = true;
    getHome({ data: locale }).then((next) => {
      if (live) setData(next);
    });
    return () => {
      live = false;
    };
  }, [locale, data.locale]);

  return (
    <Frame shell={data}>
      <div className="mx-auto grid max-w-5xl gap-3 px-4 pt-24 pb-8 md:pt-28">
        <section className="relative h-48 overflow-hidden rounded-[1.75rem] md:h-64">
          <Photo src="/clinic/exterior.jpg" alt="" className="absolute inset-0 h-full w-full object-cover" />
          <div className="absolute inset-0 bg-gradient-to-t from-forest-deep via-forest-deep/40 to-transparent" />
          <div className="relative flex h-full flex-col justify-end px-5 pb-5">
            <Kicker light>{t("home.eyebrow")}</Kicker>
            <h1 className="mt-1 max-w-3xl font-display text-3xl text-ivory md:text-5xl">{data.heroTitle || t("home.title")}</h1>
            <p className="mt-1 max-w-xl text-sm text-ivory/85">{data.heroLead || t("home.lead")}</p>
          </div>
        </section>

        <section className="grid grid-cols-3 gap-2 rounded-[1.75rem] bg-paper p-2 sm:grid-cols-6">
          {[
            { to: "/book" as const, label: t("nav.book"), icon: CalendarPlus, hot: true },
            { to: "/concierge" as const, label: t("nav.concierge"), icon: Phone, hot: false },
            { to: "/doctor" as const, label: t("nav.doctor"), icon: UserRound, hot: false },
            { to: "/services" as const, label: t("nav.services"), icon: LayoutGrid, hot: false },
            { to: "/gallery" as const, label: t("nav.gallery"), icon: Images, hot: false },
            { to: "/contact" as const, label: t("nav.contact"), icon: MapPin, hot: false },
          ].map((action) => (
            <Link key={action.to} to={action.to} className="flex min-h-[5.5rem] flex-col items-center justify-center gap-2 rounded-2xl bg-ivory px-1 text-center active:scale-[0.98]">
              <span className={`grid size-11 place-items-center rounded-2xl ${action.hot ? "bg-forest text-ivory" : "bg-sage text-forest"}`}>
                <action.icon className="size-5" />
              </span>
              <span className="text-xs leading-tight text-forest">{action.label}</span>
            </Link>
          ))}
        </section>

        <section className="grid gap-3 md:grid-cols-2">
          <article className="rounded-[1.75rem] bg-paper p-3">
            <Link to="/doctor" className="flex items-center gap-3">
              <Photo src={data.doctor?.portrait || "/clinic/portrait.jpg"} alt="" className="size-16 rounded-2xl object-cover object-top" />
              <span>
                <span className="block text-[11px] tracking-[0.18em] text-gold-deep uppercase">{t("home.highlightsTitle")}</span>
                <span className="block font-display text-2xl text-forest">{data.doctor?.name}</span>
              </span>
            </Link>
            <div className="mt-3 grid gap-2">
              {(data.highlights ?? []).map((item, index) => (
                <div key={item.title} className="rounded-2xl bg-ivory px-3 py-2">
                  <p className="text-sm text-forest">{String(index + 1).padStart(2, "0")} · {item.title}</p>
                  <p className="text-xs text-muted">{item.body}</p>
                </div>
              ))}
            </div>
          </article>
          <article className="rounded-[1.75rem] bg-paper p-3">
            <div className="mb-2 flex items-center justify-between px-1">
              <h2 className="font-display text-2xl text-forest">{t("home.featured")}</h2>
              <Link to="/services" className="text-xs text-forest">{t("home.servicesCta")}</Link>
            </div>
            <div className="grid grid-cols-2 gap-2">
              {data.services.slice(0, 4).map((service) => (
                <Link key={service.id} to="/services/$slug" params={{ slug: service.slug }} className="rounded-2xl bg-ivory p-1.5">
                  <Photo src={service.image} alt="" className="aspect-square w-full rounded-xl object-cover" />
                  <span className="block px-1 py-2 text-sm text-forest">{service.name}</span>
                  <span className="block px-1 pb-1 text-[11px] text-muted">{formatMoney(service.priceCents, locale)}</span>
                </Link>
              ))}
            </div>
          </article>
        </section>

        <section className="grid gap-3 md:grid-cols-[1.2fr_0.8fr]">
          <Link to="/concierge" className="flex items-center gap-4 rounded-[1.75rem] bg-forest p-4 text-ivory">
            <Photo src="/clinic/aurelia.jpg" alt={t("concierge.portraitAlt")} className="size-16 rounded-full object-cover object-top ring-2 ring-gold/50" />
            <span>
              <span className="block text-[11px] tracking-[0.18em] text-gold uppercase">{t("nav.concierge")}</span>
              <span className="block font-display text-2xl">{t("home.aureliaTitle")}</span>
              <span className="mt-1 block text-sm text-ivory/75">{t("home.ask")}</span>
            </span>
          </Link>
          <div className="grid grid-cols-2 gap-3">
            <Link to="/gallery" className="rounded-[1.5rem] bg-paper p-1.5">
              <Photo src="/clinic/lounge.jpg" alt="" className="aspect-square w-full rounded-xl object-cover" />
              <span className="block px-1 py-2 text-sm text-forest">{t("home.galleryCta")}</span>
            </Link>
            <Link to="/tour" className="rounded-[1.5rem] bg-paper p-1.5">
              <Photo src="/clinic/corridor.jpg" alt="" className="aspect-square w-full rounded-xl object-cover" />
              <span className="block px-1 py-2 text-sm text-forest">{t("home.tourCta")}</span>
            </Link>
          </div>
        </section>

        <section className="rounded-[1.75rem] bg-paper p-3">
          <div className="mb-2 flex items-center justify-between px-1">
            <h2 className="font-display text-2xl text-forest">{t("faq.title")}</h2>
            <Link to="/faq" className="text-xs text-forest">{t("home.faqCta")}</Link>
          </div>
          <FaqCards items={data.faqs.slice(0, 3)} />
        </section>
      </div>
    </Frame>
  );
}