// DSA Tracker view

function DSAView() {
  const { state, update } = useStore();
  const data = window.PLAN_DATA;

  const setDsa = (num, patch) => {
    update(prev => ({
      ...prev,
      dsa: { ...prev.dsa, [num]: { ...prev.dsa[num], ...patch } }
    }));
  };

  // Aggregates
  const totalProblems = data.dsa.reduce((s, t) => s + t.total, 0);
  const p1Done = data.dsa.filter(t => state.dsa[t.num]?.p1).reduce((s,t)=>s+t.total,0);
  const p2Done = data.dsa.filter(t => state.dsa[t.num]?.p2).reduce((s,t)=>s+t.total,0);

  function strengthColor(s) {
    if (s.includes('Strong')) return 'oklch(0.84 0.14 165)';
    if (s.includes('priority')) return 'oklch(0.85 0.16 25)';
    return 'oklch(0.85 0.15 80)';
  }

  return (
    <div className="fade-in">
      <div className="section-h">
        <div>
          <div className="kicker">Striver A2Z · 454 problems</div>
          <h1 className="h-title">DSA <em>tracker</em>.</h1>
        </div>
      </div>

      {/* 3-pass system */}
      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:'14px', marginBottom:'24px'}}>
        {data.passes.map((p, i) => (
          <div key={p.name} className="card" style={{
            animation: `fadeUp 0.4s ${i*80}ms cubic-bezier(0.2,0.8,0.2,1) both`
          }}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:'10px'}}>
              <div className="mono" style={{fontSize:'10px',letterSpacing:'0.14em',color:'var(--accent)'}}>{p.name.toUpperCase()} · {p.phase.toUpperCase()}</div>
              <Pill>{p.volume}</Pill>
            </div>
            <div style={{fontFamily:'var(--serif)',fontSize:'24px',letterSpacing:'-0.015em',marginBottom:'8px'}}>{p.label}</div>
            <p className="dim" style={{fontSize:'12px',lineHeight:1.5}}>{p.method}</p>
          </div>
        ))}
      </div>

      {/* Progress bars */}
      <div className="card" style={{marginBottom:'24px'}}>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'24px'}}>
          <div>
            <div style={{display:'flex',justifyContent:'space-between',marginBottom:'8px'}}>
              <span className="mono" style={{fontSize:'11px',color:'var(--ink-2)'}}>PASS 1 — PATTERN CATALOG</span>
              <span className="mono tabular" style={{fontSize:'11px'}}>{p1Done} / {totalProblems}</span>
            </div>
            <Bar value={p1Done} total={totalProblems} />
          </div>
          <div>
            <div style={{display:'flex',justifyContent:'space-between',marginBottom:'8px'}}>
              <span className="mono" style={{fontSize:'11px',color:'var(--ink-2)'}}>PASS 2 — TIMED RECOGNITION</span>
              <span className="mono tabular" style={{fontSize:'11px'}}>{p2Done} / {totalProblems}</span>
            </div>
            <Bar value={p2Done} total={totalProblems} />
          </div>
        </div>
      </div>

      {/* Topic table */}
      <div className="card flat" style={{padding:0,border:'1px solid var(--line-soft)',borderRadius:'var(--r-3)',overflow:'hidden'}}>
        <div style={{
          display:'grid', gridTemplateColumns:'40px 1fr 80px 160px 60px 60px',
          padding:'12px 18px', background:'var(--bg-3)',
          borderBottom:'1px solid var(--line-soft)',
          gap:'12px'
        }}>
          <span className="mono" style={{fontSize:'10px',color:'var(--ink-3)',letterSpacing:'0.12em'}}>#</span>
          <span className="mono" style={{fontSize:'10px',color:'var(--ink-3)',letterSpacing:'0.12em'}}>TOPIC</span>
          <span className="mono" style={{fontSize:'10px',color:'var(--ink-3)',letterSpacing:'0.12em',textAlign:'right'}}>COUNT</span>
          <span className="mono" style={{fontSize:'10px',color:'var(--ink-3)',letterSpacing:'0.12em'}}>STRENGTH</span>
          <span className="mono" style={{fontSize:'10px',color:'var(--ink-3)',letterSpacing:'0.12em',textAlign:'center'}}>P1</span>
          <span className="mono" style={{fontSize:'10px',color:'var(--ink-3)',letterSpacing:'0.12em',textAlign:'center'}}>P2</span>
        </div>
        {data.dsa.map((t, i) => {
          const ts = state.dsa[t.num] || {};
          return (
            <div key={t.num} style={{
              display:'grid', gridTemplateColumns:'40px 1fr 80px 160px 60px 60px',
              padding:'12px 18px',
              alignItems:'center',
              borderBottom: i < data.dsa.length-1 ? '1px solid var(--line-soft)' : 'none',
              background: 'var(--bg-2)',
              gap:'12px',
              transition:'background 0.15s',
            }}
            onMouseEnter={e=>e.currentTarget.style.background='var(--bg-3)'}
            onMouseLeave={e=>e.currentTarget.style.background='var(--bg-2)'}
            >
              <span className="mono muted" style={{fontSize:'11px'}}>{t.num.padStart(2,'0')}</span>
              <span style={{fontSize:'13px', fontWeight:500}}>{t.topic}</span>
              <span className="mono tabular" style={{fontSize:'12px',textAlign:'right',color:'var(--ink-2)'}}>{t.total}</span>
              <span style={{fontSize:'11px', color: strengthColor(t.strength), fontFamily:'var(--mono)', letterSpacing:'0.04em'}}>
                {t.strength}
              </span>
              <div style={{display:'flex',justifyContent:'center'}}>
                <Check on={ts.p1} onClick={() => setDsa(t.num, { p1: !ts.p1 })} size={16} />
              </div>
              <div style={{display:'flex',justifyContent:'center'}}>
                <Check on={ts.p2} onClick={() => setDsa(t.num, { p2: !ts.p2 })} size={16} />
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.DSAView = DSAView;