"use client";

import { useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { Volume2, VolumeX, Sparkles, Clock, Trophy, KeyRound, ShieldCheck, LogOut, Smartphone, Monitor, Trash2 } from "lucide-react";
import type { UserSettings } from "@spinza/shared";
import { SESSION_REMINDER_OPTIONS } from "@spinza/shared";
import { api } from "@/lib/api";
import { toast, useSession } from "@/lib/store";
import { useApi } from "@/lib/use-api";
import { cn, timeAgo } from "@/lib/utils";
import { Button, Card, Input, Sheet, Skeleton, Switch } from "@/components/ui";
import { AppShell } from "@/components/shell/app-shell";
import { RequireAuth } from "@/components/shell/require-auth";
import { RecoveryCodePanel } from "@/components/shell/recovery-code";
import { ApiErrorState } from "@/components/shell/api-error";

/* ---------------------------------------------------------------- pieces */

function Section({ id, icon: Icon, title, description, children }: { id: string; icon: React.ElementType; title: string; description?: string; children: React.ReactNode }) {
  return (
    <Card as="section" id={id} className="p-5 sm:p-6" aria-labelledby={`${id}-title`}>
      <div className="mb-4 flex items-center gap-3">
        <span className="grid h-10 w-10 place-items-center rounded-md metal text-accent-2">
          <Icon className="h-[18px] w-[18px]" />
        </span>
        <div>
          <h2 id={`${id}-title`} className="text-lg font-semibold tracking-tight">
            {title}
          </h2>
          {description ? <p className="text-[13px] text-fg-3">{description}</p> : null}
        </div>
      </div>
      {children}
    </Card>
  );
}

/** Range input with local state; commits (PATCH) at most every 300 ms while dragging. */
function Slider({ label, value, onChange, disabled }: { label: string; value: number; onChange: (v: number) => void; disabled?: boolean }) {
  // Settings are loaded before this renders, and `value` only changes through this control,
  // so the initial local state is always in sync.
  const [local, setLocal] = useState(Math.round(value * 100));
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
  useEffect(
    () => () => {
      if (timer.current) clearTimeout(timer.current);
    },
    [],
  );
  const change = (n: number) => {
    setLocal(n);
    if (timer.current) clearTimeout(timer.current);
    timer.current = setTimeout(() => onChange(n / 100), 300);
  };
  return (
    <label className={cn("block py-2", disabled && "opacity-50")}>
      <span className="mb-1.5 flex items-center justify-between text-[15px] font-medium">
        {label}
        <span className="text-[13px] tabular text-fg-3">{local}%</span>
      </span>
      <input type="range" min={0} max={100} step={1} value={local} disabled={disabled} onChange={(e) => change(Number(e.target.value))} className="h-11 w-full cursor-pointer accent-[#c9a961]" aria-label={label} />
    </label>
  );
}

function Segmented<T extends string | number>({ value, onChange, options, label }: { value: T; onChange: (v: T) => void; options: { value: T; label: string }[]; label: string }) {
  return (
    <div className="flex flex-wrap gap-1.5" role="radiogroup" aria-label={label}>
      {options.map((o) => (
        <button key={String(o.value)} type="button" role="radio" aria-checked={value === o.value} onClick={() => onChange(o.value)} className={cn("tap h-10 min-w-[44px] rounded-md border px-3.5 text-[13px] font-semibold transition-colors focus-ring", value === o.value ? "border-accent/50 bg-accent-soft text-accent-2" : "border-line text-fg-3 hover:border-line-2 hover:text-fg")}>
          {o.label}
        </button>
      ))}
    </div>
  );
}

/* ------------------------------------------------------------- security */

function ChangePassword() {
  const [cur, setCur] = useState("");
  const [next, setNext] = useState("");
  const [confirm, setConfirm] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const can = cur && next.length >= 8 && next === confirm && !busy;
  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!can) return;
    setBusy(true);
    setError(null);
    try {
      await api("/api/auth/password", { json: { currentPassword: cur, newPassword: next } });
      toast({ title: "Password updated", tone: "success" });
      setCur("");
      setNext("");
      setConfirm("");
    } catch (err) {
      setError(err instanceof Error ? err.message : "Could not change password.");
    } finally {
      setBusy(false);
    }
  };
  return (
    <form onSubmit={submit} className="space-y-3" noValidate>
      <Input label="Current password" type="password" value={cur} onChange={(e) => setCur(e.target.value)} autoComplete="current-password" />
      <div className="grid gap-3 sm:grid-cols-2">
        <Input label="New password" type="password" value={next} onChange={(e) => setNext(e.target.value)} autoComplete="new-password" error={next && next.length < 8 ? "At least 8 characters." : null} />
        <Input label="Confirm new password" type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} autoComplete="new-password" error={confirm && confirm !== next ? "Passwords do not match." : null} />
      </div>
      {error ? (
        <p className="text-sm text-danger" role="alert">
          {error}
        </p>
      ) : null}
      <Button type="submit" variant="secondary" disabled={!can} loading={busy}>
        Update password
      </Button>
    </form>
  );
}

function RotateRecovery() {
  const [open, setOpen] = useState(false);
  const [password, setPassword] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [code, setCode] = useState<string | null>(null);

  const close = () => {
    setOpen(false);
    setPassword("");
    setError(null);
    setCode(null);
  };
  const rotate = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!password || busy) return;
    setBusy(true);
    setError(null);
    try {
      const res = await api<{ recoveryCode: string }>("/api/auth/recovery-code/rotate", { json: { password } });
      setCode(res.recoveryCode);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Could not rotate the code.");
    } finally {
      setBusy(false);
    }
  };
  return (
    <>
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <p className="text-sm text-fg-2">Your recovery code is the only way to reset a forgotten password. Rotate it if you think it was exposed — the old code stops working immediately.</p>
        <Button variant="secondary" onClick={() => setOpen(true)} className="shrink-0">
          <KeyRound className="h-4 w-4" /> Rotate recovery code
        </Button>
      </div>
      <Sheet open={open} onClose={code ? () => undefined : close} side="center" title={code ? "New recovery code" : "Rotate recovery code"}>
        {code ? (
          <RecoveryCodePanel hideHeader code={code} notice="Your previous recovery code no longer works. Save this one now. Spinza does not collect your email address — if you lose your password and this code, your account cannot be recovered." continueLabel="Done" onContinue={close} />
        ) : (
          <form onSubmit={rotate} className="space-y-4" noValidate>
            <p className="text-sm text-fg-2">Confirm your password to generate a new recovery code.</p>
            <Input label="Password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="current-password" autoFocus />
            {error ? (
              <p className="text-sm text-danger" role="alert">
                {error}
              </p>
            ) : null}
            <div className="flex gap-3">
              <Button type="button" variant="secondary" className="flex-1" onClick={close}>
                Cancel
              </Button>
              <Button type="submit" className="flex-1" disabled={!password} loading={busy}>
                Generate new code
              </Button>
            </div>
          </form>
        )}
      </Sheet>
    </>
  );
}

interface SessionRow {
  id: string;
  current: boolean;
  createdAt: string;
  lastSeenAt: string;
  userAgent: string | null;
  ip: string | null;
}

function describeUa(ua: string | null): { label: string; mobile: boolean } {
  if (!ua) return { label: "Unknown device", mobile: false };
  const mobile = /iPhone|Android|Mobile/i.test(ua);
  const os = /iPhone|iPad/i.test(ua) ? "iOS" : /Android/i.test(ua) ? "Android" : /Mac OS X/i.test(ua) ? "macOS" : /Windows/i.test(ua) ? "Windows" : /Linux/i.test(ua) ? "Linux" : "Unknown OS";
  const browser = /Edg\//i.test(ua) ? "Edge" : /Chrome\//i.test(ua) ? "Chrome" : /Firefox\//i.test(ua) ? "Firefox" : /Safari\//i.test(ua) ? "Safari" : "Browser";
  return { label: `${browser} · ${os}`, mobile };
}

function Sessions() {
  const { data, error, loading, reload, setData } = useApi<{ sessions: SessionRow[] }>("/api/user/sessions");
  const [busy, setBusy] = useState<string | null>(null);
  const revoke = async (id: string) => {
    setBusy(id);
    try {
      await api(`/api/user/sessions/${id}`, { method: "DELETE" });
      setData((d) => (d ? { sessions: d.sessions.filter((s) => s.id !== id) } : d));
      toast({ title: "Session signed out", tone: "success" });
    } catch (e) {
      toast({ title: "Could not revoke", description: e instanceof Error ? e.message : undefined, tone: "danger" });
    } finally {
      setBusy(null);
    }
  };
  if (error && !data) return <ApiErrorState error={error} retry={reload} compact />;
  if (loading && !data) return <Skeleton className="h-24" />;
  const list = data?.sessions ?? [];
  return (
    <ul className="divide-y divide-line rounded-md border border-line">
      {list.map((s) => {
        const d = describeUa(s.userAgent);
        const Icon = d.mobile ? Smartphone : Monitor;
        return (
          <li key={s.id} className="flex items-center gap-3 px-3 py-3">
            <span className="grid h-10 w-10 shrink-0 place-items-center rounded-md bg-surface-2 text-fg-2">
              <Icon className="h-[18px] w-[18px]" />
            </span>
            <div className="min-w-0 flex-1">
              <div className="flex items-center gap-2 text-[15px] font-medium">
                <span className="truncate">{d.label}</span>
                {s.current ? <span className="rounded-full bg-success/15 px-2 py-0.5 text-[11px] font-bold text-success">This device</span> : null}
              </div>
              <div className="text-[12px] text-fg-3">
                Active {timeAgo(s.lastSeenAt)}
                {s.ip ? ` · ${s.ip}` : ""} · signed in {timeAgo(s.createdAt)}
              </div>
            </div>
            {!s.current ? (
              <Button variant="ghost" size="sm" onClick={() => revoke(s.id)} loading={busy === s.id} aria-label="Sign out this session">
                <Trash2 className="h-4 w-4" /> Revoke
              </Button>
            ) : null}
          </li>
        );
      })}
    </ul>
  );
}

/* ------------------------------------------------------------------ page */

function SettingsBody() {
  const router = useRouter();
  const settings = useSession((s) => s.settings);
  const setSettings = useSession((s) => s.setSettings);
  const signOut = useSession((s) => s.signOut);
  const [signingOut, setSigningOut] = useState(false);
  if (!settings) return <Skeleton className="h-64" />;
  const set = (patch: Partial<UserSettings>) => setSettings(patch);
  const muted = !settings.soundEnabled;

  return (
    <div className="grid gap-4 lg:grid-cols-2">
      <Section id="sound" icon={muted ? VolumeX : Volume2} title="Sound" description="Music and effects inside games.">
        <Switch checked={settings.soundEnabled} onChange={(v) => set({ soundEnabled: v })} label="Sound" description={muted ? "All game audio is muted." : "Game audio is on."} />
        <div className="mt-1 border-t border-line pt-2">
          <Slider label="Master volume" value={settings.masterVolume} onChange={(v) => set({ masterVolume: v })} disabled={muted} />
          <Slider label="Music" value={settings.musicVolume} onChange={(v) => set({ musicVolume: v })} disabled={muted} />
          <Slider label="Effects" value={settings.effectsVolume} onChange={(v) => set({ effectsVolume: v })} disabled={muted} />
        </div>
      </Section>

      <Section id="motion" icon={Sparkles} title="Animation" description="Tune how cinematic the games feel.">
        <div className="py-2">
          <div className="mb-2 text-[15px] font-medium">Animation intensity</div>
          <Segmented<UserSettings["animationIntensity"]> label="Animation intensity" value={settings.animationIntensity} onChange={(v) => set({ animationIntensity: v })} options={[{ value: "low", label: "Low" }, { value: "medium", label: "Medium" }, { value: "high", label: "High" }]} />
          <p className="mt-2 text-[13px] text-fg-3">Low keeps particles and screen effects to a minimum. High turns everything up.</p>
        </div>
        <div className="border-t border-line">
          <Switch checked={settings.reduceMotion} onChange={(v) => set({ reduceMotion: v })} label="Reduce motion" description="Shorten transitions and disable celebratory motion across Spinza." />
        </div>
      </Section>

      <Section id="time" icon={Clock} title="Time & breaks" description="Responsible-play reminders. Credits are fictional; your time is not.">
        <div className="py-2">
          <div className="mb-2 text-[15px] font-medium">Session reminder</div>
          <Segmented<number> label="Session reminder" value={settings.sessionReminderMinutes} onChange={(v) => set({ sessionReminderMinutes: v })} options={SESSION_REMINDER_OPTIONS.map((m) => ({ value: m, label: m === 0 ? "Off" : `${m} min` }))} />
          <p className="mt-2 text-[13px] text-fg-3">Shows how long you have been playing at the chosen interval.</p>
        </div>
        <div className="border-t border-line">
          <Switch checked={settings.breakReminder} onChange={(v) => set({ breakReminder: v })} label="Break reminder" description="Suggest a short break after long stretches of continuous play." />
        </div>
      </Section>

      <Section id="leaderboard" icon={Trophy} title="Leaderboards" description="Control what other players can see.">
        <Switch checked={settings.leaderboardOptIn} onChange={(v) => set({ leaderboardOptIn: v })} label="Leaderboard participation" description={settings.leaderboardOptIn ? "Your username, level and results appear on public boards and the wins feed." : "You are hidden from all leaderboards and the wins feed."} />
      </Section>

      <div className="lg:col-span-2">
        <Section id="security" icon={ShieldCheck} title="Security" description="Spinza stores only your username and a password hash — keep both safe.">
          <div className="grid gap-8 lg:grid-cols-2">
            <div>
              <h3 className="mb-3 text-[15px] font-semibold">Change password</h3>
              <ChangePassword />
            </div>
            <div className="space-y-8">
              <div>
                <h3 className="mb-3 text-[15px] font-semibold">Recovery code</h3>
                <RotateRecovery />
              </div>
              <div>
                <h3 className="mb-3 text-[15px] font-semibold">Active sessions</h3>
                <Sessions />
              </div>
            </div>
          </div>
          <div className="mt-8 flex flex-col gap-3 border-t border-line pt-6 sm:flex-row sm:items-center sm:justify-between">
            <p className="text-sm text-fg-3">Signing out only affects this device. Your credits and progress stay on your account.</p>
            <Button
              variant="danger"
              loading={signingOut}
              onClick={async () => {
                setSigningOut(true);
                await signOut();
                router.push("/");
                router.refresh();
              }}
            >
              <LogOut className="h-4 w-4" /> Sign out
            </Button>
          </div>
        </Section>
      </div>
    </div>
  );
}

export default function SettingsPage() {
  return (
    <AppShell>
      <RequireAuth>
        <div className="mb-6">
          <div className="eyebrow mb-1">Settings</div>
          <h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">Make Spinza yours.</h1>
          <p className="mt-2 max-w-xl text-sm text-fg-3">Preferences save instantly and follow your account across devices.</p>
        </div>
        <SettingsBody />
      </RequireAuth>
    </AppShell>
  );
}