// Allocazione Capitali
const Allocazione = () => {
  const A = window.REGULA_EXT.allocation;
  const [selected, setSelected] = React.useState(A.proposals[0].id);
  const current = A.proposals.find(p => p.id === selected);

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">Allocazione Capitali</h1>
          <div className="page-subtitle">Proposte di movimento infragruppo · AI + manuali · workflow di approvazione</div>
        </div>
        <div className="page-meta">
          <button className="btn"><Icon name="clock" size={12} /> Audit log</button>
          <button className="btn btn-primary"><Icon name="plus" size={12} /> Nuova proposta</button>
        </div>
      </div>

      <div className="section" style={{ display: 'grid', gridTemplateColumns: '380px 1fr', gap: 12 }}>
        <div className="panel">
          <div className="panel-head">
            <div className="panel-title">Proposte attive</div>
            <span className="chip amber">2 pending</span>
          </div>
          <div>
            {A.proposals.map((p, i) => {
              const isSelected = p.id === selected;
              return (
                <div key={p.id}
                     onClick={() => setSelected(p.id)}
                     style={{
                       padding: '12px 16px',
                       borderBottom: i < A.proposals.length - 1 ? '1px solid var(--border)' : 'none',
                       borderLeft: isSelected ? '2px solid var(--ink)' : '2px solid transparent',
                       background: isSelected ? 'var(--surface-2)' : 'transparent',
                       cursor: 'pointer'
                     }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
                    <span className="mono" style={{ fontSize: 10, color: 'var(--muted)' }}>{p.id}</span>
                    <span className={`chip ${p.status === 'approved' ? 'green' : p.status === 'pending' ? 'amber' : ''}`}>
                      {p.status === 'approved' ? '✓ Approvato' : p.status === 'pending' ? '⏱ Pending' : p.status}
                    </span>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, marginBottom: 4 }}>
                    <span>{p.from}</span>
                    <Icon name="arrow" size={10} />
                    <span style={{ fontWeight: 500 }}>{p.to}</span>
                    <span style={{ marginLeft: 'auto' }} className="mono">{p.amount.toFixed(1)} M€</span>
                  </div>
                  <div style={{ fontSize: 11, color: 'var(--muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.reason}</div>
                  {p.generator === 'AI' && (
                    <div style={{ marginTop: 6, display: 'flex', alignItems: 'center', gap: 4, fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--accent)' }}>
                      <Icon name="sparkle" size={10} /> AI · confidenza {p.confidence}%
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>

        <div className="panel">
          <div className="panel-head">
            <div>
              <div className="panel-title">{current.id}</div>
              <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--muted)', marginTop: 3, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
                {current.generator === 'AI' ? 'Generata da Regula AI' : 'Proposta manuale'}
              </div>
            </div>
            <span className={`chip ${current.status === 'approved' ? 'green' : 'amber'}`}>
              {current.status === 'approved' ? '✓ Approvato' : '⏱ Pending'}
            </span>
          </div>
          <div className="panel-body">
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 32, padding: '24px 0', borderBottom: '1px solid var(--border)' }}>
              <div style={{ textAlign: 'center', flex: 1 }}>
                <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--muted)', marginBottom: 8 }}>Sorgente</div>
                <div style={{ fontSize: 15, fontWeight: 500 }}>{current.from}</div>
                <div style={{ marginTop: 10, fontSize: 11, color: 'var(--muted)' }}>Impatto cash</div>
                <div className="mono" style={{ fontSize: 16, color: 'var(--red)' }}>{current.impactFrom.cash.toFixed(1)} M€</div>
                {current.impactFrom.dscr !== 0 && (
                  <div className="mono" style={{ fontSize: 11, color: 'var(--red)', marginTop: 4 }}>DSCR {current.impactFrom.dscr.toFixed(2)}×</div>
                )}
              </div>
              <div style={{ textAlign: 'center' }}>
                <div className="mono" style={{ fontSize: 24, fontWeight: 500 }}>{current.amount.toFixed(1)} M€</div>
                <div style={{ margin: '6px 0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <div style={{ width: 40, height: 1, background: 'var(--border-strong)' }} />
                  <Icon name="arrow" size={12} />
                  <div style={{ width: 40, height: 1, background: 'var(--border-strong)' }} />
                </div>
                <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>Trasferimento</div>
              </div>
              <div style={{ textAlign: 'center', flex: 1 }}>
                <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--muted)', marginBottom: 8 }}>Destinazione</div>
                <div style={{ fontSize: 15, fontWeight: 500 }}>{current.to}</div>
                <div style={{ marginTop: 10, fontSize: 11, color: 'var(--muted)' }}>Impatto cash</div>
                <div className="mono" style={{ fontSize: 16, color: 'var(--green)' }}>+{current.impactTo.cash.toFixed(1)} M€</div>
                {current.impactTo.dscr !== 0 && (
                  <div className="mono" style={{ fontSize: 11, color: 'var(--green)', marginTop: 4 }}>DSCR +{current.impactTo.dscr.toFixed(2)}×</div>
                )}
              </div>
            </div>

            <div style={{ padding: '16px 0', borderBottom: '1px solid var(--border)' }}>
              <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--muted)', marginBottom: 8 }}>Motivazione</div>
              <div style={{ fontSize: 13, lineHeight: 1.5, color: 'var(--ink-2)' }}>{current.reason}</div>
            </div>

            <div style={{ padding: '16px 0' }}>
              <div style={{ fontFamily: 'var(--f-mono)', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--muted)', marginBottom: 10 }}>Workflow di approvazione</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {current.approvers.map((a, i) => {
                  const approved = a.includes('✓');
                  return (
                    <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px', border: '1px solid var(--border)', borderRadius: 'var(--r-sm)', background: approved ? 'var(--green-soft)' : 'var(--surface)' }}>
                      <div style={{ width: 22, height: 22, borderRadius: '50%', background: approved ? 'var(--green)' : 'var(--surface-2)', color: approved ? 'white' : 'var(--muted)', display: 'grid', placeItems: 'center', fontSize: 10 }}>
                        {approved ? '✓' : i + 1}
                      </div>
                      <span style={{ fontSize: 12, flex: 1 }}>{a.replace(' ✓', '')}</span>
                      <span style={{ fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--muted)' }}>{approved ? 'Approvato' : 'In attesa'}</span>
                    </div>
                  );
                })}
              </div>
            </div>

            {current.status === 'pending' && (
              <div style={{ display: 'flex', gap: 8, paddingTop: 16, borderTop: '1px solid var(--border)' }}>
                <button className="btn btn-primary" style={{ flex: 1 }}><Icon name="check" size={12} /> Approva</button>
                <button className="btn" style={{ flex: 1 }}><Icon name="edit" size={12} /> Modifica</button>
                <button className="btn" style={{ flex: 1 }}><Icon name="close" size={12} /> Scarta</button>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Allocazione });