BillTracker/client/pages/SettingsPage.jsx

import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { toast } from 'sonner';
import { Sun, Moon, Users } from 'lucide-react';
import { api } from '@/api';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
  Select, SelectTrigger, SelectValue, SelectContent, SelectItem,
} from '@/components/ui/select';
import { useTheme } from '@/contexts/ThemeContext';
import { useAuth } from '@/hooks/useAuth';

// ─── Card wrapper ─────────────────────────────────────────────────────────────

function SectionCard({ title, children }) {
  return (
    <div className="table-surface mb-4">
      <div className="px-6 py-4 border-b border-border/50">
        <h2 className="text-xs font-bold uppercase tracking-widest text-muted-foreground">{title}</h2>
      </div>
      <div className="divide-y divide-border/50">
        {children}
      </div>
    </div>
  );
}

// ─── Setting Row ──────────────────────────────────────────────────────────────

function SettingRow({ label, description, children }) {
  return (
    <div className="px-6 py-4 flex items-center justify-between">
      <div className="flex-1 min-w-0 mr-8">
        <p className="text-sm font-medium">{label}</p>
        {description && (
          <p className="text-xs text-muted-foreground mt-0.5">{description}</p>
        )}
      </div>
      <div className="shrink-0">
        {children}
      </div>
    </div>
  );
}

// ─── Theme Card ───────────────────────────────────────────────────────────────

function ThemeCard({ value, label, icon: Icon, currentTheme, onSelect }) {
  const selected = currentTheme === value;
  return (
    <button
      type="button"
      onClick={() => onSelect(value)}
      className={cn(
        'flex flex-col items-center gap-1.5 rounded-lg border px-3 py-2.5 text-xs font-medium transition-all',
        'hover:border-muted-foreground/50',
        selected
          ? 'border-primary bg-primary/5 text-primary'
          : 'border-border bg-card text-muted-foreground',
      )}
    >
      <Icon className="h-4 w-4" />
      <span>{label}</span>
    </button>
  );
}

// ─── Appearance Section ───────────────────────────────────────────────────────

function AppearanceSection() {
  const { theme, setTheme } = useTheme();

  return (
    <SectionCard title="Appearance">
      <SettingRow label="Theme" description="Choose your preferred color scheme.">
        <div className="flex gap-2">
          <ThemeCard value="light" label="Light" icon={Sun} currentTheme={theme} onSelect={setTheme} />
          <ThemeCard value="dark"  label="Dark"  icon={Moon} currentTheme={theme} onSelect={setTheme} />
        </div>
      </SettingRow>
    </SectionCard>
  );
}

function LoginModeRecoverySection() {
  const navigate = useNavigate();
  const { singleUserMode, refresh } = useAuth();
  const [restoring, setRestoring] = useState(false);

  if (!singleUserMode) return null;

  const handleRestore = async () => {
    setRestoring(true);
    try {
      await api.restoreMultiUserMode();
      toast.success('Multi-user login restored.');
      refresh();
      navigate('/login', { replace: true });
    } catch (err) {
      toast.error(err.message || 'Failed to restore multi-user mode.');
    } finally {
      setRestoring(false);
    }
  };

  return (
    <SectionCard title="Login Mode">
      <SettingRow
        label="Single-user mode is active"
        description="Restore the normal login screen so each user signs in with their own account."
      >
        <Button size="sm" variant="outline" onClick={handleRestore} disabled={restoring}>
          <Users className="h-3.5 w-3.5 mr-1.5" />
          {restoring ? 'Restoring…' : 'Restore Multi-User Mode'}
        </Button>
      </SettingRow>
    </SectionCard>
  );
}

// ─── SettingsPage ─────────────────────────────────────────────────────────────

export default function SettingsPage() {
  const DEFAULTS = {
    currency:              'USD',
    date_format:           'MM/DD/YYYY',
    grace_period_days:     3,
  };

  const [settings, setSettings] = useState(DEFAULTS);
  const [loading, setLoading]   = useState(true);
  const [saving, setSaving]     = useState(false);

  useEffect(() => {
    api.settings()
      .then((d) => setSettings({ ...DEFAULTS, ...d }))
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  const set = (k, v) => setSettings((p) => ({ ...p, [k]: v }));

  const handleSave = async () => {
    setSaving(true);
    try {
      await api.saveSettings({
        currency: settings.currency,
        date_format: settings.date_format,
        grace_period_days: settings.grace_period_days,
      });
      toast.success('Settings saved.');
    } catch (err) {
      toast.error(err.message || 'Failed to save settings.');
    } finally {
      setSaving(false);
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center py-24 text-muted-foreground text-sm">
        Loading…
      </div>
    );
  }

  return (
    <div>

      {/* Page header — flat on background */}
      <div className="mb-8">
        <h1 className="text-2xl font-bold tracking-tight">Settings</h1>
        <p className="text-sm text-muted-foreground mt-0.5">Manage app-level display and billing preferences</p>
      </div>

      {/* Appearance */}
      <AppearanceSection />

      {/* Login mode recovery */}
      <LoginModeRecoverySection />

      {/* General */}
      <SectionCard title="General">
        <SettingRow label="Currency" description="Default currency for bill amounts.">
          <Select value={settings.currency} onValueChange={(v) => set('currency', v)}>
            <SelectTrigger className="w-48">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="USD">USD — US Dollar</SelectItem>
              <SelectItem value="EUR">EUR — Euro</SelectItem>
              <SelectItem value="GBP">GBP — British Pound</SelectItem>
              <SelectItem value="CAD">CAD — Canadian Dollar</SelectItem>
            </SelectContent>
          </Select>
        </SettingRow>

        <SettingRow label="Date format" description="How dates are displayed throughout the app.">
          <Select value={settings.date_format} onValueChange={(v) => set('date_format', v)}>
            <SelectTrigger className="w-48">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="MM/DD/YYYY">MM/DD/YYYY</SelectItem>
              <SelectItem value="DD/MM/YYYY">DD/MM/YYYY</SelectItem>
              <SelectItem value="YYYY-MM-DD">YYYY-MM-DD</SelectItem>
            </SelectContent>
          </Select>
        </SettingRow>
      </SectionCard>

      {/* Billing Behavior */}
      <SectionCard title="Billing Behavior">
        <SettingRow
          label="Grace period"
          description="Days after the due date before a bill is marked overdue."
        >
          <div className="flex items-center gap-2">
            <Input
              type="number"
              min={0}
              max={30}
              value={settings.grace_period_days}
              onChange={(e) => set('grace_period_days', parseInt(e.target.value, 10) || 0)}
              className="w-20"
            />
            <span className="text-sm text-muted-foreground">days</span>
          </div>
        </SettingRow>
      </SectionCard>

      {/* Save button — right-aligned below all cards */}
      <div className="flex justify-end mt-6">
        <Button size="sm" onClick={handleSave} disabled={saving}>
          {saving ? 'Saving…' : 'Save Settings'}
        </Button>
      </div>

    </div>
  );
}