// portal-screens-2.jsx — PTO, Profile, Certifications, Reimbursements, Inbox.

// ── PTO ──────────────────────────────────────────────────────
function PortalPTO() {
  const { ptoBalances, ptoReqs, addPto } = usePortal();
  const [open, setOpen] = useState(false);
  const [form, setForm] = useState({ type: 'Vacation', start: '', end: '', hours: 8, note: '' });

  const submit = () => {
    if (!form.start || !form.end) return;
    addPto({ ...form, hours: +form.hours });
    setOpen(false);
    setForm({ type: 'Vacation', start: '', end: '', hours: 8, note: '' });
  };

  return (
    <div className="anim-fade">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 22 }}>
        <div>
          <h1 style={{ margin: '0 0 4px', fontSize: 26, fontWeight: 700, letterSpacing: -0.5 }}>Time off</h1>
          <div style={{ fontSize: 14, color: 'var(--muted)' }}>Balances accrue per pay period. Requests route to your manager.</div>
        </div>
        <Button variant="primary" icon={<IconPlus size={14} />} onClick={() => setOpen(true)}>Request time off</Button>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginBottom: 24 }}>
        {ptoBalances.map(b => {
          const avail = b.accrued - b.used - b.pending;
          return (
            <PCard key={b.type}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
                <span className="eyebrow">{b.type} · {b.code}</span>
                <PPill tone="neutral">{(avail / 8).toFixed(1)} days</PPill>
              </div>
              <div className="mono" style={{ fontSize: 30, fontWeight: 700, letterSpacing: -0.8 }}>{avail}<span style={{ fontSize: 15, color: 'var(--muted)', fontWeight: 500 }}>h avail</span></div>
              <div style={{ marginTop: 10, height: 6, borderRadius: 3, background: 'var(--line)', overflow: 'hidden', display: 'flex' }}>
                <div style={{ width: `${(b.used / b.accrued) * 100}%`, background: 'var(--muted-2)' }} />
                <div style={{ width: `${(b.pending / b.accrued) * 100}%`, background: 'var(--warn)' }} />
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--muted)', marginTop: 6 }}>
                <span>{b.used}h used</span>{b.pending > 0 && <span style={{ color: 'var(--warn)' }}>{b.pending}h pending</span>}<span>{b.accrued}h accrued</span>
              </div>
            </PCard>
          );
        })}
      </div>

      <PSectionTitle>Requests</PSectionTitle>
      <PCard pad={0}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr 0.8fr 1.4fr 120px', gap: 10, padding: '11px 16px', background: 'var(--panel-2)', borderBottom: '1px solid var(--line)', fontSize: 10.5, fontWeight: 600, letterSpacing: 0.5, textTransform: 'uppercase', color: 'var(--muted)' }}>
          <span>Type</span><span>Dates</span><span style={{ textAlign: 'right' }}>Hours</span><span>Note</span><span style={{ textAlign: 'right' }}>Status</span>
        </div>
        {ptoReqs.map((r, i) => (
          <div key={r.id} style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr 0.8fr 1.4fr 120px', gap: 10, padding: '12px 16px', borderTop: i === 0 ? 'none' : '1px solid var(--line)', alignItems: 'center' }}>
            <div style={{ fontWeight: 600, fontSize: 13 }}>{r.type}</div>
            <div className="mono" style={{ fontSize: 12 }}>{P_date(r.start)} – {P_date(r.end)}</div>
            <div className="mono" style={{ textAlign: 'right', fontSize: 13 }}>{r.hours}h</div>
            <div style={{ fontSize: 12, color: 'var(--muted)' }}>{r.note || '—'}</div>
            <div style={{ textAlign: 'right' }}><PStatusPill status={r.status} /></div>
          </div>
        ))}
      </PCard>

      <PModal open={open} onClose={() => setOpen(false)} title="Request time off"
        footer={<><Button variant="secondary" onClick={() => setOpen(false)}>Cancel</Button><Button variant="primary" onClick={submit}>Submit request</Button></>}>
        <PField label="Type">
          <select value={form.type} onChange={e => setForm(f => ({ ...f, type: e.target.value }))} style={pInputStyle}>
            {['Vacation', 'Sick', 'PTO', 'Unpaid Leave', 'Funeral Leave'].map(t => <option key={t}>{t}</option>)}
          </select>
        </PField>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <PField label="Start date"><input type="date" value={form.start} onChange={e => setForm(f => ({ ...f, start: e.target.value }))} style={pInputStyle} /></PField>
          <PField label="End date"><input type="date" value={form.end} onChange={e => setForm(f => ({ ...f, end: e.target.value }))} style={pInputStyle} /></PField>
        </div>
        <PField label="Total hours"><input type="number" value={form.hours} onChange={e => setForm(f => ({ ...f, hours: e.target.value }))} style={pInputStyle} /></PField>
        <PField label="Note (optional)"><input value={form.note} onChange={e => setForm(f => ({ ...f, note: e.target.value }))} style={pInputStyle} placeholder="Reason or coverage notes" /></PField>
      </PModal>
    </div>
  );
}

// ── PROFILE (address, direct deposit, emergency) ─────────────
function PortalProfile() {
  const { me, toast } = usePortal();
  const [dd, setDd] = useState(me.directDeposit);
  const [addr, setAddr] = useState(me.address);
  const [emer, setEmer] = useState(me.emergency);

  return (
    <div className="anim-fade">
      <h1 style={{ margin: '0 0 4px', fontSize: 26, fontWeight: 700, letterSpacing: -0.5 }}>My profile</h1>
      <div style={{ fontSize: 14, color: 'var(--muted)', marginBottom: 22 }}>Keep your contact, banking, and emergency information current.</div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
        {/* Personal */}
        <PCard>
          <PSectionTitle>Personal</PSectionTitle>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16 }}>
            <div style={{ width: 56, height: 56, borderRadius: 28, background: 'var(--accent-soft)', color: 'var(--accent-deep)', display: 'grid', placeItems: 'center', fontSize: 20, fontWeight: 700 }}>{me.avatar}</div>
            <div>
              <div style={{ fontWeight: 700, fontSize: 17 }}>{me.name}</div>
              <div style={{ fontSize: 13, color: 'var(--muted)' }}>{me.role} · <span className="mono">{me.badge}</span></div>
            </div>
          </div>
          {[['Email', me.email], ['Phone', me.phone], ['SSN', me.ssnMasked], ['Hire date', me.hireDate], ['Resident state', me.resident]].map(([k, v]) => (
            <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', borderTop: '1px solid var(--line)', fontSize: 13 }}>
              <span style={{ color: 'var(--muted)' }}>{k}</span><span style={{ fontWeight: 600 }} className={k === 'SSN' || k === 'Resident state' ? 'mono' : ''}>{v}</span>
            </div>
          ))}
        </PCard>

        {/* Direct deposit */}
        <PCard>
          <PSectionTitle action={<PPill tone="good" icon={<IconCheck size={10} />}>Verified</PPill>}>Direct deposit</PSectionTitle>
          <PField label="Bank"><input value={dd.bank} onChange={e => setDd({ ...dd, bank: e.target.value })} style={pInputStyle} /></PField>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <PField label="Account type">
              <select value={dd.type} onChange={e => setDd({ ...dd, type: e.target.value })} style={pInputStyle}><option>Checking</option><option>Savings</option></select>
            </PField>
            <PField label="Deposit %"><input type="number" value={dd.split} onChange={e => setDd({ ...dd, split: e.target.value })} style={pInputStyle} /></PField>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <PField label="Routing"><input value={dd.routing} onChange={e => setDd({ ...dd, routing: e.target.value })} style={pInputStyle} /></PField>
            <PField label="Account"><input value={dd.account} onChange={e => setDd({ ...dd, account: e.target.value })} style={pInputStyle} /></PField>
          </div>
          <Button variant="primary" size="sm" style={{ width: '100%' }} onClick={() => toast('Direct deposit updated', 'success')}>Save banking</Button>
        </PCard>

        {/* Address */}
        <PCard>
          <PSectionTitle>Mailing address</PSectionTitle>
          <PField label="Street"><input value={addr.line1} onChange={e => setAddr({ ...addr, line1: e.target.value })} style={pInputStyle} /></PField>
          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 12 }}>
            <PField label="City"><input value={addr.city} onChange={e => setAddr({ ...addr, city: e.target.value })} style={pInputStyle} /></PField>
            <PField label="State"><input value={addr.state} onChange={e => setAddr({ ...addr, state: e.target.value })} style={pInputStyle} /></PField>
            <PField label="ZIP"><input value={addr.zip} onChange={e => setAddr({ ...addr, zip: e.target.value })} style={pInputStyle} /></PField>
          </div>
          <Button variant="primary" size="sm" style={{ width: '100%' }} onClick={() => toast('Address updated', 'success')}>Save address</Button>
        </PCard>

        {/* Emergency contact */}
        <PCard>
          <PSectionTitle>Emergency contact</PSectionTitle>
          <PField label="Name"><input value={emer.name} onChange={e => setEmer({ ...emer, name: e.target.value })} style={pInputStyle} /></PField>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <PField label="Relationship"><input value={emer.relation} onChange={e => setEmer({ ...emer, relation: e.target.value })} style={pInputStyle} /></PField>
            <PField label="Phone"><input value={emer.phone} onChange={e => setEmer({ ...emer, phone: e.target.value })} style={pInputStyle} /></PField>
          </div>
          <Button variant="primary" size="sm" style={{ width: '100%' }} onClick={() => toast('Emergency contact updated', 'success')}>Save contact</Button>
        </PCard>
      </div>
    </div>
  );
}

// ── CERTIFICATIONS ───────────────────────────────────────────
function PortalCerts() {
  const { certs, toast } = usePortal();
  return (
    <div className="anim-fade">
      <h1 style={{ margin: '0 0 4px', fontSize: 26, fontWeight: 700, letterSpacing: -0.5 }}>Certifications & training</h1>
      <div style={{ fontSize: 14, color: 'var(--muted)', marginBottom: 22 }}>Keep your roadway-worker credentials current. Upload renewals as you complete them.</div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {certs.map(c => {
          const tone = { current: 'good', expiring: 'warn', expired: 'bad' }[c.status];
          const days = Math.round((new Date(c.expires) - new Date('2026-05-30')) / 86400000);
          return (
            <PCard key={c.name}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                <div style={{ width: 44, height: 44, borderRadius: 10, background: `var(--${tone}-soft)`, color: `var(--${tone})`, display: 'grid', placeItems: 'center' }}><IconShield size={22} /></div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 700, fontSize: 15 }}>{c.name}</div>
                  <div style={{ fontSize: 12.5, color: 'var(--muted)' }}>{c.issuer} · issued {P_date(c.issued)}</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div className="eyebrow" style={{ fontSize: 9.5 }}>Expires</div>
                  <div className="mono" style={{ fontSize: 13, fontWeight: 600, color: tone === 'bad' ? 'var(--bad)' : 'var(--text)' }}>{P_date(c.expires)}</div>
                  <div style={{ fontSize: 11, color: `var(--${tone})`, fontWeight: 600 }}>{c.status === 'expired' ? `${Math.abs(days)}d overdue` : `${days}d left`}</div>
                </div>
                <PPill tone={tone}>{c.status}</PPill>
                <Button variant={c.status === 'current' ? 'secondary' : 'primary'} size="sm" icon={<IconUpload size={13} />} onClick={() => toast(`Upload renewal for ${c.name}`, 'info')}>Upload</Button>
              </div>
            </PCard>
          );
        })}
      </div>
    </div>
  );
}

// ── REIMBURSEMENTS ───────────────────────────────────────────
function PortalReimb() {
  const { reimb, addReimb } = usePortal();
  const [open, setOpen] = useState(false);
  const [form, setForm] = useState({ type: 'Per diem', date: '', desc: '', amount: '' });
  const pending = reimb.filter(r => r.status === 'pending').reduce((s, r) => s + r.amount, 0);
  const approved = reimb.filter(r => r.status === 'approved').reduce((s, r) => s + r.amount, 0);

  const submit = () => {
    if (!form.date || !form.amount) return;
    addReimb({ ...form, amount: +form.amount });
    setOpen(false); setForm({ type: 'Per diem', date: '', desc: '', amount: '' });
  };

  return (
    <div className="anim-fade">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 22 }}>
        <div>
          <h1 style={{ margin: '0 0 4px', fontSize: 26, fontWeight: 700, letterSpacing: -0.5 }}>Reimbursements</h1>
          <div style={{ fontSize: 14, color: 'var(--muted)' }}>Per-diem, mileage, and materials. Reimbursed with your next paycheck.</div>
        </div>
        <Button variant="primary" icon={<IconPlus size={14} />} onClick={() => setOpen(true)}>New reimbursement</Button>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginBottom: 22 }}>
        <PStat label="Pending" value={P_money(pending)} tone="warn" icon={<IconClock size={16} />} />
        <PStat label="Approved (unpaid)" value={P_money(approved)} tone="good" icon={<IconCheck size={16} />} />
        <PStat label="Mileage rate" value="$0.67" sub="per mile · 2026 IRS" icon={<IconDollar size={16} />} />
      </div>

      <PCard pad={0}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 2fr 1fr 120px', gap: 10, padding: '11px 16px', background: 'var(--panel-2)', borderBottom: '1px solid var(--line)', fontSize: 10.5, fontWeight: 600, letterSpacing: 0.5, textTransform: 'uppercase', color: 'var(--muted)' }}>
          <span>Date</span><span>Type</span><span>Description</span><span style={{ textAlign: 'right' }}>Amount</span><span style={{ textAlign: 'right' }}>Status</span>
        </div>
        {reimb.map((r, i) => (
          <div key={r.id} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 2fr 1fr 120px', gap: 10, padding: '12px 16px', borderTop: i === 0 ? 'none' : '1px solid var(--line)', alignItems: 'center' }}>
            <div className="mono" style={{ fontSize: 12.5 }}>{P_date(r.date)}</div>
            <div><PPill tone="neutral">{r.type}</PPill></div>
            <div style={{ fontSize: 13 }}>{r.desc}</div>
            <div className="mono" style={{ textAlign: 'right', fontSize: 13, fontWeight: 700 }}>{P_money(r.amount)}</div>
            <div style={{ textAlign: 'right' }}><PStatusPill status={r.status} /></div>
          </div>
        ))}
      </PCard>

      <PModal open={open} onClose={() => setOpen(false)} title="New reimbursement"
        footer={<><Button variant="secondary" onClick={() => setOpen(false)}>Cancel</Button><Button variant="primary" onClick={submit}>Submit</Button></>}>
        <PField label="Type">
          <select value={form.type} onChange={e => setForm(f => ({ ...f, type: e.target.value }))} style={pInputStyle}>
            {['Per diem', 'Mileage', 'Materials', 'Lodging', 'Other'].map(t => <option key={t}>{t}</option>)}
          </select>
        </PField>
        <PField label="Date"><input type="date" value={form.date} onChange={e => setForm(f => ({ ...f, date: e.target.value }))} style={pInputStyle} /></PField>
        <PField label="Description"><input value={form.desc} onChange={e => setForm(f => ({ ...f, desc: e.target.value }))} style={pInputStyle} placeholder="e.g. 212 mi Bozeman→Skykomish" /></PField>
        <PField label="Amount ($)" hint="Mileage auto-calculates at $0.67/mi if you enter miles in the description"><input type="number" value={form.amount} onChange={e => setForm(f => ({ ...f, amount: e.target.value }))} style={pInputStyle} /></PField>
      </PModal>
    </div>
  );
}

// ── DOCUMENTS INBOX ──────────────────────────────────────────
function PortalInbox() {
  const { inbox, actOnDoc, toast } = usePortal();
  const [signDoc, setSignDoc] = useState(null);
  const [certs, setCerts] = useState(() => { try { return RFPsign.all(); } catch (e) { return {}; } });
  return (
    <div className="anim-fade">
      <h1 style={{ margin: '0 0 4px', fontSize: 26, fontWeight: 700, letterSpacing: -0.5 }}>Documents inbox</h1>
      <div style={{ fontSize: 14, color: 'var(--muted)', marginBottom: 22 }}>Forms and notices from the company. Sign or acknowledge where required.</div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {inbox.map(d => {
          const needsAction = d.status === 'action-required';
          return (
            <PCard key={d.id} style={needsAction ? { borderColor: 'var(--bad)', borderLeftWidth: 4 } : {}}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                <div style={{ width: 42, height: 42, borderRadius: 10, background: needsAction ? 'var(--bad-soft)' : 'var(--panel-3)', color: needsAction ? 'var(--bad)' : 'var(--muted)', display: 'grid', placeItems: 'center' }}><IconClipboard size={20} /></div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 700, fontSize: 14.5 }}>{d.title}</div>
                  <div style={{ fontSize: 12, color: 'var(--muted)' }}>From {d.from} · {P_date(d.sent)}</div>
                </div>
                <PStatusPill status={d.status} />
                {needsAction ? (
                  d.action === 'sign'
                    ? <Button variant="primary" size="sm" icon={<IconSignature size={13} />} onClick={() => setSignDoc(d)}>Sign</Button>
                    : <Button variant="primary" size="sm" icon={<IconCheck size={13} />} onClick={() => actOnDoc(d.id, 'acknowledged')}>Acknowledge</Button>
                ) : (
                  (d.action === 'sign' && (d.status === 'signed' || certs[d.id]))
                    ? <Button variant="secondary" size="sm" icon={<IconDownload size={13} />} onClick={() => { const env = RFPsign.get(d.id); if (env) downloadBlob(`certificate-${env.certificate.certId}.txt`, RFPsign.certificateText(env), 'text/plain'); else toast('Certificate unavailable', 'info'); }}>Certificate</Button>
                    : <Button variant="secondary" size="sm" icon={<IconDownload size={13} />}>View</Button>
                )}
              </div>
            </PCard>
          );
        })}
      </div>

      <ESignModal open={!!signDoc} doc={signDoc} onClose={() => setSignDoc(null)}
        onComplete={(env) => { actOnDoc(signDoc.id, 'signed'); setCerts(RFPsign.all()); toast('Document signed · certificate sealed', 'success'); }} />
    </div>
  );
}

Object.assign(window, { PortalPTO, PortalProfile, PortalCerts, PortalReimb, PortalInbox });