/* FinFlow Screens — Reports, Cards, Vendors */

const ReportsHome = () => {
  const d = FF_DATA;
  const [message,setMessage]=React.useState(FF_SESSION.toast || '');
  return (
    <>
      <ActionFeedback message={message}/><PageHead
        eyebrow="Reports"
        title="Reports"
        sub="Saved reports and finance close packets · Updated 12m ago"
        actions={<>
          <RefreshButton/>
          <button className="ff-btn" disabled title="You are already viewing saved reports."><Icon name="folder-open" size={14}/> Saved</button>
          <button className="ff-btn ff-btn--primary" hidden={ffRole() !== 'finance'} onClick={()=>ffGo('report-build')}><Icon name="plus" size={14}/> Build report</button>
        </>}
      />
      <div className="ff-grid" style={{gridTemplateColumns:'1fr 1fr', gap:16}}>
        <div className="ff-card" style={{padding:20, background:'oklch(0.16 0.01 240)', color:'#fff', display:'flex', flexDirection:'column', justifyContent:'space-between'}}>
          <div style={{fontSize:11, letterSpacing:'.04em', textTransform:'uppercase', opacity:0.65}}>YTD Spend</div>
          <div style={{fontSize:40, fontWeight:700, letterSpacing:'-0.02em', margin:'6px 0'}}>$553.0K</div>
          <div style={{fontSize:12, opacity:0.75}}>+18.4% YoY</div>
        </div>
        <StatRow items={[
          { label: "Burn rate", value: "$108.6K", delta: "May avg, monthly" },
          { label: "Top vendor", value: "Google Cloud", delta: "$41.3K · 7.5% of YTD" },
          { label: "Open reports", value: "6", delta: "2 due this week" }
        ]}/>
      </div>
      <div className="ff-grid" style={{gridTemplateColumns:'1fr 1fr', marginTop:20}}>
        <Card title="Cumulative spend — FY26" action={<span className="ff-row" style={{gap:8, fontSize:12, color:'var(--ff-fg-muted)'}}><span style={{width:8, height:8, background:'var(--ff-chart-1)', borderRadius:2}}/>Actual spend</span>}>
          <AreaChart data={d.cumulative} height={220} unit="$" label="Cumulative spend for fiscal year 2026"/>
        </Card>
        <div>
          <div className="ff-row" style={{padding:'0 0 10px'}}><span style={{fontSize:15, fontWeight:600}}>Top vendors — YTD</span></div>
          <table className="ff-table">
            <thead><tr><th>Vendor</th><th>Category</th><th className="ff-num">Spend</th><th className="ff-num" title="vs. prior month · red = spend increased">Δ spend</th></tr></thead>
            <tbody>
              {d.vendors.slice(0,6).map(v => (
                <tr key={v.id}>
                  <td><span className="ff-row" style={{gap:8}}><MerchantIcon name={v.name} size={14}/> {v.name}</span></td>
                  <td><CategoryTag color={d.categories.find(c=>c.id===v.cat).color} name={d.categories.find(c=>c.id===v.cat).name}/></td>
                  <td className="ff-num"><Money value={v.spend}/></td>
                  <td className="ff-num" style={{color: v.change > 0 ? 'var(--ff-rejected)' : v.change < 0 ? 'var(--ff-approved)' : 'var(--ff-fg-muted)'}}>{v.change > 0 ? '+' : ''}{v.change.toFixed(1)}%</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
      <div className="ff-row" style={{padding:'20px 0 10px'}}><span style={{fontSize:15, fontWeight:600}}>Saved reports</span></div>
      <table className="ff-table">
        <thead><tr><th>Name</th><th>Owner</th><th>Schedule</th><th>Last run</th><th></th></tr></thead>
        <tbody>
          {[
            ["Monthly close packet", "Morgan E.", "Monthly · 1st", "May 1, 6:00 AM"],
            ["Travel by team",        "Morgan E.", "Weekly · Mon",  "May 19, 8:00 AM"],
            ["Software vendors over $1K", "Sam R.", "Quarterly",    "Apr 1, 6:00 AM"],
            ["Marketing spend by campaign", "Casey P.", "Manual",     "May 20, 2:14 PM"]
          ].concat(FF_SESSION.savedReports||[]).map(([n,o,s,l], i) => (
            <tr key={i}><td><strong>{n}</strong></td><td>{o}</td><td>{s}</td><td className="ff-tnum" style={{color:'var(--ff-fg-muted)'}}>{l}</td><td><button className="ff-btn ff-btn--sm ff-btn--ghost" onClick={()=>{FF_SESSION.reportName=n;ffGo('saved-report');}}>Run</button></td></tr>
          ))}
        </tbody>
      </table>
    </>
  );
};

const ReportBuilder = () => {
  const [emailEachRun, setEmailEachRun] = React.useState(true);
  const [shareTeam, setShareTeam] = React.useState(false);
  const [name,setName] = React.useState('Spend by category (last 90d)');
  const [errors,setErrors] = React.useState({});
  const [message,setMessage] = React.useState('');
  const save=()=>{const next=!name.trim()?{name:'Enter a report name.'}:{};setErrors(next);if(Object.keys(next).length){setMessage('');FF_SESSION.toast='';FF_SESSION.toastTarget=null;return;}FF_SESSION.reportName=name.trim();FF_SESSION.savedReports||=[];if(!FF_SESSION.savedReports.some(r=>r[0]===name.trim()))FF_SESSION.savedReports.push([name.trim(),FF_DATA.me[ffRole()].name,'Manual','Just now']);ffToast('Report saved.','saved-report');ffGo('saved-report');};
  return <>
    <PageHead eyebrow="Reports · Build" title="Untitled report" sub="Name this sample report and choose its preferences"
      actions={<><button className="ff-btn" onClick={()=>ffGo('reports')}>Discard</button><button className="ff-btn ff-btn--primary" onClick={save}><Icon name="floppy-disk" size={14}/> Save report</button></>}/>
      <ActionFeedback message={message}/><FormSummary errors={errors} title="Check the report"/>
    <div className="ff-grid" style={{gridTemplateColumns:'260px 1fr 280px', gap:16}}>
      <Card title="Fields">
        <div className="ff-eyebrow" style={{margin:'6px 0'}}>Dimensions</div>
        {["Category","Vendor","Owner","Team","Project","Date"].map(x => <div key={x} className="ff-nav-item" aria-disabled="true" title="Changing report dimensions is not available in this prototype." style={{cursor:'not-allowed',opacity:0.5}}><Icon name="dots-six-vertical" size={14}/>{x}</div>)}
        <div className="ff-eyebrow" style={{margin:'16px 0 6px'}}>Measures</div>
        {["Amount","Count","Avg per item","Median","% of budget"].map(x => <div key={x} className="ff-nav-item" aria-disabled="true" title="Changing report measures is not available in this prototype." style={{cursor:'not-allowed',opacity:0.5}}><Icon name="dots-six-vertical" size={14}/>{x}</div>)}
      </Card>
      <Card title="Preview">
        <div className="ff-row" style={{gap:8, marginBottom:16, flexWrap:'wrap'}}>
          <span className="ff-chip" aria-pressed="true">Rows: Category</span>
          <span className="ff-chip" aria-pressed="true">Columns: Month</span>
          <span className="ff-chip" aria-pressed="true">Measure: Sum(amount)</span>
          <span className="ff-chip">Filter: Last 90 days</span>
        </div>
        <BarChart data={FF_DATA.categoryBreakdown.map(c=>({cat: FF_DATA.categories.find(x=>x.id===c.cat).name, value:c.value}))}
          colors={FF_DATA.categoryBreakdown.map(c => FF_DATA.categories.find(x=>x.id===c.cat).color)}
          height={260} unit="$" label="Spend by category, last 90 days"/>
      </Card>
      <Card title="Options">
        <div className="ff-stack" style={{'--ff-stack-gap':'12px'}}>
          <div className="ff-field"><label className="ff-label">Report name <span aria-hidden="true" style={{color:'var(--ff-rejected)'}}>*</span></label><input aria-label="Report name" className="ff-input" value={name} onChange={e=>setName(e.target.value)} onBlur={()=>setErrors(name.trim()?{}:{name:'Enter a report name.'})}/><FieldError error={errors.name}/></div>
          <div className="ff-field"><label className="ff-label">Schedule</label><select className="ff-select"><option>Weekly · Monday 8am</option><option>Monthly</option><option>Manual</option></select></div>
          <div className="ff-row" style={{justifyContent:'space-between'}}><span>Email me each run</span><button className="ff-switch" style={{border:0,padding:0}} role="switch" aria-checked={emailEachRun} aria-label="Email me each run" onClick={()=>{setEmailEachRun(v=>!v);setMessage('Report schedule preference updated.');}}/></div>
          <div className="ff-row" style={{justifyContent:'space-between'}}><span>Share with team</span><button className="ff-switch" style={{border:0,padding:0}} role="switch" aria-checked={shareTeam} aria-label="Share with team" onClick={()=>{setShareTeam(v=>!v);setMessage('Report sharing preference updated.');}}/></div>
        </div>
      </Card>
    </div>
  </>;
};

const SavedReport = () => {
  const d = FF_DATA;
  const [message,setMessage]=React.useState(FF_SESSION.toast || '');
  return (
    <>
      <ActionFeedback message={message}/><PageHead eyebrow="Report" title={FF_SESSION.reportName||'Monthly close packet'} sub="Sample report data · Preview only"
        actions={<><button className="ff-btn" disabled title="Re-running reports is not available in this prototype."><Icon name="arrow-clockwise" size={14}/> Re-run</button><button className="ff-btn" disabled title="Sharing reports is not available in this prototype."><Icon name="share-network" size={14}/> Share</button><button className="ff-btn ff-btn--primary" onClick={()=>ffGo('export-report')}><Icon name="download-simple" size={14}/> Export PDF</button></>}/>
      <StatRow items={[
        { label: "Total spend", value: "$348.0K", delta: "+9% vs Mar", trend: "up" },
        { label: "Reimbursed", value: "$42.1K", delta: "142 reimbursements" },
        { label: "Variance vs plan", value: "−2.4%", delta: "Under by $8.6K", trend: "up" },
        { label: "Top category", value: "Software", delta: "$184.2K · 33%" }
      ]} style={{padding:'4px 0 20px'}}/>
      <div className="ff-grid" style={{gridTemplateColumns:'1.4fr 1fr'}}>
        <Card title="Spend by week">
          <LineChart data={d.spendOverTime} height={240} unit="$" label="Weekly spend for April close"/>
        </Card>
        <Card title="By category">
          <BarChart data={d.categoryBreakdown.map(c => ({ cat: d.categories.find(x=>x.id===c.cat).name, value: c.value }))}
            colors={d.categoryBreakdown.map(c => d.categories.find(x=>x.id===c.cat).color)}
            height={240} unit="$" label="April spend by category"/>
        </Card>
      </div>
    </>
  );
};

const ExportReport = () => {
  const [format, setFormat] = React.useState("PDF");
  return <>
    <PageHead eyebrow="Export" title="Export report" sub="Choose format and recipients"/>
    <div className="ff-grid" style={{gridTemplateColumns:'1fr 1fr', gap:24}}>
      <Card>
        <div className="ff-stack" style={{'--ff-stack-gap':'14px'}}>
          <div className="ff-field"><label className="ff-label">Format</label>
            <div className="ff-segmented" style={{width:'fit-content'}}>
              {['PDF','CSV','XLSX','QBO'].map(value => <button key={value} aria-pressed={format === value} onClick={()=>setFormat(value)}>{value}</button>)}
            </div>
          </div>
          <div className="ff-field"><label className="ff-label">Date range</label><input disabled title="Changing the export date range is not available in this prototype." className="ff-input ff-tnum" defaultValue="2026-04-01 → 2026-04-30"/></div>
          <div className="ff-field"><label className="ff-label">Include</label>
            <div className="ff-row" style={{gap:16}}>
              <label className="ff-row" style={{gap:6, fontSize:13}}><input disabled title="Export contents are fixed in this prototype." type="checkbox" defaultChecked/> Charts</label>
              <label className="ff-row" style={{gap:6, fontSize:13}}><input disabled title="Export contents are fixed in this prototype." type="checkbox" defaultChecked/> Line-items</label>
              <label className="ff-row" style={{gap:6, fontSize:13}}><input disabled title="Export contents are fixed in this prototype." type="checkbox"/> Receipt images</label>
            </div>
          </div>
          <div className="ff-field"><label className="ff-label">Email to</label><input disabled title="Sending report exports is not available in this prototype." className="ff-input" defaultValue="morgan.ellis@reyonal.com, board@reyonal.com"/></div>
          <button className="ff-btn ff-btn--primary" disabled title="Downloading and emailing report exports are not available in this prototype.">Export (preview only)</button>
        </div>
      </Card>
      <Card title="Preview">
        <div style={{aspectRatio:'8.5/11', background:'#fff', border:'1px solid var(--ff-border)', borderRadius:6, boxShadow:'var(--ff-shadow-md)', padding:'20px 18px', color:'#15181c', display:'flex', flexDirection:'column', gap:8, fontSize:11}}>
          <div style={{fontFamily:'var(--ff-font-sans)', fontWeight:600, fontSize:18, letterSpacing:'-0.02em'}}>FinFlow · Monthly Close — April FY26</div>
          <div style={{color:'#888'}}>Sample workspace · Generated May 1, 2026 · {format}</div>
          <div style={{height:60, background:'var(--ff-chart-1)', opacity:0.2, borderRadius:4, marginTop:8}}/>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:6}}>
            {["$348K","$42K","−2.4%","6/6"].map((x,i)=>(
              <div key={i} style={{padding:'6px 8px', background:'#F0F2F4', borderRadius:3}}>{x}</div>
            ))}
          </div>
          <div style={{flex:1}}/>
          <div style={{textAlign:'right', color:'#888'}}>Page 1 of 4</div>
        </div>
      </Card>
    </div>
  </>;
};

const CardsList = () => {
  const d = FF_DATA;
  const [cardStates, setCardStates] = React.useState({});
  const [message, setMessage] = React.useState('');
  const toggleCard = (card, status) => { const next=status === 'frozen' ? 'active' : 'frozen'; card.status=next;setCardStates(current => ({...current, [card.id]: next})); setMessage(`Card •••• ${card.last4} ${next === 'frozen' ? 'frozen' : 'unfrozen'}.`); };
  return (
    <>
      <PageHead eyebrow="Cards" title="Corporate cards" sub={`${d.cards.length} cards · ${d.cards.filter(c=>c.status==='active').length} active · Updated 12m ago`}
        actions={<><RefreshButton/><button className="ff-btn" disabled title="Statement downloads are not available in this prototype."><Icon name="download-simple" size={14}/> Statement</button><button className="ff-btn ff-btn--primary" hidden={ffRole() !== 'finance'} onClick={()=>ffGo('issue-card')}><Icon name="plus" size={14}/> Issue card</button></>}/>
      {FF_SESSION.toast && <div className="ff-alert ff-alert--info" role="status" style={{marginBottom:16}}>{FF_SESSION.toast}</div>}
      <ActionFeedback message={message}/>
      {d.cards.length === 0 ? (
        <EmptyState icon="credit-card" title="No cards issued yet"
          body="Issue a virtual card instantly, or order a physical card for a teammate."
          actions={<button className="ff-btn ff-btn--primary" hidden={ffRole() !== 'finance'} onClick={()=>ffGo('issue-card')}><Icon name="plus" size={14}/> Issue card</button>}/>
      ) : (
      <div className="ff-grid" style={{gridTemplateColumns:'repeat(3, 1fr)', gap:16}}>
        {d.cards.map(c => {
          const status = cardStates[c.id] || c.status;
          return (
          <div key={c.id} className="ff-card" style={{overflow:'hidden'}}>
            <div style={{
              padding:'20px', color:'#fff', aspectRatio:'1.586 / 1',
              background: status === 'frozen'
                ? 'linear-gradient(135deg, var(--ff-ink-700), var(--ff-ink-950))'
                : 'linear-gradient(135deg, var(--ff-blue-700), var(--ff-blue-900))',
              display:'flex', flexDirection:'column', justifyContent:'space-between', gap:12, position:'relative'
            }}>
              <div className="ff-row" style={{justifyContent:'space-between'}}>
                <div style={{fontSize:10, letterSpacing:'0.12em', textTransform:'uppercase', opacity:0.7}}>{c.type === "virtual" ? "Virtual" : "Physical"}</div>
                <BrandMark variant="mark" size={22} theme="dark"/>
              </div>
              {c.type !== "virtual" && <div style={{width:34, height:26, borderRadius:5, background:'linear-gradient(135deg, #e8d48a, #c9a94f)'}}/>}
              <div className="ff-mono" style={{fontSize:15, letterSpacing:'0.1em'}}>•••• •••• •••• {c.last4}</div>
              <div className="ff-row" style={{justifyContent:'space-between', alignItems:'flex-end'}}>
                <div>
                  <div style={{fontSize:9, opacity:0.7, textTransform:'uppercase'}}>Holder</div>
                  <div style={{fontSize:12}}>{c.holder}</div>
                </div>
                {status === 'frozen' && <span className="ff-badge ff-badge--on-dark"><span className="ff-badge__icon"><Icon name="snowflake" size={11}/></span>Frozen</span>}
              </div>
            </div>
            <div style={{padding:'14px 16px', borderTop:'1px solid var(--ff-border)', background:'var(--ff-card-2)'}}>
              <BudgetBar label="Used this month" budget={c.limit/1000} spent={c.spent/1000}/>
            </div>
            <div style={{padding:16}}>
              <div className="ff-row" style={{gap:8}}>
                <button className="ff-btn ff-btn--sm" style={{flex:1}} onClick={()=>ffGo('card-detail',{cardId:c.id})}>View</button>
                <button className="ff-btn ff-btn--sm" disabled={status==='canceled'} title={status==='canceled'?'This card has been permanently canceled.':undefined} onClick={()=>toggleCard(c, status)}>{status==='canceled'?'Canceled':status === 'frozen' ? 'Unfreeze' : 'Freeze'}</button>
              </div>
            </div>
          </div>
        );})}
      </div>
      )}
    </>
  );
};

const CardDetail = () => {
  const d = FF_DATA;
  const c = d.cards.find(card=>card.id===FF_SESSION.cardId) || d.cards[0];
  const [status, setStatus] = React.useState(c.status);
  const [message, setMessage] = React.useState("");
  const [confirming, setConfirming] = React.useState(false);
  return (
    <>
      <PageHead eyebrow={`Card · ${c.type}`} title={`•••• ${c.last4}`} sub={`${c.holder} · issued Jan 2024`}
        actions={<><button className="ff-btn" disabled={status==='canceled'} title={status==='canceled'?'This card has been permanently canceled.':undefined} onClick={()=>{const next=status === 'frozen' ? 'active' : 'frozen';c.status=next;setStatus(next);setMessage(`Card •••• ${c.last4} ${next === 'frozen' ? 'frozen' : 'unfrozen'}.`);}}><Icon name="snowflake" size={14}/> {status === 'frozen' ? 'Unfreeze' : 'Freeze'}</button><button className="ff-btn" disabled title="Editing existing card limits is not available in this prototype."><Icon name="pencil" size={14}/> Edit limits</button><button className="ff-btn ff-btn--danger" onClick={()=>setConfirming(true)} disabled={status === 'canceled'} title={status==='canceled'?'This card has already been permanently canceled.':undefined}><Icon name="trash" size={14}/> Cancel card</button></>}/>
      <ActionFeedback message={message}/>
      {confirming && <ConfirmDialog title="Cancel card?" body={`This will permanently cancel card ••••${c.last4}.`} onCancel={()=>setConfirming(false)} onConfirm={()=>{setConfirming(false);c.status='canceled';setStatus('canceled');setMessage(`Card •••• ${c.last4} canceled.`);}}/>}
      <div className="ff-grid" style={{gridTemplateColumns:'1fr 1fr', gap:16}}>
        <Card title="This card">
          <div style={{padding:'24px', borderRadius:12, maxWidth:360, aspectRatio:'1.586 / 1', display:'flex', flexDirection:'column', justifyContent:'space-between', background:'linear-gradient(135deg, var(--ff-blue-700), var(--ff-blue-900))', color:'#fff'}}>
            <div className="ff-row" style={{justifyContent:'space-between'}}><div style={{fontSize:11, letterSpacing:'0.12em', textTransform:'uppercase', opacity:0.7}}>{c.type}</div><BrandMark variant="mark" size={28} theme="dark"/></div>
            <div className="ff-mono" style={{fontSize:20, letterSpacing:'0.12em'}}>•••• •••• •••• {c.last4}</div>
            <div className="ff-row" style={{justifyContent:'space-between'}}>
              <div><div style={{fontSize:10, opacity:0.7, textTransform:'uppercase'}}>Holder</div><div>{c.holder}</div></div>
              <div><div style={{fontSize:10, opacity:0.7, textTransform:'uppercase'}}>Exp</div><div className="ff-mono">03/27</div></div>
              <div><div style={{fontSize:10, opacity:0.7, textTransform:'uppercase'}}>CVV</div><div className="ff-mono">•••</div></div>
            </div>
          </div>
          <div style={{marginTop:18}}><BudgetBar label="Used this month" budget={c.limit/1000} spent={c.spent/1000}/></div>
        </Card>
        <Card title="Settings">
          <div className="ff-stack" style={{'--ff-stack-gap':'10px'}}>
            <SettingRow label="Monthly limit" value={<Money value={c.limit}/>}/>
            <SettingRow label="Per-transaction" value={c.perTransaction?<Money value={c.perTransaction}/>:'Not configured'}/>
            <SettingRow label="Allowed categories" value="Travel, Meals"/>
            <SettingRow label="International" value="Allowed"/>
            <SettingRow label="ATM withdrawals" value="Disabled"/>
            <SettingRow label="Cardholder PIN" value="Set"/>
          </div>
        </Card>
      </div>
      <div className="ff-row" style={{padding:'20px 0 10px'}}><span style={{fontSize:15, fontWeight:600}}>Recent transactions</span></div>
      {!d.expenses.some(e=>e.cardLast4===c.last4)&&<EmptyState icon="credit-card" title="No transactions yet" body="Charges made with this card will appear here." actions={<button className="ff-btn" onClick={()=>ffGo('cards')}>View all cards</button>}/>}
      <table className="ff-table">
        <thead><tr><th>Date</th><th>Merchant</th><th>Memo</th><th className="ff-num">Amount</th><th>Status</th></tr></thead>
        <tbody>
          {d.expenses.filter(e => e.cardLast4 === c.last4).map(e => (
            <tr key={e.id}>
              <td className="ff-tnum" style={{color:'var(--ff-fg-muted)'}}>{fmtDate(e.date)}</td>
              <td><span className="ff-row" style={{gap:8}}><MerchantIcon name={e.merchant} size={14}/><strong>{e.merchant}</strong></span></td>
              <td style={{color:'var(--ff-fg-muted)'}}>{e.memo}</td>
              <td className="ff-num"><Money value={e.amount}/></td>
              <td><StatusBadge status={e.status}/></td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
};

const SettingRow = ({ label, value }) => (
  <div className="ff-row" style={{justifyContent:'space-between', fontSize:13, padding:'8px 0', borderBottom:'1px solid var(--ff-border)'}}>
    <span style={{color:'var(--ff-fg-muted)'}}>{label}</span>
    <span style={{fontWeight:500}}>{value}</span>
  </div>
);

const IssueCard = () => {
  const [holder,setHolder] = React.useState('Casey Parker');
  const [type,setType] = React.useState('virtual');
  const [limit,setLimit] = React.useState('5,000');
  const [perTransaction,setPerTransaction] = React.useState('2,500');
  const [errors,setErrors] = React.useState({});
  const validateLimit = (key, raw, label) => { const n=Number(String(raw).replaceAll(',','')); setErrors(current=>({...current,[key]:(!Number.isFinite(n)||n<=0)?`Enter a positive ${label} limit.`:''})); };
  const issue = () => {
    if(ffRole() !== 'finance') return;
    const value = Number(limit.replaceAll(',','')); const per = Number(perTransaction.replaceAll(',',''));
    const next={}; if(!holder.trim()) next.holder='Choose a cardholder.'; if(!Number.isFinite(value)||value<=0) next.limit='Enter a positive monthly limit.'; if(!Number.isFinite(per)||per<=0) next.per='Enter a positive per-transaction limit.'; if(value>0&&per>value) next.per='Per-transaction limit cannot exceed the monthly limit.'; setErrors(next); if(Object.keys(next).length) return;
    const serial = FF_DATA.cards.length+1;
    const card = {id:'card-demo-'+serial,type,holder,limit:value,perTransaction:per,spent:0,status:'active',last4:String(9000+serial)};
    FF_DATA.cards.unshift(card);
    ffToast(`${type === 'virtual' ? 'Virtual' : 'Physical'} card •••• ${card.last4} issued to ${holder}.`,'cards');
    ffGo('cards');
  };
  return (
  <>
    <PageHead eyebrow="Cards" title="Issue a new card" sub="Virtual cards are ready instantly. Physical cards arrive in 5–7 days."/>
    <div className="ff-grid" style={{gridTemplateColumns:'1.4fr 1fr', gap:24}}>
      <Card>
        <FormSummary errors={errors} title="Check the card details"/><div className="ff-stack" style={{'--ff-stack-gap':'14px'}}>
          <div className="ff-field"><label className="ff-label">Card type</label>
            <div className="ff-segmented"><button aria-pressed={type === "virtual"} onClick={()=>setType("virtual")}>Virtual</button><button aria-pressed={type === "physical"} onClick={()=>setType("physical")}>Physical</button></div>
          </div>
          <div className="ff-field"><label className="ff-label">Cardholder</label>
            <select aria-label="Cardholder" className="ff-select" value={holder} onChange={e=>setHolder(e.target.value)}><option value="Casey Parker">Casey Parker · Marketing</option><option value="Quinn Avery">Quinn Avery · Eng</option><option value="Vendor card">Vendor card (no holder)</option></select>
          </div>
          <div className="ff-grid ff-grid--2">
            <div className="ff-field"><label className="ff-label">Monthly limit <span aria-hidden="true" style={{color:'var(--ff-rejected)'}}>*</span></label><input className="ff-input ff-tnum" aria-label="Monthly limit" value={limit} onChange={e=>setLimit(e.target.value)} onBlur={()=>validateLimit('limit',limit,'monthly')}/><FieldError error={errors.limit}/></div>
            <div className="ff-field"><label className="ff-label">Per-transaction <span aria-hidden="true" style={{color:'var(--ff-rejected)'}}>*</span></label><input className="ff-input ff-tnum" aria-label="Per-transaction" value={perTransaction} onChange={e=>setPerTransaction(e.target.value)} onBlur={()=>validateLimit('per',perTransaction,'per-transaction')}/><FieldError error={errors.per}/></div>
          </div>
          <div className="ff-field"><label className="ff-label">Allowed categories</label>
            <div className="ff-row" style={{flexWrap:'wrap'}}>
              {FF_DATA.categories.map((c, i) => <button key={c.id} className="ff-chip" aria-pressed={i < 3} disabled title="Allowed card categories are fixed in this prototype.">{c.name}</button>)}
            </div>
          </div>
          <div className="ff-row" style={{justifyContent:'space-between'}}>
            <div><div style={{fontSize:13, fontWeight:500}}>Notify on each charge</div><div style={{fontSize:12, color:'var(--ff-fg-muted)'}}>Email + Google Chat</div></div>
            <button className="ff-switch" role="switch" aria-label="Notify cardholder" aria-checked="true" disabled title="Cardholder notification is always enabled in this prototype."/>
          </div>
        </div>
      </Card>
      <Card title="Preview">
        <div style={{padding:'24px', borderRadius:12, maxWidth:360, aspectRatio:'1.586 / 1', display:'flex', flexDirection:'column', justifyContent:'space-between', background:'linear-gradient(135deg, var(--ff-blue-700), var(--ff-blue-900))', color:'#fff'}}>
          <div className="ff-row" style={{justifyContent:'space-between'}}><div style={{fontSize:10, letterSpacing:'0.12em', textTransform:'uppercase', opacity:0.7}}>{type} · New</div><BrandMark variant="mark" size={26} theme="dark"/></div>
          <div className="ff-mono" style={{fontSize:18, letterSpacing:'0.12em'}}>•••• •••• •••• ••••</div>
          <div className="ff-row" style={{justifyContent:'space-between'}}>
            <div><div style={{fontSize:10, opacity:0.7, textTransform:'uppercase'}}>Holder</div><div style={{fontSize:13}}>{holder}</div></div>
            <div><div style={{fontSize:10, opacity:0.7, textTransform:'uppercase'}}>Limit</div><div className="ff-tnum" style={{fontSize:13}}>{limit}</div></div>
          </div>
        </div>
        <button className="ff-btn ff-btn--primary ff-btn--lg" style={{width:'100%', marginTop:16}} onClick={issue}>Issue card</button>
      </Card>
    </div>
  </>
);
};

const FreezeCardModal = ({ onClose }) => (
  <div className="ff-modal-backdrop" onClick={onClose}>
    <div className="ff-modal" onClick={e => e.stopPropagation()}>
      <div className="ff-modal__head">
        <div className="ff-modal__title">Freeze card · •••• 4112</div>
        <div className="ff-modal__sub">Jordan Lee will not be able to charge this card until unfrozen.</div>
      </div>
      <div className="ff-modal__body">
        <div className="ff-field"><label className="ff-label">Reason (optional)</label><textarea className="ff-textarea" placeholder="e.g. Suspicious activity, off-policy charge…"/></div>
        <div className="ff-row" style={{marginTop:12, gap:16}}>
          <label className="ff-row" style={{gap:6, fontSize:13}}><input type="checkbox"/> Notify cardholder</label>
          <label className="ff-row" style={{gap:6, fontSize:13}}><input type="checkbox" defaultChecked/> Add to audit log</label>
        </div>
      </div>
      <div className="ff-modal__foot">
        <button className="ff-btn" onClick={onClose}>Cancel</button>
        <button className="ff-btn ff-btn--primary" disabled title="Card freezing is handled from the card list in this prototype.">Freeze card</button>
      </div>
    </div>
  </div>
);

const VendorsList = () => {
  const d = FF_DATA;
  const [query, setQuery] = React.useState("");
  const vendors = d.vendors.filter(v => !query.trim() || `${v.name} ${v.id}`.toLowerCase().includes(query.trim().toLowerCase()));
  return (
    <>
      <PageHead eyebrow="Vendors" title="Vendor directory" sub={`${d.vendors.length} vendors active YTD · Updated 12m ago`}
        actions={<><RefreshButton/><button className="ff-btn" disabled title="W-9 imports are not available in this prototype."><Icon name="upload-simple" size={14}/> Import W-9s</button><button className="ff-btn ff-btn--primary" disabled title="Adding vendors is not available in this prototype."><Icon name="plus" size={14}/> Add vendor</button></>}/>

      {/* Search-first composition — a directory screen starts with finding
          a row, not with a card wrapping the whole table. */}
      <div className="ff-search" style={{maxWidth:340, marginBottom:20}}>
        <Icon name="magnifying-glass" size={14}/>
        <input placeholder="Search vendors…" value={query} onChange={e=>setQuery(e.target.value)} aria-label="Search vendors"/>
      </div>

      {vendors.length === 0 ? (
        <EmptyState icon="storefront" title={query.trim() ? "No vendors found" : "No vendors yet"}
          body={query.trim() ? "Try a different search term or clear the search." : "Vendors appear here once you approve an expense from a new merchant, or add one directly."}
          actions={query.trim() ? <button className="ff-btn" onClick={()=>setQuery('')}>Clear search</button> : <button className="ff-btn ff-btn--primary" disabled title="Adding vendors is not available in this prototype."><Icon name="plus" size={14}/> Add vendor</button>}/>
      ) : (
        <table className="ff-table">
          <thead><tr><th>Vendor</th><th>Category</th><th className="ff-num">YTD spend</th><th className="ff-num" title="red = spend increased">Δ vs Q1</th><th>Top owner</th><th>Status</th></tr></thead>
          <tbody>
            {vendors.map(v => (
              <tr key={v.id} data-row-focus tabIndex="0" onClick={()=>ffGo('vendor-detail',{vendorId:v.id})} onKeyDown={ffRowKeyDown} aria-label={`${v.name} vendor`} style={{cursor:'pointer'}}>
                <td><div className="ff-row" style={{gap:8, fontWeight:500}}><MerchantIcon name={v.name} size={16}/> {v.name}</div><div style={{fontSize:11, color:'var(--ff-fg-muted)'}}>vendor-{v.id.slice(1).padStart(4, '0')}@reyonal.com</div></td>
                <td><CategoryTag color={d.categories.find(c=>c.id===v.cat).color} name={d.categories.find(c=>c.id===v.cat).name}/></td>
                <td className="ff-num"><Money value={v.spend}/></td>
                <td className="ff-num" style={{color: v.change > 0 ? 'var(--ff-rejected)' : v.change < 0 ? 'var(--ff-approved)' : 'var(--ff-fg-muted)'}}>{v.change > 0 ? '+' : ''}{v.change.toFixed(1)}%</td>
                <td>Morgan E.</td>
                <td><StatusBadge status="approved"/></td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </>
  );
};

const VendorDetail = () => {
  const d = FF_DATA;
  const v = d.vendors.find(item=>item.id === FF_SESSION.vendorId) || d.vendors[0];
  // Build a vendor-specific spend over time
  const vendorTrend = d.spendOverTime.map((p, i) => ({ w: p.w, v: Math.round((p.v * 0.7 + i * 1.4) * 10) / 10 }));
  return (
    <>
      <PageHead eyebrow="Vendor" title={<span className="ff-row" style={{gap:10, alignItems:'center'}}><MerchantIcon name={v.name} size={26}/> {v.name}</span>} sub={`${v.id} · ${d.categories.find(c=>c.id === v.cat).name} · Sample vendor`}
        actions={<><button className="ff-btn" disabled title="Contract documents are not available in this prototype."><Icon name="paperclip" size={14}/> Contracts</button><button className="ff-btn" disabled title="Vendor messaging is not available in this prototype."><Icon name="envelope" size={14}/> Message</button><button className="ff-btn ff-btn--primary" disabled title="Vendor payments are outside this prototype. Reimbursements are for employee expenses." >Pay vendor</button></>}/>
      <StatRow items={[
        { label: "YTD spend", value: `$${(v.spend/1000).toFixed(1)}K`, delta: `${v.change>0?'+':''}${v.change}% vs Q1`, trend: v.change > 0 ? "up" : v.change < 0 ? "down" : undefined },
        { label: "Transactions", value: "38", delta: "3 this week" },
        { label: "Avg invoice", value: "$1,086", delta: "−4% vs Q1" },
        { label: "Open invoices", value: "2", delta: "Both within 30d" }
      ]} style={{padding:'4px 0 20px'}}/>
      <Card title="Spend over time">
        <LineChart data={vendorTrend} height={220} unit="$" label={`Spend over time with ${v.name}`}/>
      </Card>
      <div className="ff-row" style={{padding:'20px 0 10px'}}><span style={{fontSize:15, fontWeight:600}}>Recent transactions</span></div>
      {d.expenses.filter(e=>e.merchant === v.name).length === 0 ? <EmptyState icon="receipt" title="No transactions yet" body={`Transactions for ${v.name} will appear here after an expense is recorded.`} actions={<button className="ff-btn" onClick={()=>ffGo('expenses')}>View expenses</button>}/> : <table className="ff-table">
        <thead><tr><th>Date</th><th>Memo</th><th>Owner</th><th className="ff-num">Amount</th><th>Status</th></tr></thead>
        <tbody>
          {d.expenses.filter(e=>e.merchant === v.name).map(e=>[e.date,e.memo,e.who,e.amount,e.status]).map(([dt,m,w,a,s], i) => (
            <tr key={i}><td className="ff-tnum" style={{color:'var(--ff-fg-muted)'}}>{dt}</td><td>{m}</td><td>{w}</td><td className="ff-num"><Money value={a}/></td><td><StatusBadge status={s}/></td></tr>
          ))}
        </tbody>
      </table>}
    </>
  );
};

Object.assign(window, { ReportsHome, ReportBuilder, SavedReport, ExportReport, CardsList, CardDetail, IssueCard, FreezeCardModal, VendorsList, VendorDetail });