"use client";

import { useEffect, useMemo, useState } from "react";
import { Bell, BellRing, ChevronDown, Clock3, Languages, MapPinned, Palette, Settings, Smartphone, Thermometer, Wind } from "lucide-react";
import type { LucideIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { LanguageToggle } from "@/components/ui/language-toggle";
import { ThemeToggle } from "@/components/ui/theme-toggle";
import { useMeteoStationPositions } from "@/hooks/use-meteo-stations";
import { useWeatherStations } from "@/hooks/use-weather-stations";
import { DEFAULT_STATION_ID } from "@/lib/constants";
import { useI18n } from "@/lib/i18n";
import { locateSynopStations } from "@/lib/location-utils";
import { decodeBase64UrlKey, deletePushSubscription, fetchVapidPublicKey, savePushSubscription, sendTestPushNotification } from "@/lib/notification-api";
import { formatProvinceName, getProvinceForSelection, PROVINCES } from "@/lib/provinces";
import { useWeatherStore } from "@/lib/store";
import { TEMPERATURE_UNITS, WIND_SPEED_UNITS } from "@/lib/weather-utils";
import type { Province } from "@/types/province";
import type { TemperatureUnit, WindSpeedUnit } from "@/types/units";

type NotificationSupportStatus = "checking" | "unconfigured" | "unsupported" | "needs-install" | "default" | "denied" | "granted";

function isStandaloneApp() {
  if (typeof window === "undefined") return false;
  const navigatorWithStandalone = window.navigator as Navigator & { standalone?: boolean };
  return window.matchMedia("(display-mode: standalone)").matches || navigatorWithStandalone.standalone === true;
}

function isAppleMobilePlatform() {
  if (typeof window === "undefined") return false;
  const userAgent = window.navigator.userAgent;
  const platform = window.navigator.platform;
  const isIPadOSDesktopMode = platform === "MacIntel" && window.navigator.maxTouchPoints > 1;
  return /iPad|iPhone|iPod/.test(userAgent) || isIPadOSDesktopMode;
}

function getNotificationSupportStatus(): NotificationSupportStatus {
  if (typeof window === "undefined") return "checking";
  if (!("Notification" in window) || !("serviceWorker" in navigator) || !("PushManager" in window)) return "unsupported";
  if (isAppleMobilePlatform() && !isStandaloneApp()) return "needs-install";
  return Notification.permission;
}

function SettingsRow({ icon: Icon, title, description, children }: { icon: typeof Settings; title: string; description: string; children: React.ReactNode }) {
  return (
    <div className="flex flex-col gap-4 border-t border-border/65 py-4 first:border-t-0 first:pt-0 last:pb-0 sm:flex-row sm:items-center sm:justify-between">
      <div className="flex items-start gap-3">
        <div className="rounded-control border border-border/70 bg-surface-muted/70 p-2 text-accent">
          <Icon className="size-4" aria-hidden="true" />
        </div>
        <div>
          <h2 className="text-sm font-semibold">{title}</h2>
          <p className="mt-1 max-w-xl text-sm leading-6 text-muted">{description}</p>
        </div>
      </div>
      <div className="shrink-0">{children}</div>
    </div>
  );
}

function SwitchIndicator({ checked, disabled }: { checked: boolean; disabled?: boolean }) {
  return (
    <span
      className={`relative inline-flex h-7 w-12 shrink-0 items-center rounded-control border px-0.5 transition-colors ${
        checked
          ? "border-accent/55 bg-accent"
          : "border-border/70 bg-surface-muted"
      } ${disabled ? "opacity-55" : ""}`}
      aria-hidden="true"
    >
      <span className={`size-5 rounded-full bg-surface-raised shadow-soft transition-transform ${checked ? "translate-x-5" : "translate-x-0"}`} />
    </span>
  );
}

function NotificationSwitchLabel({ icon: Icon, title, description, checked, disabled, onChange }: { icon: LucideIcon; title: string; description: string; checked: boolean; disabled?: boolean; onChange: (checked: boolean) => void }) {
  return (
    <label
      className={`mt-3 flex cursor-pointer items-start justify-between gap-4 rounded-card border px-3 py-3 text-sm transition-colors ${
        checked
          ? "border-accent/45 bg-accent/10"
          : "border-border/60 bg-surface"
      } ${disabled ? "cursor-not-allowed opacity-65" : "hover:border-accent/45"}`}
    >
      <input
        type="checkbox"
        checked={checked}
        disabled={disabled}
        onChange={(event) => onChange(event.target.checked)}
        className="sr-only"
      />
      <span className="min-w-0">
        <span className="flex items-center gap-2 font-medium">
          <Icon className="size-3.5 text-accent" aria-hidden="true" />
          {title}
        </span>
        <span className="mt-0.5 block text-xs leading-5 text-muted">{description}</span>
      </span>
      <SwitchIndicator checked={checked} disabled={disabled} />
    </label>
  );
}

const windSpeedUnitKeys: Record<WindSpeedUnit, "settings.units.wind.ms" | "settings.units.wind.kmh" | "settings.units.wind.mph"> = {
  ms: "settings.units.wind.ms",
  kmh: "settings.units.wind.kmh",
  mph: "settings.units.wind.mph",
};

const temperatureUnitKeys: Record<TemperatureUnit, "settings.units.temperature.c" | "settings.units.temperature.f"> = {
  c: "settings.units.temperature.c",
  f: "settings.units.temperature.f",
};

export function SettingsPage() {
  const { language, t } = useI18n();
  const [notificationStatus, setNotificationStatus] = useState<NotificationSupportStatus>("checking");
  const [vapidPublicKey, setVapidPublicKey] = useState<string | null>(null);
  const [isSavingSubscription, setIsSavingSubscription] = useState(false);
  const [isSendingTestNotification, setIsSendingTestNotification] = useState(false);
  const [notificationMessage, setNotificationMessage] = useState<string | null>(null);
  const { data: stations } = useWeatherStations();
  const { data: positions = [] } = useMeteoStationPositions();
  const selectedStationId = useWeatherStore((state) => state.selectedStationId);
  const selectedLocation = useWeatherStore((state) => state.selectedLocation);
  const notificationsEnabled = useWeatherStore((state) => state.warningNotificationsEnabled);
  const morningBriefEnabled = useWeatherStore((state) => state.morningBriefNotificationsEnabled);
  const tomorrowBriefEnabled = useWeatherStore((state) => state.tomorrowBriefNotificationsEnabled);
  const provinceMode = useWeatherStore((state) => state.warningNotificationProvinceMode);
  const manualProvince = useWeatherStore((state) => state.warningNotificationProvince);
  const temperatureUnit = useWeatherStore((state) => state.temperatureUnit);
  const windSpeedUnit = useWeatherStore((state) => state.windSpeedUnit);
  const setNotificationsEnabled = useWeatherStore((state) => state.setWarningNotificationsEnabled);
  const setMorningBriefEnabled = useWeatherStore((state) => state.setMorningBriefNotificationsEnabled);
  const setTomorrowBriefEnabled = useWeatherStore((state) => state.setTomorrowBriefNotificationsEnabled);
  const setProvinceMode = useWeatherStore((state) => state.setWarningNotificationProvinceMode);
  const setManualProvince = useWeatherStore((state) => state.setWarningNotificationProvince);
  const setTemperatureUnit = useWeatherStore((state) => state.setTemperatureUnit);
  const setWindSpeedUnit = useWeatherStore((state) => state.setWindSpeedUnit);

  const selectedStation = stations?.find((station) => station.id === selectedStationId)
    ?? stations?.find((station) => station.id === DEFAULT_STATION_ID)
    ?? stations?.[0];
  const activeLocation = selectedLocation?.stationId === selectedStation?.id ? selectedLocation : null;
  const stationPosition = selectedStation
    ? locateSynopStations(stations ?? [], positions).find((station) => station.id === selectedStation.id)
    : null;
  const notificationLatitude = Number.isFinite(activeLocation?.latitude) ? activeLocation?.latitude : stationPosition?.latitude ?? null;
  const notificationLongitude = Number.isFinite(activeLocation?.longitude) ? activeLocation?.longitude : stationPosition?.longitude ?? null;
  const notificationLocationName = activeLocation?.name ?? selectedStation?.name ?? null;
  const notificationCountyTeryt = activeLocation?.countyTeryt ?? null;
  const selectedProvince = getProvinceForSelection(selectedLocation?.province, selectedStationId ?? DEFAULT_STATION_ID);
  const effectiveProvince = provinceMode === "manual" ? manualProvince : selectedProvince;
  const effectiveProvinceLabel = effectiveProvince ? formatProvinceName(effectiveProvince, language) : t("settings.notifications.noProvince");

  useEffect(() => {
    const abortController = new AbortController();
    const animationFrame = window.requestAnimationFrame(() => {
      setNotificationStatus(getNotificationSupportStatus());
      fetchVapidPublicKey(abortController.signal)
        .then((config) => {
          setVapidPublicKey(config.publicKey);
          if (!config.configured) setNotificationStatus("unconfigured");
        })
        .catch(() => setNotificationStatus("unconfigured"));
    });
    return () => {
      abortController.abort();
      window.cancelAnimationFrame(animationFrame);
    };
  }, []);

  useEffect(() => {
    if (!notificationsEnabled || !vapidPublicKey || !effectiveProvince || notificationStatus !== "granted") return;
    const province = effectiveProvince;
    let cancelled = false;

    async function syncSubscriptionProvince() {
      const registration = await navigator.serviceWorker?.getRegistration();
      const subscription = await registration?.pushManager.getSubscription();
      if (!subscription || cancelled) return;
      await savePushSubscription(subscription, province, language, {
        morningBriefEnabled,
        tomorrowBriefEnabled,
        latitude: notificationLatitude,
        longitude: notificationLongitude,
        locationName: notificationLocationName,
        countyTeryt: notificationCountyTeryt,
        temperatureUnit,
        windSpeedUnit,
      }).catch(() => undefined);
    }

    syncSubscriptionProvince();
    return () => {
      cancelled = true;
    };
  }, [effectiveProvince, language, morningBriefEnabled, notificationCountyTeryt, notificationLatitude, notificationLocationName, notificationLongitude, notificationStatus, notificationsEnabled, temperatureUnit, tomorrowBriefEnabled, vapidPublicKey, windSpeedUnit]);

  const notificationStatusLabel = useMemo(() => {
    switch (notificationStatus) {
      case "unconfigured":
        return t("settings.notifications.statusUnconfigured");
      case "unsupported":
        return t("settings.notifications.statusUnsupported");
      case "needs-install":
        return t("settings.notifications.statusNeedsInstall");
      case "denied":
        return t("settings.notifications.statusDenied");
      case "granted":
        return t("settings.notifications.statusGranted");
      case "default":
        return t("settings.notifications.statusReady");
      default:
        return t("settings.notifications.statusChecking");
    }
  }, [notificationStatus, t]);

  const canUsePush = Boolean(vapidPublicKey && effectiveProvince && notificationStatus !== "unsupported" && notificationStatus !== "needs-install" && notificationStatus !== "denied" && notificationStatus !== "unconfigured");

  async function getServiceWorkerRegistration() {
    if (!("serviceWorker" in navigator)) throw new Error("Service worker is not available.");
    return await navigator.serviceWorker.getRegistration() ?? await navigator.serviceWorker.register("/sw.js");
  }

  async function enableWarningNotifications() {
    if (!vapidPublicKey || !effectiveProvince) {
      setNotificationMessage(t("settings.notifications.saveError"));
      return;
    }
    if (!("Notification" in window)) {
      setNotificationStatus("unsupported");
      return;
    }
    setIsSavingSubscription(true);
    setNotificationMessage(null);
    try {
      const permission = Notification.permission === "granted" ? "granted" : await Notification.requestPermission();
      setNotificationStatus(permission);
      if (permission !== "granted") {
        setNotificationsEnabled(false);
        return;
      }
      const registration = await getServiceWorkerRegistration();
      const existingSubscription = await registration.pushManager.getSubscription();
      const subscription = existingSubscription ?? await registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: decodeBase64UrlKey(vapidPublicKey),
      });
      await savePushSubscription(subscription, effectiveProvince, language, {
        morningBriefEnabled,
        tomorrowBriefEnabled,
        latitude: notificationLatitude,
        longitude: notificationLongitude,
        locationName: notificationLocationName,
        countyTeryt: notificationCountyTeryt,
        temperatureUnit,
        windSpeedUnit,
      });
      setNotificationsEnabled(true);
      setNotificationMessage(t("settings.notifications.saveSuccess"));
    } catch {
      setNotificationsEnabled(false);
      setNotificationMessage(t("settings.notifications.saveError"));
    } finally {
      setIsSavingSubscription(false);
    }
  }

  async function disableWarningNotifications() {
    setIsSavingSubscription(true);
    setNotificationMessage(null);
    try {
      const registration = await navigator.serviceWorker?.getRegistration();
      const subscription = await registration?.pushManager.getSubscription();
      if (subscription) {
        await deletePushSubscription(subscription.endpoint).catch(() => undefined);
        await subscription.unsubscribe();
      }
      setNotificationsEnabled(false);
      setMorningBriefEnabled(false);
      setTomorrowBriefEnabled(false);
      setNotificationMessage(t("settings.notifications.disableSuccess"));
    } catch {
      setNotificationMessage(t("settings.notifications.saveError"));
    } finally {
      setIsSavingSubscription(false);
    }
  }

  async function sendTestNotification() {
    setIsSendingTestNotification(true);
    setNotificationMessage(null);
    try {
      const registration = await navigator.serviceWorker?.getRegistration();
      const subscription = await registration?.pushManager.getSubscription();
      if (!subscription) throw new Error("Push subscription is not available.");
      await sendTestPushNotification(subscription.endpoint);
      setNotificationMessage(t("settings.notifications.testSuccess"));
    } catch {
      setNotificationMessage(t("settings.notifications.testError"));
    } finally {
      setIsSendingTestNotification(false);
    }
  }

  async function updateMorningBriefPreference(enabled: boolean) {
    setMorningBriefEnabled(enabled);
    if (!notificationsEnabled || !effectiveProvince || notificationStatus !== "granted") return;
    try {
      const registration = await navigator.serviceWorker?.getRegistration();
      const subscription = await registration?.pushManager.getSubscription();
      if (!subscription) return;
      await savePushSubscription(subscription, effectiveProvince, language, {
        morningBriefEnabled: enabled,
        tomorrowBriefEnabled,
        latitude: notificationLatitude,
        longitude: notificationLongitude,
        locationName: notificationLocationName,
        countyTeryt: notificationCountyTeryt,
        temperatureUnit,
        windSpeedUnit,
      });
    } catch {
      setNotificationMessage(t("settings.notifications.saveError"));
    }
  }

  async function updateTomorrowBriefPreference(enabled: boolean) {
    setTomorrowBriefEnabled(enabled);
    if (!notificationsEnabled || !effectiveProvince || notificationStatus !== "granted") return;
    try {
      const registration = await navigator.serviceWorker?.getRegistration();
      const subscription = await registration?.pushManager.getSubscription();
      if (!subscription) return;
      await savePushSubscription(subscription, effectiveProvince, language, {
        morningBriefEnabled,
        tomorrowBriefEnabled: enabled,
        latitude: notificationLatitude,
        longitude: notificationLongitude,
        locationName: notificationLocationName,
        countyTeryt: notificationCountyTeryt,
        temperatureUnit,
        windSpeedUnit,
      });
    } catch {
      setNotificationMessage(t("settings.notifications.saveError"));
    }
  }

  return (
    <div className="space-y-6">
      <section>
        <p className="section-kicker flex items-center gap-2"><Settings className="size-4" />{t("settings.section")}</p>
        <h1 className="mt-2 text-3xl font-semibold tracking-tight">{t("settings.title")}</h1>
        <p className="mt-2 max-w-2xl text-sm leading-6 text-muted">{t("settings.description")}</p>
      </section>

      <Card className="p-4 sm:p-5">
        <SettingsRow icon={Languages} title={t("settings.language.title")} description={t("settings.language.description")}>
          <LanguageToggle />
        </SettingsRow>
        <SettingsRow icon={Palette} title={t("settings.theme.title")} description={t("settings.theme.description")}>
          <ThemeToggle />
        </SettingsRow>
        <SettingsRow icon={Thermometer} title={t("settings.units.temperature.title")} description={t("settings.units.temperature.description")}>
          <div className="surface-control inline-flex rounded-full p-1" role="radiogroup" aria-label={t("settings.units.temperature.label")}>
            {TEMPERATURE_UNITS.map((unit) => (
              <button
                key={unit}
                type="button"
                role="radio"
                aria-checked={temperatureUnit === unit}
                className={`min-w-14 rounded-full border px-3.5 py-1.5 text-sm font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${
                  temperatureUnit === unit
                    ? "border-accent/45 bg-accent/10 text-accent shadow-soft"
                    : "border-transparent text-muted hover:bg-surface-muted/70 hover:text-foreground"
                }`}
                onClick={() => setTemperatureUnit(unit)}
              >
                {t(temperatureUnitKeys[unit])}
              </button>
            ))}
          </div>
        </SettingsRow>
        <SettingsRow icon={Wind} title={t("settings.units.wind.title")} description={t("settings.units.wind.description")}>
          <div className="surface-control inline-flex rounded-full p-1" role="radiogroup" aria-label={t("settings.units.wind.label")}>
            {WIND_SPEED_UNITS.map((unit) => (
              <button
                key={unit}
                type="button"
                role="radio"
                aria-checked={windSpeedUnit === unit}
                className={`min-w-14 rounded-full border px-3.5 py-1.5 text-sm font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${
                  windSpeedUnit === unit
                    ? "border-accent/45 bg-accent/10 text-accent shadow-soft"
                    : "border-transparent text-muted hover:bg-surface-muted/70 hover:text-foreground"
                }`}
                onClick={() => setWindSpeedUnit(unit)}
              >
                {t(windSpeedUnitKeys[unit])}
              </button>
            ))}
          </div>
        </SettingsRow>
      </Card>

      <Card className="p-4 sm:p-5">
        <div className="flex items-start gap-3">
          <div className="rounded-control border border-warning/30 bg-warning/10 p-2 text-warning">
            <BellRing className="size-4" aria-hidden="true" />
          </div>
          <div>
            <p className="text-[0.68rem] font-semibold uppercase tracking-[0.16em] text-warning">IMGW</p>
            <h2 className="mt-1 text-lg font-semibold tracking-tight">{t("settings.notifications.title")}</h2>
            <p className="mt-1 max-w-2xl text-sm leading-6 text-muted">{t("settings.notifications.description")}</p>
          </div>
        </div>

        <div className="mt-5 grid gap-3 lg:grid-cols-2">
          <div className="rounded-card border border-border/65 bg-surface-muted/45 p-4">
            <div className="flex items-start gap-3">
              <MapPinned className="mt-0.5 size-4 text-accent" aria-hidden="true" />
              <div>
                <h3 className="text-sm font-semibold">{t("settings.notifications.regionTitle")}</h3>
                <p className="mt-1 text-sm leading-6 text-muted">{t("settings.notifications.regionDescription", { province: effectiveProvinceLabel })}</p>
              </div>
            </div>

            <div className="mt-4 space-y-3">
              <label className="flex items-start gap-3 rounded-card border border-border/60 bg-surface px-3 py-3 text-sm">
                <input
                  type="radio"
                  name="warning-notification-province-mode"
                  checked={provinceMode === "selected"}
                  onChange={() => setProvinceMode("selected")}
                  className="mt-1 accent-accent"
                />
                <span>
                  <span className="block font-medium">{t("settings.notifications.regionSelected")}</span>
                  <span className="mt-0.5 block text-xs leading-5 text-muted">{selectedProvince ? formatProvinceName(selectedProvince, language) : t("settings.notifications.noProvince")}</span>
                </span>
              </label>
              <label className="flex items-start gap-3 rounded-card border border-border/60 bg-surface px-3 py-3 text-sm">
                <input
                  type="radio"
                  name="warning-notification-province-mode"
                  checked={provinceMode === "manual"}
                  onChange={() => {
                    setProvinceMode("manual");
                    if (!manualProvince) setManualProvince(selectedProvince ?? "mazowieckie");
                  }}
                  className="mt-1 accent-accent"
                />
                <span className="min-w-0 flex-1">
                  <span className="block font-medium">{t("settings.notifications.regionManual")}</span>
                  <span className="relative mt-2 block">
                    <select
                      aria-label={t("settings.notifications.regionManual")}
                      value={manualProvince ?? selectedProvince ?? "mazowieckie"}
                      disabled={provinceMode !== "manual"}
                      onChange={(event) => setManualProvince(event.target.value as Province)}
                      className="surface-control w-full appearance-none rounded-control py-2 pl-3 pr-9 text-sm disabled:opacity-60"
                    >
                      {PROVINCES.map((province) => (
                        <option key={province} value={province}>{formatProvinceName(province, language)}</option>
                      ))}
                    </select>
                    <ChevronDown className="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-muted" aria-hidden="true" />
                  </span>
                </span>
              </label>
            </div>
          </div>

          <div className="rounded-card border border-border/65 bg-surface-muted/45 p-4">
            <div className="flex items-start gap-3">
              <Smartphone className="mt-0.5 size-4 text-accent" aria-hidden="true" />
              <div>
                <h3 className="text-sm font-semibold">{t("settings.notifications.deviceTitle")}</h3>
                <p className="mt-1 text-sm leading-6 text-muted">{notificationStatusLabel}</p>
              </div>
            </div>

            <button
              type="button"
              role="switch"
              aria-checked={notificationsEnabled}
              disabled={(!notificationsEnabled && !canUsePush) || isSavingSubscription}
              onClick={notificationsEnabled ? disableWarningNotifications : enableWarningNotifications}
              className={`mt-4 flex w-full items-start justify-between gap-4 rounded-card border px-3 py-3 text-left text-sm transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:cursor-not-allowed disabled:opacity-65 ${
                notificationsEnabled
                  ? "border-accent/45 bg-accent/10"
                  : "border-border/60 bg-surface hover:border-accent/45"
              }`}
            >
              <span className="min-w-0">
                <span className="flex items-center gap-2 font-medium">
                  <Bell className="size-3.5 text-accent" aria-hidden="true" />
                  {t("settings.notifications.enable")}
                </span>
                <span className="mt-0.5 block text-xs leading-5 text-muted">{t("settings.notifications.enableDescription")}</span>
                <span className="mt-2 block text-xs font-semibold text-accent">
                  {isSavingSubscription
                    ? t("settings.notifications.saving")
                    : notificationsEnabled
                      ? t("settings.notifications.enabledStatus")
                      : t("settings.notifications.disabledStatus")}
                </span>
              </span>
              <SwitchIndicator checked={notificationsEnabled} disabled={(!notificationsEnabled && !canUsePush) || isSavingSubscription} />
            </button>
            {notificationMessage && <p className="mt-3 text-xs font-medium text-accent">{notificationMessage}</p>}

            <NotificationSwitchLabel
              icon={Clock3}
              title={t("settings.notifications.morningBrief")}
              description={t("settings.notifications.morningBriefDescription")}
              checked={morningBriefEnabled}
              disabled={!notificationsEnabled || isSavingSubscription}
              onChange={updateMorningBriefPreference}
            />

            <NotificationSwitchLabel
              icon={Clock3}
              title={t("settings.notifications.tomorrowBrief")}
              description={t("settings.notifications.tomorrowBriefDescription")}
              checked={tomorrowBriefEnabled}
              disabled={!notificationsEnabled || isSavingSubscription}
              onChange={updateTomorrowBriefPreference}
            />

            <div className="mt-4">
              <Button type="button" variant="glass" disabled={!notificationsEnabled || isSavingSubscription || isSendingTestNotification} onClick={sendTestNotification}>
                <BellRing className="size-4" />
                {isSendingTestNotification ? t("settings.notifications.sendingTest") : t("settings.notifications.sendTest")}
              </Button>
            </div>

            <p className="mt-4 text-xs leading-5 text-muted">{t("settings.notifications.implementationNote")}</p>
          </div>
        </div>
      </Card>
    </div>
  );
}