/* Canopy ERP — extra views: Onboarding, Invoice Detail, Financing Dashboard,
   Buyer validation link modal. Kept compact. */

/* -------------------- ONBOARDING -------------------- */
const Onboarding = ({ onFinish, onSkip }) => {
  const [step, setStep] = React.useState(0);
  const steps = [
    { t:"Connect to Aria", s:"ERP Corp shares your data with Aria via API — no paperwork.", icon:"zap" },
    { t:"KYB & identity",  s:"Aria verifies your company and UBO. Typically 2 minutes.",       icon:"shield-check" },
    { t:"Sign agreement",  s:"One e-signature covers the financing framework. Fee: 2% flat.",  icon:"pen-line" },
    { t:"You're live",     s:"Pick any eligible invoice and get paid in ~4 hours.",            icon:"check-circle-2" },
  ];
  React.useEffect(()=>{ if(window.lucide) lucide.createIcons(); },[step]);
  const last = step === steps.length - 1;
  return (
    <div className="ob">
      <div className="ob-card">
        <div className="ob-head">
          <div className="ob-brand">
            <img src="aria/logo_forest.png" alt="Aria"/>
            <span>× ERP Corp</span>
          </div>
          <button className="ob-skip" onClick={onSkip}>Skip for now</button>
        </div>
        <div className="ob-body">
          <div className="ob-icon"><i data-lucide={steps[step].icon}></i></div>
          <div className="ob-step-label">Step {step+1} of {steps.length}</div>
          <h2 className="ob-title">{steps[step].t}</h2>
          <p className="ob-sub">{steps[step].s}</p>

          {step === 0 && (
            <div className="ob-api">
              <div className="ob-api-row"><i data-lucide="check"></i> <span>Company info · <b>Boreal Studio SAS</b></span></div>
              <div className="ob-api-row"><i data-lucide="check"></i> <span>Invoice history · <b>last 24 months</b></span></div>
              <div className="ob-api-row"><i data-lucide="check"></i> <span>Bank account · <b>Revolut ••••0134</b></span></div>
              <div className="ob-api-foot">Shared via Aria API — you don't re-enter anything.</div>
            </div>
          )}
          {step === 1 && (
            <div className="ob-kyb">
              <div className="ob-kyb-row"><span>Legal name</span><b>Boreal Studio SAS</b></div>
              <div className="ob-kyb-row"><span>SIREN</span><b>892 301 477</b></div>
              <div className="ob-kyb-row"><span>UBO</span><b>Anna Mercier</b></div>
              <div className="ob-kyb-row"><span>Verification</span><span className="badge pos"><i data-lucide="check"></i> Matched</span></div>
            </div>
          )}
          {step === 2 && (
            <div className="ob-tos">
              <div className="ob-tos-title">Financing framework agreement</div>
              <div className="ob-tos-body">Aria SAS advances approved receivables at a <b>2.00%</b> flat fee. Buyers are notified of the new IBAN at validation.</div>
              <label className="ob-tos-check"><input type="checkbox" className="cb" defaultChecked/> <span>I accept the framework and authorise e-signature.</span></label>
            </div>
          )}
          {step === 3 && (
            <div className="ob-final">
              <div className="ob-final-num"><i data-lucide="check-circle-2" style={{width:48,height:48,color:"var(--aria-forest)"}}></i></div>
              <div className="ob-final-sub">You're live · 9 invoices ready to finance</div>
            </div>
          )}
        </div>
        <div className="ob-foot">
          <div className="ob-dots">{steps.map((_,i)=><span key={i} className={"ob-dot"+(i===step?" active":"")+(i<step?" done":"")}/>)}</div>
          <div style={{display:"flex",gap:8}}>
            {step > 0 && <button className="btn btn-secondary" onClick={()=>setStep(step-1)}>Back</button>}
            <button className="btn btn-primary" onClick={()=>last ? onFinish() : setStep(step+1)}>
              {last ? "Enter ERP Corp" : "Continue"} <i data-lucide="arrow-right"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

/* -------------------- INVOICE DETAIL DRAWER -------------------- */
const InvoiceDetail = ({ invoice, onClose, onRequest }) => {
  React.useEffect(()=>{ if(window.lucide) lucide.createIcons(); },[]);
  if (!invoice) return null;
  const docs = invoice.docs || [];
  const eligible = invoice.status === "pending";
  return (
    <div className="scrim drawer" onClick={onClose}>
      <div className="detail" onClick={e=>e.stopPropagation()}>
        <div className="detail-head">
          <div>
            <div className="detail-crumbs">Invoices / <b>{invoice.id}</b></div>
            <h2 className="detail-title">{invoice.buyer}</h2>
            <div className="detail-sub">{invoice.buyerSub} · {invoice.terms}</div>
          </div>
          <button className="modal-close" onClick={onClose}><i data-lucide="x"></i></button>
        </div>

        <div className="detail-amount-row">
          <div>
            <div className="detail-amount-label">Invoice amount</div>
            <div className="detail-amount"><span className="cur">€</span>{invoice.amount.toLocaleString("en-GB",{minimumFractionDigits:2})}</div>
          </div>
          <div className="detail-status"><StatusBadge status={invoice.status} fundedOn={invoice.fundedOn}/></div>
        </div>

        <div className="detail-grid">
          <div><div className="detail-k">Issued</div><div className="detail-v">{invoice.issued}</div></div>
          <div><div className="detail-k">Due</div><div className="detail-v">{fmtDue(invoice.dueIn)}</div></div>
          <div><div className="detail-k">Terms</div><div className="detail-v">{invoice.terms}</div></div>
          <div><div className="detail-k">Validation</div><div className="detail-v">{invoice.validation === "auto" ? "Auto-validated" : "Buyer confirmation"}</div></div>
        </div>

        <div className="detail-section-label">Documents retrieved from ERP Corp</div>
        <div className="detail-docs">
          {docs.map(d => (
            <div className="detail-doc" key={d}>
              <i data-lucide={DOC_META[d].icon} style={{color: DOC_META[d].color}}></i>
              <div>
                <div className="detail-doc-name">{DOC_META[d].label}</div>
                <div className="detail-doc-sub">PDF · synced {invoice.issued}</div>
              </div>
              <i data-lucide="external-link" className="detail-doc-open"></i>
            </div>
          ))}
          <div className="detail-doc-drop">
            <i data-lucide="upload-cloud"></i>
            <span>Drop an additional document to strengthen financing</span>
          </div>
        </div>

        {eligible && (
          <div className="detail-cta">
            <div>
              <div className="detail-cta-label">Available with Aria</div>
              <div className="detail-cta-amount">{fmtEur(invoice.amount * 0.98)} <span>after 2% fee</span></div>
            </div>
            <button className="btn-finance bulk" onClick={()=>onRequest(invoice)}>
              <i data-lucide="zap"></i> Get paid now
            </button>
          </div>
        )}
        {invoice.status === "awaiting-buyer" && (
          <div className="detail-cta awaiting">
            <i data-lucide="clock" style={{color:"#b45309"}}></i>
            <div>
              <div style={{fontWeight:600,color:"#b45309"}}>Awaiting buyer validation</div>
              <div style={{fontSize:12.5,color:"#64748b",marginTop:2}}>Link sent to {invoice.buyer} on {invoice.sentOn} · auto-reminder in 48h</div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

/* -------------------- FINANCING DASHBOARD -------------------- */
const FinancingDashboard = ({ invoices }) => {
  React.useEffect(()=>{ if(window.lucide) lucide.createIcons(); });
  const funded = invoices.filter(i=>i.status==="funded");
  const awaiting = invoices.filter(i=>i.status==="awaiting-buyer");
  const totalFunded = funded.reduce((s,r)=>s+r.amount,0);
  const totalFees = totalFunded * 0.02;

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Financing</h1>
          <div className="page-sub">Your invoice financing with Aria — settlements, fees, and history.</div>
        </div>
        <div className="page-actions">
          <span className="aria-attr-pill"><span className="dot"></span>Powered by <img src="aria/logo_forest.png" alt="Aria"/></span>
        </div>
      </div>

      <div className="kpis">
        <Kpi label="Financed this month" value={fmtEurShort(totalFunded)} delta={`${funded.length} invoices`} deltaTone="pos" sub="gross advance"/>
        <Kpi label="Fees paid" value={fmtEurShort(totalFees)} delta="2.00% avg" deltaTone="neu" sub="financing cost"/>
        <Kpi label="Awaiting buyer" value={awaiting.length} delta={fmtEurShort(awaiting.reduce((s,r)=>s+r.amount,0))} deltaTone="warn" sub="pending validation"/>
        <Kpi label="Avg. time to fund" value="4h 12m" delta="−28m" deltaTone="pos" sub="vs last month"/>
      </div>

      <div className="card">
        <div className="card-toolbar" style={{paddingBottom:12, borderBottom:"1px solid var(--line)"}}>
          <div style={{fontSize:15,fontWeight:600,color:"var(--ink)"}}>Recent advances</div>
          <div className="card-toolbar-right">
            <button className="filter-chip"><i data-lucide="download"></i> Export statement</button>
          </div>
        </div>
        <table className="tbl">
          <thead><tr>
            <th>Invoice</th><th>Buyer</th><th>Validation</th><th className="num">Advance</th><th className="num">Fee</th><th>Status</th>
          </tr></thead>
          <tbody>
            {[...funded, ...awaiting].map(r => (
              <tr key={r.id}>
                <td><div className="invoice-id">{r.id}</div><div className="invoice-id-sub">{r.issued}</div></td>
                <td><div className="buyer-name">{r.buyer}</div><div className="buyer-sub">{r.buyerSub}</div></td>
                <td><span className="badge neu"><span className="badge-dot"></span>{r.validation === "auto" ? "Auto" : "Buyer link"}</span></td>
                <td className="num">{fmtEur(r.amount * 0.98)}</td>
                <td className="num" style={{color:"var(--muted)"}}>{fmtEur(r.amount * 0.02)}</td>
                <td><StatusBadge status={r.status} fundedOn={r.fundedOn}/></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="fin-flow">
        <div className="fin-flow-title">How financing flows with Aria × ERP Corp</div>
        <div className="fin-flow-steps">
          <div className="fin-flow-step"><div className="fin-flow-num">1</div><div><b>Invoice issued</b><span>From ERP Corp, with your IBAN</span></div></div>
          <div className="fin-flow-arrow">→</div>
          <div className="fin-flow-step"><div className="fin-flow-num">2</div><div><b>Buyer validates</b><span>Via widget or auto · new Aria IBAN shared</span></div></div>
          <div className="fin-flow-arrow">→</div>
          <div className="fin-flow-step"><div className="fin-flow-num">3</div><div><b>Aria funds you</b><span>~4h to your account, minus 2% fee</span></div></div>
          <div className="fin-flow-arrow">→</div>
          <div className="fin-flow-step"><div className="fin-flow-num">4</div><div><b>Buyer pays Aria</b><span>At the invoice due date</span></div></div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Onboarding, InvoiceDetail, FinancingDashboard });