BillTracker/client/pages/ProfilePage.jsx

import React, { useEffect, useState } from 'react';
import { toast } from 'sonner';
import {
  User, Mail, KeyRound, ShieldCheck, Loader2, History, Monitor, Smartphone, ChevronRight,
} from 'lucide-react';
import { api } from '@/api';
import { useAuth } from '@/hooks/useAuth';
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 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, 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>
      </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(() => setHistory([]))
      .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 3 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 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;
            return (
              <div key={entry.id}
                className="flex items-start gap-3 rounded-lg border border-border/50 bg-muted/20 px-4 py-3">
                <DeviceIcon className="h-4 w-4 mt-0.5 text-muted-foreground shrink-0" />
                <div className="min-w-0">
                  <p className="text-sm font-medium">
                    {formatDateTime(entry.logged_in_at)}
                    {i === 0 && (
                      <span className="ml-2 text-[10px] font-semibold uppercase tracking-wide text-emerald-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>
                    )}
                  </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 3 most recent sign-ins. 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 here. It is not shared with admins in the app UI.
        </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.ip_address && (
                <p className="mt-1 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(() => setLoginHistory([]))
      .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>
    );
  }

  const latestLogin = loginHistory[0] || 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={profile.display_name || profile.displayName} />
          <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(profile.display_name || profile.displayName || '');
  const [saving, setSaving] = useState(false);

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

  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>
  );
}

function NotificationPreferences({ settings, onSaved }) {
  const [form, setForm] = useState(settings);
  const [saving, setSaving] = useState(false);

  useEffect(() => setForm(settings), [settings]);
  const set = (k, v) => setForm(prev => ({ ...prev, [k]: v }));

  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),
  };
  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;

  const save = async () => {
    setSaving(true);
    try {
      const data = await api.updateProfileSettings(payload);
      toast.success('Notification preferences saved.');
      onSaved(asSettings(data));
    } catch (err) {
      toast.error(err.message || 'Failed to save notification preferences.');
    } finally {
      setSaving(false);
    }
  };

  return (
    <SectionCard title="Notification Preferences" icon={Mail} subtitle="Manage email reminders for your bills.">
      <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)} 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} />
        </div>
      </div>
      <div className="px-6 py-4 border-t border-border/50 flex justify-end">
        <Button onClick={save} disabled={saving}>
          {saving ? <><Loader2 className="h-4 w-4 mr-2 animate-spin" />Saving…</> : 'Save Preferences'}
        </Button>
      </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 (
    <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 ProfileNav() {
  const items = [
    ['#account', 'Account'],
    ['#security', 'Security'],
    ['#notifications', 'Notifications'],
  ];
  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, notification preferences, and password.</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>
        <div id="notifications" className="scroll-mt-6">
          {!loading && <NotificationPreferences settings={settings} onSaved={setSettings} />}
        </div>
      </div>
    </div>
  );
}