/* global React, window */
const { useState: useStateU } = React;

const UnderwritingView = () => {
  const [step, setStep] = useStateU(2);
  const [msg, setMsg] = useStateU('');
  const messages = [
    { role:'desk', t:'Welcome to the Underwriting Room. I am the Automated Structuring Desk. Paste the mandate brief, upload a term sheet, or describe the asset class and jurisdiction.' },
    { role:'originator', t:'We\'re tokenizing a 340-hectare industrial park in Medellín. 12-year lease to anchor tenant (investment-grade logistics operator). Target raise $18M USD, 7.5% preferred coupon, quarterly.' },
    { role:'desk', t:'Proposed structure:\n\n• Jurisdiction → Patrimonio Autónomo (Colombia) with a Cayman feeder SPC for USD investors.\n• Token → ERC-3643 coupon bond, identity-gated. Accreditation: Tier 2 (qualified investor).\n• Distribution → Coupon Distributor v2, quarterly, USDC; payment schedule locked on subscription close.\n• Milestones → (i) title verification, (ii) tenant registry attestation, (iii) independent appraisal. 3-of-3 oracle.\n\nDrafting Management Briefing Pack now. This will be your Cell #MIP3B.' },
  ];
  return (
    <>
      <div className="subbar">
        <div className="subbar__path">Underwriting Room <span className="sep">/</span> <span style={{fontWeight:400, color:'var(--text-2)'}}>New mandate</span></div>
        <div className="subbar__kpis">
          <Kpi label="Session" value="UW-04418" />
          <Kpi label="Originator" value="0x34a1…7e2c" />
          <Kpi label="Stage" value="Structuring" delta="step 2 of 5" />
        </div>
      </div>
      <div className="canvas" style={{display:'grid', gridTemplateColumns:'260px 1fr 320px', gap:16}}>
        <div className="card" style={{height:'fit-content', position:'sticky', top:120}}>
          <CardHead title="Mandate pipeline" />
          <div className="stack-sm">
            {['Intake','Structuring','Legal draft','Partner review','Board ratification'].map((s,i) => (
              <div key={s} className="row" style={{gap:10, padding:'8px 10px', borderRadius:6,
                background: i===step ? 'var(--amber-tint)' : 'transparent',
                border: i===step ? '1px solid color-mix(in srgb, var(--amber) 30%, transparent)' : '1px solid transparent',
              }}>
                <div style={{width:22, height:22, borderRadius:'50%', display:'grid', placeItems:'center',
                  background: i<step ? 'var(--pos)' : i===step ? 'var(--amber)' : 'var(--bg-muted)',
                  color: i<=step ? 'white' : 'var(--text-3)',
                  fontFamily:'var(--font-mono)', fontSize:11, fontWeight:600,
                }}>{i<step ? '✓' : i+1}</div>
                <span style={{fontSize:13, fontWeight: i===step ? 600 : 400}}>{s}</span>
              </div>
            ))}
          </div>
          <hr className="divider" />
          <div className="eyebrow" style={{marginBottom:8}}>Session artifacts</div>
          <div className="stack-sm">
            {['Term-sheet.pdf','Title-deed.pdf','Tenant-lease.pdf'].map(f => (
              <div key={f} className="row row--sb" style={{fontSize:12}}>
                <span className="mono muted">📄 {f}</span>
                <Icon name="download" size={11}/>
              </div>
            ))}
          </div>
        </div>

        <div className="card card--pad0" style={{display:'flex', flexDirection:'column', height:'calc(100vh - 200px)'}}>
          <div className="card__head card__head--sticky">
            <div className="card__title"><h3 className="h3">Digital Underwriting Engine</h3><Pill kind="pos" dot>online</Pill></div>
            <div className="card__actions"><button className="btn btn--sm btn--ghost">Export transcript</button></div>
          </div>
          <div style={{flex:1, overflowY:'auto', padding:'18px 20px', display:'flex', flexDirection:'column', gap:14}}>
            {messages.map((m,i) => (
              <div key={i} style={{
                maxWidth:'78%', alignSelf: m.role==='originator' ? 'flex-end':'flex-start',
                background: m.role==='originator' ? 'var(--bg-inverse)' : 'var(--bg-muted)',
                color: m.role==='originator' ? 'var(--text-inv)' : 'var(--text-1)',
                padding:'12px 14px', borderRadius: m.role==='originator' ? '10px 10px 2px 10px':'10px 10px 10px 2px',
                fontSize:13, whiteSpace:'pre-wrap', lineHeight:1.55,
              }}>
                {m.role==='desk' && <div className="eyebrow" style={{marginBottom:4, color:'var(--gilt)'}}>Structuring desk</div>}
                {m.t}
              </div>
            ))}
            <div style={{alignSelf:'flex-start', maxWidth:'78%'}}>
              <div className="card" style={{padding:14, borderColor:'var(--border-strong)', boxShadow:'var(--shadow-sm)'}}>
                <div className="eyebrow" style={{marginBottom:8, color:'var(--gilt)'}}>Management Briefing Pack · draft</div>
                <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, fontSize:12}}>
                  {[
                    ['Cell ID','MIP3B'],['Wrapper','Patrimonio Autónomo'],['Feeder','KY · SPC'],
                    ['Token','ERC-3643'],['Raise target','$18,000,000'],['Coupon','7.5% p.a. · quarterly'],
                    ['Accreditation','Tier 2 · Qualified'],['Audit','Deloitte CO · 3-of-3'],
                  ].map(([k,v]) => (
                    <div key={k} className="row row--sb" style={{paddingBottom:6, borderBottom:'1px dashed var(--border)'}}>
                      <span className="muted">{k}</span><span className="bold">{v}</span>
                    </div>
                  ))}
                </div>
                <div className="row" style={{marginTop:12, gap:8}}>
                  <button className="btn btn--amber btn--sm">Submit for legal draft</button>
                  <button className="btn btn--sm">Revise parameters</button>
                </div>
              </div>
            </div>
          </div>
          <div style={{borderTop:'1px solid var(--border)', padding:14, display:'flex', gap:8}}>
            <input value={msg} onChange={e=>setMsg(e.target.value)} placeholder="Describe the asset, jurisdiction, and target investor profile…"
              style={{flex:1, padding:'10px 12px', borderRadius:6, border:'1px solid var(--border)', background:'var(--bg-surface)', fontSize:13}} />
            <button className="btn btn--primary">Send <Icon name="arrow" size={12}/></button>
          </div>
        </div>

        <div className="stack">
          <div className="card">
            <CardHead title="Constraint checks" help eyebrow="Live" />
            <div className="stack-sm">
              {[
                ['ERC-3643 identity registry configured','pass'],
                ['Reserved matters threshold set ≥75%','pass'],
                ['Oracle signatories assigned (3)','pass'],
                ['Jurisdiction compliance module loaded','pass'],
                ['Accreditation policy linked','warn'],
                ['Independent auditor confirmed','pending'],
              ].map(([t,s]) => (
                <div key={t} className="row" style={{gap:8, padding:'6px 0', fontSize:12}}>
                  {s==='pass' && <span style={{color:'var(--pos)'}}><Icon name="check" size={13}/></span>}
                  {s==='warn' && <span style={{color:'var(--warn)'}}>⚠</span>}
                  {s==='pending' && <span className="dot" style={{background:'var(--text-3)'}}/>}
                  <span style={{color: s==='pass' ? 'var(--text-1)' : 'var(--text-2)'}}>{t}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="card">
            <CardHead title="Similar mandates" eyebrow="From audit trail" />
            <div className="stack-sm">
              {[['MIP3A','Medellín Park A-3','$12M · live'],['OWF2','Oaxaca Wind II','$9M · live'],['MIP2C','Cali Logistics Hub','$15M · closed']].map(([s,n,m]) => (
                <div key={s} style={{padding:10, border:'1px solid var(--border)', borderRadius:6}}>
                  <div className="row row--sb">
                    <span className="bold">{s}</span>
                    <span className="mono text-sm muted">{m}</span>
                  </div>
                  <div className="text-sm muted" style={{marginTop:2}}>{n}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

window.UnderwritingView = UnderwritingView;