// DSP Architecture view — accurate to implemented DSP
// Single calibration: Silver (1966 Teletronix model).

const MODELS = {
  silver: {
    name: 'Silver',
    tag: 'Fast · Transient',
    attackMs: 10,
    releaseFast: 60,
    releaseSlow: '0.5–5 s',
    knee: 'Soft (opto)',
    thd: '0.35%',
    program: 'Vocals · Drums · Bass DI',
    color: '#d6d0c2',
  },
};

function DSPArchView() {
  const m = MODELS.silver;

  return (
    <div style={{
      width: '100%', maxWidth: 1500,
      background: 'rgba(20,16,12,0.8)',
      border: '1px solid rgba(255,255,255,0.06)',
      borderRadius: 12,
      padding: 32,
    }} data-screen-label="04 DSP">
      <div style={{ marginBottom: 24 }}>
        <div style={{
          fontFamily: 'var(--font-engrave)', fontSize: 11,
          letterSpacing: '0.3em', color: '#d6a055',
          textTransform: 'uppercase', fontWeight: 700, marginBottom: 6,
        }}>DSP Architecture · Implemented v1.0</div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11,
          color: 'rgba(232,220,184,0.55)', letterSpacing: '0.06em',
          maxWidth: 780, lineHeight: 1.5 }}>
          Single calibration: Silver (1966 Teletronix model). Additional models planned for v1.1+.
          Two-branch T4 memory engine. Frequency-dependent detector (HF shelf scaffolded, pending calibration).
          Full-path coloration including output transformer model.
        </div>
      </div>

      {/* Spec strip — 5 columns, headroom and Release Mid removed */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(5, 1fr)',
        gap: 1, background: 'rgba(255,255,255,0.04)',
        borderRadius: 6, overflow: 'hidden', marginBottom: 28,
        border: '1px solid rgba(214,160,85,0.15)',
      }}>
        <CalCell label="Attack" value={`${m.attackMs} ms`} />
        <CalCell label="Release · Fast" value={`${m.releaseFast} ms`} />
        <CalCell label="Memory Tail" value={m.releaseSlow} />
        <CalCell label="Knee" value={m.knee} />
        <CalCell label="THD @ 0 VU" value={`${m.thd} · odd-harmonic rich`} />
      </div>

      {/* Block diagram */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 24 }}>

        {/* Audio path */}
        <PathRow title="Audio Path" subtitle="Implemented signal chain — v1.0">
          <DSPNode planned>Input Xfmr<br/><span>PLACEHOLDER · pass-through</span></DSPNode>
          <Arrow />
          <DSPNode active>V1A · 12AX7<br/><span>tube stage 1a</span></DSPNode>
          <Arrow />
          <DSPNode active>V1B · 12AX7<br/><span>tube stage 1b</span></DSPNode>
          <Arrow />
          <DSPNode accent>R1 Attenuator<br/><span>Gain knob</span></DSPNode>
          <Arrow />
          <DSPNode active>V2A/V2B · 12BH7<br/><span>driver stage</span></DSPNode>
          <Arrow />
          <DSPNode active>V3 · 12AX7<br/><span>cathode follower</span></DSPNode>
          <Arrow />
          <DSPNode>NFB Approx<br/><span>negative feedback</span></DSPNode>
          <Arrow />
          <DSPNode active>T2 Xfmr<br/><span>Sowter 8940 · Phase 5.5</span></DSPNode>
          <Arrow />
          <DSPNode active>Makeup Gain<br/><span>Phase 5.6b</span></DSPNode>
        </PathRow>

        {/* Detector / Sidechain path */}
        <PathRow title="Sidechain / Detector Path" subtitle="Implemented signal chain — v1.0">
          <DSPNode>SC Tap<br/><span>from audio path</span></DSPNode>
          <Arrow />
          <DSPNode accent>SC HPF<br/><span>sidechainHpf_</span></DSPNode>
          <Arrow />
          <DSPNode planned>HF Shelf<br/><span>PLACEHOLDER · neutral</span></DSPNode>
          <Arrow />
          <DSPNode>Rectifier<br/><span>full-wave abs</span></DSPNode>
          <Arrow />
          <DSPNode accent active>T4B Opto Env<br/><span>slope = 0.183 · Phase 5.6b</span></DSPNode>
          <Arrow />
          <DSPNode>PhotocellGR<br/><span>compression curve</span></DSPNode>
          <Arrow />
          <DSPNode>Mode Law<br/><span>Comp 3:1 · Limit ∞:1</span></DSPNode>
        </PathRow>

        {/* T4 memory branches — two-branch */}
        <div style={{
          padding: 24,
          background: 'rgba(12,10,8,0.7)',
          border: '1px solid rgba(214,160,85,0.2)',
          borderRadius: 8,
        }}>
          <div style={{ fontFamily: 'var(--font-engrave)', fontSize: 10,
            letterSpacing: '0.25em', color: '#d6a055', fontWeight: 700,
            textTransform: 'uppercase', marginBottom: 4 }}>
            T4 Memory Engine · Two-Branch
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10,
            color: 'rgba(232,220,184,0.5)', marginBottom: 18 }}>
            env = weighted_sum(env_fast, env_slow) · program dependency shifts weights between branches
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16, maxWidth: 700 }}>
            <BranchCard
              color="#e8dcb8"
              title="Fast Branch"
              tau={`τ = ${m.releaseFast} ms`}
              role="Transient recovery · prevents pumping"
              weight="dominant on short transients"
            />
            <BranchCard
              color="#8a5a20"
              title="Slow Tail"
              tau={`τ = ${m.releaseSlow}`}
              role="Program memory · long recovery"
              weight="accumulates with sustained GR history"
            />
          </div>
        </div>

        {/* Ideal Program card */}
        <div style={{
          padding: 24,
          background: 'rgba(12,10,8,0.7)',
          border: '1px solid rgba(255,255,255,0.08)',
          borderRadius: 8,
          display: 'grid',
          gridTemplateColumns: '240px 1fr',
          gap: 32,
          alignItems: 'center',
        }}>
          <div>
            <div style={{ fontFamily: 'var(--font-engrave)', fontSize: 10,
              letterSpacing: '0.25em', color: '#d6a055', fontWeight: 700,
              textTransform: 'uppercase' }}>Ideal Program · Silver</div>
            <div style={{ fontFamily: 'var(--font-brand)', fontSize: 28,
              color: '#e8dcb8', marginTop: 8, letterSpacing: '0.05em' }}>
              {m.tag}
            </div>
          </div>
          <div style={{ fontFamily: 'var(--font-ui)', fontSize: 14,
            color: 'rgba(232,220,184,0.85)', lineHeight: 1.6 }}>
            {m.program}. Calibrated timing set makes this model feel{' '}
            <span style={{ color: '#d6a055' }}>responsive and forward</span> — fast transient
            recovery with a natural program-dependent tail. Faithful to the 1966 Teletronix silver unit.
          </div>
        </div>
      </div>
    </div>
  );
}

function CalCell({ label, value }) {
  return (
    <div style={{ background: 'rgba(20,16,12,0.9)', padding: '14px 16px' }}>
      <div style={{ fontFamily: 'var(--font-engrave)', fontSize: 9,
        letterSpacing: '0.3em', color: 'rgba(214,160,85,0.8)',
        textTransform: 'uppercase', fontWeight: 600 }}>{label}</div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13,
        color: '#e8dcb8', marginTop: 4 }}>{value}</div>
    </div>
  );
}

function PathRow({ title, subtitle, children }) {
  return (
    <div>
      <div style={{ marginBottom: 12 }}>
        <span style={{ fontFamily: 'var(--font-engrave)', fontSize: 10,
          letterSpacing: '0.25em', color: '#d6a055', fontWeight: 700,
          textTransform: 'uppercase' }}>{title}</span>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10,
          color: 'rgba(232,220,184,0.5)', marginLeft: 12,
          letterSpacing: '0.08em' }}>{subtitle}</span>
      </div>
      <div style={{
        display: 'flex', alignItems: 'stretch', gap: 8,
        padding: 14,
        background: 'rgba(12,10,8,0.7)',
        border: '1px solid rgba(255,255,255,0.06)',
        borderRadius: 8, overflowX: 'auto',
      }}>
        {children}
      </div>
    </div>
  );
}

function DSPNode({ children, accent, active, planned }) {
  return (
    <div style={{
      flex: 1, minWidth: 120,
      padding: '10px 12px',
      background: planned
        ? 'rgba(80,60,20,0.12)'
        : active
        ? 'linear-gradient(180deg, rgba(214,160,85,0.18) 0%, rgba(214,160,85,0.06) 100%)'
        : accent
        ? 'rgba(214,160,85,0.06)'
        : 'rgba(255,255,255,0.03)',
      border: `1px solid ${planned ? 'rgba(180,120,20,0.35)' : active ? 'rgba(214,160,85,0.5)' : accent ? 'rgba(214,160,85,0.25)' : 'rgba(255,255,255,0.08)'}`,
      borderRadius: 6,
      fontFamily: 'var(--font-engrave)', fontSize: 11,
      letterSpacing: '0.12em', color: planned ? 'rgba(232,220,184,0.5)' : '#e8dcb8',
      fontWeight: 600, textTransform: 'uppercase',
      textAlign: 'center',
      boxShadow: active ? '0 0 24px rgba(214,160,85,0.15)' : 'none',
      lineHeight: 1.4,
    }}>
      {children}
      <style>{`
        div > span { display: block; font-family: var(--font-mono); font-size: 9px;
          letter-spacing: 0.05em; color: rgba(232,220,184,0.55);
          font-weight: 400; text-transform: none; margin-top: 3px; }
      `}</style>
    </div>
  );
}

function Arrow() {
  return (
    <div style={{
      display: 'flex', alignItems: 'center',
      color: 'rgba(214,160,85,0.5)', fontSize: 16, flexShrink: 0,
    }}>→</div>
  );
}

function BranchCard({ color, title, tau, role, weight }) {
  return (
    <div style={{
      padding: 16,
      background: 'rgba(20,16,12,0.6)',
      borderLeft: `3px solid ${color}`,
      borderRadius: '0 6px 6px 0',
    }}>
      <div style={{ fontFamily: 'var(--font-engrave)', fontSize: 11,
        letterSpacing: '0.2em', color, fontWeight: 700,
        textTransform: 'uppercase', marginBottom: 4 }}>{title}</div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11,
        color: '#e8dcb8', marginBottom: 10 }}>{tau}</div>
      <div style={{ fontFamily: 'var(--font-ui)', fontSize: 12,
        color: 'rgba(232,220,184,0.8)', lineHeight: 1.5, marginBottom: 6 }}>{role}</div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10,
        color: 'rgba(232,220,184,0.5)', letterSpacing: '0.05em' }}>weight {weight}</div>
    </div>
  );
}

Object.assign(window, { DSPArchView, MODELS });