"use client";

/**
 * ReminderToggle — the settings control for daily sādhana reminders (email +
 * push + websocket). Reads the current preference and lets the user opt out.
 * Renders as a settings row matching the rest of /settings.
 */

import { useEffect, useState } from "react";
import { toast } from "sonner";
import { sadhna } from "@/lib/sadhna";
import {
  enablePush,
  isPushEnabled,
  pushPermission,
  pushSupported,
} from "@/lib/push";

export function ReminderToggle() {
  const [enabled, setEnabled] = useState<boolean | null>(null);
  const [busy, setBusy] = useState(false);

  useEffect(() => {
    let cancelled = false;
    sadhna
      .reminderPrefs()
      .then((r) => {
        if (!cancelled) setEnabled(r.enabled);
      })
      .catch(() => {
        if (!cancelled) setEnabled(true); // default-on; toggle still works
      });
    return () => {
      cancelled = true;
    };
  }, []);

  async function toggle() {
    if (enabled === null) return;
    const next = !enabled;
    setBusy(true);
    try {
      // Turning reminders ON also offers push permission on this device, so
      // the reminder can actually reach a closed app. Best-effort: if the
      // user declines or push isn't available, reminders still go by email
      // and in-app. Done before saving the pref so the permission request
      // stays close to the toggle gesture.
      if (
        next &&
        pushSupported() &&
        pushPermission() !== "denied" &&
        !(await isPushEnabled())
      ) {
        await enablePush().catch(() => {
          /* declined / unavailable — reminders still work elsewhere */
        });
      }
      await sadhna.setReminderPrefs(next);
      setEnabled(next);
      toast.success(next ? "Reminders turned on" : "Reminders turned off");
    } catch {
      toast.error("Could not update reminders");
    } finally {
      setBusy(false);
    }
  }

  return (
    <ul className="divide-y divide-border">
      <li className="flex items-center justify-between gap-4 py-3">
        <div className="min-w-0">
          <span className="text-sm text-foreground">Sādhana reminders</span>
          <p className="text-xs text-muted-foreground mt-0.5">
            Daily nudges to chant your rounds and share a verse — by email,
            push, and in-app.
          </p>
        </div>
        <div className="shrink-0">
          {enabled === null ? (
            <span className="text-xs text-muted-foreground">…</span>
          ) : (
            <button
              type="button"
              onClick={toggle}
              disabled={busy}
              aria-pressed={enabled}
              className={[
                "relative inline-flex h-6 w-11 items-center rounded-full transition-colors disabled:opacity-60",
                enabled ? "bg-primary" : "bg-muted-foreground/30",
              ].join(" ")}
            >
              <span
                className={[
                  "inline-block size-5 transform rounded-full bg-white shadow transition-transform",
                  enabled ? "translate-x-5" : "translate-x-0.5",
                ].join(" ")}
              />
            </button>
          )}
        </div>
      </li>
    </ul>
  );
}