BillTracker/client/pages/ProfilePage.jsx

import React, { useEffect, useState, useCallback } from 'react';
import { toast } from 'sonner';
import {
  User, Mail, KeyRound, ShieldCheck, Loader2, History, Monitor, Smartphone, ChevronRight,
  Bell, SendHorizontal, ScanLine, TriangleAlert, Copy, Check, Lock,
} from 'lucide-react';
import { api } from '@/api';
import { useAuth } from '@/hooks/useAuth';
import { useAutoSave } from '@/hooks/useAutoSave';
import { SaveStatus } from '@/components/ui/save-status';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Switch } from '@/components/ui/switch';
import {
  Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription,
} from '@/components/ui/dialog';

function asProfile(data) {
  return data?.profile || data?.user || data || {};
}

function displayNameOf(profile) {
  return profile.display_name || profile.displayName || profile.name || '';
}

export function asSettings(data) {
  return data?.settings || data?.notifications || data || {};
}

function formatDateTime(value) {
  if (!value) return 'Not recorded';
  const d = new Date(value);
  if (Number.isNaN(d.getTime())) return String(value);
  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
    + ' '
    + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
}

function SectionCard({ title, icon: Icon, subtitle, action, children }) {
  return (
    <section className="overflow-hidden rounded-xl border border-border/70 bg-card/90 shadow-sm">
      <div className="px-6 py-4 border-b border-border/50 flex items-center gap-3">
        <div className="h-9 w-9 rounded-lg border border-primary/15 bg-primary/10 flex items-center justify-center shrink-0">
          <Icon className="h-4 w-4 text-primary" />
        </div>
        <div className="min-w-0">
          <h2 className="text-xs font-bold uppercase tracking-widest text-muted-foreground">{title}</h2>
          {subtitle && <p className="text-sm text-muted-foreground mt-0.5">{subtitle}</p>}
        </div>
        {action && <div className="ml-auto shrink-0">{action}</div>}
      </div>
      <div>{children}</div>
    </section>
  );
}

function FieldRow({ label, value }) {
  return (
    <div className="rounded-lg border border-border/60 bg-muted/25 px-4 py-3">
      <p className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">{label}</p>
      <p className="mt-1 text-sm font-medium text-foreground truncate">{value || 'Not set'}</p>
    </div>
  );
}

function CheckRow({ id, label, checked, onChange, disabled }) {
  return (
    <label htmlFor={id} className="flex items-center justify-between gap-4 rounded-lg border border-border/60 bg-muted/20 px-4 py-3">
      <span className="text-sm font-medium">{label}</span>
      <Switch id={id} checked={!!checked} onCheckedChange={onChange} disabled={disabled} />
    </label>
  );
}

function parseUserAgent(ua) {
  if (!ua) return { browser: 'Unknown', os: 'Unknown', mobile: false };
  const s = ua;
  const mobile = /iPhone|iPad|Android|Mobile/i.test(s);
  const browser =
    /Edg\//i.test(s)     ? 'Edge'    :
    /OPR\//i.test(s)     ? 'Opera'   :
    /Chrome\//i.test(s)  ? 'Chrome'  :
    /Firefox\//i.test(s) ? 'Firefox' :
    /Safari\//i.test(s)  ? 'Safari'  :
    /curl\//i.test(s)    ? 'curl'    : 'Unknown';
  const os =
    /iPhone|iPad/i.test(s) ? 'iOS'      :
    /Android/i.test(s)     ? 'Android'  :
    /Windows/i.test(s)     ? 'Windows'  :
    /Macintosh/i.test(s)   ? 'macOS'    :
    /Linux/i.test(s)       ? 'Linux'    : 'Unknown';
  return { browser, os, mobile };
}

function deviceLabel(type) {
  if (type === 'mobile') return 'Mobile';
  if (type === 'tablet') return 'Tablet';
  if (type === 'api') return 'API client';
  return 'Desktop';
}

function LoginHistoryModal({ history: providedHistory, open, onClose, onLoaded }) {
  const [history, setHistory] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!open) return;
    if (providedHistory?.length) {
      setHistory(providedHistory);
      return;
    }
    setLoading(true);
    api.loginHistory()
      .then(d => {
        const rows = d.history ?? [];
        setHistory(rows);
        onLoaded?.(rows);
      })
      .catch(err => {
        setHistory([]);
        toast.error(err.message || 'Failed to load login history.');
      })
      .finally(() => setLoading(false));
  }, [open, providedHistory, onLoaded]);

  return (
    <Dialog open={open} onOpenChange={v => { if (!v) onClose(); }}>
      <DialogContent className="sm:max-w-md border-border/60 bg-card/95 backdrop-blur-xl">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2 text-base">
            <History className="h-4 w-4 text-primary" />
            Login History
          </DialogTitle>
          <DialogDescription className="sr-only">
            Your last 10 sign-in events
          </DialogDescription>
        </DialogHeader>

        <div className="mt-1 space-y-1">
          {loading ? (
            <div className="flex items-center justify-center py-8 gap-2 text-muted-foreground text-sm">
              <Loader2 className="h-4 w-4 animate-spin" /> Loading…
            </div>
          ) : history.length === 0 ? (
            <p className="text-sm text-muted-foreground text-center py-8">No login history recorded.</p>
          ) : history.map((entry, i) => {
            const isFailed = entry.success === false;
            const parsed = parseUserAgent(entry.user_agent);
            const browser = entry.browser || parsed.browser;
            const os = entry.os || parsed.os;
            const deviceType = entry.device_type || (parsed.mobile ? 'mobile' : 'desktop');
            const DeviceIcon = deviceType === 'mobile' || deviceType === 'tablet' ? Smartphone : Monitor;
            const isFirstSuccess = !isFailed && history.slice(0, i).every(e => e.success === false);
            return (
              <div key={entry.id}
                className={`flex items-start gap-3 rounded-lg border px-4 py-3 ${
                  isFailed ? 'border-destructive/30 bg-destructive/5' : 'border-border/50 bg-muted/20'
                }`}>
                <DeviceIcon className={`h-4 w-4 mt-0.5 shrink-0 ${isFailed ? 'text-destructive/70' : 'text-muted-foreground'}`} />
                <div className="min-w-0">
                  <p className="text-sm font-medium flex items-center flex-wrap gap-1.5">
                    {formatDateTime(entry.logged_in_at)}
                    {isFailed && (
                      <span className="text-[10px] font-semibold uppercase tracking-wide text-destructive bg-destructive/10 px-1.5 py-0.5 rounded">
                        Failed attempt
                      </span>
                    )}
                    {entry.is_current_session && (
                      <span className="text-[10px] font-semibold uppercase tracking-wide text-emerald-500 bg-emerald-500/10 px-1.5 py-0.5 rounded">
                        This session
                      </span>
                    )}
                    {!entry.is_current_session && isFirstSuccess && (
                      <span className="text-[10px] font-semibold uppercase tracking-wide text-blue-500">
                        Most recent
                      </span>
                    )}
                  </p>
                  <p className="text-xs text-muted-foreground mt-0.5">
                    {deviceLabel(deviceType)} · {browser} on {os}
                    {entry.ip_address && (
                      <span className="ml-2 font-mono">{entry.ip_address}</span>
                    )}
                    {(entry.location_city || entry.location_country) && (
                      <span className="ml-2 text-muted-foreground/80">
                        — {[entry.location_city, entry.location_region, entry.location_country].filter(Boolean).join(', ')}
                      </span>
                    )}
                  </p>
                  {entry.location_isp && (
                    <p className="text-[10px] text-muted-foreground/60 mt-0.5">
                      {entry.location_isp}
                    </p>
                  )}
                  {entry.device_fingerprint && (
                    <p className="text-[10px] text-muted-foreground/70 mt-1 font-mono">
                      Device ID {entry.device_fingerprint}
                    </p>
                  )}
                </div>
              </div>
            );
          })}
        </div>

        <p className="text-[10px] text-muted-foreground/60 text-center pt-1">
          Showing up to 10 most recent events including failed attempts. Device ID is a short privacy-preserving identifier.
        </p>
        <p className="text-[10px] text-muted-foreground/60 text-center">
          This information is shown only to you and is encrypted at rest. It is not shared with admins.
        </p>
      </DialogContent>
    </Dialog>
  );
}

function LoginSummaryCard({ latestLogin, loading, onOpen }) {
  const parsed = parseUserAgent(latestLogin?.user_agent);
  const browser = latestLogin?.browser || parsed.browser;
  const os = latestLogin?.os || parsed.os;
  const deviceType = latestLogin?.device_type || (parsed.mobile ? 'mobile' : 'desktop');
  const DeviceIcon = deviceType === 'mobile' || deviceType === 'tablet' ? Smartphone : Monitor;

  return (
    <button
      type="button"
      onClick={onOpen}
      className="group rounded-lg border border-border/60 bg-muted/25 px-4 py-3 text-left transition-colors hover:border-primary/35 hover:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
    >
      <div className="flex items-start gap-3">
        <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-border/60 bg-background/60 text-muted-foreground group-hover:text-primary">
          {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <DeviceIcon className="h-4 w-4" />}
        </div>
        <div className="min-w-0 flex-1">
          <div className="flex items-center justify-between gap-3">
            <p className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">Last Login</p>
            <ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5 group-hover:text-primary" />
          </div>
          {latestLogin ? (
            <>
              <p className="mt-1 truncate text-sm font-semibold text-foreground">
                {formatDateTime(latestLogin.logged_in_at)}
              </p>
              <p className="mt-0.5 truncate text-xs text-muted-foreground">
                {deviceLabel(deviceType)} · {browser} on {os}
              </p>
              {(latestLogin.location_city || latestLogin.location_country) && (
                <p className="mt-0.5 truncate text-xs text-muted-foreground/70">
                  {[latestLogin.location_city, latestLogin.location_region, latestLogin.location_country].filter(Boolean).join(', ')}
                </p>
              )}
              {latestLogin.ip_address && (
                <p className="mt-0.5 truncate font-mono text-[11px] text-muted-foreground">
                  {latestLogin.ip_address}
                </p>
              )}
            </>
          ) : (
            <>
              <p className="mt-1 text-sm font-semibold text-foreground">
                {loading ? 'Checking login history...' : 'No login recorded yet'}
              </p>
              <p className="mt-0.5 text-xs text-muted-foreground">
                Open history to view device and IP details.
              </p>
            </>
          )}
        </div>
      </div>
    </button>
  );
}

function ProfileSummary({ profile, loading }) {
  const [historyOpen, setHistoryOpen] = useState(false);
  const [loginHistory, setLoginHistory] = useState([]);
  const [historyLoading, setHistoryLoading] = useState(false);

  useEffect(() => {
    if (loading) return;
    setHistoryLoading(true);
    api.loginHistory()
      .then(d => setLoginHistory(d.history ?? []))
      .catch(err => {
        setLoginHistory([]);
        toast.error(err.message || 'Failed to load login history.');
      })
      .finally(() => setHistoryLoading(false));
  }, [loading]);

  if (loading) {
    return (
      <SectionCard title="Profile Summary" icon={User}>
        <div className="px-6 py-6 text-sm text-muted-foreground">Loading profile…</div>
      </SectionCard>
    );
  }

  // Show the most recent SUCCESSFUL login in the summary card (not a failed attempt)
  const latestLogin = loginHistory.find(l => l.success !== false) || null;

  return (
    <>
      <SectionCard title="Profile Summary" icon={User} subtitle="Your signed-in account details.">
        <div className="px-6 py-5 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
          <FieldRow label="Username" value={profile.username} />
          <FieldRow label="Display Name" value={displayNameOf(profile)} />
          <FieldRow label="Role" value={profile.role} />

          <LoginSummaryCard
            latestLogin={latestLogin}
            loading={historyLoading}
            onOpen={() => setHistoryOpen(true)}
          />

          <FieldRow label="Password Changed" value={formatDateTime(profile.last_password_change_at || profile.password_changed_at)} />
        </div>
      </SectionCard>

      <LoginHistoryModal
        history={loginHistory}
        open={historyOpen}
        onClose={() => setHistoryOpen(false)}
        onLoaded={setLoginHistory}
      />
    </>
  );
}

function EditProfile({ profile, onSaved }) {
  const [displayName, setDisplayName] = useState(displayNameOf(profile));
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    setDisplayName(displayNameOf(profile));
  }, [profile.display_name, profile.displayName, profile.name]);

  const save = async () => {
    setSaving(true);
    try {
      const data = await api.updateProfile({ display_name: displayName.trim() || null });
      toast.success('Profile saved.');
      onSaved(asProfile(data));
    } catch (err) {
      toast.error(err.message || 'Failed to save profile.');
    } finally {
      setSaving(false);
    }
  };

  return (
    <SectionCard title="Edit Profile" icon={User} subtitle="Choose how your name appears inside the app.">
      <div className="px-6 py-5 flex flex-col gap-3 sm:flex-row sm:items-end">
        <div className="space-y-1.5 flex-1 max-w-md">
          <label htmlFor="display-name" className="text-xs font-medium text-muted-foreground">Display name</label>
          <Input id="display-name" value={displayName} onChange={e => setDisplayName(e.target.value)} placeholder="Display name" />
        </div>
        <Button onClick={save} disabled={saving} className="sm:mb-0">
          {saving ? <><Loader2 className="h-4 w-4 mr-2 animate-spin" />Saving…</> : 'Save Profile'}
        </Button>
      </div>
    </SectionCard>
  );
}

// Exported: rendered on the Settings page ("Notifications" section). Lives here
// because it shares asSettings/CheckRow/SectionCard with the rest of this file.
function buildNotificationPayload(form) {
  const payload = {
    email: form.email || form.notification_email || '',
    notifications_enabled: !!(form.notifications_enabled ?? form.enabled),
    notify_3_day: !!(form.notify_3_day ?? form.notify_3d),
    notify_1_day: !!(form.notify_1_day ?? form.notify_1d),
    notify_due: !!(form.notify_due ?? form.notify_day_of),
    notify_overdue: !!(form.notify_overdue ?? form.notify_daily_overdue),
    notify_amount_change: !!(form.notify_amount_change ?? true),
  };
  payload.enabled = payload.notifications_enabled;
  payload.notify_3d = payload.notify_3_day;
  payload.notify_1d = payload.notify_1_day;
  payload.notify_day_of = payload.notify_due;
  payload.notify_daily_overdue = payload.notify_overdue;
  return payload;
}

export function NotificationPreferences({ settings }) {
  const [form, setForm] = useState(settings);

  // Auto-save: toggles persist almost instantly, the email field debounces so
  // we never save a half-typed address. Local form stays the source of truth —
  // no parent refresh that could clobber in-flight edits.
  const { status, schedule, flush } = useAutoSave(
    (payload) => api.updateProfileSettings(payload).catch((err) => {
      toast.error(err.message || 'Failed to save notification preferences.');
      throw err;
    }),
  );

  const set = (k, v, delay) => setForm(prev => {
    const next = { ...prev, [k]: v };
    schedule(buildNotificationPayload(next), delay);
    return next;
  });

  const payload = buildNotificationPayload(form);

  return (
    <SectionCard
      title="Notification Preferences"
      icon={Mail}
      subtitle="Manage email reminders for your bills. Changes save automatically."
      action={<SaveStatus status={status} />}
    >
      <div className="px-6 py-5 space-y-4">
        <div className="space-y-1.5 max-w-md">
          <label htmlFor="profile-email" className="text-xs font-medium text-muted-foreground">Email</label>
          <Input
            id="profile-email"
            type="email"
            value={payload.email}
            onChange={e => set('email', e.target.value, 900)}
            onBlur={flush}
            placeholder="you@example.com"
          />
        </div>
        <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
          <CheckRow id="n-enabled" label="Notifications enabled" checked={payload.notifications_enabled} onChange={v => set('notifications_enabled', v)} />
          <CheckRow id="n-3" label="Notify 3 days before" checked={payload.notify_3_day} onChange={v => set('notify_3_day', v)} disabled={!payload.notifications_enabled} />
          <CheckRow id="n-1" label="Notify 1 day before" checked={payload.notify_1_day} onChange={v => set('notify_1_day', v)} disabled={!payload.notifications_enabled} />
          <CheckRow id="n-due" label="Notify due date" checked={payload.notify_due} onChange={v => set('notify_due', v)} disabled={!payload.notifications_enabled} />
          <CheckRow id="n-overdue" label="Notify overdue" checked={payload.notify_overdue} onChange={v => set('notify_overdue', v)} disabled={!payload.notifications_enabled} />
          <CheckRow id="n-amount" label="Notify on price changes" checked={payload.notify_amount_change} onChange={v => set('notify_amount_change', v)} disabled={!payload.notifications_enabled} />
        </div>
      </div>
    </SectionCard>
  );
}

const PUSH_CHANNELS = [
  { value: 'ntfy',     label: 'ntfy',     urlLabel: 'Topic URL',      urlHint: 'https://pulse.scheller.ltd/bills',      tokenLabel: 'Access token (optional)' },
  { value: 'gotify',   label: 'Gotify',   urlLabel: 'Server URL',     urlHint: 'http://192.168.1.11:8077',              tokenLabel: 'App token' },
  { value: 'discord',  label: 'Discord',  urlLabel: 'Webhook URL',    urlHint: 'https://discord.com/api/webhooks/…',    tokenLabel: null },
  { value: 'telegram', label: 'Telegram', urlLabel: 'Server URL / n/a', urlHint: 'Leave blank for api.telegram.org', tokenLabel: 'Bot token', chatIdLabel: 'Chat ID' },
];

// Exported: rendered on the Settings page ("Notifications" section).
export function PushNotifications({ settings, onSaved }) {
  const [enabled,  setEnabled]  = useState(!!settings.notify_push_enabled);
  const [channel,  setChannel]  = useState(settings.push_channel || 'ntfy');
  const [url,      setUrl]      = useState(settings.push_url || '');
  const [token,    setToken]    = useState('');          // never pre-filled for security
  const [chatId,   setChatId]   = useState(settings.push_chat_id || '');
  const [tokenSet, setTokenSet] = useState(!!settings.push_token_set);
  const [saving,   setSaving]   = useState(false);
  const [testing,  setTesting]  = useState(false);

  const ch = PUSH_CHANNELS.find(c => c.value === channel) || PUSH_CHANNELS[0];

  // Auto-save. Toggle/channel persist immediately; URL and chat ID debounce.
  // The token is deliberately NOT auto-saved while typing — a half-typed token
  // must never overwrite a working one. It saves on blur, when complete.
  const buildPatch = (over = {}) => {
    const s = { enabled, channel, url, chatId, ...over };
    return {
      notify_push_enabled: s.enabled,
      push_channel: s.channel,
      push_url: (s.url || '').trim() || null,
      push_chat_id: (s.chatId || '').trim() || null,
    };
  };

  const { status, schedule, flush } = useAutoSave(
    (patch) => api.updateProfileSettings(patch).catch((err) => {
      toast.error(err.message || 'Failed to save push settings.');
      throw err;
    }),
  );

  const saveToken = async () => {
    const t = token.trim();
    if (!t) return;
    setSaving(true);
    try {
      await api.updateProfileSettings({ ...buildPatch(), push_token: t });
      setTokenSet(true);
      setToken('');
      toast.success('Token saved.');
    } catch (err) {
      toast.error(err.message || 'Failed to save token.');
    } finally {
      setSaving(false);
    }
  };

  const test = async () => {
    setTesting(true);
    try {
      await api.testPushNotification();
      toast.success('Test notification sent — check your device.');
    } catch (err) {
      toast.error(err.message || 'Test failed. Check your channel settings.');
    } finally {
      setTesting(false);
    }
  };

  return (
    <SectionCard
      title="Push Notifications"
      icon={Bell}
      subtitle="Get bill reminders on your phone via ntfy, Gotify, Discord, or Telegram. Changes save automatically."
      action={<SaveStatus status={status} />}
    >
      <div className="px-6 py-5 space-y-5">

        {/* Master toggle — same CheckRow pattern as the email section */}
        <CheckRow
          id="push-enabled"
          label="Enable push notifications"
          checked={enabled}
          onChange={(v) => { setEnabled(v); schedule(buildPatch({ enabled: v }), 150); }}
        />
        {enabled && (
          <p className="text-xs text-muted-foreground -mt-3 pl-1">
            Sent at 6 AM alongside email reminders. Use the test button below to verify immediately.
          </p>
        )}

        {enabled && (
          <>
            {/* Channel picker */}
            <div className="space-y-1.5">
              <label className="text-xs font-medium text-muted-foreground">Channel</label>
              <div className="flex flex-wrap gap-2">
                {PUSH_CHANNELS.map(c => (
                  <button
                    key={c.value}
                    type="button"
                    onClick={() => { setChannel(c.value); schedule(buildPatch({ channel: c.value }), 150); }}
                    className={`rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors ${
                      channel === c.value
                        ? 'border-primary bg-primary text-primary-foreground'
                        : 'border-border bg-background hover:bg-muted text-foreground'
                    }`}
                  >
                    {c.label}
                  </button>
                ))}
              </div>
            </div>

            {/* Channel-specific inputs */}
            <div className="space-y-3 max-w-md">
              <div className="space-y-1.5">
                <label className="text-xs font-medium text-muted-foreground">{ch.urlLabel}</label>
                <Input
                  value={url}
                  onChange={e => { setUrl(e.target.value); schedule(buildPatch({ url: e.target.value }), 900); }}
                  onBlur={flush}
                  placeholder={ch.urlHint}
                  autoComplete="off"
                />
              </div>

              {ch.tokenLabel && (
                <div className="space-y-1.5">
                  <label className="text-xs font-medium text-muted-foreground">
                    {ch.tokenLabel}
                    {tokenSet && !token && (
                      <span className="ml-2 text-emerald-600 dark:text-emerald-400">✓ saved</span>
                    )}
                  </label>
                  <Input
                    value={token}
                    onChange={e => setToken(e.target.value)}
                    onBlur={saveToken}
                    placeholder={tokenSet ? '(leave blank to keep saved token)' : 'Enter token — saves when you click away'}
                    type="password"
                    autoComplete="off"
                  />
                </div>
              )}

              {ch.chatIdLabel && (
                <div className="space-y-1.5">
                  <label className="text-xs font-medium text-muted-foreground">{ch.chatIdLabel}</label>
                  <Input
                    value={chatId}
                    onChange={e => { setChatId(e.target.value); schedule(buildPatch({ chatId: e.target.value }), 900); }}
                    onBlur={flush}
                    placeholder="e.g. 123456789"
                    autoComplete="off"
                  />
                  <p className="text-[11px] text-muted-foreground">
                    Send /start to your bot, then visit{' '}
                    <code className="rounded bg-muted px-1 py-0.5">api.telegram.org/bot{'<token>'}/getUpdates</code>
                    {' '}to find your chat ID.
                  </p>
                </div>
              )}
            </div>

            {/* Channel hints */}
            {channel === 'ntfy' && (
              <p className="text-[11px] text-muted-foreground">
                Your ntfy server is running at{' '}
                <code className="rounded bg-muted px-1 py-0.5">pulse.scheller.ltd</code>.
                Set the topic URL to{' '}
                <code className="rounded bg-muted px-1 py-0.5">https://pulse.scheller.ltd/your-topic</code>.
              </p>
            )}
            {channel === 'gotify' && (
              <p className="text-[11px] text-muted-foreground">
                Your Gotify server is at{' '}
                <code className="rounded bg-muted px-1 py-0.5">notify.originalsinners.org</code>.
                Create an app in Gotify and paste the app token above.
              </p>
            )}
          </>
        )}
      </div>

      <div className="px-6 py-4 border-t border-border/50 flex items-center gap-3">
        <Button
          type="button"
          variant="outline"
          size="sm"
          onClick={test}
          disabled={testing || saving || !enabled || !url.trim()}
          className="gap-1.5"
        >
          {testing
            ? <><Loader2 className="h-3.5 w-3.5 animate-spin" />Sending…</>
            : <><SendHorizontal className="h-3.5 w-3.5" />Send test</>}
        </Button>
        <p className="text-[11px] text-muted-foreground">Settings save as you change them.</p>
      </div>
    </SectionCard>
  );
}

function ChangePassword() {
  const [currentPassword, setCurrentPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [saving, setSaving] = useState(false);

  const reset = () => {
    setCurrentPassword('');
    setNewPassword('');
    setConfirmPassword('');
  };

  const submit = async (e) => {
    e.preventDefault();
    if (!currentPassword || !newPassword || !confirmPassword) {
      toast.error('All password fields are required.');
      return;
    }
    if (newPassword !== confirmPassword) {
      toast.error('New passwords do not match.');
      return;
    }
    setSaving(true);
    try {
      await api.changeProfilePassword({
        current_password: currentPassword,
        new_password: newPassword,
        confirm_new_password: confirmPassword,
      });
      reset();
      toast.success('Password changed.');
    } catch (err) {
      toast.error(err.message || 'Failed to change password.');
    } finally {
      setSaving(false);
    }
  };

  return (
    <>
    <TotpSection />
    <SectionCard title="Change Password" icon={KeyRound} subtitle="Update your password without exposing it in logs or page state beyond this form.">
      <form onSubmit={submit} className="px-6 py-5 grid gap-4 lg:grid-cols-3">
        <div className="space-y-1.5">
          <label htmlFor="current-password" className="text-xs font-medium text-muted-foreground">Current password</label>
          <Input id="current-password" type="password" autoComplete="current-password" value={currentPassword} onChange={e => setCurrentPassword(e.target.value)} />
        </div>
        <div className="space-y-1.5">
          <label htmlFor="new-password" className="text-xs font-medium text-muted-foreground">New password</label>
          <Input id="new-password" type="password" autoComplete="new-password" value={newPassword} onChange={e => setNewPassword(e.target.value)} />
        </div>
        <div className="space-y-1.5">
          <label htmlFor="confirm-password" className="text-xs font-medium text-muted-foreground">Confirm new password</label>
          <Input id="confirm-password" type="password" autoComplete="new-password" value={confirmPassword} onChange={e => setConfirmPassword(e.target.value)} />
        </div>
        <Button type="submit" disabled={saving} className="lg:col-start-3">
          {saving ? <><Loader2 className="h-4 w-4 mr-2 animate-spin" />Saving…</> : 'Change Password'}
        </Button>
      </form>
    </SectionCard>
    </>
  );
}

function CopyButton({ text }) {
  const [copied, setCopied] = useState(false);
  const copy = () => {
    navigator.clipboard.writeText(text).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    });
  };
  return (
    <button type="button" onClick={copy} className="ml-1.5 inline-flex items-center text-muted-foreground hover:text-foreground transition-colors">
      {copied ? <Check className="h-3.5 w-3.5 text-emerald-500" /> : <Copy className="h-3.5 w-3.5" />}
    </button>
  );
}

function TotpSection() {
  const { singleUserMode } = useAuth();
  const [enabled, setEnabled] = useState(null); // null = loading
  const [step, setStep] = useState('idle'); // idle | setup | confirm | recovery | disable
  const [setupData, setSetupData] = useState(null); // { secret, qr_data_url }
  const [code, setCode] = useState('');
  const [recoveryCodes, setRecoveryCodes] = useState([]);
  const [saving, setSaving] = useState(false);

  const load = useCallback(() => {
    if (singleUserMode) return;
    api.totpStatus()
      .then(d => setEnabled(d.enabled))
      .catch(() => setEnabled(false));
  }, [singleUserMode]);

  useEffect(() => { load(); }, [load]);

  if (singleUserMode) return null;
  if (enabled === null) return null;

  const startSetup = async () => {
    setSaving(true);
    try {
      const d = await api.totpSetup();
      setSetupData(d);
      setCode('');
      setStep('setup');
    } catch (err) {
      toast.error(err.message || 'Failed to generate setup data.');
    } finally {
      setSaving(false);
    }
  };

  const confirmEnable = async (e) => {
    e.preventDefault();
    setSaving(true);
    try {
      const d = await api.totpEnable({ secret: setupData.secret, code });
      setRecoveryCodes(d.recovery_codes);
      setEnabled(true);
      setStep('recovery');
    } catch (err) {
      toast.error(err.message || 'Invalid code. Try again.');
    } finally {
      setSaving(false);
    }
  };

  const confirmDisable = async (e) => {
    e.preventDefault();
    setSaving(true);
    try {
      await api.totpDisable({ code });
      setEnabled(false);
      setStep('idle');
      setCode('');
      toast.success('Authenticator app removed.');
    } catch (err) {
      toast.error(err.message || 'Invalid code.');
    } finally {
      setSaving(false);
    }
  };

  return (
    <SectionCard title="Two-Factor Authentication" icon={ScanLine} subtitle="Require an authenticator app code on every sign-in.">
      <div className="px-6 py-5 space-y-5">

        {/* Idle — enabled status */}
        {step === 'idle' && (
          <div className="flex items-center justify-between gap-4">
            <div className="flex items-center gap-3">
              <div className={`h-2.5 w-2.5 rounded-full ${enabled ? 'bg-emerald-500' : 'bg-muted-foreground/40'}`} />
              <span className="text-sm">{enabled ? 'Authenticator app is active' : 'Not configured'}</span>
            </div>
            {enabled
              ? <Button variant="outline" size="sm" onClick={() => { setCode(''); setStep('disable'); }}>Remove</Button>
              : <Button size="sm" onClick={startSetup} disabled={saving}>{saving ? 'Loading…' : 'Set up'}</Button>
            }
          </div>
        )}

        {/* Setup — show QR code */}
        {step === 'setup' && setupData && (
          <div className="space-y-5">
            <p className="text-sm text-muted-foreground">
              Scan the QR code with Google Authenticator, Authy, 1Password, Bitwarden, or any TOTP app. Then enter the 6-digit code to confirm.
            </p>
            <div className="flex flex-col sm:flex-row gap-6 items-start">
              <img src={setupData.qr_data_url} alt="TOTP QR code" className="rounded-lg border border-border/60 w-40 h-40 shrink-0" />
              <div className="space-y-3 min-w-0">
                <p className="text-xs text-muted-foreground">Can't scan? Enter this key manually:</p>
                <div className="flex items-center gap-1 font-mono text-sm bg-muted/30 border border-border/60 rounded px-3 py-2 break-all">
                  {setupData.secret}
                  <CopyButton text={setupData.secret} />
                </div>
                <form onSubmit={confirmEnable} className="space-y-3 pt-1">
                  <Input
                    value={code}
                    onChange={e => setCode(e.target.value)}
                    placeholder="000 000"
                    autoComplete="one-time-code"
                    maxLength={7}
                    className="text-center tracking-widest font-mono text-lg max-w-[140px]"
                    autoFocus
                    required
                  />
                  <div className="flex gap-2">
                    <Button type="submit" size="sm" disabled={saving || !code.trim()}>{saving ? 'Verifying…' : 'Confirm & Enable'}</Button>
                    <Button type="button" variant="ghost" size="sm" onClick={() => { setStep('idle'); setSetupData(null); }}>Cancel</Button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        )}

        {/* Recovery codes — shown once after enabling */}
        {step === 'recovery' && (
          <div className="space-y-4">
            <div className="flex items-start gap-3 rounded-lg border border-amber-500/30 bg-amber-500/10 px-4 py-3">
              <TriangleAlert className="h-4 w-4 text-amber-500 shrink-0 mt-0.5" />
              <p className="text-sm text-amber-600 dark:text-amber-400">
                Save these recovery codes somewhere safe. Each code works once. If you lose your phone, use one of these to sign in.
              </p>
            </div>
            <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
              {recoveryCodes.map(c => (
                <div key={c} className="flex items-center justify-between gap-1 font-mono text-xs bg-muted/30 border border-border/60 rounded px-2.5 py-1.5">
                  {c} <CopyButton text={c} />
                </div>
              ))}
            </div>
            <Button size="sm" onClick={() => { setStep('idle'); setRecoveryCodes([]); }}>Done — I've saved these</Button>
          </div>
        )}

        {/* Disable — requires TOTP code */}
        {step === 'disable' && (
          <div className="space-y-4">
            <p className="text-sm text-muted-foreground">Enter the current code from your authenticator app to remove 2FA.</p>
            <form onSubmit={confirmDisable} className="flex items-end gap-3">
              <div className="space-y-1.5">
                <label className="text-xs font-medium text-muted-foreground">Authenticator code</label>
                <Input
                  value={code}
                  onChange={e => setCode(e.target.value)}
                  placeholder="000 000"
                  autoComplete="one-time-code"
                  maxLength={7}
                  className="text-center tracking-widest font-mono text-lg max-w-[140px]"
                  autoFocus
                  required
                />
              </div>
              <Button type="submit" variant="destructive" size="sm" disabled={saving || !code.trim()}>{saving ? 'Removing…' : 'Remove 2FA'}</Button>
              <Button type="button" variant="ghost" size="sm" onClick={() => { setStep('idle'); setCode(''); }}>Cancel</Button>
            </form>
          </div>
        )}
      </div>
    </SectionCard>
  );
}

function PrivacySettings({ settings, onSaved }) {
  const [geoEnabled, setGeoEnabled] = useState(!!settings.geolocation_enabled);
  const [saving, setSaving] = useState(false);

  useEffect(() => { setGeoEnabled(!!settings.geolocation_enabled); }, [settings.geolocation_enabled]);

  const save = async () => {
    setSaving(true);
    try {
      await api.updateProfileSettings({ geolocation_enabled: geoEnabled });
      toast.success('Privacy settings saved.');
      onSaved({ ...settings, geolocation_enabled: geoEnabled });
    } catch (err) {
      toast.error(err.message || 'Failed to save privacy settings.');
    } finally {
      setSaving(false);
    }
  };

  const changed = geoEnabled !== !!settings.geolocation_enabled;

  return (
    <SectionCard title="Privacy" icon={Lock} subtitle="Control what login data is collected about you.">
      <div className="px-6 py-5 space-y-4">
        <CheckRow
          id="geo-enabled"
          label="Login geolocation"
          checked={geoEnabled}
          onChange={setGeoEnabled}
        />
        <p className="text-xs text-muted-foreground">
          When on, your login IP is resolved to a city/region via{' '}
          <span className="font-mono text-[11px]">ip-api.com</span> over plain HTTP.
          Location data is encrypted at rest and visible only to you. Turn off to keep
          all login data on-device.
        </p>
      </div>
      <div className="px-6 py-4 border-t border-border/50 flex justify-end">
        <Button onClick={save} disabled={saving || !changed}>
          {saving ? <><Loader2 className="h-4 w-4 mr-2 animate-spin" />Saving…</> : 'Save Privacy Settings'}
        </Button>
      </div>
    </SectionCard>
  );
}

function ProfileNav() {
  const items = [
    ['#account', 'Account'],
    ['#security', 'Security'],
    ['#privacy', 'Privacy'],
  ];
  return (
    <div className="mb-6 flex flex-wrap gap-2">
      {items.map(([href, label]) => (
        <a
          key={href}
          href={href}
          className="rounded-md border border-border bg-card px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors"
        >
          {label}
        </a>
      ))}
    </div>
  );
}

export default function ProfilePage() {
  const { setUser, refresh } = useAuth();
  const [profile, setProfile] = useState({});
  const [settings, setSettings] = useState({});
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let mounted = true;
    Promise.all([
      api.profile(),
      api.profileSettings(),
    ])
      .then(([profileData, settingsData]) => {
        if (!mounted) return;
        setProfile(asProfile(profileData));
        setSettings(asSettings(settingsData));
      })
      .catch(err => toast.error(err.message || 'Failed to load profile.'))
      .finally(() => mounted && setLoading(false));

    return () => { mounted = false; };
  }, []);

  const handleProfileSaved = (nextProfile) => {
    setProfile(prev => ({ ...prev, ...nextProfile }));
    setUser(prev => prev ? { ...prev, ...nextProfile } : prev);
    refresh();
  };

  return (
    <div className="mx-auto w-full max-w-5xl">
      <div className="mb-6 flex items-start justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Profile</h1>
          <p className="text-sm text-muted-foreground mt-0.5">Manage your account, security, and privacy. Notification preferences live in Settings.</p>
        </div>
        <div className="hidden sm:flex items-center gap-2 rounded-full border border-border bg-muted/30 px-3 py-1.5 text-xs text-muted-foreground">
          <ShieldCheck className="h-3.5 w-3.5 text-emerald-500" />
          User-owned data only
        </div>
      </div>

      <ProfileNav />

      <div className="space-y-5">
        <div id="account" className="scroll-mt-6 space-y-6">
          <ProfileSummary profile={profile} loading={loading} />
          {!loading && <EditProfile profile={profile} onSaved={handleProfileSaved} />}
        </div>
        <div id="security" className="scroll-mt-6">
          <ChangePassword />
        </div>
        {/* Notification preferences moved to Settings → Notifications */}
        <div id="privacy" className="scroll-mt-6">
          {!loading && <PrivacySettings settings={settings} onSaved={setSettings} />}
        </div>
      </div>
    </div>
  );
}