BillTracker/client/pages/DataPage.jsx

import React, { useState, useEffect, useCallback, useRef, Suspense, lazy } from 'react';
import { useSearchParams } from 'react-router-dom';
import { toast } from 'sonner';
import { motion, AnimatePresence, useReducedMotion } from 'framer-motion';
import {
  Landmark, ArrowRightLeft, Upload, DatabaseBackup,
  FileSpreadsheet, FileText, FlaskConical, Download, RotateCcw, History,
} from 'lucide-react';
import { api } from '@/api';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import ConnectionHero from '@/components/data/ConnectionHero';
import DataNav from '@/components/data/DataNav';
import BankSyncSection from '@/components/data/BankSyncSection';
import BillRulesManager from '@/components/BillRulesManager';
import ImportTransactionCsvSection from '@/components/data/ImportTransactionCsvSection';
import ImportOfxSection from '@/components/data/ImportOfxSection';
import TransactionMatchingSection from '@/components/data/TransactionMatchingSection';
import SeedDemoDataSection from '@/components/data/SeedDemoDataSection';
import DownloadMyDataSection from '@/components/data/DownloadMyDataSection';
import ImportHistorySection from '@/components/data/ImportHistorySection';

// Heavy panes (XLSX parsing / SQLite restore) — code-split, loaded on demand.
const ImportSpreadsheetSection = lazy(() => import('@/components/data/ImportSpreadsheetSection'));
const ImportMyDataSection = lazy(() => import('@/components/data/ImportMyDataSection'));

const SECTIONS = [
  { id: 'bank-sync',    label: 'Bank sync',        description: 'Connect & sync your bank', icon: Landmark },
  { id: 'transactions', label: 'Transactions',     description: 'Review & match',           icon: ArrowRightLeft },
  { id: 'import',       label: 'Import',           description: 'Bring in existing data',   icon: Upload },
  { id: 'export',       label: 'Export & backups', description: 'Download & restore',       icon: DatabaseBackup },
];
const SECTION_IDS = SECTIONS.map(s => s.id);
const DEFAULT_SECTION = SECTIONS[0].id;
const SECTION_KEY = 'billtracker:data.section';
const LEGACY_KEY = 'billtracker:data.activeTab'; // old 3-tab key → migrate

function storedSection() {
  if (typeof window === 'undefined') return null;
  const s = window.localStorage.getItem(SECTION_KEY);
  return SECTION_IDS.includes(s) ? s : null;
}

function PaneSkeleton() {
  return (
    <div className="surface p-6">
      <div className="h-5 w-40 animate-pulse rounded bg-muted/50" />
      <div className="mt-3 h-24 animate-pulse rounded bg-muted/30" />
    </div>
  );
}

export default function DataPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const [history, setHistory] = useState(null);
  const [historyLoading, setHistoryLoading] = useState(true);
  const [transactionRefreshKey, setTransactionRefreshKey] = useState(0);
  const [simplefinConn, setSimplefinConn] = useState(null);
  const [syncEnabled, setSyncEnabled] = useState(true);
  const [hasConnections, setHasConnections] = useState(false);
  const [syncLoading, setSyncLoading] = useState(true);
  const [syncError, setSyncError] = useState(false);
  const [unmatchedCount, setUnmatchedCount] = useState(0);
  const [txnTotal, setTxnTotal] = useState(null);
  const reduceMotion = useReducedMotion();
  const paneRef = useRef(null);
  const firstRender = useRef(true);

  // Active section: URL ?section= is source of truth → localStorage → default.
  const urlSection = searchParams.get('section');
  const activeSection = SECTION_IDS.includes(urlSection) ? urlSection : (storedSection() || DEFAULT_SECTION);

  const goTo = useCallback((id) => {
    if (!SECTION_IDS.includes(id)) return;
    window.localStorage.setItem(SECTION_KEY, id);
    setSearchParams(prev => {
      const p = new URLSearchParams(prev);
      p.set('section', id);
      return p;
    });
  }, [setSearchParams]);

  // Reflect the resolved section into the URL once, so refresh/back-button work
  // (and migrate the old 3-tab key). Runs only when the URL lacks a valid section.
  useEffect(() => {
    if (SECTION_IDS.includes(urlSection)) return;
    const legacy = window.localStorage.getItem(LEGACY_KEY);
    const migrated = { sync: 'bank-sync', import: 'import', export: 'export' }[legacy];
    const target = storedSection() || migrated || DEFAULT_SECTION;
    setSearchParams(prev => {
      const p = new URLSearchParams(prev);
      p.set('section', target);
      return p;
    }, { replace: true });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // Move focus to the pane on section change (keyboard/SR), but not on first load.
  useEffect(() => {
    if (firstRender.current) { firstRender.current = false; return; }
    paneRef.current?.focus?.();
  }, [activeSection]);

  const loadHistory = useCallback(async () => {
    setHistoryLoading(true);
    try {
      const { history } = await api.importHistory();
      setHistory(history);
    } catch (err) {
      setHistory([]);
      toast.error(err.message || 'Failed to load import history.');
    } finally {
      setHistoryLoading(false);
    }
  }, []);

  const loadSimplefinSummary = useCallback(async () => {
    setSyncLoading(true);
    setSyncError(false);
    try {
      const [status, sources] = await Promise.all([
        api.simplefinStatus(),
        api.dataSources({ type: 'provider_sync' }),
      ]);
      setSyncEnabled(Boolean(status.enabled));
      setHasConnections(Boolean(status.has_connections));
      const conns = Array.isArray(sources) ? sources.filter(s => s.provider === 'simplefin') : [];
      setSimplefinConn(conns[0] || null);
    } catch {
      setSyncError(true);
      setSimplefinConn(null);
    } finally {
      setSyncLoading(false);
    }
  }, []);

  // Cheap "N to review" + transaction count (summary is aggregate, so limit:1 is enough).
  const loadTxnStats = useCallback(async () => {
    try {
      const data = await api.bankTransactionsLedger({ limit: 1 });
      setUnmatchedCount(data?.summary?.unmatched || 0);
      setTxnTotal(data?.summary?.total ?? null);
    } catch {
      setUnmatchedCount(0);
    }
  }, []);

  useEffect(() => { loadHistory(); loadSimplefinSummary(); }, [loadHistory, loadSimplefinSummary]);
  useEffect(() => { loadTxnStats(); }, [loadTxnStats, transactionRefreshKey]);

  const handleTransactionImportComplete = useCallback(() => {
    loadHistory();
    setTransactionRefreshKey(k => k + 1);
  }, [loadHistory]);

  // BankSyncSection reports connect/sync/disconnect changes.
  const handleConnectionChange = useCallback((conn) => {
    setSimplefinConn(conn || null);
    setHasConnections(Boolean(conn));
    setSyncLoading(false);
    setTransactionRefreshKey(k => k + 1);
  }, []);

  const handleSynced = useCallback(() => {
    loadSimplefinSummary();
    setTransactionRefreshKey(k => k + 1);
  }, [loadSimplefinSummary]);

  const renderPane = () => {
    switch (activeSection) {
      case 'bank-sync':
        return (
          <BankSyncSection
            onConnectionChange={handleConnectionChange}
            cardProps={{ title: 'Connect your bank', subtitle: 'Securely sync transactions automatically (via SimpleFIN).', icon: Landmark }}
          />
        );
      case 'transactions':
        return (
          <div className="space-y-5">
            <TransactionMatchingSection
              refreshKey={transactionRefreshKey}
              simplefinConn={simplefinConn}
              cardProps={{ title: 'Review & match transactions', subtitle: 'Confirm which transactions paid which bills.', icon: ArrowRightLeft }}
            />
            <BillRulesManager />
          </div>
        );
      case 'import':
        return (
          <div className="space-y-5">
            <Suspense fallback={<PaneSkeleton />}>
              <ImportSpreadsheetSection
                onHistoryRefresh={loadHistory}
                cardProps={{ title: 'Import a spreadsheet', subtitle: 'Bring in bill & payment history from Excel.', icon: FileSpreadsheet, collapsible: true, defaultOpen: true, storageKey: 'billtracker:data.card.spreadsheet', summary: 'Import bill/payment history from an XLSX workbook.' }}
              />
            </Suspense>
            <ImportTransactionCsvSection
              onHistoryRefresh={handleTransactionImportComplete}
              cardProps={{ title: 'Import transactions (CSV)', subtitle: 'Upload a bank or card CSV export.', icon: FileText, collapsible: true, defaultOpen: false, storageKey: 'billtracker:data.card.transactionCsv', summary: 'Upload bank or credit-card CSV transaction files.' }}
            />
            <ImportOfxSection
              onHistoryRefresh={handleTransactionImportComplete}
              cardProps={{ title: 'Import transactions (OFX/QFX)', subtitle: 'Upload a bank OFX or QFX export — no column mapping needed.', icon: FileText, collapsible: true, defaultOpen: false, storageKey: 'billtracker:data.card.ofx', summary: 'Upload an OFX/QFX transaction file.' }}
            />
            <SeedDemoDataSection
              onSeeded={loadHistory}
              cardProps={{ title: 'Sample data', subtitle: 'Load or clear demo data to explore features.', icon: FlaskConical, collapsible: true, defaultOpen: false, storageKey: 'billtracker:data.card.demo', summary: 'Seed or clear demo data for testing.' }}
            />
          </div>
        );
      case 'export':
        return (
          <div className="space-y-5">
            <DownloadMyDataSection
              cardProps={{ title: 'Download your data', subtitle: 'Export a full SQLite backup or an Excel file.', icon: Download }}
            />
            <Suspense fallback={<PaneSkeleton />}>
              <ImportMyDataSection
                onHistoryRefresh={loadHistory}
                cardProps={{ title: 'Restore from a backup', subtitle: 'Load a previous SQLite export of your data.', icon: RotateCcw, collapsible: true, defaultOpen: false, storageKey: 'billtracker:data.card.sqliteImport', summary: 'Restore data from a user SQLite export.' }}
              />
            </Suspense>
            <ImportHistorySection
              history={history}
              loading={historyLoading}
              onRefresh={loadHistory}
              cardProps={{ title: 'Recent activity', subtitle: 'A log of your past imports.', icon: History, collapsible: true, defaultOpen: false, storageKey: 'billtracker:data.card.history', summary: historyLoading ? 'Loading…' : `${history?.length || 0} import record${(history?.length || 0) === 1 ? '' : 's'}.` }}
            />
          </div>
        );
      default:
        return null;
    }
  };

  const motionProps = reduceMotion
    ? {}
    : { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, transition: { duration: 0.15 } };

  // Health dot for Bank sync + "N to review" badge for Transactions.
  const bankDot = (syncError || !syncEnabled || !hasConnections) ? 'gray' : simplefinConn?.last_error ? 'amber' : 'green';
  const navSections = SECTIONS.map(s =>
    s.id === 'bank-sync' ? { ...s, dot: bankDot }
    : s.id === 'transactions' ? { ...s, badge: unmatchedCount || undefined }
    : s,
  );

  return (
    <div className="mx-auto w-full max-w-6xl space-y-5">
      <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Data</h1>
          <p className="mt-0.5 text-sm text-muted-foreground">
            Manage how your bills, payments &amp; transactions get in and out.
          </p>
        </div>
        <TooltipProvider delayDuration={300}>
          <Tooltip>
            <TooltipTrigger asChild>
              <div className="rounded-full border border-border/70 bg-card/80 px-3 py-1.5 text-xs font-medium text-muted-foreground cursor-default">
                User data only
              </div>
            </TooltipTrigger>
            <TooltipContent>This page only manages your own records — other users' data is not accessible here</TooltipContent>
          </Tooltip>
        </TooltipProvider>
      </div>

      <ConnectionHero
        loading={syncLoading}
        error={syncError}
        enabled={syncEnabled}
        hasConnections={hasConnections}
        conn={simplefinConn}
        txnTotal={txnTotal}
        onRetry={loadSimplefinSummary}
        onGoTo={goTo}
        onSynced={handleSynced}
      />

      <div className="grid gap-5 lg:grid-cols-[220px_1fr]">
        <DataNav sections={navSections} active={activeSection} onSelect={goTo} />
        <div ref={paneRef} tabIndex={-1} className="min-w-0 outline-none">
          <AnimatePresence mode="wait">
            <motion.div key={activeSection} {...motionProps}>
              {renderPane()}
            </motion.div>
          </AnimatePresence>
        </div>
      </div>
    </div>
  );
}