import { useEffect, useState } from "react";
import { useI18n } from "../../shared/I18nProvider.jsx";
import { BackIcon } from "../../shared/ActionIcons.jsx";
import { NOTIFICATION_SETTING_GROUPS, readNotificationPreferences, writeNotificationPreferences } from "./notification-settings.js";
import { getSystemNotificationPermission, requestSystemNotificationPermission } from "./system-notification.js";

function Switch({ checked, disabled = false, label, onChange }) {
  return <button type="button" className={`notification-switch${checked ? " active" : ""}`} role="switch" aria-checked={checked} aria-label={label} disabled={disabled} onClick={() => onChange(!checked)}><span /></button>;
}

export function NotificationSettingsPage({ onBack }) {
  const { t } = useI18n();
  const [preferences, setPreferences] = useState(() => readNotificationPreferences());
  const [permission, setPermission] = useState("checking");
  const [requesting, setRequesting] = useState(false);

  useEffect(() => { getSystemNotificationPermission().then(setPermission); }, []);

  function update(next) {
    setPreferences(next);
    writeNotificationPreferences(undefined, next);
  }
  function toggleType(type, checked) {
    update({ ...preferences, types: { ...preferences.types, [type]: checked } });
  }
  async function allowPermission() {
    setRequesting(true);
    setPermission(await requestSystemNotificationPermission());
    setRequesting(false);
  }

  const permissionKey = permission === "granted" ? "granted" : permission === "denied" ? "denied" : permission === "unsupported" ? "unsupported" : permission === "checking" ? "checking" : "prompt";
  return <section className="settings-page notification-settings-page" aria-labelledby="notification-settings-title">
    <button type="button" className="screen-back conversation-back" aria-label={t("settings.back")} onClick={onBack}><BackIcon /></button>
    <div className="settings-content notification-settings-content">
      <h1 id="notification-settings-title" className="settings-prompt">{t("settings.notifications")}</h1>
      <section className="settings-section" aria-labelledby="notification-permission-title">
        <h2 id="notification-permission-title">{t("notifications.permissionTitle")}</h2>
        <div className="notification-permission-card"><div><strong>{t(`notifications.permission.${permissionKey}`)}</strong><span>{t("notifications.permissionDescription")}</span></div>{permission !== "granted" && permission !== "unsupported" && <button type="button" disabled={requesting} onClick={allowPermission}>{t(requesting ? "notifications.requesting" : "notifications.allow")}</button>}</div>
      </section>
      <section className="settings-section" aria-labelledby="notification-master-title">
        <h2 id="notification-master-title">{t("notifications.pushTitle")}</h2>
        <div className="notification-setting-row notification-setting-row--master"><div><strong>{t("notifications.all")}</strong><span>{t("notifications.allDescription")}</span></div><Switch checked={preferences.enabled} label={t("notifications.all")} onChange={(enabled) => update({ ...preferences, enabled })} /></div>
      </section>
      {NOTIFICATION_SETTING_GROUPS.map((group) => <section className="settings-section" aria-labelledby={`notification-${group.id}-title`} key={group.id}>
        <h2 id={`notification-${group.id}-title`}>{t(`notifications.group.${group.id}`)}</h2>
        <div className="notification-settings-list">{group.types.map((type) => <div className="notification-setting-row" key={type}><div><strong>{t(`notifications.type.${type}`)}</strong><span>{t(`notifications.type.${type}.description`)}</span></div><Switch checked={preferences.types[type]} disabled={!preferences.enabled} label={t(`notifications.type.${type}`)} onChange={(checked) => toggleType(type, checked)} /></div>)}</div>
      </section>)}
      <p className="notification-settings-note">{t("notifications.foregroundNote")}</p>
    </div>
  </section>;
}
