// Notes
function ModuleNotes() {
  const [openNb, setOpenNb] = React.useState({nb1: true, nb2: false});

  return (
    <div className="ks-module"
         style={{'--mod-current':'var(--mod-notes)', '--mod-current-tint':'var(--mod-notes-tint)'}}
         data-screen-label="notes">
      <div style={{padding:'8px 16px', background:'var(--white)', borderBottom:'1px solid var(--ink-150)', display:'flex', alignItems:'center', gap:12}}>
        <div style={{width:28, height:28, borderRadius:6, background: 'var(--mod-notes)', color:'white', display:'grid', placeItems:'center', fontWeight:700, fontSize:12}}>N</div>
        <div className="col" style={{lineHeight:1.2}}>
          <div style={{fontWeight:600, fontSize:13.5}}>Weekly Directorate Notes</div>
          <div className="muted text-xs">Synced across devices · Encrypted at rest</div>
        </div>
        <div className="grow"/>
        <button className="btn">{IC.mic} Record</button>
        <button className="btn primary">{IC.plus} New note</button>
      </div>

      <div style={{flex:1, display:'flex', overflow:'hidden'}}>
        {/* Tree */}
        <div style={{width:280, background:'var(--white)', borderRight:'1px solid var(--ink-150)', padding:'14px 12px', overflow:'auto'}}>
          <div style={{position:'relative', marginBottom:12}}>
            <input placeholder="Search notes…" style={{
              width:'100%', padding:'6px 10px 6px 30px',
              border:'1px solid var(--ink-200)', borderRadius:6,
              fontSize:12.5, background:'var(--ink-50)', outline:'none',
            }}/>
            <div style={{position:'absolute', left:9, top:7, color:'var(--ink-500)'}}>{IC.search}</div>
          </div>

          <div style={{fontSize:10.5, fontWeight:600, color:'var(--ink-500)', letterSpacing:'0.08em', textTransform:'uppercase', padding:'8px 6px 4px'}}>Notebooks</div>
          {KS_DATA.notesTree.map(nb => (
            <div key={nb.id}>
              <button onClick={() => setOpenNb(s => ({...s, [nb.id]: !s[nb.id]}))}
                      style={{
                        width:'100%', display:'flex', alignItems:'center', gap:8,
                        padding:'6px 8px', border:'none', background:'transparent',
                        borderRadius:5, fontSize:13, fontWeight:500, textAlign:'left',
                        color:'var(--ink-800)',
                      }}>
                <span style={{color:'var(--ink-500)', display:'inline-flex'}}>
                  {openNb[nb.id] ? IC.chevronD : IC.chevronR}
                </span>
                <span style={{color:'var(--mod-notes)'}}>{IC.folder}</span>
                <span className="grow">{nb.name}</span>
                <span className="muted text-xs">{nb.count}</span>
              </button>
              {openNb[nb.id] && nb.children && (
                <div style={{marginLeft:22}}>
                  {nb.children.map(c => (
                    <button key={c.id} style={{
                      width:'100%', display:'flex', alignItems:'center', gap:8,
                      padding:'5px 8px', border:'none',
                      background: c.active ? 'var(--mod-notes-tint)' : 'transparent',
                      color: c.active ? 'var(--mod-notes)' : 'var(--ink-700)',
                      borderRadius:5, fontSize:12.5, textAlign:'left',
                      fontWeight: c.active ? 550 : 400,
                    }}>
                      {IC.fileText}
                      <span style={{overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{c.name}</span>
                    </button>
                  ))}
                </div>
              )}
            </div>
          ))}

          <div style={{fontSize:10.5, fontWeight:600, color:'var(--ink-500)', letterSpacing:'0.08em', textTransform:'uppercase', padding:'14px 6px 4px'}}>Tags</div>
          <div className="row gap-2" style={{padding:'4px 6px', flexWrap:'wrap'}}>
            {['#cabinet','#dpi','#budget','#committee','#urgent','#draft'].map(t => (
              <span key={t} className="chip" style={{fontSize:11}}>{t}</span>
            ))}
          </div>
        </div>

        {/* Editor */}
        <div style={{flex:1, overflow:'auto', background:'var(--white)'}}>
          <div style={{maxWidth: 780, margin:'0 auto', padding: '36px 44px'}}>
            <div className="row" style={{marginBottom:6}}>
              <span className="chip" style={{fontSize:11}}>Directorate — Weekly</span>
              <span className="chip" style={{fontSize:11, marginLeft:6}}>#cabinet #dpi</span>
              <div className="grow"/>
              <span className="muted text-xs">Edited 12 min ago · 3 minor edits by you</span>
            </div>
            <h1 style={{
              fontSize: 30, fontWeight: 700, letterSpacing:'-0.02em',
              margin:'6px 0 4px',
            }}>Week of 06 Jul — DPI review</h1>
            <div className="muted" style={{marginBottom: 20, fontSize:13}}>13 Jul 2026 · North Block · Room 301</div>

            <div style={{fontSize:14, lineHeight:1.75, color:'var(--ink-800)'}}>

              <h2 style={{fontSize:17, fontWeight:600, margin:'20px 0 8px'}}>Attendees</h2>
              <ul style={{margin:0, paddingLeft:22}}>
                <li>Shri P. Ramesh (JS, DIC) — chair</li>
                <li>Shri S. Iyer (Director, MeitY)</li>
                <li>Smt. K. Nair (Section Officer)</li>
                <li>Karya AI (recording · transcribing)</li>
              </ul>

              {/* Audio note pill */}
              <div style={{
                margin:'16px 0',
                padding:'10px 14px',
                background:'var(--mod-notes-tint)',
                border:'1px solid #E4D6FA',
                borderRadius: 10,
                display:'flex', alignItems:'center', gap:12,
              }}>
                <button style={{
                  width:36, height:36, borderRadius:'50%',
                  background:'var(--mod-notes)', color:'white', border:'none',
                  display:'grid', placeItems:'center',
                }}>{IC.play}</button>
                <div className="col" style={{lineHeight:1.3}}>
                  <div style={{fontSize:12.5, fontWeight:600}}>Meeting recording · 42:18</div>
                  <div className="muted text-xs">Transcribed · OCR searchable · <span className="chip purple" style={{padding:'0 6px', fontSize:10, marginLeft:2}}>AI</span> summary available</div>
                </div>
                <div className="grow"/>
                <svg width="120" height="24" viewBox="0 0 120 24">
                  {Array.from({length:34}).map((_,i)=>{
                    const h = 4 + Math.abs(Math.sin(i*1.3))*16;
                    return <rect key={i} x={i*3.4} y={12-h/2} width="2" height={h} fill="var(--mod-notes)" rx="1"/>
                  })}
                </svg>
              </div>

              <h2 style={{fontSize:17, fontWeight:600, margin:'20px 0 8px'}}>Action items</h2>
              <div className="col gap-2">
                {[
                  {done:true, who:'K. Nair', t:'Circulate revised §3.2 draft to Committee members by EOD Mon.'},
                  {done:true, who:'S. Iyer', t:'Cross-check financial impact figure with MoF-DEA.'},
                  {done:false, who:'AS (me)', t:'Draft Committee presentation — 5 slides max, plus appendix.'},
                  {done:false, who:'AS (me)', t:'RTI response 2026/RTI/0447 — due 18 Jul.'},
                  {done:false, who:'P. Ramesh', t:'Confirm date/time for follow-up on federation blueprint.'},
                ].map((a, i) => (
                  <div key={i} className="row gap-3" style={{padding:'6px 0'}}>
                    <div style={{
                      width:18, height:18, borderRadius:4,
                      border:'1.5px solid ' + (a.done ? 'var(--ok)' : 'var(--ink-300)'),
                      background: a.done ? 'var(--ok)' : 'transparent',
                      color:'white', display:'grid', placeItems:'center',
                      flexShrink:0,
                    }}>
                      {a.done && <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M4 12l5 5L20 6"/></svg>}
                    </div>
                    <div style={{
                      textDecoration: a.done ? 'line-through' : 'none',
                      color: a.done ? 'var(--ink-500)' : 'var(--ink-800)',
                      flex: 1,
                    }}>{a.t}</div>
                    <span className="chip" style={{fontSize:11}}>{a.who}</span>
                  </div>
                ))}
              </div>

              <h2 style={{fontSize:17, fontWeight:600, margin:'20px 0 8px'}}>Key discussion points</h2>
              <ol style={{margin:0, paddingLeft:22}}>
                <li><b>Federation vs consolidation.</b> Consensus that "federation" language is correct; states retain sovereign control of citizen datasets while opting into shared consent fabric.</li>
                <li><b>Compute allocation.</b> C-DAC's proposal for Bhubaneswar DC needs an additional ₹ 1,120 crore — to be raised as a supplementary demand.</li>
                <li><b>DPDP §17 alignment.</b> Consent Manager Rules (draft) reviewed. Publication targeted for 12 Jul (see Gazette 2026/EL/1129).</li>
              </ol>

              <h2 style={{fontSize:17, fontWeight:600, margin:'20px 0 8px'}}>Sketch — federation topology</h2>
              <div style={{
                border:'1px dashed var(--ink-300)',
                borderRadius: 8,
                padding: 20,
                textAlign:'center',
                color:'var(--ink-500)',
                fontSize:12.5,
                background:'var(--ink-50)',
              }}>
                <svg viewBox="0 0 400 130" width="100%" style={{maxWidth:400, maxHeight:130}}>
                  <circle cx="200" cy="65" r="26" fill="var(--mod-notes-tint)" stroke="var(--mod-notes)" strokeWidth="1.5"/>
                  <text x="200" y="70" textAnchor="middle" fontSize="11" fill="var(--mod-notes)" fontFamily="var(--f-sans)">Fabric</text>
                  {[[60,30],[60,100],[340,30],[340,100]].map(([x,y],i)=>(
                    <React.Fragment key={i}>
                      <line x1={200} y1={65} x2={x} y2={y} stroke="var(--ink-300)" strokeWidth="1" strokeDasharray="3 3"/>
                      <circle cx={x} cy={y} r="18" fill="var(--white)" stroke="var(--ink-400)" strokeWidth="1"/>
                      <text x={x} y={y+3} textAnchor="middle" fontSize="9" fill="var(--ink-700)">State {i+1}</text>
                    </React.Fragment>
                  ))}
                </svg>
                <div style={{marginTop:6, fontStyle:'italic'}}>Hand-drawn · converted to shapes by AI</div>
              </div>

              <h2 style={{fontSize:17, fontWeight:600, margin:'20px 0 8px'}}>Related</h2>
              <div className="col gap-2">
                {[
                  {t:'Cabinet Note — DPI Roadmap', kind:'Word', c:'var(--mod-word)'},
                  {t:'FY 2026-27 Budget Estimates',  kind:'Sheet', c:'var(--mod-sheets)'},
                  {t:'Gazette 2026/EL/1129',        kind:'PDF', c:'var(--mod-pdf)'},
                ].map(r => (
                  <div key={r.t} className="row gap-3" style={{padding:'6px 10px', border:'1px solid var(--ink-200)', borderRadius:6, background:'var(--ink-50)'}}>
                    <div style={{width:6, height:20, background:r.c, borderRadius:2}}/>
                    <span style={{fontSize:13}}>{r.t}</span>
                    <div className="grow"/>
                    <span className="chip" style={{fontSize:11}}>{r.kind}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.ModuleNotes = ModuleNotes;