import { createFileRoute } from "@tanstack/react-router";
import { toast } from "sonner";
import { SectionCard } from "@/components/account/parts";
import { useAccount } from "@/lib/account-store";

export const Route = createFileRoute("/_partner/settings/appearance")({
  head: () => ({
    meta: [
      { title: "Appearance — Airfis Partner" },
      {
        name: "description",
        content: "Choose the theme used across your Airfis partner dashboard.",
      },
      { property: "og:title", content: "Appearance — Airfis Partner" },
      {
        property: "og:description",
        content: "Light, dark or system theme for the Airfis dashboard.",
      },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary" },
      { name: "robots", content: "noindex" },
    ],
  }),
  component: AppearancePage,
});

const THEMES = [
  { key: "light", label: "Light", preview: "bg-white", bar: "bg-[#ececef]" },
  { key: "dark", label: "Dark", preview: "bg-[#0a0a12]", bar: "bg-white/20" },
  {
    key: "system",
    label: "System",
    preview: "bg-gradient-to-r from-white to-[#0a0a12]",
    bar: "bg-[#9a9aa2]",
  },
] as const;

function AppearancePage() {
  const { prefs, updatePrefs } = useAccount();

  return (
    <SectionCard
      title="Appearance"
      description="Personalise how the dashboard looks on this account."
    >
      <div className="grid gap-4 sm:grid-cols-3">
        {THEMES.map((t) => {
          const active = prefs.theme === t.key;
          return (
            <button
              key={t.key}
              type="button"
              onClick={() => {
                updatePrefs({ theme: t.key });
                toast.success(`${t.label} theme selected.`);
              }}
              className={`rounded-xl border p-3 text-left transition-colors ${active ? "border-[#FF4308]" : "border-hairline hover:border-ink-3"}`}
            >
              <div className={`h-20 w-full rounded-lg border border-hairline ${t.preview} p-2`}>
                <div className={`h-2 w-2/3 rounded-full ${t.bar}`} />
                <div className={`mt-2 h-2 w-1/2 rounded-full ${t.bar}`} />
              </div>
              <div className="mt-3 flex items-center justify-between">
                <span className="text-sm font-semibold text-ink">{t.label}</span>
                <input
                  type="radio"
                  readOnly
                  checked={active}
                  className="h-4 w-4 accent-[#FF4308]"
                />
              </div>
            </button>
          );
        })}
      </div>
      <p className="mt-4 text-xs text-ink-2">
        Light is the default for the Airfis partner dashboard.
      </p>
    </SectionCard>
  );
}