/* global React, window */
const { useEffect: useEffectDD } = React;
const { VERTICAL_DETAIL, CONF: CONF_DD } = window;

function VerticalDrawer({ vertical, onClose }) {
  useEffectDD(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [onClose]);

  if (!vertical) return null;
  const d = VERTICAL_DETAIL[vertical.k];
  if (!d) return null;

  return (
    <div className="drawer-backdrop" onClick={onClose}>
      <div className="drawer" onClick={(e) => e.stopPropagation()}>
        <div className="drawer-head" style={{ borderTop: `3px solid ${vertical.c}` }}>
          <div style={{ flex: 1 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
              <div className="num" style={{ fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>§ Vertical Dossier · {vertical.k}</div>
              <span className="chip" style={{ borderColor: vertical.c, color: vertical.c, background: `${vertical.c}14` }}>
                {vertical.stage}
              </span>
            </div>
            <h2 className="serif" style={{ fontSize: 30, letterSpacing: '-0.02em', color: 'var(--fg-0)', lineHeight: 1.1 }}>{d.full}</h2>
            {d.tagline && <div style={{ fontSize: 14, color: 'var(--fg-2)', marginTop: 6, fontStyle: 'italic' }}>{d.tagline}</div>}
          </div>
          <button className="btn" onClick={onClose} aria-label="Close">Close · Esc</button>
        </div>

        <div className="drawer-body">
          {/* TAM derivation */}
          {d.tam_derivation && (
            <Block title="TAM Derivation" subtitle="How the addressable market is calculated from primary sources.">
              <table className="tbl" style={{ width: '100%' }}>
                <tbody>
                  {d.tam_derivation.map((r, i) => (
                    <tr key={i} className={i === d.tam_derivation.length - 1 ? 'hilite' : ''}>
                      <td style={{ fontSize: 12.5 }}>{r.label}</td>
                      <td className="num-col" style={{ fontSize: 13, fontWeight: 500 }}>{r.v}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </Block>
          )}

          {/* Market Transformation — what happens today vs what HCT enables */}
          {d.transformation && (
            <Block title="Market Transformation" subtitle="The existing market and how HCT changes the economics of this feedstock.">
              <div className="drawer-2col" style={{ marginBottom: 20 }}>
                <div style={{ padding: 16, background: 'var(--neg-bg)', border: '1px solid rgba(185,74,63,0.25)', borderRadius: 6 }}>
                  <div style={{ fontSize: 10, fontFamily: 'var(--mono)', color: 'var(--neg)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 6 }}>Before HCT</div>
                  <div style={{ fontSize: 12.5, color: 'var(--fg-1)', lineHeight: 1.6, marginBottom: 10 }}>{d.transformation.before}</div>
                  <div style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily: 'var(--mono)' }}>
                    Feedstock value: <span style={{ color: 'var(--neg)', fontWeight: 600 }}>{d.transformation.inputVal}</span>
                  </div>
                </div>
                <div style={{ padding: 16, background: 'var(--pos-bg)', border: '1px solid rgba(45,122,77,0.25)', borderRadius: 6 }}>
                  <div style={{ fontSize: 10, fontFamily: 'var(--mono)', color: 'var(--pos)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 6 }}>With HCT</div>
                  <div style={{ fontSize: 12.5, color: 'var(--fg-1)', lineHeight: 1.6, marginBottom: 10 }}>{d.transformation.after}</div>
                  <div style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily: 'var(--mono)' }}>
                    Output value: <span style={{ color: 'var(--pos)', fontWeight: 600 }}>{d.transformation.outputVal}</span>
                  </div>
                </div>
              </div>

              <div style={{ marginBottom: 16 }}>
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 8 }}>
                  <div className="card-label">Current fate of this feedstock</div>
                  <span className="chip" style={{
                    color: d.transformation.created === 100 ? 'var(--pos)' : d.transformation.created >= 70 ? 'var(--accent)' : 'var(--warn)',
                    borderColor: d.transformation.created === 100 ? 'var(--pos)' : d.transformation.created >= 70 ? 'var(--accent)' : 'var(--warn)',
                    background: d.transformation.created === 100 ? 'var(--pos-bg)' : d.transformation.created >= 70 ? 'var(--accent-bg)' : 'var(--warn-bg)',
                  }}>
                    {d.transformation.created}% new market
                  </span>
                </div>
                <div style={{ display: 'flex', width: '100%', height: 20, borderRadius: 4, overflow: 'hidden', border: '1px solid var(--line)' }}>
                  {d.transformation.segments.map((s, i) => (
                    <div key={i} style={{
                      width: `${s.p}%`,
                      background: s.c,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                    }}>
                      {s.p >= 15 && (
                        <span style={{ fontSize: 10, color: '#fff', fontFamily: 'var(--mono)', fontWeight: 600 }}>{s.p}%</span>
                      )}
                    </div>
                  ))}
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 8 }}>
                  {d.transformation.segments.map((s, i) => (
                    <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: 'var(--fg-2)' }}>
                      <div style={{ width: 8, height: 8, borderRadius: 2, background: s.c }} />
                      <span>{s.l} <span style={{ color: 'var(--fg-3)', fontFamily: 'var(--mono)' }}>{s.p}%</span></span>
                    </div>
                  ))}
                </div>
              </div>
            </Block>
          )}

          {/* Economics */}
          {d.economics && (
            <Block title="Unit Economics" subtitle="Per-license commercial structure.">
              <div className="grid-2">
                {Object.entries(d.economics).map(([k, v]) => (
                  <div key={k} style={{ padding: '10px 0', borderBottom: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', gap: 12 }}>
                    <div style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily: 'var(--mono)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>{k.replace(/_/g, ' ')}</div>
                    <div className="num" style={{ fontSize: 12.5, color: 'var(--fg-0)', textAlign: 'right' }}>{v}</div>
                  </div>
                ))}
              </div>
            </Block>
          )}

          {/* Competitive */}
          {d.competitive && (
            <Block title="Competitive Alternatives" subtitle="How other technologies handle this feedstock.">
              <table className="tbl">
                <thead><tr><th style={{ width: 160 }}>Technology</th><th>Verdict</th></tr></thead>
                <tbody>
                  {d.competitive.map((c, i) => (
                    <tr key={i} className={c.tech.startsWith('HCT') ? 'hilite' : ''}>
                      <td style={{ fontWeight: c.tech.startsWith('HCT') ? 600 : 400 }}>{c.tech}</td>
                      <td style={{ fontSize: 12.5 }}>{c.verdict}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </Block>
          )}

          {/* Regulatory */}
          {d.regulatory && (
            <Block title="Regulatory Drivers">
              {d.regulatory.map((r, i) => (
                <div key={i} style={{ padding: '12px 0', borderBottom: i < d.regulatory.length - 1 ? '1px solid var(--line)' : 'none' }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                    <span className="chip accent">{r.name}</span>
                    <span style={{ fontSize: 12.5, color: 'var(--fg-1)', lineHeight: 1.55 }}>{r.detail}</span>
                  </div>
                </div>
              ))}
            </Block>
          )}

          {/* Partners */}
          {d.partners && (
            <Block title="Active Partners & Engagements">
              <table className="tbl">
                <thead><tr><th>Partner</th><th>Status</th><th>Context</th></tr></thead>
                <tbody>
                  {d.partners.map((p, i) => (
                    <tr key={i}><td style={{ fontWeight: 500 }}>{p.name}</td><td style={{ color: 'var(--accent)' }}>{p.status}</td><td style={{ fontSize: 12.5, color: 'var(--fg-2)' }}>{p.context}</td></tr>
                  ))}
                </tbody>
              </table>
            </Block>
          )}

          {/* Risks + Evidence */}
          <div className="drawer-risks-evidence">
            {d.risks && (
              <Block title="Vertical-Specific Risks">
                <ul style={{ listStyle: 'none', padding: 0 }}>
                  {d.risks.map((r, i) => (
                    <li key={i} style={{ display: 'flex', gap: 10, padding: '8px 0', borderBottom: i < d.risks.length - 1 ? '1px solid var(--line)' : 'none', fontSize: 12.5, color: 'var(--fg-1)', lineHeight: 1.55 }}>
                      <span style={{ color: 'var(--neg)', flexShrink: 0 }}>▸</span>
                      <span>{r}</span>
                    </li>
                  ))}
                </ul>
              </Block>
            )}
            {d.evidence && (
              <Block title="Current Evidence">
                <p style={{ fontSize: 13, color: 'var(--fg-1)', lineHeight: 1.65 }}>{d.evidence}</p>
              </Block>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

function Block({ title, subtitle, children }) {
  return (
    <div style={{ marginBottom: 28 }}>
      <div style={{ marginBottom: 12 }}>
        <div className="card-label">{title}</div>
        {subtitle && <div style={{ fontSize: 12, color: 'var(--fg-3)', marginTop: 4 }}>{subtitle}</div>}
      </div>
      {children}
    </div>
  );
}

window.VerticalDrawer = VerticalDrawer;