const { useState, useEffect } = React;

const TABS = [
  { id: 'summary', label: 'Summary', icon: 'M3 13h2l2-7 4 14 3-9 2 4h5' },
  { id: 'comps', label: 'Comps & ARV', icon: 'M3 21h18M5 21V8l5-4 5 4M9 21v-5h4v5M19 21V11l-4-3' },
  { id: 'scenarios', label: 'Scenarios', icon: 'M4 4v16M4 8h10M4 14h7M14 4l4 4-4 4' },
  { id: 'caprate', label: 'Cap Rate', icon: 'M4 20V10M10 20V4M16 20v-7M22 20H2' },
  { id: 'mortgage', label: 'Mortgage', icon: 'M4 4h16v16H4zM8 8h8M8 12h8M8 16h4' },
  { id: 'hard', label: 'Hard Money', icon: 'M12 2v20M7 5h7a3.5 3.5 0 0 1 0 7H7m0 0h8a3.5 3.5 0 0 1 0 7H6' },
  { id: 'calculators', label: 'Calculators', icon: 'M4 3h16v18H4zM8 7h8M8 11h2M12 11h2M16 11h0M8 15h2M12 15h2M16 15h0M8 19h6' },
  { id: 'project', label: 'Project Calculation', icon: 'M12 2v20M2 12h20' },
  { id: 'rental', label: 'Rental Analysis', icon: 'M3 21h18M5 21V8l5-4 5 4M9 21v-5h4v5M19 21V11l-4-3' },
  { id: 'holding', label: 'Holding', icon: 'M12 7v5l3 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z' },
  { id: 'neighborhood', label: 'Neighborhood', icon: 'M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0zM12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z' },
  { id: 'ai-rehab', label: 'AI Rehab Planner', icon: 'M12 2l2.4 7.4H22l-6 4.4 2.3 7.2L12 16.8 5.7 21l2.3-7.2-6-4.4h7.6z' },
];
const STORAGE_KEY = 'flip-calc-deal-v2';
const SAVED_KEY = 'flip-calc-saved-v1';

function loadDeal() {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (raw) return { ...structuredClone(DEFAULT_DEAL), ...JSON.parse(raw) };
  } catch (e) {}
  return structuredClone(DEFAULT_DEAL);
}
function loadSaved() {
  try { return JSON.parse(localStorage.getItem(SAVED_KEY)) || []; } catch (e) { return []; }
}
function loadAuthUser() {
  const s = loadSession();
  if (!s) return null;
  if (s.remember) { if (s.expiresAt && Date.now() > s.expiresAt) { clearSession(); return null; } }
  else if (Date.now() - s.lastActivity > SESSION_TIMEOUT_MIN * 60000) { clearSession(); return null; }
  const u = loadUsers().find((x) => x.id === s.userId);
  return (u && u.active) ? u : null;
}

/* ============ Saved deals drawer ============ */
function SavedDrawer({ open, onClose, saved, onLoad, onDelete, hideMoney, readonly }) {
  return (
    <React.Fragment>
      <div className={'drawer-scrim' + (open ? ' open' : '')} onClick={onClose}></div>
      <aside className={'drawer' + (open ? ' open' : '')}>
        <div className="drawer-head">
          <h2>Saved Deals</h2>
          <button className="btn" onClick={onClose}><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M18 6L6 18M6 6l12 12" /></svg></button>
        </div>
        <div className="drawer-body">
          {saved.length === 0 ? (
            <div className="saved-empty">No saved deals yet.<br />Hit <b>Save deal</b> to keep a snapshot of this analysis so you can compare properties.</div>
          ) : saved.map((s) => {
            const c = computeDeal(s.deal);
            const good = c.netProfit >= c.profitGoal;
            return (
              <div className="saved-item" key={s.id}>
                <div className="si-top">
                  <div>
                    <div className="si-name">{s.name}</div>
                    <div className="si-addr">{s.deal.property.city}, {s.deal.property.state} · saved {new Date(s.savedAt).toLocaleDateString()}</div>
                  </div>
                  {hideMoney ? null : <div className="si-profit" style={{ color: good ? 'var(--green-700)' : 'var(--coral)' }}>{fmtMoney(c.netProfit)}</div>}
                </div>
                {hideMoney ? null : (
                  <div style={{ display: 'flex', gap: 14, marginTop: 8, fontSize: 12, color: 'var(--muted)' }}>
                    <span>ARV {fmtMoney(s.deal.terms.sellingPrice)}</span>
                    <span>Rehab {fmtMoney(c.rehabTotal)}</span>
                    <span>{fmtPct(c.roi)} ROI</span>
                  </div>
                )}
                <div className="si-actions">
                  <button className="load" onClick={() => onLoad(s)}>Load</button>
                  {readonly ? null : <button onClick={() => onDelete(s.id)}>Delete</button>}
                </div>
              </div>
            );
          })}
        </div>
      </aside>
    </React.Fragment>
  );
}

function ProjectCalculationTab({ deal, calc }) {
  const t = deal.terms;
  const financing = calc.mort || {};
  const holding = calc.holdingBreakdown || {};
  const renderItems = (items, base) => items.map((item, index) => (
    <div className="frow" key={index}>
      <div className="frow-label">{item.k}</div>
      <div className="frow-right" style={{ justifyContent: 'flex-end' }}>
        {base ? <span className="pct-chip">{base ? ((item.v / base) * 100).toFixed(1) + '%' : ''}</span> : null}
        <div className="in zero" style={{ width: 138 }}>{fmtMoney(item.v)}</div>
      </div>
    </div>
  ));

  return (
    <div>
      <div className="deal-summary-row">
        <div className="deal-summary-card">
          <div className="deal-summary-label">Accepted Price</div>
          <div className="deal-summary-value">{fmtMoney(t.acceptedPrice)}</div>
        </div>
        <div className="deal-summary-card">
          <div className="deal-summary-label">Selling Price / ARV</div>
          <div className="deal-summary-value">{fmtMoney(t.sellingPrice)}</div>
        </div>
        <div className="deal-summary-card">
          <div className="deal-summary-label">Rehab Costs</div>
          <div className="deal-summary-value">{fmtMoney(calc.rehabTotal)}</div>
        </div>
        <div className="deal-summary-card">
          <div className="deal-summary-label">Holding Cost</div>
          <div className="deal-summary-value">{fmtMoney(calc.holdingCost)}</div>
        </div>
      </div>

      <div className="offer-guidance-box">
        <div className="offer-guidance-title">Project calculation overview</div>
        <div className="offer-guidance-copy">Review purchase, rehab, selling, holding and finance costs in one unified calculation tab.</div>
      </div>

      <div className="grid">
        <div className="col">
          <div className="card">
            <div className="card-head"><h3>Purchase & Rehab</h3><span className="head-total">{fmtMoney(calc.purchaseTotal + calc.rehabTotal)}</span></div>
            <div className="card-body">
              <div className="frow"><div className="frow-label">Accepted Price</div><div className="in zero">{fmtMoney(t.acceptedPrice)}</div></div>
              <div className="frow"><div className="frow-label">Purchase Fees</div><div className="in zero">{fmtMoney(calc.purchaseFeesSum)}</div></div>
              <div className="frow"><div className="frow-label">Rehab Total</div><div className="in zero">{fmtMoney(calc.rehabTotal)}</div></div>
              <div className="frow"><div className="frow-label">All-in Basis</div><div className="in zero">{fmtMoney(calc.purchaseTotal + calc.rehabTotal)}</div></div>
            </div>
          </div>

          <div className="card">
            <div className="card-head"><h3>Financing & Holding</h3></div>
            <div className="card-body">
              <div className="frow"><div className="frow-label">Purchase Type</div><div className="in zero">{t.purchaseType}</div></div>
              <div className="frow"><div className="frow-label">Loan Amount</div><div className="in zero">{fmtMoney(financing.loan)}</div></div>
              <div className="frow"><div className="frow-label">Monthly Loan Pay</div><div className="in zero">{fmtMoney(financing.pay)}</div></div>
              <div className="frow"><div className="frow-label">Interest Rate</div><div className="in zero">{financing.rate ? financing.rate.toFixed(2) + '%' : '—'}</div></div>
              <div className="frow"><div className="frow-label">Total Finance Cost</div><div className="in zero">{fmtMoney(financing.totalFinanceCost)}</div></div>
              <div className="frow"><div className="frow-label">Monthly Holding</div><div className="in zero">{fmtMoney(calc.monthlyHolding)}</div></div>
              <div className="frow"><div className="frow-label">Holding Months</div><div className="in zero">{t.holdingMonths}</div></div>
              <div className="frow"><div className="frow-label">Total Holding Cost</div><div className="in zero">{fmtMoney(calc.holdingCost)}</div></div>
            </div>
          </div>
        </div>

        <div className="col">
          <div className="card">
            <div className="card-head"><h3>Purchase Costs</h3><span className="head-total">{fmtMoney(calc.purchaseFeesSum)}</span></div>
            <div className="card-body">
              {renderItems(deal.purchaseFees, t.acceptedPrice)}
            </div>
          </div>

          <div className="card">
            <div className="card-head"><h3>Rehab Line Items</h3><span className="head-total">{fmtMoney(calc.rehabTotal)}</span></div>
            <div className="card-body">
              {renderItems(deal.rehab, t.sellingPrice)}
            </div>
          </div>
        </div>

        <div className="col span-charts">
          <div className="card">
            <div className="card-head"><h3>Selling & Exit</h3><span className="head-total">{fmtMoney(calc.netSalePrice)}</span></div>
            <div className="card-body">
              <div className="frow"><div className="frow-label">Selling Price / ARV</div><div className="in zero">{fmtMoney(t.sellingPrice)}</div></div>
              <div className="frow"><div className="frow-label">Selling Fees</div><div className="in zero">{fmtMoney(calc.sellingFeesSum)}</div></div>
              <div className="frow"><div className="frow-label">Net Sale Amount</div><div className="in zero">{fmtMoney(calc.netSalePrice)}</div></div>
              <div className="frow"><div className="frow-label">Net Profit</div><div className="in zero">{fmtMoney(calc.netProfit)}</div></div>
              <div className="frow"><div className="frow-label">Margin</div><div className="in zero">{fmtPct(calc.netMargin)} margin</div></div>
              <div className="frow"><div className="frow-label">ROI</div><div className="in zero">{fmtPct(calc.roi)}</div></div>
            </div>
          </div>

          <div className="card">
            <div className="card-head"><h3>Holding Breakdown</h3></div>
            <div className="card-body">
              <div className="frow"><div className="frow-label">Loan Carry</div><div className="in zero">{fmtMoney(holding.carryMo)}</div></div>
              <div className="frow"><div className="frow-label">Property Tax</div><div className="in zero">{fmtMoney(holding.taxMo)}</div></div>
              <div className="frow"><div className="frow-label">Insurance</div><div className="in zero">{fmtMoney(holding.insMo)}</div></div>
              <div className="frow"><div className="frow-label">Utilities</div><div className="in zero">{fmtMoney(holding.utilMo)}</div></div>
              <div className="frow"><div className="frow-label">HOA / Other</div><div className="in zero">{fmtMoney((holding.hoaMo || 0) + (holding.otherMo || 0))}</div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function App() {
  const [tab, setTab] = useState('summary');
  const [deal, setDeal] = useState(loadDeal);
  const [saved, setSaved] = useState(loadSaved);
  const [drawer, setDrawer] = useState(false);
  const [flash, setFlash] = useState('');
  const [settings, setSettings] = useState(loadSettings);
  const [authUser, setAuthUser] = useState(loadAuthUser);
  const [adminOpen, setAdminOpen] = useState(false);
  const [printOpen, setPrintOpen] = useState(false);
  const [printSel, setPrintSel] = useState(null);

  useEffect(() => { try { localStorage.setItem(STORAGE_KEY, JSON.stringify(deal)); } catch (e) {} }, [deal]);
  useEffect(() => { try { localStorage.setItem(SAVED_KEY, JSON.stringify(saved)); } catch (e) {} }, [saved]);
  useEffect(() => { try { localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings)); } catch (e) {} applyTheme(settings); }, [settings]);
  useEffect(() => {
    if (!authUser) return;
    const bump = () => { const s = loadSession(); if (s) { s.lastActivity = Date.now(); setSession(s); } };
    window.addEventListener('click', bump); window.addEventListener('keydown', bump);
    const iv = setInterval(() => { const s = loadSession(); if (!s) { setAuthUser(null); } else if (!s.remember && Date.now() - s.lastActivity > SESSION_TIMEOUT_MIN * 60000) { logActivity(authUser.username, 'Session timed out'); clearSession(); setAuthUser(null); } }, 15000);
    return () => { window.removeEventListener('click', bump); window.removeEventListener('keydown', bump); clearInterval(iv); };
  }, [authUser]);

  if (!authUser) return <AuthGateEnhanced onLogin={setAuthUser} />;
  const role = authUser.role;
  const isReadonly = role === 'investor';
  const isVA = role === 'va';
  const canSettings = role === 'admin' || role === 'agent';
  const allowedTabs = TAB_ACCESS[role] ? TABS.filter((t) => TAB_ACCESS[role].includes(t.id)) : TABS;
  const visibleSaved = authUser.dealIds === 'all' ? saved : saved.filter((s) => (authUser.dealIds || []).includes(s.id));
  const appClass = 'app' + (isReadonly ? ' role-readonly' : '') + (isVA ? ' role-nofin' : '');
  const logout = () => { logActivity(authUser.username, 'Logged out'); clearSession(); setAuthUser(null); };

  const update = (patch) => setDeal((d) => ({ ...d, ...patch }));
  const updateList = (listKey, idx, v) => setDeal((d) => ({ ...d, [listKey]: d[listKey].map((it, i) => (i === idx ? { ...it, v } : it)) }));
  const renameItem = (listKey, idx, k) => setDeal((d) => ({ ...d, [listKey]: d[listKey].map((it, i) => (i === idx ? { ...it, k } : it)) }));
  const addItem = (listKey, k) => setDeal((d) => ({ ...d, [listKey]: [...d[listKey], { k: k || 'New item', v: 0, custom: true }] }));
  const removeItem = (listKey, idx) => setDeal((d) => ({ ...d, [listKey]: d[listKey].filter((_, i) => i !== idx) }));
  const resetList = (listKey) => { if (confirm('Reset this table to the default line items?')) setDeal((d) => ({ ...d, [listKey]: structuredClone(DEFAULT_DEAL[listKey]) })); };
  const listApi = { updateList, renameItem, addItem, removeItem, resetList };

  const calc = computeDeal(deal);
  const profitNeg = calc.netProfit < 0;

  const saveDeal = () => {
    const name = prompt('Name this deal', deal.property.address || 'Untitled deal');
    if (!name) return;
    setSaved((s) => [{ id: Date.now(), name, savedAt: Date.now(), owner: authUser.username, deal: structuredClone(deal) }, ...s]);
    logActivity(authUser.username, 'Saved deal "' + name + '"');
    setFlash('Deal saved');
    setTimeout(() => setFlash(''), 1800);
  };
  const loadSavedDeal = (s) => { setDeal(structuredClone(s.deal)); setDrawer(false); setTab('summary'); };
  const deleteSaved = (id) => setSaved((s) => s.filter((x) => x.id !== id));
  const resetDeal = () => { if (confirm('Reset all inputs to the example deal? Saved deals are kept.')) { localStorage.removeItem(STORAGE_KEY); setDeal(structuredClone(DEFAULT_DEAL)); } };
  const printReport = () => setPrintOpen(true);
  const doPrint = (sel) => { setPrintSel(sel); setPrintOpen(false); setTimeout(() => window.print(), 150); };

  const metrics = [
    { l: 'Purchase Price', v: fmtMoney(deal.terms.acceptedPrice) },
    { l: 'Purchase Costs & Fees', v: fmtMoney(calc.purchaseFeesSum) },
    { l: 'Rehab Costs', v: fmtMoney(calc.rehabTotal) },
    { l: 'Selling Price', v: fmtMoney(deal.terms.sellingPrice) },
    { l: 'Selling Costs & Fees', v: fmtMoney(calc.sellingFeesSum) },
  ];

  return (
    <React.Fragment>
    <div className={appClass}>
      <div className="topbar">
        <div className="brand">
          <div className="brand-mark">
            <svg viewBox="0 0 64 64" fill="none">
              <path d="M15 55 V25 L35 11 L35 22 L49 22 V55 Z" stroke="#15140f" strokeWidth="4.5" strokeLinejoin="round" strokeLinecap="round" />
              <path d="M42 31 H27 V47 H39" stroke="#b3902f" strokeWidth="4.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>
          <div>
            <div className="brand-title">{settings.title}</div>
            <div className="brand-sub">{settings.subtitle}</div>
          </div>
        </div>
        <div className="actions">
          {flash ? <span style={{ fontSize: 13, color: 'var(--green-700)', fontWeight: 600 }}>✓ {flash}</span> : null}
          {!isReadonly ? (
            <button className="btn primary" onClick={saveDeal}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" /><path d="M17 21v-8H7v8M7 3v5h8" /></svg>
              Save deal
            </button>
          ) : null}
          <button className="btn" onClick={() => setDrawer(true)}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 6h16M4 12h16M4 18h16" /></svg>
            Saved {visibleSaved.length ? <span className="badge">{visibleSaved.length}</span> : null}
          </button>
          <button className="btn" onClick={printReport}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9V2h12v7M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 14h12v8H6z" /></svg>
            Print / PDF
          </button>
          {!isReadonly ? (
            <button className="btn" onClick={resetDeal}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7L3 8" /><path d="M3 3v5h5" /></svg>
              Reset
            </button>
          ) : null}
          {role === 'admin' ? (
            <button className="btn" onClick={() => setAdminOpen(true)} title="Admin">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" /></svg>
              Admin
            </button>
          ) : null}
          {canSettings ? (
            <button className={'btn icon-btn' + (tab === 'settings' ? ' primary' : '')} onClick={() => setTab('settings')} title="Settings" aria-label="Settings">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-2.82 1.17V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15H4.5a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 6 9.4l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6h.09A1.65 1.65 0 0 0 11 3.09V3a2 2 0 1 1 4 0v.09A1.65 1.65 0 0 0 17 4.6l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9V9z" /></svg>
            </button>
          ) : null}
          <div className="user-chip">
            <span className="uc-avatar" style={{ background: ROLES[role].color }}>{(authUser.name || authUser.username).charAt(0).toUpperCase()}</span>
            <span className="uc-info"><span className="uc-name">{authUser.name || authUser.username}</span><span className="uc-role">{ROLES[role].label}</span></span>
            <button className="uc-logout" onClick={logout} title="Sign out"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" /></svg></button>
          </div>
        </div>
      </div>

      <div className="metric-band">
        {metrics.map((m, i) => (
          <div className="metric" key={i}>
            <span className="metric-label">{m.l}</span>
            <span className="metric-value">{m.v}</span>
          </div>
        ))}
        <div className={'metric is-profit' + (profitNeg ? ' neg' : '')}>
          <span className="metric-label">Net Profit</span>
          <span className="metric-value">{fmtMoney(calc.netProfit)}</span>
          <span className="metric-spark">{fmtPct(calc.netMargin)} margin · {fmtPct(calc.roi)} ROI</span>
        </div>
      </div>

      <div className="tabs">
        {allowedTabs.map((tb) => (
          <button key={tb.id} className={'tab' + (tab === tb.id ? ' active' : '')} onClick={() => setTab(tb.id)}>
            <svg className="tab-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><path d={tb.icon} /></svg>
            {tb.label}
          </button>
        ))}
      </div>

      {tab === 'summary' && <Summary deal={deal} calc={calc} update={update} updateList={updateList} listApi={listApi} />}
      {tab === 'comps' && <CompsTabAdvanced deal={deal} calc={calc} update={update} />}
      {tab === 'scenarios' && <ScenariosTab deal={deal} calc={calc} update={update} />}
      {tab === 'caprate' && <CapRateCalc deal={deal} calc={calc} update={update} />}
      {tab === 'mortgage' && <MortgageCalc deal={deal} calc={calc} update={update} />}
      {tab === 'hard' && <HardMoneyCalc deal={deal} calc={calc} update={update} />}
      {tab === 'calculators' && <CalculatorsTab deal={deal} calc={calc} update={update} />}
      {tab === 'project' && <ProjectCalculationTab deal={deal} calc={calc} />}
      {tab === 'rental' && <RentalPropertyTab deal={deal} calc={calc} update={update} />}
      {tab === 'holding' && <HoldingTab deal={deal} calc={calc} update={update} />}
      {tab === 'neighborhood' && <NeighborhoodTab deal={deal} update={update} />}
      {tab === 'ai-rehab' && <AIRehabPlanner deal={deal} update={update} />}
      {tab === 'settings' && <SettingsPanel settings={settings} setSettings={setSettings} />}

      <div className="footnote">
        Estimates only · figures recalculate live and save in your browser · not financial advice.<br />
        Live data: LocationIQ (geocoding, maps, drive time) · RentCast (property, tax, AVM, rent, comps) · FEMA flood. Manage API keys under Settings.
      </div>

      <SavedDrawer open={drawer} onClose={() => setDrawer(false)} saved={visibleSaved} onLoad={loadSavedDeal} onDelete={deleteSaved} hideMoney={isVA} readonly={isReadonly} />
    </div>
    <FullPrintReport deal={deal} calc={calc} settings={settings} sel={printSel} />
    <AIChat deal={deal} calc={calc} />
    {adminOpen ? <AdminView currentUser={authUser} savedDeals={saved} onClose={() => setAdminOpen(false)} /> : null}
    {printOpen ? <PrintComposer onClose={() => setPrintOpen(false)} onGenerate={doPrint} /> : null}
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);