// Whiteboard — infinite canvas w/ flowchart of an approval workflow
function ModuleBoard() {
  const N = KS_DATA.whiteboard;

  const tints = {
    blue:   { bg:'#EAF2FC', border:'#5A8CC7', text:'#0B4C8C' },
    green:  { bg:'#E4F3EB', border:'#3E8963', text:'#0F7A3E' },
    amber:  { bg:'#FBF1E1', border:'#C0862F', text:'#B45309' },
    red:    { bg:'#FBEAEA', border:'#B75252', text:'#B91C1C' },
    yellow: { bg:'#FFF6C9', border:'#D9B84A', text:'#78591A' },
  };

  return (
    <div className="ks-module"
         style={{'--mod-current':'var(--mod-board)', '--mod-current-tint':'var(--mod-board-tint)'}}
         data-screen-label="board">
      <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-board)', color:'white', display:'grid', placeItems:'center', fontWeight:700, fontSize:12}}>B</div>
        <div className="col" style={{lineHeight:1.2}}>
          <div style={{fontWeight:600, fontSize:13.5}}>Inter-Ministerial Approval Workflow</div>
          <div className="muted text-xs">5 people editing · Infinite canvas · Auto-saved</div>
        </div>
        <div className="grow"/>
        {/* Live presence */}
        <div className="row gap-2">
          {[{n:'S. Iyer', c:'#B45309'},{n:'P. Ramesh', c:'#0B4C8C'},{n:'K. Nair', c:'#0F7A3E'},{n:'R. Bhattacharya', c:'#6B4EA0'}].map((p,i)=>(
            <div key={p.n} style={{
              width:26, height:26, borderRadius:999,
              background: p.c, color:'white', fontSize:10, fontWeight:600,
              display:'grid', placeItems:'center',
              border:'2px solid var(--white)',
              marginLeft: i === 0 ? 0 : -8,
              boxShadow: '0 0 0 1.5px ' + p.c,
              position:'relative',
            }} title={p.n}>{p.n.split(' ').map(s=>s[0]).join('').slice(0,2)}
              <span style={{position:'absolute', bottom:-1, right:-1, width:8, height:8, background:'var(--ok)', borderRadius:'50%', border:'1.5px solid white'}}/>
            </div>
          ))}
        </div>
        <button className="btn">{IC.download} Export</button>
        <button className="btn primary">{IC.share} Share</button>
      </div>

      {/* Tool rail (floating on canvas) */}
      <div style={{flex:1, position:'relative', overflow:'hidden'}}>
        <div style={{
          position:'absolute', top:20, left:'50%', transform:'translateX(-50%)',
          background:'var(--white)',
          border:'1px solid var(--ink-200)',
          borderRadius: 10, boxShadow:'var(--sh-2)',
          padding: 5,
          display:'flex', gap:2,
          zIndex: 10,
        }}>
          {[
            {i: 'penTool', k:'draw', l:'Pen'},
            {i: 'sticky', k:'sticky', l:'Sticky'},
            {i: 'frame', k:'shape', l:'Shape'},
            {i: 'link', k:'link', l:'Connector'},
            {i: 'fileText', k:'text', l:'Text'},
            {i: 'image', k:'image', l:'Image'},
            {i: 'eraser', k:'erase', l:'Erase'},
          ].map((t, i) => (
            <button key={t.k} className={"rb-btn " + (i === 1 ? 'active' : '')}
                    style={{height:30, minWidth:30, padding:'0 8px'}}>
              {IC[t.i]}
            </button>
          ))}
          <div style={{width:1, background:'var(--ink-150)', margin:'0 4px'}}/>
          <button className="rb-btn" style={{height:30}}>Templates</button>
          <button className="btn ai" style={{height:30, padding:'0 10px'}}>{IC.sparkles} AI Convert</button>
        </div>

        {/* Zoom controls */}
        <div style={{
          position:'absolute', bottom:20, right:20,
          background:'var(--white)',
          border:'1px solid var(--ink-200)',
          borderRadius: 8, boxShadow:'var(--sh-1)',
          display:'flex', alignItems:'center', gap:0,
          zIndex: 10,
        }}>
          <button className="ks-icon-btn">−</button>
          <div style={{fontSize:12, padding:'0 10px', minWidth:44, textAlign:'center'}}>75%</div>
          <button className="ks-icon-btn">+</button>
          <div style={{width:1, background:'var(--ink-150)', height:20}}/>
          <button className="ks-icon-btn" style={{fontSize:11}}>Fit</button>
        </div>

        {/* Legend */}
        <div style={{
          position:'absolute', top:20, right:20,
          background:'var(--white)',
          border:'1px solid var(--ink-200)',
          borderRadius: 8, boxShadow:'var(--sh-1)',
          padding: 10,
          zIndex: 10,
          minWidth: 160,
        }}>
          <div style={{fontSize:11, fontWeight:600, color:'var(--ink-600)', textTransform:'uppercase', letterSpacing:'0.06em', marginBottom:6}}>Legend</div>
          <div className="col gap-2">
            <div className="row gap-2 text-xs"><div style={{width:20, height:14, background:'#EAF2FC', border:'1.5px solid #5A8CC7', borderRadius:3}}/> Process</div>
            <div className="row gap-2 text-xs"><div style={{width:14, height:14, background:'#FBF1E1', border:'1.5px solid #C0862F', transform:'rotate(45deg)'}}/> Decision</div>
            <div className="row gap-2 text-xs"><div style={{width:20, height:14, background:'#E4F3EB', border:'1.5px solid #3E8963', borderRadius:14}}/> Approval</div>
            <div className="row gap-2 text-xs"><div style={{width:20, height:14, background:'#FFF6C9', border:'1.5px solid #D9B84A'}}/> Sticky note</div>
          </div>
        </div>

        {/* Canvas */}
        <div style={{
          position:'absolute', inset:0,
          background: 'var(--canvas)',
          backgroundImage: 'radial-gradient(circle, var(--ink-200) 1px, transparent 1px)',
          backgroundSize: '24px 24px',
          overflow:'auto',
        }}>
          <div style={{position:'relative', width: 1600, height: 640, transform:'scale(0.85)', transformOrigin:'top left'}}>
            {/* Title */}
            <div style={{
              position:'absolute', left: 60, top: 30,
              fontSize:18, fontWeight:700, color:'var(--ink-800)',
            }}>Draft File Approval — Standard Flow</div>
            <div style={{
              position:'absolute', left: 60, top: 55,
              fontSize:12, color:'var(--ink-500)',
            }}>Under Secretary → Deputy Secretary → Secretary path · SLA-bound</div>

            {/* Connectors — draw arrows first so they sit behind nodes */}
            <svg style={{position:'absolute', inset:0, pointerEvents:'none'}} width="1600" height="640">
              <defs>
                <marker id="ar" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
                  <path d="M0 0 L10 5 L0 10 z" fill="#94A3B8"/>
                </marker>
              </defs>
              {[
                [240,150, 300,150],
                [480,150, 540,140],
                [710,120, 780,90],   // Approved -> Sign-off
                [710,160, 780,220],  // Approved -> Return
                [960,90, 1020,90],
                [1200,90, 1260,90],
                [860,255, 400,180],  // Return -> back to US review
              ].map(([x1,y1,x2,y2], i) => {
                const isCurve = i === 6;
                if (isCurve) {
                  return <path key={i} d={`M${x1},${y1} C ${x1-100},${y1+60} ${x2+120},${y2+120} ${x2},${y2}`}
                              fill="none" stroke="#B75252" strokeWidth="1.5" strokeDasharray="5 4" markerEnd="url(#ar)"/>;
                }
                return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#94A3B8" strokeWidth="1.5" markerEnd="url(#ar)"/>;
              })}

              {/* Approved label */}
              <text x="740" y="70" fontSize="10.5" fill="#0F7A3E" fontWeight="600">yes</text>
              <text x="740" y="205" fontSize="10.5" fill="#B91C1C" fontWeight="600">no</text>
            </svg>

            {/* Nodes */}
            {N.map(n => {
              const t = tints[n.tint];
              if (n.kind === 'decision') {
                return (
                  <div key={n.id} style={{
                    position:'absolute', left:n.x, top:n.y,
                    width:n.w, height: 80,
                    display:'flex', alignItems:'center', justifyContent:'center',
                  }}>
                    <div style={{
                      width: n.w * 0.85, height: 70,
                      background: t.bg, border:'1.5px solid ' + t.border,
                      transform:'rotate(45deg)',
                      position:'absolute',
                    }}/>
                    <div style={{
                      position:'relative', zIndex:2,
                      color: t.text, fontSize:12.5, fontWeight:600,
                      textAlign:'center', padding:'0 30px',
                    }}>{n.label}</div>
                  </div>
                );
              }
              if (n.kind === 'sticky') {
                return (
                  <div key={n.id} style={{
                    position:'absolute', left:n.x, top:n.y, width:n.w,
                    background: t.bg, border:'1px solid ' + t.border,
                    padding:'10px 12px', fontSize:12,
                    color: t.text, fontWeight:500,
                    boxShadow: '2px 3px 8px rgba(0,0,0,0.08)',
                    transform: n.id === 's2' ? 'rotate(-1.5deg)' : (n.id === 's3' ? 'rotate(1deg)' : 'none'),
                    fontFamily: 'var(--f-serif)',
                    lineHeight: 1.35,
                  }}>{n.label}</div>
                );
              }
              return (
                <div key={n.id} style={{
                  position:'absolute', left:n.x, top:n.y, width:n.w,
                  background: t.bg,
                  border:'1.5px solid ' + t.border,
                  borderRadius: n.kind === 'end' ? 999 : 6,
                  padding:'12px 14px',
                  color: t.text,
                  fontSize:12.5,
                  fontWeight:600,
                  textAlign:'center',
                  minHeight: 50,
                  display:'flex', alignItems:'center', justifyContent:'center',
                }}>{n.label}</div>
              );
            })}

            {/* Live cursors */}
            <div style={{position:'absolute', left: 620, top: 260, pointerEvents:'none'}}>
              <svg width="16" height="18" viewBox="0 0 16 18"><path d="M0 0 L0 14 L4 11 L7 17 L9 16 L6 10 L11 10 Z" fill="#B45309" stroke="white" strokeWidth="1"/></svg>
              <div style={{background:'#B45309', color:'white', fontSize:10.5, padding:'2px 6px', borderRadius:4, marginTop:2, fontWeight:600}}>S. Iyer</div>
            </div>
            <div style={{position:'absolute', left: 940, top: 145, pointerEvents:'none'}}>
              <svg width="16" height="18" viewBox="0 0 16 18"><path d="M0 0 L0 14 L4 11 L7 17 L9 16 L6 10 L11 10 Z" fill="#6B4EA0" stroke="white" strokeWidth="1"/></svg>
              <div style={{background:'#6B4EA0', color:'white', fontSize:10.5, padding:'2px 6px', borderRadius:4, marginTop:2, fontWeight:600}}>R. Bhattacharya</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.ModuleBoard = ModuleBoard;