import { createFileRoute, Link } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { FaqCards } from "@/components/site/faq-list";
import { Photo } from "@/components/site/look";
import { Frame } from "@/components/site/shell";
import { Button } from "@/components/ui";
import { getPreferredLocale, getService } from "@/lib/clinic/api";
import { formatMoney } from "@/lib/clinic/locale";
import { useI18n } from "@/lib/i18n/context";

export const Route = createFileRoute("/services/$slug")({
  loader: async ({ params }) => getService({ data: { locale: await getPreferredLocale(), slug: params.slug } }),
  component: ServicePage,
});

function ServicePage() {
  const initial = Route.useLoaderData();
  const { slug } = Route.useParams();
  const { locale, t } = useI18n();
  const [data, setData] = useState(initial);
  useEffect(() => {
    if (data.locale === locale && data.service?.slug === slug) return;
    let live = true;
    getService({ data: { locale, slug } }).then((next) => { if (live) setData(next); });
    return () => { live = false; };
  }, [locale, slug, data.locale, data.service?.slug]);
  const service = data.service;
  if (!service) {
    return <Frame shell={data.shell}><p className="p-10">{t("common.empty")}</p></Frame>;
  }
  return (
    <Frame shell={data.shell}>
      <article className="mx-auto grid max-w-7xl items-start gap-6 px-4 py-6 md:grid-cols-[minmax(0,22rem)_1fr] md:px-6 md:py-10">
        <Photo src={service.image} alt="" className="aspect-square w-full rounded-[1.75rem] object-cover md:sticky md:top-24" />
        <div>
          <Link to="/services" className="text-[11px] tracking-[0.28em] text-gold-deep uppercase">{t("services.back")}</Link>
          <h1 className="mt-3 font-display text-4xl text-forest md:text-6xl">{service.name}</h1>
          <p className="mt-4 max-w-xl text-lg">{service.description}</p>
          <div className="mt-6 rounded-[1.5rem] bg-paper p-5">
            <p className="text-[11px] tracking-[0.28em] text-gold-deep uppercase">{t("services.duration")}</p>
            <p className="mt-1 font-display text-3xl text-forest">{service.durationMin} {t("common.minutes")}</p>
            <p className="mt-4 text-[11px] tracking-[0.28em] text-gold-deep uppercase">{t("services.price")}</p>
            <p className="mt-1 font-display text-3xl text-forest">{formatMoney(service.priceCents, locale)}</p>
            <p className="mt-2 text-sm text-muted">{t("common.priceNote")}</p>
            <Link to="/book" search={{ service: service.slug }} className="mt-5 block">
              <Button className="w-full" disabled={!service.bookable}>{service.bookable ? t("services.book") : t("services.unavailable")}</Button>
            </Link>
          </div>
          <h2 className="mt-8 font-display text-3xl text-forest">{t("services.preparation")}</h2>
          <p className="mt-3 max-w-xl">{service.preparation}</p>
          <h2 className="mt-8 font-display text-3xl text-forest">{t("services.faq")}</h2>
          <div className="mt-4">
            <FaqCards items={service.faqs} />
          </div>
        </div>
      </article>
    </Frame>
  );
}