// Admin / Risk-scoring panel
function AdminPanel() {
  const { t, lang } = useT();
  const [filter, setFilter] = useState('all');
  const data = window.DIVIDIS_DATA;
  const items = filter === 'all' ? data.pipeline : data.pipeline.filter(p => p.status === filter);

  const counts = {
    all: data.pipeline.length,
    pending: data.pipeline.filter(p => p.status === 'pending').length,
    review: data.pipeline.filter(p => p.status === 'review').length,
  };

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1 className="page-title">{t('adm_title')}</h1>
          <div className="page-sub">{t('adm_sub')}</div>
        </div>
      </div>

      <div className="adm-stats">
        <div className="adm-stat">
          <div className="stat-label">{t('adm_pending')}</div>
          <div className="num" style={{ fontFamily: 'var(--serif)', fontSize: 36, color: 'var(--amber)', marginTop: 6 }}>{counts.pending}</div>
        </div>
        <div className="adm-stat">
          <div className="stat-label">{t('adm_review')}</div>
          <div className="num" style={{ fontFamily: 'var(--serif)', fontSize: 36, marginTop: 6 }}>{counts.review}</div>
        </div>
        <div className="adm-stat">
          <div className="stat-label">{t('adm_approved')} (30d)</div>
          <div className="num" style={{ fontFamily: 'var(--serif)', fontSize: 36, color: 'var(--emerald-2)', marginTop: 6 }}>14</div>
        </div>
        <div className="adm-stat">
          <div className="stat-label">{t('adm_rejected')} (30d)</div>
          <div className="num" style={{ fontFamily: 'var(--serif)', fontSize: 36, color: 'var(--text-3)', marginTop: 6 }}>3</div>
        </div>
        <div className="adm-stat">
          <div className="stat-label">{lang === 'es' ? 'Score medio' : 'Avg. score'}</div>
          <div className="num" style={{ fontFamily: 'var(--serif)', fontSize: 36, marginTop: 6 }}>72</div>
        </div>
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
        <h2 style={{ fontFamily: 'var(--serif)', fontSize: 22, letterSpacing: '-0.02em', fontWeight: 400 }}>{t('adm_pipeline')}</h2>
        <div className="mkt-filters">
          {[{ id: 'all', l: t('mkt_filter_all') }, { id: 'pending', l: t('adm_pending') }, { id: 'review', l: t('adm_review') }].map(f => (
            <button key={f.id} className={`mkt-fbtn ${filter === f.id ? 'active' : ''}`} onClick={() => setFilter(f.id)}>{f.l}</button>
          ))}
        </div>
      </div>

      <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
        <div className="adm-tbl">
          <div className="adm-head">
            <div>ID</div>
            <div>{lang === 'es' ? 'Emisor' : 'Issuer'}</div>
            <div>Tipo</div>
            <div className="r">{lang === 'es' ? 'Importe' : 'Amount'}</div>
            <div className="r">{t('adm_score')}</div>
            <div>{t('adm_recommend')}</div>
            <div>{lang === 'es' ? 'Estado' : 'Status'}</div>
            <div>{lang === 'es' ? 'Acciones' : 'Actions'}</div>
          </div>
          {items.map(p => (
            <div key={p.id} className="adm-row">
              <div className="num" style={{ fontSize: 11, color: 'var(--text-3)' }}>{p.id}</div>
              <div style={{ fontWeight: 500 }}>{p.issuer}</div>
              <div><TypeBadge type={p.type} /></div>
              <div className="r num">{fmtEUR(p.amount)}</div>
              <div className="r">
                <span className="num" style={{ fontWeight: 500, color: p.score >= 75 ? 'var(--emerald-2)' : p.score >= 60 ? 'var(--gold)' : 'var(--amber)' }}>
                  {p.score}
                </span>
              </div>
              <div>
                {p.recommend === 'approve' && <span className="tag tag-active">{lang === 'es' ? 'Aprobar' : 'Approve'}</span>}
                {p.recommend === 'review' && <span className="tag tag-pending">{lang === 'es' ? 'Revisar' : 'Review'}</span>}
                {p.recommend === 'request_info' && <span className="tag tag-pending">{lang === 'es' ? 'Pedir info' : 'Request info'}</span>}
                {p.recommend === 'reject' && <span className="tag tag-closed">{lang === 'es' ? 'Rechazar' : 'Reject'}</span>}
              </div>
              <div>
                {p.status === 'pending' && <span className="tag tag-pending">{t('adm_pending')}</span>}
                {p.status === 'review' && <span className="tag tag-active">{t('adm_review')}</span>}
              </div>
              <div style={{ display: 'flex', gap: 6 }}>
                <button className="btn-icon" title={t('adm_approve')}><Icon name="check" size={13} color="var(--emerald-2)" /></button>
                <button className="btn-icon" title={t('adm_reject')}><Icon name="x" size={13} color="var(--red)" /></button>
                <button className="btn-icon" title={t('adm_request_info')}><Icon name="mail" size={13} color="var(--text-3)" /></button>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="adm-grid-2">
        <div className="card card-pad-lg">
          <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 16 }}>{lang === 'es' ? 'Distribución de score' : 'Score distribution'}</div>
          <ScoreHistogram />
        </div>
        <div className="card card-pad-lg">
          <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 16 }}>{lang === 'es' ? 'Tasa de impago por categoría' : 'Default rate by category'}</div>
          <div className="def-list">
            {[
              { type: 'invoice', rate: 0.18, items: 1240 },
              { type: 'fixed', rate: 0.42, items: 86 },
              { type: 'equity', rate: 0, items: 32, note: lang === 'es' ? 'En curso' : 'In progress' },
              { type: 'seed', rate: 0, items: 14, note: lang === 'es' ? 'En curso' : 'In progress' },
            ].map(d => (
              <div key={d.type} className="def-row">
                <TypeBadge type={d.type} />
                <div style={{ flex: 1 }}>
                  <div className="def-bar"><div className="def-bar-fill" style={{ width: `${Math.min(d.rate * 20, 100)}%`, background: d.rate > 0.5 ? 'var(--amber)' : 'var(--emerald-2)' }} /></div>
                </div>
                <span className="num" style={{ fontSize: 13, fontWeight: 500, width: 60, textAlign: 'right' }}>
                  {d.note ? <span style={{ color: 'var(--text-3)', fontSize: 11 }}>{d.note}</span> : `${d.rate.toFixed(2)}%`}
                </span>
                <span className="num" style={{ fontSize: 11, color: 'var(--text-3)', width: 50, textAlign: 'right' }}>n={d.items}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        .adm-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 28px; overflow: hidden; }
        .adm-stat { background: var(--surface); padding: 22px; }
        .adm-head, .adm-row {
          display: grid;
          grid-template-columns: 1.1fr 1.7fr 0.9fr 1fr 0.7fr 1fr 0.9fr 0.9fr;
          gap: 12px;
          padding: 14px 22px;
          align-items: center;
        }
        .adm-head { font-size: 11px; color: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
        .adm-row { font-size: 13px; border-bottom: 1px solid var(--line); transition: background .15s; }
        .adm-row:last-child { border-bottom: none; }
        .adm-row:hover { background: var(--surface-2); }
        .adm-head .r, .adm-row .r { text-align: right; }
        .btn-icon {
          width: 28px; height: 28px;
          background: var(--bg-1);
          border: 1px solid var(--line);
          border-radius: 6px;
          display: flex; align-items: center; justify-content: center;
          cursor: pointer; transition: background .15s;
        }
        .btn-icon:hover { background: var(--surface-3); }
        .adm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
        .def-list { display: flex; flex-direction: column; gap: 12px; }
        .def-row { display: flex; align-items: center; gap: 14px; padding: 8px 0; border-top: 1px solid var(--line); }
        .def-row:first-child { border-top: none; }
        .def-bar { height: 4px; background: rgba(255,255,255,0.05); border-radius: 2px; overflow: hidden; }
        .def-bar-fill { height: 100%; }
      `}</style>
    </div>
  );
}

function ScoreHistogram() {
  const buckets = [
    { range: '0-30', count: 4, color: 'var(--red)' },
    { range: '30-50', count: 12, color: 'var(--amber)' },
    { range: '50-65', count: 28, color: 'var(--gold)' },
    { range: '65-80', count: 42, color: 'var(--emerald)' },
    { range: '80-100', count: 26, color: 'var(--emerald-2)' },
  ];
  const max = Math.max(...buckets.map(b => b.count));
  return (
    <div style={{ display: 'flex', gap: 10, alignItems: 'flex-end', height: 160, padding: '0 8px' }}>
      {buckets.map(b => (
        <div key={b.range} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
          <div className="num" style={{ fontSize: 12, color: 'var(--text-2)', fontWeight: 500 }}>{b.count}</div>
          <div style={{ width: '100%', height: `${(b.count / max) * 110}px`, background: b.color, borderRadius: '4px 4px 0 0', opacity: 0.8 }}></div>
          <div className="num" style={{ fontSize: 11, color: 'var(--text-3)' }}>{b.range}</div>
        </div>
      ))}
    </div>
  );
}

window.AdminPanel = AdminPanel;