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

export const Route = createFileRoute("/_partner/settings/language")({
  head: () => ({
    meta: [
      { title: "Language & Region — Airfis Partner" },
      {
        name: "description",
        content: "Set language, time zone, date and time formats for your Airfis account.",
      },
      { property: "og:title", content: "Language & Region — Airfis Partner" },
      {
        property: "og:description",
        content: "Language, time zone and date/time formatting preferences.",
      },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary" },
      { name: "robots", content: "noindex" },
    ],
  }),
  component: LanguagePage,
});

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

  function set<K extends keyof typeof prefs>(key: K, value: (typeof prefs)[K]) {
    updatePrefs({ [key]: value } as never);
    toast.success("Preferences saved.");
  }

  return (
    <SectionCard
      title="Language & Region"
      description="Formats used across the dashboard and reports."
    >
      <div className="grid gap-4 sm:grid-cols-2">
        <Field label="Language">
          <select
            className={inputClass}
            value={prefs.language}
            onChange={(e) => set("language", e.target.value)}
          >
            <option>English</option>
          </select>
        </Field>
        <Field label="Time zone">
          <select
            className={inputClass}
            value={prefs.timeZone}
            onChange={(e) => set("timeZone", e.target.value)}
          >
            <option>Asia/Kolkata (GMT +05:30)</option>
            <option>Asia/Dubai (GMT +04:00)</option>
            <option>UTC (GMT +00:00)</option>
          </select>
        </Field>
        <Field label="Date format">
          <select
            className={inputClass}
            value={prefs.dateFormat}
            onChange={(e) => set("dateFormat", e.target.value as typeof prefs.dateFormat)}
          >
            <option value="DD/MM/YYYY">DD/MM/YYYY</option>
            <option value="MM/DD/YYYY">MM/DD/YYYY</option>
            <option value="YYYY-MM-DD">YYYY-MM-DD</option>
          </select>
        </Field>
        <Field label="Time format">
          <select
            className={inputClass}
            value={prefs.timeFormat}
            onChange={(e) => set("timeFormat", e.target.value as typeof prefs.timeFormat)}
          >
            <option value="12h">12-hour</option>
            <option value="24h">24-hour</option>
          </select>
        </Field>
      </div>
    </SectionCard>
  );
}