// Pattern catalog — Phase 1 deliverable. Per DSA topic: list of {name, trigger, template}.

function PatternsView() {
  const { state, update } = useStore();
  const data = window.PLAN_DATA;
  const [openTopic, setOpenTopic] = React.useState(null);

  const setPatterns = (topic, arr) => {
    update(prev => ({ ...prev, patterns: { ...prev.patterns, [topic]: arr } }));
  };

  function addPattern(topic) {
    const arr = state.patterns[topic] || [];
    setPatterns(topic, [...arr, { id: `p_${Date.now()}`, name: '', trigger: '', template: '' }]);
  }
  function updatePattern(topic, idx, patch) {
    const arr = (state.patterns[topic] || []).slice();
    arr[idx] = { ...arr[idx], ...patch };
    setPatterns(topic, arr);
  }
  function removePattern(topic, idx) {
    const arr = (state.patterns[topic] || []).slice();
    arr.splice(idx, 1);
    setPatterns(topic, arr);
  }

  const totalPatterns = Object.values(state.patterns || {}).reduce((a, arr) => a + (arr?.length || 0), 0);
  const topicsWithCatalog = Object.values(state.patterns || {}).filter(arr => arr?.length).length;

  return (
    <div className="fade-in">
      <div className="section-h">
        <div>
          <div className="kicker">Phase 1 artifact · the catalog *is* the deliverable</div>
          <h1 className="h-title">Pattern <em>catalog</em>.</h1>
        </div>
        <div style={{display:'flex',gap:'14px'}}>
          <Stat label="Patterns" value={<CountUp to={totalPatterns} />} accent />
          <Stat label="Topics covered" value={<CountUp to={topicsWithCatalog} />} sub={`of ${data.dsa.length}`} />
        </div>
      </div>

      <div className="col" style={{gap:'8px'}}>
        {data.dsa.map(t => {
          const arr = state.patterns[t.topic] || [];
          const open = openTopic === t.topic;
          return (
            <div key={t.num} className="card" style={{padding: 0}}>
              <button onClick={() => setOpenTopic(open ? null : t.topic)}
                style={{width:'100%', padding:'14px 18px', display:'grid', gridTemplateColumns:'40px 1fr 80px 60px', gap:'12px', alignItems:'center', textAlign:'left', background:'transparent'}}>
                <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" style={{fontSize:'11px', color: arr.length ? 'var(--accent)' : 'var(--ink-3)'}}>{arr.length} pattern{arr.length === 1 ? '' : 's'}</span>
                <span className="mono muted" style={{fontSize:'12px', textAlign:'right'}}>{open ? '▾' : '▸'}</span>
              </button>
              {open && (
                <div style={{padding:'4px 18px 18px', borderTop:'1px solid var(--line-soft)'}}>
                  {arr.map((p, i) => (
                    <div key={p.id || i} style={{display:'grid', gridTemplateColumns:'180px 1fr 1fr 32px', gap:'10px', marginTop:'12px', alignItems:'flex-start'}}>
                      <input className="input" placeholder="Pattern name (e.g. Monotonic Stack)" value={p.name || ''} onChange={e => updatePattern(t.topic, i, { name: e.target.value })} style={{fontSize:'12px'}}/>
                      <input className="input" placeholder="Trigger (e.g. 'next greater', 'largest rectangle')" value={p.trigger || ''} onChange={e => updatePattern(t.topic, i, { trigger: e.target.value })} style={{fontSize:'12px'}}/>
                      <textarea className="textarea" placeholder="Template / key insight" value={p.template || ''} onChange={e => updatePattern(t.topic, i, { template: e.target.value })} style={{fontSize:'11px',minHeight:'40px',fontFamily:'var(--mono)'}}/>
                      <button className="btn ghost" onClick={() => removePattern(t.topic, i)} style={{color:'var(--rose)',fontSize:'14px',padding:'4px'}}>×</button>
                    </div>
                  ))}
                  <div style={{marginTop:'12px'}}>
                    <button className="btn" onClick={() => addPattern(t.topic)} style={{fontSize:'11px'}}>+ Pattern</button>
                  </div>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.PatternsView = PatternsView;