import { createFileRoute, Link } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { Button, Field, Input } from "@/components/ui";
import { SignInGate } from "@/lib/auth/gates";
import { applyDemoRole, getPlatform, savePlatform } from "@/lib/clinic/api";
import { formatMoney } from "@/lib/clinic/locale";
import { useI18n } from "@/lib/i18n/context";

export const Route = createFileRoute("/platform")({
  component: PlatformPage,
});

function PlatformPage() {
  const { t } = useI18n();
  return (
    <SignInGate fallback={<main className="grid min-h-screen place-items-center"><Link to="/login" className="rounded-full bg-forest px-5 py-3 text-ivory">{t("nav.signIn")}</Link></main>}>
      <PlatformInner />
    </SignInGate>
  );
}

function PlatformInner() {
  const { locale, t } = useI18n();
  const [data, setData] = useState<Awaited<ReturnType<typeof getPlatform>> | null>(null);
  const [name, setName] = useState("");
  const [city, setCity] = useState("");
  const [code, setCode] = useState("AURELIA-PLATFORM");
  async function load() {
    setData(await getPlatform());
  }
  useEffect(() => { void load(); }, []);
  if (!data) return <main className="p-8">{t("common.loading")}</main>;
  if (!data.ok) {
    return (
      <main className="mx-auto max-w-lg px-4 py-16">
        <h1 className="font-display text-4xl">{t("platform.noAccess")}</h1>
        <form className="mt-4 grid gap-3" onSubmit={async (event) => {
          event.preventDefault();
          const result = await applyDemoRole({ data: { code } });
          if (!result.ok) { toast.error(t("admin.badCode")); return; }
          window.location.reload();
        }}>
          <Field label={t("admin.code")}><Input value={code} onChange={(event) => setCode(event.target.value)} /></Field>
          <Button type="submit">{t("admin.applyCode")}</Button>
        </form>
      </main>
    );
  }
  const clinics = data.clinics as { id: string; name: string; city: string; plan: string; visits: number; patients: number; amount_cents: number }[];
  const flags = data.flags as { tenant_id: string; key: string; enabled: boolean }[];
  const invoices = data.invoices as { id: string; label: string; amount_cents: number; status: string }[];
  return (
    <main className="mx-auto max-w-5xl px-4 py-10">
      <p className="text-xs tracking-[0.18em] text-gold-deep uppercase">{t("platform.kicker")}</p>
      <h1 className="mt-2 font-display text-5xl text-forest">{t("platform.title")}</h1>
      <p className="mt-3 max-w-2xl text-muted">{t("platform.lead")}</p>
      <p className="mt-2 text-sm">{t("platform.isolated")}</p>
      <section className="mt-8 grid gap-3">
        {clinics.map((clinic) => (
          <article key={clinic.id} className="rounded-xl border border-line p-4">
            <h2 className="font-display text-3xl">{clinic.name}</h2>
            <p className="text-sm text-muted">{clinic.city} · {clinic.plan} · {t("admin.total")} {clinic.visits} · {t("admin.patients")} {clinic.patients}</p>
            <div className="mt-3 flex flex-wrap gap-2">
              {flags.filter((flag) => flag.tenant_id === clinic.id).map((flag) => (
                <button key={flag.key} type="button" className={`h-10 rounded-full px-3 text-sm ${flag.enabled ? "bg-forest text-ivory" : "border border-line"}`} onClick={async () => {
                  await savePlatform({ data: { action: "flag", tenantId: clinic.id, key: flag.key, enabled: !flag.enabled } });
                  toast.success(t("platform.flagsSaved"));
                  void load();
                }}>{flag.key}</button>
              ))}
            </div>
          </article>
        ))}
      </section>
      <form className="mt-8 grid max-w-md gap-3 rounded-xl bg-paper p-4" onSubmit={async (event) => {
        event.preventDefault();
        const result = await savePlatform({ data: { action: "create", name, city } });
        if (!result.ok) { toast.error(t(`errors.${result.error}`)); return; }
        toast.success(t("platform.created"));
        setName("");
        setCity("");
        void load();
      }}>
        <h2 className="font-display text-3xl">{t("platform.create")}</h2>
        <Field label={t("platform.name")}><Input value={name} onChange={(event) => setName(event.target.value)} required /></Field>
        <Field label={t("platform.city")}><Input value={city} onChange={(event) => setCity(event.target.value)} required /></Field>
        <Button type="submit">{t("common.create")}</Button>
      </form>
      <section className="mt-8">
        <h2 className="font-display text-3xl">{t("platform.audit")}</h2>
        <ul className="mt-3 text-sm">
          {data.audit.map((row, index) => (
            <li key={`${row.created_at}-${index}`}>{row.action} · {row.entity} · {row.detail}</li>
          ))}
        </ul>
      </section>
      <section className="mt-8">
        <h2 className="font-display text-3xl">{t("platform.billing")}</h2>
        <ul className="mt-3 text-sm">
          {invoices.map((invoice) => <li key={invoice.id}>{invoice.label} · {formatMoney(Number(invoice.amount_cents), locale)} · {invoice.status}</li>)}
        </ul>
        <p className="mt-4 text-sm text-muted">{t("platform.db")}: PostgreSQL · {t("platform.mail")}: {t("platform.mailOff")}</p>
      </section>
    </main>
  );
}