// Home / Workspace Dashboard
function ModuleHome({ onNavigate }) {
  const D = KS_DATA;

  const modBadge = (mod) => {
    const map = {
      word:   { l:'W', c:'var(--mod-word)',   t:'var(--mod-word-tint)'   },
      sheet:  { l:'S', c:'var(--mod-sheets)', t:'var(--mod-sheets-tint)' },
      sheets: { l:'S', c:'var(--mod-sheets)', t:'var(--mod-sheets-tint)' },
      slides: { l:'P', c:'var(--mod-slides)', t:'var(--mod-slides-tint)' },
      pdf:    { l:'F', c:'var(--mod-pdf)',    t:'var(--mod-pdf-tint)'    },
      notes:  { l:'N', c:'var(--mod-notes)',  t:'var(--mod-notes-tint)'  },
      board:  { l:'B', c:'var(--mod-board)',  t:'var(--mod-board-tint)'  },
      db:     { l:'D', c:'var(--mod-db)',     t:'var(--mod-db-tint)'     },
    };
    return map[mod];
  };

  const quickCreate = [
    { id: 'word',   label: 'Document',   kbd:'⌘⇧D', c: 'var(--mod-word)',   t:'var(--mod-word-tint)',   letter:'W' },
    { id: 'sheets', label: 'Spreadsheet',kbd:'⌘⇧S', c: 'var(--mod-sheets)', t:'var(--mod-sheets-tint)', letter:'S' },
    { id: 'slides', label: 'Presentation',kbd:'⌘⇧P',c: 'var(--mod-slides)', t:'var(--mod-slides-tint)', letter:'P' },
    { id: 'pdf',    label: 'PDF',        kbd:'⌘⇧F', c: 'var(--mod-pdf)',    t:'var(--mod-pdf-tint)',    letter:'F' },
    { id: 'notes',  label: 'Note',       kbd:'⌘⇧N', c: 'var(--mod-notes)',  t:'var(--mod-notes-tint)',  letter:'N' },
    { id: 'board',  label: 'Whiteboard', kbd:'⌘⇧B', c: 'var(--mod-board)',  t:'var(--mod-board-tint)',  letter:'B' },
    { id: 'db',     label: 'Database',   kbd:'⌘⇧R', c: 'var(--mod-db)',     t:'var(--mod-db-tint)',     letter:'D' },
  ];

  const kindLabel = (k) => ({word:'Word',sheet:'Spreadsheet',slides:'Presentation',pdf:'PDF',notes:'Notes',board:'Whiteboard',db:'Database'}[k] || k);

  return (
    <div className="ks-module" data-screen-label="home">
      <div style={{overflow:'auto', flex:1}}>
        <div style={{
          maxWidth: 1320,
          margin: '0 auto',
          padding: '28px 32px 40px',
        }}>
          {/* Greeting */}
          <div className="row" style={{alignItems:'flex-end', marginBottom: 22, justifyContent:'space-between'}}>
            <div>
              <div className="muted text-sm" style={{marginBottom: 4, letterSpacing:'0.02em'}}>
                Monday, 13 July 2026 · New Delhi
              </div>
              <h1 style={{
                margin:0, fontSize: 30, fontWeight: 600, letterSpacing:'-0.02em',
                color: 'var(--ink-900)'
              }}>
                नमस्ते, {D.user.name.split(' ')[0]}.
              </h1>
              <div className="muted" style={{marginTop:4, fontSize:14}}>
                You have <span style={{color:'var(--ink-800)', fontWeight:600}}>3 documents</span> awaiting your review and
                <span style={{color:'var(--ink-800)', fontWeight:600}}> 1 approval</span> pending sign-off.
              </div>
            </div>
            <div className="row gap-2">
              <button className="btn"><span style={{color:'var(--ink-500)'}}>{IC.filter}</span> All workspaces</button>
              <button className="btn primary">{IC.plus} New</button>
            </div>
          </div>

          {/* Quick-create tiles */}
          <div style={{
            display:'grid',
            gridTemplateColumns:'repeat(7, 1fr)',
            gap: 10,
            marginBottom: 28,
          }}>
            {quickCreate.map(q => (
              <button key={q.id}
                onClick={() => onNavigate(q.id)}
                style={{
                  padding: '14px 12px',
                  background: 'var(--white)',
                  border: '1px solid var(--ink-150)',
                  borderRadius: 'var(--r-lg)',
                  display:'flex', flexDirection:'column', alignItems:'flex-start', gap:10,
                  cursor:'pointer', textAlign:'left',
                  transition:'all 0.15s',
                }}
                onMouseEnter={e => { e.currentTarget.style.borderColor='var(--ink-300)'; e.currentTarget.style.boxShadow='var(--sh-2)'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor='var(--ink-150)'; e.currentTarget.style.boxShadow='none'; }}
              >
                <div style={{
                  width:34, height:34, borderRadius:8,
                  background: q.c, color:'white',
                  display:'grid', placeItems:'center',
                  fontWeight:700, fontSize:14, letterSpacing:'-0.5px',
                }}>{q.letter}</div>
                <div className="col" style={{gap:2}}>
                  <div style={{fontWeight:550, fontSize:13, color:'var(--ink-800)'}}>{q.label}</div>
                  <div className="mono" style={{fontSize:10.5, color:'var(--ink-500)'}}>{q.kbd}</div>
                </div>
              </button>
            ))}
          </div>

          {/* Two-column: recents + right sidebar */}
          <div style={{display:'grid', gridTemplateColumns:'1fr 340px', gap: 24}}>

            {/* Recents */}
            <section>
              <div className="row" style={{justifyContent:'space-between', marginBottom:12}}>
                <div style={{fontSize:15, fontWeight:600, color:'var(--ink-900)'}}>Recent</div>
                <div className="row gap-2">
                  <div className="row gap-2" style={{border:'1px solid var(--ink-200)', borderRadius:7, padding:2, background:'var(--white)'}}>
                    <button className="btn ghost" style={{height:24, padding:'0 8px', background:'var(--ink-100)'}}>Recent</button>
                    <button className="btn ghost" style={{height:24, padding:'0 8px'}}>Shared</button>
                    <button className="btn ghost" style={{height:24, padding:'0 8px'}}>Owned</button>
                    <button className="btn ghost" style={{height:24, padding:'0 8px'}}>Starred</button>
                  </div>
                  <button className="btn ghost" style={{height:28}}>{IC.filter}</button>
                </div>
              </div>

              <div style={{
                background:'var(--white)',
                border:'1px solid var(--ink-150)',
                borderRadius: 'var(--r-lg)',
                overflow:'hidden',
              }}>
                <table className="ks-table" style={{fontSize:13}}>
                  <thead>
                    <tr>
                      <th style={{width:'50%'}}>Name</th>
                      <th>Owner</th>
                      <th>Shared with</th>
                      <th>Opened</th>
                      <th style={{width:40}}></th>
                    </tr>
                  </thead>
                  <tbody>
                    {D.recentDocs.map(doc => {
                      const b = modBadge(doc.kind);
                      return (
                        <tr key={doc.id} style={{cursor:'pointer'}} onClick={() => onNavigate(doc.mod)}>
                          <td>
                            <div className="row gap-3">
                              <div style={{
                                width:28, height:28, borderRadius:6,
                                background: b.t, color: b.c,
                                display:'grid', placeItems:'center',
                                fontWeight:700, fontSize:12, letterSpacing:'-0.4px',
                                border:'1px solid ' + b.c + '22',
                              }}>{b.l}</div>
                              <div className="col" style={{gap:1}}>
                                <div style={{fontWeight:500, color:'var(--ink-900)'}}>{doc.title}</div>
                                <div className="muted text-xs">{kindLabel(doc.kind)}</div>
                              </div>
                            </div>
                          </td>
                          <td className="muted">{doc.owner}</td>
                          <td>
                            {doc.shared > 0 ? (
                              <div className="row gap-2">
                                <div className="row" style={{gap:-4}}>
                                  {Array.from({length: Math.min(3, doc.shared)}).map((_,i) => (
                                    <div key={i} style={{
                                      width:20, height:20, borderRadius:999,
                                      background:['#0B4C8C','#107C41','#6B4EA0','#B45309'][i%4],
                                      color:'white', fontSize:9, fontWeight:600,
                                      display:'grid', placeItems:'center',
                                      border:'2px solid var(--white)',
                                      marginLeft: i === 0 ? 0 : -6,
                                    }}>{'ABCD'[i]}</div>
                                  ))}
                                </div>
                                <span className="text-xs muted">+{doc.shared}</span>
                              </div>
                            ) : <span className="muted text-xs">Just you</span>}
                          </td>
                          <td className="muted text-xs">{doc.opened}</td>
                          <td>
                            <button className="ks-icon-btn">{IC.more}</button>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>

              {/* AI Briefing card */}
              <div className="card" style={{
                marginTop: 20,
                background: 'linear-gradient(135deg, #F7F3FF 0%, #FCFAFF 100%)',
                borderColor: '#E4D6FA',
              }}>
                <div className="row gap-3" style={{marginBottom:10}}>
                  <div className="ai-avatar">K</div>
                  <div className="col">
                    <div style={{fontWeight:600, fontSize:13.5}}>Karya AI · Morning briefing</div>
                    <div className="muted text-xs">Generated at 08:12 IST · Based on your workspace activity</div>
                  </div>
                  <div className="grow"/>
                  <button className="btn ghost" style={{height:26, fontSize:12}}>{IC.copy} Copy</button>
                  <button className="btn ghost" style={{height:26, fontSize:12}}>Regenerate</button>
                </div>
                <div style={{fontSize:13.5, lineHeight:1.55, color:'var(--ink-800)'}}>
                  Three items need your attention. The <b>Cabinet Note on Digital Public Infrastructure</b> has
                  four unresolved comments from Shri Iyer — mostly around Section 3.2 (identity layer). The
                  <b> FY 2026-27 Budget Estimates </b> are now consolidated; utilisation is at 63.4% overall, with
                  <b> Digital India Programme </b> tracking below plan (61.7%). Suresh has approved the file — you
                  can forward it to the Standing Committee. Finally, an <b> RTI response </b> was assigned to you
                  by K. Nair — response is due <b>18 July</b>.
                </div>
                <div className="row gap-2" style={{marginTop:12}}>
                  <button className="chip purple" style={{cursor:'pointer'}}>{IC.sparkles} Draft the RTI response</button>
                  <button className="chip purple" style={{cursor:'pointer'}}>{IC.sparkles} Prepare Committee note</button>
                  <button className="chip purple" style={{cursor:'pointer'}}>{IC.sparkles} Resolve comments</button>
                </div>
              </div>
            </section>

            {/* Right sidebar */}
            <aside className="col gap-4">
              {/* Activity */}
              <div className="card">
                <div className="row" style={{justifyContent:'space-between', marginBottom:10}}>
                  <div style={{fontSize:13, fontWeight:600, color:'var(--ink-900)'}}>Activity</div>
                  <button className="btn ghost text-xs" style={{height:22, padding:'0 6px'}}>View all</button>
                </div>
                <div className="col gap-3">
                  {D.activity.slice(0,6).map((a, i) => {
                    const dotColor = {comment:'#0B4C8C', approve:'#0F7A3E', ai:'#7C3AED', share:'#B45309', system:'#64748B', access:'#A4262C'}[a.kind];
                    return (
                      <div key={i} className="row gap-3" style={{alignItems:'flex-start'}}>
                        <div style={{
                          width:26, height:26, borderRadius:999,
                          background: 'color-mix(in oklab, ' + dotColor + ' 15%, white)',
                          color: dotColor,
                          display:'grid', placeItems:'center',
                          fontSize:10, fontWeight:700,
                          flexShrink: 0,
                        }}>{a.who.split(' ').map(s=>s[0]).join('').slice(0,2)}</div>
                        <div className="col" style={{gap:0, lineHeight:1.4}}>
                          <div style={{fontSize:12.5}}>
                            <span style={{fontWeight:600}}>{a.who}</span>{' '}
                            <span className="muted">{a.action}</span>{' '}
                            <span style={{color:'var(--ink-800)'}}>{a.target}</span>
                          </div>
                          <div className="muted text-xs" style={{marginTop:2}}>{a.when}</div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>

              {/* Shared drives */}
              <div className="card">
                <div className="row" style={{justifyContent:'space-between', marginBottom:10}}>
                  <div style={{fontSize:13, fontWeight:600, color:'var(--ink-900)'}}>Shared drives</div>
                  <button className="ks-icon-btn" style={{height:24}}>{IC.plus}</button>
                </div>
                <div className="col gap-2">
                  {D.shared.map(s => (
                    <div key={s.name} className="row gap-3" style={{padding:'6px 0'}}>
                      <div style={{
                        width:28, height:28, borderRadius:6,
                        background:'var(--ks-primary-tint)', color:'var(--ks-primary)',
                        display:'grid', placeItems:'center', flexShrink:0,
                      }}>{IC.folder}</div>
                      <div className="col grow" style={{gap:1, minWidth:0}}>
                        <div style={{fontSize:12.5, fontWeight:500, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{s.name}</div>
                        <div className="muted text-xs">{s.role} · {s.docs} files</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* Storage */}
              <div className="card">
                <div className="row" style={{justifyContent:'space-between', marginBottom:10}}>
                  <div style={{fontSize:13, fontWeight:600, color:'var(--ink-900)'}}>Storage</div>
                  <span className="chip">Enterprise · 500 TB</span>
                </div>
                <div style={{
                  height:8, background:'var(--ink-100)', borderRadius:999, overflow:'hidden',
                  marginBottom:8,
                }}>
                  <div style={{
                    width:'68.5%', height:'100%',
                    background:'linear-gradient(90deg, var(--ks-primary), #1064b6)',
                  }}/>
                </div>
                <div className="row" style={{justifyContent:'space-between', fontSize:12}}>
                  <span className="muted">342.7 TB used</span>
                  <span style={{fontWeight:550}}>68.5%</span>
                </div>
                <div className="divider" style={{margin:'12px 0'}}/>
                <div className="row gap-3" style={{fontSize:12}}>
                  <div className="row gap-2"><div style={{width:8, height:8, borderRadius:2, background:'var(--mod-word)'}}/> Docs 41%</div>
                  <div className="row gap-2"><div style={{width:8, height:8, borderRadius:2, background:'var(--mod-sheets)'}}/> Sheets 22%</div>
                  <div className="row gap-2"><div style={{width:8, height:8, borderRadius:2, background:'var(--mod-pdf)'}}/> PDF 28%</div>
                  <div className="row gap-2"><div style={{width:8, height:8, borderRadius:2, background:'var(--ink-400)'}}/> Other 9%</div>
                </div>
              </div>

              {/* Compliance */}
              <div className="card" style={{background:'var(--ink-50)'}}>
                <div className="row gap-3">
                  <div style={{color:'var(--ok)'}}>{IC.shieldCheck}</div>
                  <div className="col" style={{gap:2}}>
                    <div style={{fontSize:12.5, fontWeight:600}}>DPDP · ISO 27001 · SOC 2</div>
                    <div className="muted text-xs">All data resides in Mumbai · Hyderabad regions. Encrypted at rest (AES-256) and in transit (TLS 1.3).</div>
                  </div>
                </div>
              </div>
            </aside>
          </div>
        </div>
      </div>
    </div>
  );
}

window.ModuleHome = ModuleHome;