import React, { useEffect, useState, useCallback, useMemo, useRef } from 'react';
import { useSearchParams } from 'react-router-dom';
import { Plus, ChevronRight, SlidersHorizontal, Search, Trash2, X } from 'lucide-react';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

import {
  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter,
} from '@/components/ui/dialog';
import {
  AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle,
  AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction,
} from '@/components/ui/alert-dialog';
import {
  Select, SelectTrigger, SelectValue, SelectContent, SelectItem,
} from '@/components/ui/select';
import { api } from '@/api';
import { cn } from '@/lib/utils';
import BillsTableInner from '@/components/BillsTableInner';
import BillModal from '@/components/BillModal';
import { makeBillDraft } from '@/lib/billDrafts';

const VISIBILITY_OPTIONS = [
  { value: 'default', label: 'Default', description: 'Use the app default behavior for inactive bill history.' },
  { value: 'all',     label: 'Show all history', description: 'Show all historical tracker data for this inactive bill.' },
  { value: 'none',    label: 'Show no history', description: 'Hide historical tracker data for this inactive bill.' },
  { value: 'ranges',  label: 'Show only selected date ranges', description: 'Show history only for the ranges listed below.' },
];
const MONTH_OPTIONS = [
  ['1', 'Jan'], ['2', 'Feb'], ['3', 'Mar'], ['4', 'Apr'], ['5', 'May'], ['6', 'Jun'],
  ['7', 'Jul'], ['8', 'Aug'], ['9', 'Sep'], ['10', 'Oct'], ['11', 'Nov'], ['12', 'Dec'],
];
const FILTER_ALL = 'all';

const BUILT_IN_TEMPLATES = [
  {
    id: 'builtin-utility',
    name: 'Utility',
    data: {
      name: 'Utility Bill',
      due_day: 15,
      expected_amount: 0,
      billing_cycle: 'monthly',
      cycle_type: 'monthly',
      cycle_day: '1',
      autopay_enabled: false,
      autodraft_status: 'none',
      has_2fa: false,
      notes: 'Utility service bill',
    },
    categoryKeywords: ['utility', 'utilities', 'electric', 'water'],
  },
  {
    id: 'builtin-credit-card',
    name: 'Credit Card',
    data: {
      name: 'Credit Card',
      due_day: 20,
      expected_amount: 0,
      billing_cycle: 'monthly',
      cycle_type: 'monthly',
      cycle_day: '1',
      autopay_enabled: false,
      autodraft_status: 'none',
      has_2fa: true,
      current_balance: 0,
      minimum_payment: 0,
      interest_rate: 0,
      snowball_include: true,
      notes: 'Credit card minimum payment',
    },
    categoryKeywords: ['credit card', 'credit cards', 'debt'],
  },
  {
    id: 'builtin-subscription',
    name: 'Subscription',
    data: {
      name: 'Subscription',
      due_day: 1,
      expected_amount: 0,
      billing_cycle: 'monthly',
      cycle_type: 'monthly',
      cycle_day: '1',
      autopay_enabled: true,
      autodraft_status: 'assumed_paid',
      has_2fa: false,
      notes: 'Recurring subscription',
    },
    categoryKeywords: ['subscription', 'subscriptions', 'entertainment'],
  },
  {
    id: 'builtin-loan',
    name: 'Loan',
    data: {
      name: 'Loan Payment',
      due_day: 1,
      expected_amount: 0,
      billing_cycle: 'monthly',
      cycle_type: 'monthly',
      cycle_day: '1',
      autopay_enabled: false,
      autodraft_status: 'none',
      has_2fa: false,
      current_balance: 0,
      minimum_payment: 0,
      interest_rate: 0,
      snowball_include: true,
      notes: 'Installment loan payment',
    },
    categoryKeywords: ['loan', 'loans', 'debt'],
  },
];

// BillModal is imported from @/components/BillModal

function blankRange() {
  const year = String(new Date().getFullYear());
  return {
    _key: `new-${Date.now()}-${Math.random().toString(16).slice(2)}`,
    start_year: year,
    start_month: String(new Date().getMonth() + 1),
    end_year: '',
    end_month: '',
    label: '',
  };
}

function normalizeRange(range) {
  return {
    ...range,
    _key: range._key || String(range.id),
    start_year: String(range.start_year ?? ''),
    start_month: String(range.start_month ?? ''),
    end_year: range.end_year == null ? '' : String(range.end_year),
    end_month: range.end_month == null ? '' : String(range.end_month),
    label: range.label || '',
  };
}

function rangePayload(range) {
  return {
    start_year: parseInt(range.start_year, 10),
    start_month: parseInt(range.start_month, 10),
    end_year: range.end_year ? parseInt(range.end_year, 10) : null,
    end_month: range.end_month ? parseInt(range.end_month, 10) : null,
    label: range.label?.trim() || null,
  };
}

function validateRange(range) {
  const payload = rangePayload(range);
  if (!Number.isInteger(payload.start_year) || payload.start_year < 2000 || payload.start_year > 2100) {
    return 'Start year must be between 2000 and 2100.';
  }
  if (!Number.isInteger(payload.start_month) || payload.start_month < 1 || payload.start_month > 12) {
    return 'Start month must be between 1 and 12.';
  }
  if ((payload.end_year == null) !== (payload.end_month == null)) {
    return 'End year and end month must both be provided or both left blank.';
  }
  if (payload.end_year != null) {
    if (payload.end_year < 2000 || payload.end_year > 2100) {
      return 'End year must be between 2000 and 2100.';
    }
    if (payload.end_month < 1 || payload.end_month > 12) {
      return 'End month must be between 1 and 12.';
    }
    if ((payload.end_year * 12 + payload.end_month) < (payload.start_year * 12 + payload.start_month)) {
      return 'Range end must be on or after the start.';
    }
  }
  return null;
}

// ── Display preferences ───────────────────────────────────────────────────────

const PREFS_KEY = 'bills-display-prefs-v1';

const PREFS_DEFAULTS = {
  showCategory:   true,
  showDueDay:     true,
  showAmount:     true,
  showCycle:      true,
  showApr:        true,
  showBalance:    true,
  showMinPayment: true,
  showAutopay:    true,
  show2fa:        true,
};

const PREFS_LABELS = [
  ['showCategory',   'Category'],
  ['showDueDay',     'Due day'],
  ['showAmount',     'Amount'],
  ['showCycle',      'Billing cycle'],
  ['showApr',        'APR'],
  ['showBalance',    'Balance'],
  ['showMinPayment', 'Min payment'],
  ['showAutopay',    'Autopay badge'],
  ['show2fa',        '2FA badge'],
];

function useDisplayPrefs() {
  const [prefs, setPrefs] = useState(() => {
    try {
      const raw = localStorage.getItem(PREFS_KEY);
      return raw ? { ...PREFS_DEFAULTS, ...JSON.parse(raw) } : PREFS_DEFAULTS;
    } catch {
      return PREFS_DEFAULTS;
    }
  });

  const toggle = (key) => {
    setPrefs(prev => {
      const next = { ...prev, [key]: !prev[key] };
      try { localStorage.setItem(PREFS_KEY, JSON.stringify(next)); } catch {}
      return next;
    });
  };

  return { prefs, toggle };
}

function DisplayPrefsPanel({ prefs, onToggle }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    if (!open) return;
    const handler = (e) => {
      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, [open]);

  return (
    <div className="relative" ref={ref}>
      <button
        type="button"
        onClick={() => setOpen(v => !v)}
        className={cn(
          'h-9 px-3 rounded-md border border-border/70 bg-card/80 text-xs font-medium',
          'flex items-center gap-2 transition-colors',
          open
            ? 'bg-accent text-foreground'
            : 'text-muted-foreground hover:bg-accent hover:text-foreground',
        )}
        aria-label="Display options"
      >
        <SlidersHorizontal className="h-3.5 w-3.5" />
        <span className="hidden sm:inline">Columns</span>
      </button>

      {open && (
        <div className="absolute right-0 top-full mt-1 z-50 w-48 rounded-xl border border-border/60 bg-card/95 backdrop-blur-xl shadow-xl p-3 space-y-0.5">
          <p className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground px-1 pb-1.5">
            Display options
          </p>
          {PREFS_LABELS.map(([key, label]) => (
            <label
              key={key}
              className="flex items-center gap-2.5 rounded-md px-1.5 py-1.5 text-sm cursor-pointer hover:bg-accent/50 transition-colors"
            >
              <input
                type="checkbox"
                checked={!!prefs[key]}
                onChange={() => onToggle(key)}
                className="h-3.5 w-3.5 rounded border-border accent-primary"
              />
              <span className={cn('text-xs', prefs[key] ? 'text-foreground' : 'text-muted-foreground/60')}>
                {label}
              </span>
            </label>
          ))}
        </div>
      )}
    </div>
  );
}

function amountSearchText(...values) {
  return values
    .filter(value => value !== null && value !== undefined && Number.isFinite(Number(value)))
    .flatMap(value => {
      const num = Number(value);
      return [String(num), num.toFixed(2), `$${num.toFixed(2)}`];
    })
    .join(' ');
}

function billIsDebt(bill) {
  const category = String(bill.category_name || '').toLowerCase();
  return Number(bill.current_balance) > 0
    || bill.minimum_payment != null
    || ['credit card', 'credit cards', 'loan', 'loans', 'debt', 'mortgage'].some(token => category.includes(token));
}

function FilterChip({ active, children, onClick }) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={cn(
        'h-8 rounded-full border px-3 text-xs font-medium transition-colors',
        active
          ? 'border-primary/50 bg-primary/15 text-primary'
          : 'border-border/70 bg-card/70 text-muted-foreground hover:bg-accent hover:text-foreground',
      )}
    >
      {children}
    </button>
  );
}

// ─────────────────────────────────────────────────────────────────────────────

function HistoryVisibilityDialog({ bill, onClose, onSaved }) {
  const [visibility, setVisibility] = useState(bill?.history_visibility || 'default');
  const [ranges, setRanges] = useState([]);
  const [deletedIds, setDeletedIds] = useState([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    let mounted = true;
    setLoading(true);
    api.billHistoryRanges(bill.id)
      .then(data => {
        if (!mounted) return;
        setVisibility(data.history_visibility || bill.history_visibility || 'default');
        setRanges((data.ranges || []).map(normalizeRange));
      })
      .catch(err => {
        toast.error(err.message || 'Failed to load history visibility.');
        onClose();
      })
      .finally(() => mounted && setLoading(false));
    return () => { mounted = false; };
  }, [bill, onClose]);

  const updateRange = (key, patch) => {
    setRanges(prev => prev.map(r => r._key === key ? { ...r, ...patch } : r));
  };

  const deleteRange = (range) => {
    if (range.id) setDeletedIds(prev => [...prev, range.id]);
    setRanges(prev => prev.filter(r => r._key !== range._key));
  };

  const save = async () => {
    if (visibility === 'ranges') {
      if (ranges.length === 0) {
        toast.error('Add at least one date range or choose another visibility option.');
        return;
      }
      const invalid = ranges.map(validateRange).find(Boolean);
      if (invalid) {
        toast.error(invalid);
        return;
      }
    }

    setSaving(true);
    try {
      await api.updateBill(bill.id, { history_visibility: visibility });
      for (const id of deletedIds) {
        await api.deleteBillHistoryRange(bill.id, id);
      }
      if (visibility === 'ranges') {
        for (const range of ranges) {
          const payload = rangePayload(range);
          if (range.id) {
            await api.updateBillHistoryRange(bill.id, range.id, payload);
          } else {
            await api.createBillHistoryRange(bill.id, payload);
          }
        }
      }
      toast.success('History visibility saved.');
      onSaved();
      onClose();
    } catch (err) {
      toast.error(err.message || 'Failed to save history visibility.');
    } finally {
      setSaving(false);
    }
  };

  return (
    <Dialog open onOpenChange={v => { if (!v && !saving) onClose(); }}>
      <DialogContent className="sm:max-w-4xl border-border/60 bg-card/95 backdrop-blur-xl">
        <DialogHeader>
          <DialogTitle className="text-base font-semibold tracking-tight">
            History Visibility: {bill.name}
          </DialogTitle>
        </DialogHeader>

        {loading ? (
          <div className="py-12 text-center text-sm text-muted-foreground">Loading history visibility...</div>
        ) : (
          <div className="space-y-5">
            <div className="rounded-lg border border-border/60 bg-muted/25 p-4">
              <p className="text-sm font-medium">Inactive bill history</p>
              <p className="mt-1 text-xs text-muted-foreground">
                Choose whether this inactive bill should appear in historical tracker views. Active bill behavior is unchanged.
              </p>
            </div>

            <div className="grid gap-3 md:grid-cols-2">
              {VISIBILITY_OPTIONS.map(option => (
                <label
                  key={option.value}
                  className={cn(
                    'flex cursor-pointer gap-3 rounded-lg border px-4 py-3 transition-colors',
                    visibility === option.value
                      ? 'border-primary/40 bg-primary/10'
                      : 'border-border/60 bg-muted/15 hover:bg-muted/30'
                  )}
                >
                  <input
                    type="radio"
                    name="history_visibility"
                    value={option.value}
                    checked={visibility === option.value}
                    onChange={() => setVisibility(option.value)}
                    className="mt-1 h-4 w-4 accent-primary"
                  />
                  <span>
                    <span className="block text-sm font-medium">{option.label}</span>
                    <span className="mt-0.5 block text-xs text-muted-foreground">{option.description}</span>
                  </span>
                </label>
              ))}
            </div>

            {visibility === 'ranges' && (
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium">Selected date ranges</p>
                    <p className="text-xs text-muted-foreground">End month/year are optional for open-ended ranges.</p>
                  </div>
                  <Button type="button" size="sm" variant="outline" onClick={() => setRanges(prev => [...prev, blankRange()])}>
                    <Plus className="h-4 w-4" />
                    Add range
                  </Button>
                </div>

                {ranges.length === 0 ? (
                  <div className="rounded-lg border border-dashed border-border px-4 py-8 text-center text-sm text-muted-foreground">
                    No ranges yet. Add a range to use selected history.
                  </div>
                ) : (
                  <div className="space-y-2">
                    {ranges.map(range => (
                      <div key={range._key} className="grid gap-2 rounded-lg border border-border/60 bg-background/40 p-3 md:grid-cols-[1fr_120px_1fr_120px_1.2fr_auto] md:items-end">
                        <div className="space-y-1.5">
                          <Label className="text-[10px] uppercase tracking-wider text-muted-foreground">Start year</Label>
                          <Input
                            type="number"
                            min="2000"
                            max="2100"
                            value={range.start_year}
                            onChange={e => updateRange(range._key, { start_year: e.target.value })}
                            className="h-8"
                          />
                        </div>
                        <div className="space-y-1.5">
                          <Label className="text-[10px] uppercase tracking-wider text-muted-foreground">Start month</Label>
                          <Select value={range.start_month} onValueChange={v => updateRange(range._key, { start_month: v })}>
                            <SelectTrigger className="h-8">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              {MONTH_OPTIONS.map(([value, label]) => <SelectItem key={value} value={value}>{label}</SelectItem>)}
                            </SelectContent>
                          </Select>
                        </div>
                        <div className="space-y-1.5">
                          <Label className="text-[10px] uppercase tracking-wider text-muted-foreground">End year</Label>
                          <Input
                            type="number"
                            min="2000"
                            max="2100"
                            placeholder="Open"
                            value={range.end_year}
                            onChange={e => updateRange(range._key, { end_year: e.target.value })}
                            className="h-8"
                          />
                        </div>
                        <div className="space-y-1.5">
                          <Label className="text-[10px] uppercase tracking-wider text-muted-foreground">End month</Label>
                          <Select value={range.end_month || 'open'} onValueChange={v => updateRange(range._key, { end_month: v === 'open' ? '' : v })}>
                            <SelectTrigger className="h-8">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="open">Open</SelectItem>
                              {MONTH_OPTIONS.map(([value, label]) => <SelectItem key={value} value={value}>{label}</SelectItem>)}
                            </SelectContent>
                          </Select>
                        </div>
                        <div className="space-y-1.5">
                          <Label className="text-[10px] uppercase tracking-wider text-muted-foreground">Label</Label>
                          <Input
                            value={range.label}
                            onChange={e => updateRange(range._key, { label: e.target.value })}
                            placeholder="Optional"
                            className="h-8"
                          />
                        </div>
                        <Button
                          type="button"
                          variant="ghost"
                          size="icon"
                          className="h-8 w-8 text-destructive hover:bg-destructive/10 hover:text-destructive"
                          onClick={() => deleteRange(range)}
                          aria-label="Delete history range"
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            )}
          </div>
        )}

        <DialogFooter className="mt-2">
          <Button type="button" variant="ghost" disabled={saving} onClick={onClose} className="text-xs">
            Cancel
          </Button>
          <Button type="button" disabled={saving || loading} onClick={save} className="text-xs">
            {saving ? 'Saving...' : 'Save History Visibility'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

// ── Bills Page ─────────────────────────────────────────────────────────────
export default function BillsPage() {
  const [searchParams] = useSearchParams();
  const [bills,        setBills]       = useState([]);
  const [categories,   setCategories]  = useState([]);
  const [savedTemplates, setSavedTemplates] = useState([]);
  const [loading,      setLoading]     = useState(true);
  const [showInactive, setShowInactive] = useState(false);
  const [search, setSearch] = useState('');
  const [filters, setFilters] = useState({
    category: FILTER_ALL,
    cycle: FILTER_ALL,
    autopay: false,
    firstBucket: false,
    fifteenthBucket: false,
    debt: false,
    inactive: false,
  });

  // modal state: null = closed, { bill: null } = add new, { bill: {...} } = edit
  const [modal,      setModal]      = useState(null);
  // Bill pending deactivation confirmation (AlertDialog replaces window.confirm)
  const [deactivate, setDeactivate] = useState(null);
  const [deleteTarget, setDeleteTarget] = useState(null);
  const [deleteConfirmed, setDeleteConfirmed] = useState(false);
  const [deleteBusy, setDeleteBusy] = useState(false);
  const [historyTarget, setHistoryTarget] = useState(null);

  const { prefs, toggle: togglePref } = useDisplayPrefs();

  const load = useCallback(async () => {
    try {
      const [billsRes, catRes, templateRes] = await Promise.all([
        api.allBills(),
        api.categories(),
        api.billTemplates(),
      ]);
      setBills(billsRes  || []);
      setCategories(catRes || []);
      setSavedTemplates(templateRes || []);
    } catch (err) {
      toast.error(err.message);
    } finally {
      setLoading(false);
    }
  }, []);

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

  useEffect(() => {
    const querySearch = searchParams.get('search') || '';
    const includeInactive = searchParams.get('inactive') === '1' || searchParams.get('inactive') === 'true';
    if (querySearch) setSearch(querySearch);
    if (includeInactive) {
      setShowInactive(true);
      setFilters(prev => ({ ...prev, inactive: true }));
    }
  }, [searchParams]);

  useEffect(() => {
    if (filters.inactive) setShowInactive(true);
  }, [filters.inactive]);

  const toggleFilter = (key) => setFilters(prev => ({ ...prev, [key]: !prev[key] }));
  const setFilterValue = (key, value) => setFilters(prev => ({ ...prev, [key]: value }));
  const hasFilters = !!(
    search.trim()
    || filters.category !== FILTER_ALL
    || filters.cycle !== FILTER_ALL
    || filters.autopay
    || filters.firstBucket
    || filters.fifteenthBucket
    || filters.debt
    || filters.inactive
  );

  const resetFilters = () => {
    setSearch('');
    setFilters({
      category: FILTER_ALL,
      cycle: FILTER_ALL,
      autopay: false,
      firstBucket: false,
      fifteenthBucket: false,
      debt: false,
      inactive: false,
    });
  };

  async function handleEdit(billId) {
    try {
      const bill = await api.bill(billId);
      setModal({ bill });
    } catch (err) {
      toast.error(err.message);
    }
  }

  function handleDuplicateBill(bill) {
    setModal({ bill: null, initialBill: makeBillDraft(bill, { copy: true, categories }) });
  }

  function handleTemplateSelect(value) {
    if (!value || value === 'placeholder') return;
    const builtIn = BUILT_IN_TEMPLATES.find(template => template.id === value);
    if (builtIn) {
      setModal({ bill: null, initialBill: makeBillDraft(builtIn.data, { template: builtIn, categories }) });
      return;
    }

    const saved = savedTemplates.find(template => `saved-${template.id}` === value);
    if (saved) {
      setModal({ bill: null, initialBill: makeBillDraft(saved.data, { template: saved, categories }) });
    }
  }

  function handleToggle(bill) {
    if (bill.active) {
      // Prompt confirmation before deactivating
      setDeactivate(bill);
    } else {
      doToggle(bill);
    }
  }

  async function doToggle(bill) {
    if (!bill) return;
    try {
      await api.updateBill(bill.id, { active: bill.active ? 0 : 1 });
      toast.success(bill.active ? 'Bill deactivated' : 'Bill activated');
      load();
    } catch (err) {
      toast.error(err.message);
    }
  }

  function handleDeleteRequest(bill) {
    setDeleteConfirmed(false);
    setDeleteTarget(bill);
  }

  async function handleDeleteConfirmed() {
    if (!deleteTarget || !deleteConfirmed) return;
    setDeleteBusy(true);
    try {
      const bill = deleteTarget;
      await api.deleteBill(bill.id);
      setBills(prev => prev.filter(b => b.id !== bill.id));
      toast.success(`"${bill.name}" moved to recovery`, {
        description: 'It will be permanently purged after 30 days.',
        action: {
          label: 'Undo',
          onClick: async () => {
            try {
              await api.restoreBill(bill.id);
              toast.success(`"${bill.name}" restored`);
              load();
            } catch (err) {
              toast.error(err.message || 'Failed to restore bill');
            }
          },
        },
      });
      setDeleteTarget(null);
      setDeleteConfirmed(false);
      load();
    } catch (err) {
      toast.error(err.message || 'Failed to delete bill');
    } finally {
      setDeleteBusy(false);
    }
  }

  async function handleDeleteAlternative() {
    if (!deleteTarget) return;
    const bill = deleteTarget;
    setDeleteTarget(null);
    setDeleteConfirmed(false);
    await doToggle(bill);
  }

  const cycleOptions = useMemo(() => (
    Array.from(new Set(bills.map(b => b.billing_cycle || 'monthly'))).sort()
  ), [bills]);

  const filteredBills = useMemo(() => {
    const q = search.trim().toLowerCase();
    return bills.filter(bill => {
      if (filters.inactive && bill.active) return false;
      if (filters.category !== FILTER_ALL && String(bill.category_id ?? '') !== filters.category) return false;
      if (filters.cycle !== FILTER_ALL && String(bill.billing_cycle || 'monthly') !== filters.cycle) return false;
      if (filters.autopay && !bill.autopay_enabled) return false;
      if (filters.debt && !billIsDebt(bill)) return false;
      if (filters.firstBucket && !filters.fifteenthBucket && bill.bucket !== '1st') return false;
      if (filters.fifteenthBucket && !filters.firstBucket && bill.bucket !== '15th') return false;

      if (!q) return true;
      const haystack = [
        bill.name,
        bill.category_name,
        bill.notes,
        bill.billing_cycle,
        bill.bucket,
        amountSearchText(bill.expected_amount, bill.current_balance, bill.minimum_payment, bill.interest_rate),
      ].filter(Boolean).join(' ').toLowerCase();
      return haystack.includes(q);
    });
  }, [bills, filters, search]);

  const active   = filteredBills.filter(b => b.active);
  const inactive = filteredBills.filter(b => !b.active);
  const totalActive = bills.filter(b => b.active).length;
  const totalInactive = bills.filter(b => !b.active).length;

  return (
    <div className="space-y-6">

      {/* ── Header ── */}
      <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <p className="text-[11px] font-semibold uppercase tracking-[0.15em] text-muted-foreground mb-0.5">
            Manage
          </p>
          <h1 className="text-2xl font-bold tracking-tight">Bills</h1>
          <p className="text-xs text-muted-foreground mt-0.5">
            {totalActive} active
            {totalInactive > 0 && (
              <span className="text-muted-foreground/50"> · {totalInactive} inactive</span>
            )}
          </p>
        </div>

        <div className="flex w-full flex-wrap items-center gap-2 sm:w-auto sm:justify-end">
          <DisplayPrefsPanel prefs={prefs} onToggle={togglePref} />
          <Select value="placeholder" onValueChange={handleTemplateSelect}>
            <SelectTrigger className="h-9 min-w-[160px] flex-1 bg-card sm:w-[180px] sm:flex-none">
              <SelectValue placeholder="Use template" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="placeholder">Use template...</SelectItem>
              {BUILT_IN_TEMPLATES.map(template => (
                <SelectItem key={template.id} value={template.id}>{template.name}</SelectItem>
              ))}
              {savedTemplates.length > 0 && (
                <>
                  {savedTemplates.map(template => (
                    <SelectItem key={template.id} value={`saved-${template.id}`}>
                      {template.name}
                    </SelectItem>
                  ))}
                </>
              )}
            </SelectContent>
          </Select>
          <Button
            onClick={() => setModal({ bill: null })}
            className="h-9 flex-1 gap-2 px-4 text-sm font-medium sm:flex-none"
          >
            <Plus className="h-4 w-4" />
            Add Bill
          </Button>
        </div>
      </div>

      <div className="surface-elevated rounded-xl p-4 space-y-3">
        <div className="grid gap-3 lg:grid-cols-[minmax(220px,1fr)_220px_180px_auto] lg:items-center">
          <label className="relative">
            <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
            <Input
              value={search}
              onChange={e => setSearch(e.target.value)}
              placeholder="Search bills by name, category, notes, or amount"
              className="h-10 pl-9"
            />
          </label>
          <Select value={filters.category} onValueChange={value => setFilterValue('category', value)}>
            <SelectTrigger className="h-10">
              <SelectValue placeholder="Category" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value={FILTER_ALL}>All categories</SelectItem>
              {categories.map(category => (
                <SelectItem key={category.id} value={String(category.id)}>{category.name}</SelectItem>
              ))}
            </SelectContent>
          </Select>
          <Select value={filters.cycle} onValueChange={value => setFilterValue('cycle', value)}>
            <SelectTrigger className="h-10 capitalize">
              <SelectValue placeholder="Billing cycle" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value={FILTER_ALL}>All cycles</SelectItem>
              {cycleOptions.map(cycle => (
                <SelectItem key={cycle} value={cycle}>{cycle.replace(/_/g, ' ')}</SelectItem>
              ))}
            </SelectContent>
          </Select>
          <Button
            type="button"
            variant="ghost"
            disabled={!hasFilters}
            onClick={resetFilters}
            className="h-10 justify-center gap-2 text-xs"
          >
            <X className="h-3.5 w-3.5" />
            Clear
          </Button>
        </div>
        <div className="flex flex-wrap items-center gap-2">
          <FilterChip active={filters.autopay} onClick={() => toggleFilter('autopay')}>Autopay</FilterChip>
          <FilterChip active={filters.firstBucket} onClick={() => toggleFilter('firstBucket')}>1st bucket</FilterChip>
          <FilterChip active={filters.fifteenthBucket} onClick={() => toggleFilter('fifteenthBucket')}>15th bucket</FilterChip>
          <FilterChip active={filters.debt} onClick={() => toggleFilter('debt')}>Debt</FilterChip>
          <FilterChip active={filters.inactive} onClick={() => toggleFilter('inactive')}>Inactive</FilterChip>
          <span className="ml-auto text-xs text-muted-foreground tabular-nums">
            {filteredBills.length} of {bills.length} shown
          </span>
        </div>
      </div>

      {/* ── Active Bills ── */}
      {!filters.inactive && (
      <div className="surface-elevated rounded-xl overflow-hidden">
        <div className="flex items-center justify-between gap-3 px-5 py-3 border-b border-border/40">
          <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
            Active
          </span>
          <span className="text-xs tabular-nums text-muted-foreground">{active.length}</span>
        </div>

        {loading ? (
          <div className="space-y-px p-4">
            {[...Array(4)].map((_, i) => (
              <div key={i} className="h-16 rounded-lg bg-muted/40 animate-pulse mb-2" />
            ))}
          </div>
        ) : active.length === 0 ? (
          <div className="py-16 text-center text-sm text-muted-foreground">
            {hasFilters ? (
              <>No active bills match your filters.</>
            ) : (
              <>
                No active bills.{' '}
                <button
                  onClick={() => setModal({ bill: null })}
                  className="underline underline-offset-4 hover:text-foreground transition-colors"
                >
                  Add your first bill
                </button>
              </>
            )}
          </div>
        ) : (
          <BillsTableInner
            bills={active}
            prefs={prefs}
            onEdit={handleEdit}
            onToggle={handleToggle}
            onDelete={handleDeleteRequest}
            onDuplicate={handleDuplicateBill}
          />
        )}
      </div>
      )}

      {/* ── Inactive Bills ── */}
      {!loading && inactive.length > 0 && (
        <div className="space-y-3">

          <button
            onClick={() => setShowInactive(v => !v)}
            className="flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
          >
            <ChevronRight className={cn(
              'h-3 w-3 transition-transform duration-200',
              showInactive && 'rotate-90',
            )} />
            <span className="uppercase tracking-[0.08em]">
              {inactive.length} inactive {inactive.length === 1 ? 'bill' : 'bills'}
            </span>
          </button>

          {(showInactive || filters.inactive) && (
            <div className="surface-elevated rounded-xl overflow-hidden">
              <div className="flex items-center justify-between gap-3 px-5 py-3 border-b border-border/40">
                <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                  Inactive
                </span>
                <span className="text-xs tabular-nums text-muted-foreground">{inactive.length}</span>
              </div>
              <BillsTableInner
                bills={inactive}
                prefs={prefs}
                onEdit={handleEdit}
                onToggle={handleToggle}
                onDelete={handleDeleteRequest}
                onHistory={setHistoryTarget}
                onDuplicate={handleDuplicateBill}
              />
            </div>
          )}

        </div>
      )}

      {!loading && filters.inactive && inactive.length === 0 && (
        <div className="surface-elevated rounded-xl py-12 text-center text-sm text-muted-foreground">
          No inactive bills match your filters.
        </div>
      )}

      {/* ── Bill Modal ── */}
      {modal && (
        <BillModal
          key={modal.bill?.id ? `edit-${modal.bill.id}` : `new-${modal.initialBill?.name || 'blank'}`}
          bill={modal.bill}
          initialBill={modal.initialBill}
          categories={categories}
          onClose={() => setModal(null)}
          onSave={load}
          onDuplicate={handleDuplicateBill}
        />
      )}

      {historyTarget && (
        <HistoryVisibilityDialog
          bill={historyTarget}
          onClose={() => setHistoryTarget(null)}
          onSaved={load}
        />
      )}

      {/* ── Deactivate confirmation (replaces window.confirm) ── */}
      <AlertDialog open={!!deactivate} onOpenChange={open => { if (!open) setDeactivate(null); }}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Deactivate "{deactivate?.name}"?</AlertDialogTitle>
            <AlertDialogDescription>
              This bill will be hidden from the tracker. You can reactivate it at any time.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel onClick={() => setDeactivate(null)}>Cancel</AlertDialogCancel>
            <AlertDialogAction
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
              onClick={() => { const b = deactivate; setDeactivate(null); doToggle(b); }}
            >
              Deactivate
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {/* ── Soft delete confirmation ── */}
      <AlertDialog
        open={!!deleteTarget}
        onOpenChange={open => {
          if (!open && !deleteBusy) {
            setDeleteTarget(null);
            setDeleteConfirmed(false);
          }
        }}
      >
        <AlertDialogContent className="max-w-lg">
          <AlertDialogHeader>
            <AlertDialogTitle>Move "{deleteTarget?.name}" to recovery?</AlertDialogTitle>
            <AlertDialogDescription>
              This hides the bill from normal tracking and keeps its payments, monthly history,
              notes, and history ranges recoverable for 30 days.
            </AlertDialogDescription>
          </AlertDialogHeader>

          <div className="rounded-lg border border-amber-500/25 bg-amber-500/10 px-4 py-3 text-sm text-amber-300">
            Deactivate is still the best option if you want to retain the bill long-term but hide it from active tracking.
          </div>

          <label className="flex items-start gap-3 rounded-lg border border-border bg-muted/25 px-4 py-3 text-sm">
            <input
              type="checkbox"
              checked={deleteConfirmed}
              onChange={e => setDeleteConfirmed(e.target.checked)}
              disabled={deleteBusy}
              className="mt-0.5 h-4 w-4 rounded border-input bg-input accent-destructive"
            />
            <span>I understand this removes the bill from normal views and will be purged after 30 days if not restored.</span>
          </label>

          <AlertDialogFooter className="sm:justify-between">
            <AlertDialogCancel
              disabled={deleteBusy}
              className="border border-input bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground"
            >
              Cancel
            </AlertDialogCancel>
            <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
              <Button
                type="button"
                variant="outline"
                disabled={deleteBusy}
                onClick={handleDeleteAlternative}
              >
                {deleteTarget?.active ? 'Deactivate instead' : 'Activate instead'}
              </Button>
              <Button
                type="button"
                variant="destructive"
                disabled={!deleteConfirmed || deleteBusy}
                onClick={handleDeleteConfirmed}
              >
                {deleteBusy ? 'Moving…' : 'Move to recovery'}
              </Button>
            </div>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

    </div>
  );
}