function ScreenPortal() {
  const { ACTIVE_QUOTATION: Q, SUPPLIERS, BRL } = window.SCP;
  const sup = SUPPLIERS.find(s => s.id === 'F-04');
  const [prices, setPrices] = useState({});
  const [skips, setSkips] = useState({});
  const [sent, setSent] = useState(false);
  const setPrice = (id, v) => setPrices(p => ({ ...p, [id]: v }));
  const toggleSkip = (id) => setSkips(p => ({ ...p, [id]: !p[id] }));
  const total = Q.items.reduce((s, it) => s + (skips[it.id] ? 0 : (parseFloat(prices[it.id]) || 0) * it.qty), 0);

  return (
    <div className="scp-screen scp-fade-in" style={{ maxWidth: 820 }}>
      <Card className="scp-portal-header">
        <div className="phero">
          <Icon.Logo size={42}/>
          <div>
            <h1>Cotação Recebida</h1>
            <p>Preencha seus preços para cada item e envie sua proposta. Nenhum cadastro necessário.</p>
          </div>
          <Badge tone={QSTATUS['aberta']?.tone || 'sky'}>Aberta</Badge>
        </div>
        <div className="pmeta">
          <div><span>Empresa</span><strong>{window.SCP.COMPANY.name}</strong></div>
          <div><span>Número</span><strong className="num">{Q.id}</strong></div>
          <div><span>Prazo limite</span><strong className="num">{Q.deadline}</strong></div>
          <div><span>Comprador</span><strong>{Q.buyer}</strong></div>
        </div>
        {Q.obs && <div className="pobs"><Icon.Doc size={13}/> <span>{Q.obs}</span></div>}
      </Card>

      {!sent ? (
        <>
          <Card style={{ padding: 0, overflow: 'hidden' }}>
            <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--border-soft)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600 }}>Itens solicitados</h3>
              <Pill tone="sky">{Q.items.length} itens</Pill>
            </div>
            <table className="scp-table">
              <thead>
                <tr>
                  <th>Produto</th>
                  <th style={{ textAlign: 'right' }}>Qtd</th>
                  <th style={{ textAlign: 'right', minWidth: 160 }}>Seu preço unitário</th>
                  <th style={{ textAlign: 'right' }}>Subtotal</th>
                  <th>Não trabalho</th>
                </tr>
              </thead>
              <tbody>
                {Q.items.map(it => {
                  const skip = skips[it.id];
                  const price = parseFloat(prices[it.id]) || 0;
                  return (
                    <tr key={it.id} style={{ opacity: skip ? 0.4 : 1 }}>
                      <td>
                        <div className="em">{it.name}</div>
                        <div className="num" style={{ fontSize: 11, color: 'var(--fg-3)' }}>{it.unit}</div>
                      </td>
                      <td className="num" style={{ textAlign: 'right' }}>{it.qty}</td>
                      <td style={{ textAlign: 'right' }}>
                        <div className="scp-price-input">
                          <span>R$</span>
                          <input
                            type="number" step="0.01" min="0" placeholder="0,00"
                            disabled={skip}
                            value={prices[it.id] || ''}
                            onChange={e => setPrice(it.id, e.target.value)}
                          />
                        </div>
                      </td>
                      <td className="num em" style={{ textAlign: 'right', color: price > 0 && !skip ? 'oklch(0.92 0.14 160)' : 'var(--fg-3)' }}>
                        {price > 0 && !skip ? BRL(price * it.qty) : '—'}
                      </td>
                      <td>
                        <Toggle checked={!!skip} onChange={() => toggleSkip(it.id)} />
                      </td>
                    </tr>
                  );
                })}
              </tbody>
              <tfoot>
                <tr>
                  <td colSpan={3} style={{ fontWeight: 600 }}>Total da proposta</td>
                  <td className="num em" style={{ textAlign: 'right', fontSize: 18, fontWeight: 700, color: 'oklch(0.92 0.14 160)' }}>{total > 0 ? BRL(total) : '—'}</td>
                  <td></td>
                </tr>
              </tfoot>
            </table>
          </Card>

          <Card style={{ padding: 18 }}>
            <h4 style={{ margin: '0 0 10px', fontSize: 13, fontWeight: 600, color: 'var(--fg-2)' }}>Observações (opcional)</h4>
            <textarea className="scp-textarea" rows={3} placeholder="Ex.: prazo de entrega, condição de pagamento diferenciada, marca alternativa…" style={{ width: '100%' }}/>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 14 }}>
              <span style={{ fontSize: 12, color: 'var(--fg-3)' }}>Respondendo como: <strong>{sup.name}</strong> · {sup.cnpj}</span>
              <Btn kind="primary" size="lg" icon={<Icon.Send size={16}/>} disabled={total === 0} onClick={() => setSent(true)}>
                Enviar proposta {total > 0 ? '· ' + BRL(total) : ''}
              </Btn>
            </div>
          </Card>
        </>
      ) : (
        <Card style={{ padding: 40, textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
          <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'oklch(0.30 0.08 160)', display: 'grid', placeItems: 'center', color: 'oklch(0.92 0.14 160)', boxShadow: '0 0 40px oklch(0.60 0.16 160 / .25)' }}>
            <Icon.Check size={28}/>
          </div>
          <div>
            <h2 style={{ margin: '0 0 6px', fontSize: 22, fontWeight: 600 }}>Proposta enviada com sucesso!</h2>
            <p style={{ margin: 0, color: 'var(--fg-3)', fontSize: 14 }}>O comprador receberá sua cotação em instantes. Obrigado pela participação.</p>
          </div>
          <div style={{ display: 'flex', gap: 12, padding: '14px 20px', background: 'var(--surface-2)', borderRadius: 12, border: '1px solid var(--border-soft)' }}>
            <div style={{ textAlign: 'left' }}>
              <div style={{ fontSize: 11, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '.08em', fontWeight: 600 }}>Total enviado</div>
              <div style={{ fontSize: 22, fontWeight: 700, color: 'oklch(0.92 0.14 160)', fontFamily: 'JetBrains Mono' }}>{BRL(total)}</div>
            </div>
            <div style={{ width: 1, background: 'var(--border)' }}/>
            <div style={{ textAlign: 'left' }}>
              <div style={{ fontSize: 11, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '.08em', fontWeight: 600 }}>Protocolo</div>
              <div style={{ fontSize: 14, fontWeight: 600, fontFamily: 'JetBrains Mono', color: 'var(--fg)' }}>{Q.id} · {new Date().toLocaleDateString('pt-BR')}</div>
            </div>
          </div>
          <Btn kind="ghost" size="sm" onClick={() => setSent(false)}>Editar proposta</Btn>
        </Card>
      )}
    </div>
  );
}

(function() {
  if (document.getElementById('scp-portal-css')) return;
  const s = document.createElement('style'); s.id = 'scp-portal-css';
  s.textContent = `
    .scp-portal-header { padding: 22px 24px; }
    .scp-portal-header .phero { display: flex; align-items: flex-start; gap: 14px; }
    .scp-portal-header .phero h1 { margin: 0 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
    .scp-portal-header .phero p { margin: 0; color: var(--fg-3); font-size: 13px; }
    .scp-portal-header .phero > .scp-badge { margin-left: auto; }
    .scp-portal-header .pmeta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
    .scp-portal-header .pmeta > div { display: flex; flex-direction: column; gap: 2px; }
    .scp-portal-header .pmeta span { font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
    .scp-portal-header .pmeta strong { font-size: 14px; font-weight: 600; color: var(--fg); }
    .scp-portal-header .pobs { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px; background: var(--surface-2); border-radius: 8px; font-size: 12.5px; color: var(--fg-2); border: 1px solid var(--border-soft); }
    .scp-price-input { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }
    .scp-price-input span { font-size: 12px; color: var(--fg-3); }
    .scp-price-input:focus-within { border-color: oklch(0.55 0.10 160); }
    .scp-price-input input { width: 80px; background: transparent; border: 0; outline: 0; text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 13.5px; color: var(--fg); }
  `;
  document.head.appendChild(s);
})();

window.ScreenPortal = ScreenPortal;