// LLD Tracker view

function LLDView() {
  const { state, update } = useStore();
  const data = window.PLAN_DATA;
  const [openSection, setOpenSection] = React.useState({});

  // Group by section
  const sections = {};
  data.lld.forEach((l, i) => {
    if (!sections[l.section]) sections[l.section] = [];
    sections[l.section].push({ ...l, idx: i });
  });

  const setLld = (idx, val) => {
    update(prev => ({ ...prev, lld: { ...prev.lld, [idx]: val } }));
  };
  function isDone(item) {
    if (item.done) return true;
    return !!state.lld[item.idx];
  }

  const totalScheduled = data.lld.filter(l => !l.done).length;
  const doneScheduled = data.lld.filter(l => !l.done && state.lld[data.lld.indexOf(l)]).length;

  return (
    <div className="fade-in">
      <div className="section-h">
        <div>
          <div className="kicker">Striver LLD course · 65 topics</div>
          <h1 className="h-title">LLD <em>tracker</em>.</h1>
        </div>
        <div style={{textAlign:'right'}}>
          <div className="mono" style={{fontSize:'11px',color:'var(--ink-2)'}}>SCHEDULED PROGRESS</div>
          <div style={{fontFamily:'var(--serif)',fontSize:'36px',letterSpacing:'-0.02em',marginTop:'2px'}}>
            <CountUp to={doneScheduled} /> / {totalScheduled}
          </div>
        </div>
      </div>

      <div className="card" style={{marginBottom:'24px'}}>
        <Bar value={doneScheduled} total={totalScheduled} />
        <div className="mono muted" style={{fontSize:'10px',marginTop:'8px',letterSpacing:'0.06em'}}>
          {data.lld.filter(l => l.done).length} pre-completed before sprint · {totalScheduled} scheduled in plan
        </div>
      </div>

      <div className="col" style={{gap:'12px'}}>
        {Object.entries(sections).map(([section, items], si) => {
          const open = openSection[section] !== false; // default open
          const sectionDone = items.filter(isDone).length;
          return (
            <div key={section} className="card" style={{padding:0, animation:`fadeUp 0.4s ${si*40}ms cubic-bezier(0.2,0.8,0.2,1) both`}}>
              <button
                onClick={() => setOpenSection(p => ({ ...p, [section]: open ? false : true }))}
                style={{
                  width:'100%', textAlign:'left', padding:'18px 22px',
                  display:'flex',alignItems:'center',justifyContent:'space-between',
                }}
              >
                <div style={{display:'flex',alignItems:'center',gap:'14px'}}>
                  <span style={{
                    width:'24px',height:'24px',borderRadius:'50%',
                    border:'1px solid var(--line)',
                    display:'flex',alignItems:'center',justifyContent:'center',
                    fontSize:'12px',color:'var(--ink-2)',
                    transform: open ? 'rotate(90deg)' : 'rotate(0)',
                    transition:'transform 0.2s',
                  }}>›</span>
                  <span style={{fontFamily:'var(--serif)',fontSize:'22px',letterSpacing:'-0.01em'}}>{section}</span>
                </div>
                <div style={{display:'flex',alignItems:'center',gap:'12px'}}>
                  <span className="mono tabular" style={{fontSize:'11px',color:'var(--ink-2)'}}>
                    {sectionDone} / {items.length}
                  </span>
                  <div style={{width:'80px'}}><Bar value={sectionDone} total={items.length} /></div>
                </div>
              </button>
              {open && (
                <div style={{borderTop:'1px solid var(--line-soft)'}}>
                  {items.map((item, i) => {
                    const done = isDone(item);
                    return (
                      <div key={i} style={{
                        display:'grid', gridTemplateColumns:'24px 1fr auto',
                        padding:'12px 22px',
                        gap:'14px',
                        alignItems:'center',
                        borderBottom: i < items.length - 1 ? '1px solid var(--line-soft)' : 'none',
                      }}>
                        {item.done ? (
                          <span style={{color:'var(--accent-2)',fontSize:'14px',fontWeight:600}}>✓</span>
                        ) : (
                          <Check on={done} onClick={() => setLld(item.idx, !done)} size={16} />
                        )}
                        <div>
                          <div style={{fontSize:'13px', color: done && !item.done ? 'var(--ink-2)' : 'var(--ink)', textDecoration: done && !item.done ? 'line-through' : 'none'}}>
                            {item.topic}
                          </div>
                          {item.scheduled && item.scheduled !== '—' && (
                            <div className="mono" style={{fontSize:'10px',color:'var(--ink-3)',marginTop:'2px',letterSpacing:'0.04em'}}>
                              {item.scheduled}
                            </div>
                          )}
                        </div>
                        {item.done && <Pill className="ghost" kind="">PRE-DONE</Pill>}
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.LLDView = LLDView;