BillTracker/client/components/data/BankSyncSection.jsx

import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { toast } from 'sonner';
import {
  AlertTriangle, Building2, ChevronDown, ChevronRight,
  Eye, EyeOff, ExternalLink, History, Link2Off, Loader2, RefreshCw, Unlink,
} 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 { Switch } from '@/components/ui/switch';
import {
  AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
  AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import {
  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter,
} from '@/components/ui/dialog';
import { SectionCard } from './dataShared';

function TokenInput({ value, onChange, disabled }) {
  const [show, setShow] = useState(false);
  const tail = value.slice(-4);
  return (
    <div className="flex-1 space-y-1">
      <div className="relative">
        <Input
          value={value}
          onChange={onChange}
          type={show ? 'text' : 'password'}
          placeholder="Paste SimpleFIN setup token…"
          className="font-mono text-xs pr-8"
          disabled={disabled}
          autoComplete="off"
        />
        {value && (
          <button
            type="button"
            tabIndex={-1}
            onClick={() => setShow(v => !v)}
            className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
          >
            {show ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
          </button>
        )}
      </div>
      {value && !show && (
        <p className="text-[11px] text-muted-foreground font-mono pl-0.5 select-none">
          ···{tail}
        </p>
      )}
    </div>
  );
}

function fmtDate(iso) {
  if (!iso) return '—';
  return new Date(iso).toLocaleString(undefined, {
    month: 'short', day: 'numeric', year: 'numeric',
    hour: '2-digit', minute: '2-digit',
  });
}

function fmtShortDate(date) {
  if (!date) return '—';
  const d = new Date(`${date}T00:00:00`);
  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
}

function fmtDollars(cents) {
  if (cents == null) return '—';
  const abs = Math.abs(cents) / 100;
  const sign = cents < 0 ? '-' : '';
  return `${sign}$${abs.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
}

function MatchBadge({ status, billName }) {
  if (status === 'matched') {
    return (
      <span className="text-[10px] font-medium text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 px-1.5 py-0.5 rounded-full max-w-[120px] truncate inline-block" title={billName || 'matched'}>
        {billName || 'matched'}
      </span>
    );
  }
  if (status === 'ignored') {
    return <span className="text-[10px] font-medium text-amber-600 dark:text-amber-400 bg-amber-500/10 px-1.5 py-0.5 rounded-full">ignored</span>;
  }
  return <span className="text-[10px] font-medium text-muted-foreground bg-muted/60 px-1.5 py-0.5 rounded-full">unmatched</span>;
}

function BillPickerDialog({ open, onClose, transaction, bills, onConfirm, busy }) {
  const [search, setSearch] = useState('');
  const [selectedId, setSelectedId] = useState(null);

  useEffect(() => { if (open) { setSearch(''); setSelectedId(null); } }, [open]);

  const filtered = useMemo(() => {
    const q = search.toLowerCase();
    return (bills || []).filter(b => !q || b.name.toLowerCase().includes(q));
  }, [bills, search]);

  const txDate  = transaction?.posted_date || transaction?.transacted_at?.slice(0, 10);
  const txLabel = transaction?.payee || transaction?.description || '—';
  const txAmt   = transaction ? fmtDollars(transaction.amount) : '';

  return (
    <Dialog open={open} onOpenChange={v => { if (!v) onClose(); }}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle>Match to bill</DialogTitle>
          <p className="text-sm text-muted-foreground mt-1">
            <span className="font-medium text-foreground">{txLabel}</span>
            {txDate && <span className="ml-2 text-xs">{fmtShortDate(txDate)}</span>}
            <span className="ml-2 font-medium text-destructive/80">{txAmt}</span>
          </p>
          <p className="text-xs text-muted-foreground">
            A payment record will be created for the selected bill using this transaction's amount and date.
          </p>
        </DialogHeader>

        <Input
          autoFocus
          placeholder="Search bills…"
          value={search}
          onChange={e => setSearch(e.target.value)}
          className="text-sm"
        />

        <div className="max-h-56 overflow-y-auto rounded-lg border border-border/60 divide-y divide-border/40">
          {filtered.length === 0 ? (
            <p className="px-3 py-4 text-sm text-muted-foreground text-center">No bills found.</p>
          ) : filtered.map(bill => (
            <button
              key={bill.id}
              type="button"
              onClick={() => setSelectedId(bill.id)}
              className={cn(
                'w-full flex items-center justify-between px-3 py-2.5 text-left text-sm transition-colors hover:bg-muted/40',
                selectedId === bill.id && 'bg-primary/10 text-primary',
              )}
            >
              <span className="truncate font-medium">{bill.name}</span>
              <span className="shrink-0 ml-3 text-xs text-muted-foreground tabular-nums">
                ${(bill.expected_amount ?? 0).toFixed(2)}/mo
              </span>
            </button>
          ))}
        </div>

        <DialogFooter>
          <Button variant="ghost" onClick={onClose} disabled={busy}>Cancel</Button>
          <Button onClick={() => onConfirm(selectedId)} disabled={!selectedId || busy}>
            {busy ? <><Loader2 className="h-3.5 w-3.5 animate-spin mr-1.5" />Matching…</> : 'Confirm match'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

function AccountRow({ account, sourceId, expanded, onToggleExpand, onToggleMonitored, toggling, bills, onMatch, onUnmatch, matchingTxId }) {
  const txDate = account.transactions?.[0]?.posted_date || account.transactions?.[0]?.transacted_at?.slice(0, 10);

  return (
    <div className="border-t border-border/40 first:border-t-0">
      <div
        className={cn('flex items-center gap-3 px-4 py-2.5', account.monitored && 'hover:bg-muted/20 cursor-pointer')}
        onClick={account.monitored ? onToggleExpand : undefined}
      >
        <span className="text-muted-foreground shrink-0 w-3.5" onClick={e => e.stopPropagation()}>
          {account.monitored && (expanded
            ? <ChevronDown className="h-3.5 w-3.5" />
            : <ChevronRight className="h-3.5 w-3.5" />)}
        </span>

        {/* Monitored toggle */}
        <div onClick={e => e.stopPropagation()}>
          <Switch
            checked={account.monitored}
            onCheckedChange={v => onToggleMonitored(account.id, v)}
            disabled={toggling}
            aria-label={`Monitor ${account.name}`}
          />
        </div>

        {/* Account name */}
        <div className="flex-1 min-w-0">
          <p className={cn('text-sm font-medium truncate', !account.monitored && 'text-muted-foreground')}>
            {account.name}
          </p>
          {account.org_name && (
            <p className="text-xs text-muted-foreground truncate">{account.org_name}</p>
          )}
        </div>

        {/* Balance */}
        <div className="text-right shrink-0 hidden sm:block">
          <p className={cn('text-xs font-medium tabular-nums', !account.monitored && 'text-muted-foreground')}>
            {fmtDollars(account.balance)}
          </p>
          {txDate && (
            <p className="text-[10px] text-muted-foreground">last tx {fmtShortDate(txDate)}</p>
          )}
        </div>

        {/* Tx count */}
        <div className="shrink-0 text-right">
          <p className="text-xs text-muted-foreground tabular-nums">
            {account.transaction_count} tx
          </p>
          {!account.monitored && (
            <p className="text-[10px] text-muted-foreground/60">skipped</p>
          )}
        </div>
      </div>

      {expanded && account.monitored && (
        <div className="border-t border-border/30 bg-muted/10">
          {account.transactions.length === 0 ? (
            <p className="px-6 py-3 text-xs text-muted-foreground italic">No transactions synced for this account.</p>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full text-xs">
                <thead>
                  <tr className="border-b border-border/30">
                    <th className="px-4 py-2 text-left font-medium text-muted-foreground whitespace-nowrap">Date</th>
                    <th className="px-4 py-2 text-left font-medium text-muted-foreground">Payee / Description</th>
                    <th className="px-4 py-2 text-right font-medium text-muted-foreground whitespace-nowrap">Amount</th>
                    <th className="px-4 py-2 text-right font-medium text-muted-foreground whitespace-nowrap">Bill</th>
                  </tr>
                </thead>
                <tbody>
                  {account.transactions.map(tx => (
                    <tr key={tx.id} className="border-b border-border/20 last:border-b-0 hover:bg-muted/20">
                      <td className="px-4 py-1.5 text-muted-foreground whitespace-nowrap">
                        {fmtShortDate(tx.posted_date || tx.transacted_at?.slice(0, 10))}
                      </td>
                      <td className="px-4 py-1.5 max-w-xs">
                        <p className="truncate font-medium">{tx.payee || tx.description || '—'}</p>
                        {tx.payee && tx.description && tx.payee !== tx.description && (
                          <p className="truncate text-muted-foreground">{tx.description}</p>
                        )}
                      </td>
                      <td className={cn('px-4 py-1.5 text-right tabular-nums whitespace-nowrap font-medium', tx.amount < 0 ? 'text-destructive/80' : 'text-emerald-600 dark:text-emerald-400')}>
                        {fmtDollars(tx.amount)}
                      </td>
                      <td className="px-4 py-1.5 text-right whitespace-nowrap">
                        {tx.match_status === 'matched' ? (
                          <div className="flex items-center justify-end gap-1.5">
                            <MatchBadge status="matched" billName={tx.matched_bill_name} />
                            <button
                              type="button"
                              title="Remove match"
                              disabled={matchingTxId === tx.id}
                              onClick={() => onUnmatch(tx)}
                              className="text-muted-foreground hover:text-destructive disabled:opacity-40 transition-colors"
                            >
                              {matchingTxId === tx.id
                                ? <Loader2 className="h-3 w-3 animate-spin" />
                                : <Unlink className="h-3 w-3" />}
                            </button>
                          </div>
                        ) : tx.match_status === 'ignored' ? (
                          <MatchBadge status="ignored" />
                        ) : (
                          <button
                            type="button"
                            disabled={matchingTxId === tx.id}
                            onClick={() => onMatch(tx)}
                            className="text-[10px] font-medium text-primary/70 hover:text-primary bg-primary/5 hover:bg-primary/10 px-1.5 py-0.5 rounded-full transition-colors disabled:opacity-40"
                          >
                            {matchingTxId === tx.id ? <Loader2 className="h-3 w-3 animate-spin inline" /> : '+ match'}
                          </button>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

export default function BankSyncSection({ onConnectionChange, cardProps = {} }) {
  const [enabled, setEnabled]         = useState(null);
  const [syncDays, setSyncDays]       = useState(90);
  const [connections, setConnections] = useState([]);
  const [accountsBySource, setAccountsBySource]   = useState({});
  const [accountsLoading, setAccountsLoading]     = useState({});
  const [accountsErrorBySource, setAccountsError] = useState({});
  const [loadError, setLoadError]     = useState('');
  const [setupToken, setSetupToken]   = useState('');
  const [connecting, setConnecting]   = useState(false);
  const [syncing, setSyncing]         = useState(null);
  const [backfilling, setBackfilling] = useState(null);
  const [disconnectTarget, setDisconnectTarget] = useState(null);
  const [disconnecting, setDisconnecting]       = useState(false);
  const [expandedAccount, setExpandedAccount]   = useState(null);
  const [togglingAccount, setTogglingAccount]   = useState(null);
  const [bills, setBills]                       = useState([]);
  const [matchTarget, setMatchTarget]           = useState(null); // { sourceId, tx }
  const [matchingTxId, setMatchingTxId]         = useState(null);

  const loadAccounts = useCallback(async (conns) => {
    for (const conn of conns) {
      setAccountsLoading(prev => ({ ...prev, [conn.id]: true }));
      setAccountsError(prev => ({ ...prev, [conn.id]: '' }));
      try {
        const accounts = await api.dataSourceAccounts(conn.id);
        setAccountsBySource(prev => ({ ...prev, [conn.id]: accounts }));
      } catch (err) {
        setAccountsError(prev => ({ ...prev, [conn.id]: err.message || 'Failed to load accounts' }));
      } finally {
        setAccountsLoading(prev => ({ ...prev, [conn.id]: false }));
      }
    }
  }, []);

  const load = useCallback(async () => {
    setLoadError('');
    try {
      const [status, sources] = await Promise.all([
        api.simplefinStatus(),
        api.dataSources({ type: 'provider_sync' }),
      ]);
      setEnabled(status.enabled);
      setSyncDays(status.sync_days ?? 90);
      const conns = Array.isArray(sources) ? sources.filter(s => s.provider === 'simplefin') : [];
      setConnections(conns);
      onConnectionChange?.(conns[0] || null);
      if (conns.length > 0) loadAccounts(conns);
    } catch (err) {
      setEnabled(false);
      setLoadError(err.message || 'Failed to load bank sync status');
    }
  }, [onConnectionChange, loadAccounts]);

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

  // Load bills once when connections become available (for the match picker)
  useEffect(() => {
    if (connections.length > 0 && bills.length === 0) {
      api.allBills().then(b => setBills(Array.isArray(b) ? b : [])).catch(err => console.error('[BankSyncSection] failed to load bills', err));
    }
  }, [connections, bills.length]);

  function updateTxInState(sourceId, txId, updates) {
    setAccountsBySource(prev => ({
      ...prev,
      [sourceId]: (prev[sourceId] || []).map(acc => ({
        ...acc,
        transactions: acc.transactions.map(tx => tx.id === txId ? { ...tx, ...updates } : tx),
      })),
    }));
  }

  const handleMatch = (sourceId, tx) => setMatchTarget({ sourceId, tx });

  const handleConfirmMatch = async (billId) => {
    if (!matchTarget || !billId) return;
    const { sourceId, tx } = matchTarget;
    setMatchingTxId(tx.id);
    try {
      const { transaction } = await api.confirmTransactionMatch(tx.id, billId);
      updateTxInState(sourceId, tx.id, {
        match_status: transaction.match_status,
        matched_bill_id: transaction.matched_bill_id,
        matched_bill_name: transaction.matched_bill_name,
      });
      setMatchTarget(null);
      toast.success(`Matched to "${transaction.matched_bill_name}" — payment recorded for ${fmtShortDate(tx.posted_date || tx.transacted_at?.slice(0, 10))}.`);
    } catch (err) {
      toast.error(err.message || 'Failed to match transaction.');
    } finally {
      setMatchingTxId(null);
    }
  };

  const handleUnmatch = async (sourceId, tx) => {
    setMatchingTxId(tx.id);
    try {
      await api.unmatchTransaction(tx.id);
      updateTxInState(sourceId, tx.id, { match_status: 'unmatched', matched_bill_id: null, matched_bill_name: null });
      toast.success('Match removed.');
    } catch (err) {
      toast.error(err.message || 'Failed to remove match.');
    } finally {
      setMatchingTxId(null);
    }
  };

  const handleConnect = async () => {
    const token = setupToken.trim();
    if (!token) { toast.error('Paste your SimpleFIN setup token first.'); return; }
    setConnecting(true);
    try {
      const result = await api.connectSimplefin(token);
      toast.success(`Connected — ${result.accountsUpserted} account(s), ${result.transactionsNew} new transaction(s).`);
      setSetupToken('');
      await load();
    } catch (err) {
      toast.error(err.message || 'Failed to connect SimpleFIN');
    } finally {
      setConnecting(false);
    }
  };

  const handleSync = async (id) => {
    setSyncing(id);
    try {
      const result = await api.syncDataSource(id);
      if (result.errlist) {
        toast.warning(`Synced ${result.transactionsNew} new transaction(s), but some connections need attention: ${result.errlist}`);
      } else {
        toast.success(`Synced — ${result.transactionsNew} new transaction(s).`);
      }
      await load();
    } catch (err) {
      toast.error(err.message || 'Sync failed');
      await load();
    } finally {
      setSyncing(null);
    }
  };

  const handleBackfill = async (id) => {
    setBackfilling(id);
    try {
      const result = await api.backfillDataSource(id);
      if (result.errlist) {
        toast.warning(`Backfill complete — ${result.transactionsNew} new transaction(s). Some connections need attention: ${result.errlist}`);
      } else {
        toast.success(`Backfill complete — ${result.transactionsNew} new transaction(s) pulled from the last 90 days.`);
      }
      await load();
    } catch (err) {
      toast.error(err.message || 'Backfill failed');
      await load();
    } finally {
      setBackfilling(null);
    }
  };

  const handleDisconnect = async () => {
    if (!disconnectTarget) return;
    setDisconnecting(true);
    try {
      await api.deleteDataSource(disconnectTarget.id);
      toast.success('SimpleFIN disconnected.');
      setDisconnectTarget(null);
      await load();
    } catch (err) {
      toast.error(err.message || 'Failed to disconnect');
    } finally {
      setDisconnecting(false);
    }
  };

  const handleToggleMonitored = async (sourceId, accountId, monitored) => {
    setTogglingAccount(accountId);
    // Optimistic update
    setAccountsBySource(prev => ({
      ...prev,
      [sourceId]: (prev[sourceId] || []).map(a =>
        a.id === accountId ? { ...a, monitored } : a
      ),
    }));
    try {
      await api.setAccountMonitored(sourceId, accountId, monitored);
    } catch (err) {
      // Revert on failure
      setAccountsBySource(prev => ({
        ...prev,
        [sourceId]: (prev[sourceId] || []).map(a =>
          a.id === accountId ? { ...a, monitored: !monitored } : a
        ),
      }));
      toast.error(err.message || 'Failed to update account');
    } finally {
      setTogglingAccount(null);
    }
  };

  function connWarning(conn) {
    if (!conn.last_error) return null;
    if (conn.status === 'error') return { kind: 'error', label: 'Sync error' };
    // Partial errlist: sync succeeded but some bank connections need attention
    return { kind: 'partial', label: 'Some connections need attention' };
  }

  if (enabled === null) {
    return (
      <SectionCard title="Bank Sync" {...cardProps}>
        <div className="px-6 py-6 flex items-center gap-2 text-sm text-muted-foreground">
          <Loader2 className="h-4 w-4 animate-spin" />
          Loading…
        </div>
      </SectionCard>
    );
  }

  return (
    <>
      <SectionCard title="Bank Sync" subtitle="Connect your SimpleFIN Bridge to sync read-only bank transactions." {...cardProps}>
        {!enabled ? (
          <div className="px-6 py-5 text-sm text-muted-foreground">
            Bank sync is not enabled on this server. Ask your administrator to enable it in the Admin panel.
          </div>
        ) : (
          <>
            {loadError && (
              <div className="px-6 py-3 text-sm text-destructive">{loadError}</div>
            )}

            {connections.length > 0 && connections.map(conn => {
              const accounts = accountsBySource[conn.id] || [];
              const accsLoading = accountsLoading[conn.id];
              const accsError = accountsErrorBySource[conn.id];
              const monitoredCount = accounts.filter(a => a.monitored).length;

              const warning = connWarning(conn);
              return (
                <div key={conn.id} className="px-6 py-4 space-y-3">
                  {warning && (
                    <div className="flex items-start gap-2 rounded-lg border border-amber-500/30 bg-amber-500/10 px-3 py-2.5 text-sm text-amber-700 dark:text-amber-400">
                      <AlertTriangle className="h-4 w-4 shrink-0 mt-0.5" />
                      <div className="flex-1 min-w-0">
                        <span className="font-medium">{warning.label}</span>
                        <span className="ml-1 font-normal opacity-90">— {conn.last_error}</span>
                        {warning.kind === 'partial' && (
                          <span className="block text-xs mt-0.5 opacity-75">
                            Re-authenticate the affected institutions in your SimpleFIN Bridge account to restore full sync.
                          </span>
                        )}
                        {warning.kind === 'error' && conn.last_sync_at && (
                          <span className="block text-xs mt-0.5 opacity-75">
                            Last successful sync: {fmtDate(conn.last_sync_at)}
                          </span>
                        )}
                      </div>
                      <button
                        type="button"
                        onClick={() => handleSync(conn.id)}
                        disabled={syncing === conn.id}
                        className="shrink-0 text-xs font-medium underline-offset-2 hover:underline disabled:opacity-50"
                      >
                        {syncing === conn.id ? 'Syncing…' : 'Retry'}
                      </button>
                    </div>
                  )}

                  {/* Header row */}
                  <div className="flex items-start justify-between gap-3">
                    <div className="flex items-center gap-3 min-w-0">
                      <Building2 className="h-5 w-5 shrink-0 text-muted-foreground" />
                      <div className="min-w-0">
                        <p className="text-sm font-medium truncate">{conn.name}</p>
                        <p className="text-xs text-muted-foreground mt-0.5">
                          {conn.account_count} account{conn.account_count !== 1 ? 's' : ''} ·{' '}
                          {conn.transaction_count} transaction{conn.transaction_count !== 1 ? 's' : ''}
                          {accounts.length > 0 && ` · ${monitoredCount} monitored`}
                        </p>
                      </div>
                    </div>
                    <div className="flex items-center gap-2 shrink-0">
                      <Button
                        size="sm" variant="outline"
                        onClick={() => handleSync(conn.id)}
                        disabled={syncing === conn.id || backfilling === conn.id}
                        className="h-8 text-xs gap-1.5"
                      >
                        {syncing === conn.id
                          ? <><Loader2 className="h-3.5 w-3.5 animate-spin" />Syncing…</>
                          : <><RefreshCw className="h-3.5 w-3.5" />Sync Now</>}
                      </Button>
                      <Button
                        size="sm" variant="outline"
                        onClick={() => handleBackfill(conn.id)}
                        disabled={syncing === conn.id || backfilling === conn.id}
                        className="h-8 text-xs gap-1.5 text-muted-foreground"
                        title="Pull up to 90 days of transaction history"
                      >
                        {backfilling === conn.id
                          ? <><Loader2 className="h-3.5 w-3.5 animate-spin" />Backfilling…</>
                          : <><History className="h-3.5 w-3.5" />90d Backfill</>}
                      </Button>
                      <Button
                        size="sm" variant="ghost"
                        onClick={() => setDisconnectTarget(conn)}
                        className="h-8 text-xs gap-1.5 text-muted-foreground hover:text-destructive"
                      >
                        <Link2Off className="h-3.5 w-3.5" />
                        Disconnect
                      </Button>
                    </div>
                  </div>

                  {/* Sync status grid */}
                  <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 text-xs">
                    <div className="rounded-lg border border-border/60 bg-muted/20 px-3 py-2">
                      <p className="text-muted-foreground">Last sync</p>
                      <p className="font-medium mt-0.5">{fmtDate(conn.last_sync_at)}</p>
                    </div>
                    <div className={cn(
                      'rounded-lg border px-3 py-2',
                      conn.last_error ? 'border-destructive/30 bg-destructive/5' : 'border-border/60 bg-muted/20',
                    )}>
                      <p className="text-muted-foreground">Status</p>
                      <p className={cn('font-medium mt-0.5', conn.last_error ? 'text-destructive' : '')}>
                        {conn.last_error ? conn.last_error : (conn.status === 'active' ? 'Active' : conn.status)}
                      </p>
                    </div>
                    <div className="rounded-lg border border-border/60 bg-muted/20 px-3 py-2">
                      <p className="text-muted-foreground">History window</p>
                      <p className="font-medium mt-0.5">{syncDays} days</p>
                    </div>
                  </div>

                  {/* Accounts section */}
                  <div className="rounded-lg border border-border/60 overflow-hidden">
                    <div className="px-4 py-2 bg-muted/20 border-b border-border/40 flex items-center justify-between">
                      <p className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
                        Accounts
                      </p>
                      <p className="text-[10px] text-muted-foreground">
                        Toggle to include / exclude from bill matching
                      </p>
                    </div>

                    {accsLoading ? (
                      <div className="flex items-center gap-2 px-4 py-3 text-xs text-muted-foreground">
                        <Loader2 className="h-3.5 w-3.5 animate-spin" />
                        Loading accounts…
                      </div>
                    ) : accsError ? (
                      <p className="px-4 py-3 text-xs text-destructive">{accsError}</p>
                    ) : accounts.length === 0 ? (
                      <p className="px-4 py-3 text-xs text-muted-foreground italic">No accounts found.</p>
                    ) : (
                      accounts.map(account => (
                        <AccountRow
                          key={account.id}
                          account={account}
                          sourceId={conn.id}
                          expanded={expandedAccount === account.id}
                          onToggleExpand={() => setExpandedAccount(prev => prev === account.id ? null : account.id)}
                          onToggleMonitored={(accountId, monitored) => handleToggleMonitored(conn.id, accountId, monitored)}
                          toggling={togglingAccount === account.id}
                          bills={bills}
                          onMatch={tx => handleMatch(conn.id, tx)}
                          onUnmatch={tx => handleUnmatch(conn.id, tx)}
                          matchingTxId={matchingTxId}
                        />
                      ))
                    )}
                  </div>
                </div>
              );
            })}

            {connections.length === 0 && (
              <div className="px-6 py-5 space-y-4">
                <div className="rounded-lg border border-border/60 bg-muted/20 p-4 text-sm text-muted-foreground">
                  <p className="font-medium text-foreground mb-1">Connect a SimpleFIN Bridge account</p>
                  <p>Paste your SimpleFIN setup token below. BillTracker only stores an encrypted access URL — no bank credentials are saved.</p>
                  <p className="mt-2">
                    Need a token?{' '}
                    <a
                      href="https://beta-bridge.simplefin.org/"
                      target="_blank"
                      rel="noreferrer"
                      className="inline-flex items-center gap-1 font-medium text-primary underline-offset-4 hover:underline"
                    >
                      Open SimpleFIN Bridge
                      <ExternalLink className="h-3 w-3" />
                    </a>
                  </p>
                </div>
                <div className="flex gap-2">
                  <TokenInput
                    value={setupToken}
                    onChange={e => setSetupToken(e.target.value)}
                    disabled={connecting}
                  />
                  <Button onClick={handleConnect} disabled={connecting || !setupToken.trim()} className="shrink-0">
                    {connecting ? <><Loader2 className="h-4 w-4 animate-spin mr-1.5" />Connecting…</> : 'Connect'}
                  </Button>
                </div>
              </div>
            )}

            {connections.length > 0 && (
              <div className="px-6 py-4 border-t border-border/50 space-y-2">
                <div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
                  <p className="text-xs font-medium text-muted-foreground">Add another connection</p>
                  <a
                    href="https://beta-bridge.simplefin.org/"
                    target="_blank"
                    rel="noreferrer"
                    className="inline-flex items-center gap-1 text-xs font-medium text-primary underline-offset-4 hover:underline"
                  >
                    Get a SimpleFIN token
                    <ExternalLink className="h-3 w-3" />
                  </a>
                </div>
                <div className="flex gap-2">
                  <TokenInput
                    value={setupToken}
                    onChange={e => setSetupToken(e.target.value)}
                    disabled={connecting}
                  />
                  <Button size="sm" onClick={handleConnect} disabled={connecting || !setupToken.trim()} className="shrink-0">
                    {connecting ? <><Loader2 className="h-3.5 w-3.5 animate-spin mr-1" />Connecting…</> : 'Connect'}
                  </Button>
                </div>
              </div>
            )}
          </>
        )}
      </SectionCard>

      <AlertDialog open={!!disconnectTarget} onOpenChange={open => { if (!open) setDisconnectTarget(null); }}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Disconnect SimpleFIN?</AlertDialogTitle>
            <AlertDialogDescription>
              This removes the connection and deletes synced accounts. Previously synced transactions
              are kept but will no longer be associated with a data source.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel disabled={disconnecting}>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={handleDisconnect} disabled={disconnecting}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
              {disconnecting ? 'Disconnecting…' : 'Disconnect'}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      <BillPickerDialog
        open={!!matchTarget}
        onClose={() => setMatchTarget(null)}
        transaction={matchTarget?.tx}
        bills={bills}
        onConfirm={handleConfirmMatch}
        busy={!!matchingTxId}
      />
    </>
  );
}