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

export const Route = createFileRoute("/_partner/settings/notifications")({
  head: () => ({
    meta: [
      { title: "Notification Preferences — Airfis Partner" },
      { name: "description", content: "Choose how you want to receive Airfis notifications." },
      { property: "og:title", content: "Notification Preferences — Airfis Partner" },
      { property: "og:description", content: "Email, push, SMS and in-app notification controls." },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary" },
      { name: "robots", content: "noindex" },
    ],
  }),
  component: NotificationSettings,
});

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

  function setChannel(key: keyof typeof prefs.channels, value: boolean) {
    updatePrefs({ channels: { ...prefs.channels, [key]: value } });
    toast.success("Notification preferences saved.");
  }

  function setType(typeKey: string, channel: "email" | "push" | "inApp", value: boolean) {
    const row = prefs.types[typeKey] ?? { email: false, push: false, inApp: false };
    updatePrefs({ types: { ...prefs.types, [typeKey]: { ...row, [channel]: value } } });
  }

  return (
    <>
      <SectionCard
        title="Notification Preferences"
        description="Choose how you want to receive notifications."
      >
        <div className="space-y-3">
          <ToggleRow
            label="Email notifications"
            hint="Summaries, invoices and alerts by email."
            checked={prefs.channels.email}
            onChange={(v) => setChannel("email", v)}
          />
          <ToggleRow
            label="Push notifications"
            hint="Real-time alerts in the partner app."
            checked={prefs.channels.push}
            onChange={(v) => setChannel("push", v)}
          />
          <ToggleRow
            label="SMS notifications"
            hint="Text messages for urgent job alerts."
            checked={prefs.channels.sms}
            onChange={(v) => setChannel("sms", v)}
          />
          <ToggleRow
            label="In-app notifications"
            hint="Notifications inside the Airfis dashboard."
            checked={prefs.channels.inApp}
            onChange={(v) => setChannel("inApp", v)}
          />
        </div>
      </SectionCard>

      <SectionCard
        title="Notification types"
        description="Fine-tune each notification per channel. Security alerts cannot be turned off."
      >
        <div className="overflow-x-auto">
          <table className="w-full min-w-[480px] text-sm">
            <thead>
              <tr className="border-b border-hairline text-left text-xs uppercase tracking-wide text-ink-3">
                <th className="py-2 pr-4 font-semibold">Notification</th>
                <th className="py-2 px-3 font-semibold">Email</th>
                <th className="py-2 px-3 font-semibold">Push</th>
                <th className="py-2 px-3 font-semibold">In-App</th>
              </tr>
            </thead>
            <tbody>
              {NOTIFICATION_TYPES.map((t) => {
                const row = prefs.types[t.key] ?? { email: false, push: false, inApp: false };
                return (
                  <tr key={t.key} className="border-b border-hairline last:border-0">
                    <td className="py-3 pr-4 font-medium text-ink">
                      {t.label}
                      {t.locked && <span className="ml-2 text-xs text-ink-3">Required</span>}
                    </td>
                    {(["email", "push", "inApp"] as const).map((c) => (
                      <td key={c} className="px-3 py-3">
                        <input
                          type="checkbox"
                          aria-label={`${t.label} ${c}`}
                          className="h-4 w-4 accent-[#FF4308]"
                          checked={row[c]}
                          disabled={t.locked}
                          onChange={(e) => setType(t.key, c, e.target.checked)}
                        />
                      </td>
                    ))}
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </SectionCard>
    </>
  );
}