/* Role-specific dashboard views: Manager + Associate.
   Partner view stays in dashboard-app.jsx. */

const { useState: useStateR } = React;

/* ============================================================
   MANAGER VIEW — M. Patel
   Focused on: their book of engagements, review backlog,
   team capacity, client communication SLAs.
============================================================ */
function ManagerDashboard({ user }) {
  const projects = window.PROJECTS;
  const data = window.MANAGER_DATA;
  const assocData = window.ASSOCIATE_DATA;
  const myProjects = projects.filter(p => p.manager === "M. Patel");

  const [selectedId, setSelectedId] = useStateR(myProjects[0].id);
  const selected = myProjects.find(p => p.id === selectedId) || myProjects[0];

  const [tasks, setTasks] = useStateR(assocData ? assocData.tasks : []);
  const toggleTask = (id) => setTasks(ts => ts.map(t => t.id === id ? {...t, done: !t.done} : t));

  return (
    <div className="dash-body">
      {/* Top banner — manager's morning briefing */}
      <div className="today-hero">
        <div>
          <div className="greet">Good morning, Morgan.</div>
          <div className="meta">
            {data.kpis.reviewBacklog} work papers awaiting your sign-off ·
            <span style={{color:'#E07A4E'}}> {data.kpis.staleNotes} stale review note</span> on Meridian
          </div>
        </div>
        <div className="stack">
          <div>
            <div className="v">{myProjects.length}</div>
            <div className="l">Engagements</div>
          </div>
          <div>
            <div className="v">{data.kpis.reviewBacklog}</div>
            <div className="l">In Queue</div>
          </div>
          <div>
            <div className="v">{data.kpis.teamUtil}<span style={{fontSize:18, opacity:0.6}}>%</span></div>
            <div className="l">Team Util</div>
          </div>
          <div>
            <div className="v">{data.kpis.weekHours.toFixed(1)}h</div>
            <div className="l">Logged Wk</div>
          </div>
        </div>
      </div>

      {/* My engagements as progress table */}
      <div className="section-head">
        <div>
          <h3>My engagements</h3>
          <div className="sh-sub">Engagements where you are the audit manager · {myProjects.length} active</div>
        </div>
        <div className="filters">
          <button className="filter-chip on">Active</button>
          <button className="filter-chip">At risk</button>
          <button className="filter-chip">Closed</button>
        </div>
      </div>
      <ProjectProgressTable projects={myProjects} selectedId={selectedId} onSelect={setSelectedId} scroll />

      {/* Selected engagement detail */}
      <div className="section-head" style={{marginTop: 8}}>
        <div>
          <h3>{selected.client}</h3>
          <div className="sh-sub">{selected.type} · FYE {selected.fye} · You are the engagement manager</div>
        </div>
      </div>
      <ProjectDetail project={selected} />

      {/* What's on your plate + Agenda */}
      {assocData && (
        <div style={{display:'grid', gridTemplateColumns:'minmax(0, 1.6fr) minmax(0, 1fr)', gap: 20}}>
          <div className="card">
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
              <div>
                <div className="k">Today · Wednesday</div>
                <h4>What's on your plate</h4>
              </div>
              <div style={{fontSize: 11, color: 'var(--mute)'}}>{tasks.filter(t => t.done).length} of {tasks.length} done</div>
            </div>
            <div>
              {tasks.map(t => (
                <div key={t.id} className="task-row">
                  <button
                    className={`task-check ${t.done ? 'done' : ''}`}
                    onClick={() => toggleTask(t.id)}
                    aria-label="Toggle complete"
                  />
                  <div className="task-meta">
                    <div className={`task-title ${t.done ? 'done' : ''}`}>{t.title}</div>
                    <div className="task-tags">
                      <span style={{fontFamily:'JetBrains Mono, monospace'}}>{t.ref}</span>
                      <span className="sep">·</span>
                      <span>{t.project}</span>
                      <span className="sep">·</span>
                      <span>{t.due}</span>
                    </div>
                  </div>
                  <div className={`task-prio ${t.prio}`}>{t.prio}</div>
                  <div className="task-time">{t.est.toFixed(1)}h</div>
                </div>
              ))}
            </div>
            <div style={{display:'flex', gap: 8, marginTop: 6}}>
              <button className="filter-chip on">+ New task</button>
              <button className="filter-chip">Open binder</button>
              <button className="filter-chip">Time entry</button>
            </div>
          </div>

          <div className="card">
            <div className="k">Agenda</div>
            <h4>Today's calendar</h4>
            <div>
              {assocData.upcoming.map((m, i) => (
                <div key={i} style={{padding:'10px 0', borderBottom: i < assocData.upcoming.length-1 ? '1px solid var(--line-2)' : '0', display:'grid', gridTemplateColumns:'auto 1fr auto', gap: 12, alignItems:'center'}}>
                  <div style={{fontFamily:'JetBrains Mono, monospace', fontSize: 12, color:'var(--ink-2)', minWidth: 44}}>{m.time}</div>
                  <div>
                    <div style={{fontSize: 13, color:'var(--ink)', lineHeight: 1.2}}>{m.title}</div>
                    <div style={{fontSize: 11, color:'var(--mute)', marginTop: 3}}>{m.where}</div>
                  </div>
                  <div style={{fontFamily:'JetBrains Mono, monospace', fontSize: 10.5, color:'var(--mute)'}}>{m.duration}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}


/* ============================================================
   ASSOCIATE VIEW — R. Tran
   Focused on: today's tasks, review notes pointed at me,
   time tracking, learning, my engagements.
============================================================ */
function AssociateDashboard({ user }) {
  const data = window.ASSOCIATE_DATA;
  const projects = window.PROJECTS;

  const [tasks, setTasks] = useStateR(data.tasks);
  const toggleTask = (id) => setTasks(ts => ts.map(t => t.id === id ? {...t, done: !t.done} : t));

  const openTasks = tasks.filter(t => !t.done);
  const todayTasks = openTasks.filter(t => t.due === "Today");
  const todayHours = todayTasks.reduce((s, t) => s + t.est, 0);

  // Engagements R. Tran is on
  const myEngagements = projects.filter(p => p.team.some(t => t.initials === "RT"));
  const [selectedId, setSelectedId] = useStateR(myEngagements[0]?.id);
  const selected = myEngagements.find(p => p.id === selectedId) || myEngagements[0];

  return (
    <div className="dash-body">
      {/* Today hero */}
      <div className="today-hero">
        <div>
          <div className="greet">Wednesday, May 6.</div>
          <div className="meta">
            {todayTasks.length} tasks for today · est. {todayHours.toFixed(1)}h ·
            <span style={{color:'#E07A4E'}}> {data.myNotes.filter(n => n.status === 'open').length} open review notes</span>
          </div>
        </div>
        <div className="stack">
          <div>
            <div className="v">{data.kpis.weekHours.toFixed(1)}<span style={{fontSize:18, opacity:0.6}}>h</span></div>
            <div className="l">Wk Logged</div>
          </div>
          <div>
            <div className="v">{data.kpis.chargeable}<span style={{fontSize:18, opacity:0.6}}>%</span></div>
            <div className="l">Billable</div>
          </div>
          <div>
            <div className="v">{openTasks.length}</div>
            <div className="l">Open Tasks</div>
          </div>
        </div>
      </div>

      {/* My engagements */}
      <div className="section-head">
        <div>
          <h3>My engagements</h3>
          <div className="sh-sub">{myEngagements.length} active · You are on the engagement team</div>
        </div>
      </div>
      <ProjectProgressTable projects={myEngagements} selectedId={selectedId} onSelect={setSelectedId} scroll />

      {/* Selected engagement detail — same cards as Manager dashboard.
          Review Notes is injected into the left column so it sits on the
          same row as Engagement Team and matches Insights width. */}
      {selected && (
        <>
          <div className="section-head" style={{marginTop: 8}}>
            <div>
              <h3>{selected.client}</h3>
              <div className="sh-sub">{selected.type} · FYE {selected.fye} · You are on the engagement team</div>
            </div>
            <div className="filters">
              <button className="filter-chip">Binder</button>
              <button className="filter-chip">Suralink</button>
              <button className="filter-chip">Practice CS</button>
            </div>
          </div>
          <ProjectDetail
            project={selected}
            extraLeft={(
              <div className="card">
                <div className="k">Review notes</div>
                <h4>{data.myNotes.filter(n => n.status === 'open').length} open</h4>
                <div>
                  {data.myNotes.map(n => (
                    <div key={n.id} className="note-row">
                      <div className="av">{n.from}</div>
                      <div className="note-body" style={{opacity: n.status === 'cleared' ? 0.55 : 1}}>
                        {n.title}
                        <div className="note-meta">
                          <span className="ref">{n.ref}</span> · From {n.fromName}
                          {n.status === 'cleared' && <span style={{color:'#4E8A4E', marginLeft:6}}>· cleared</span>}
                        </div>
                      </div>
                      <div className="note-age">{n.age}</div>
                    </div>
                  ))}
                </div>
              </div>
            )}
          />
        </>
      )}

      {/* What's on your plate + Agenda — moved to bottom */}
      <div style={{display:'grid', gridTemplateColumns:'minmax(0, 1.6fr) minmax(0, 1fr)', gap: 20}}>
        <div className="card">
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
            <div>
              <div className="k">Today · Wednesday</div>
              <h4>What's on your plate</h4>
            </div>
            <div style={{fontSize: 11, color: 'var(--mute)'}}>{tasks.filter(t => t.done).length} of {tasks.length} done</div>
          </div>
          <div>
            {tasks.map(t => (
              <div key={t.id} className="task-row">
                <button
                  className={`task-check ${t.done ? 'done' : ''}`}
                  onClick={() => toggleTask(t.id)}
                  aria-label="Toggle complete"
                />
                <div className="task-meta">
                  <div className={`task-title ${t.done ? 'done' : ''}`}>{t.title}</div>
                  <div className="task-tags">
                    <span style={{fontFamily:'JetBrains Mono, monospace'}}>{t.ref}</span>
                    <span className="sep">·</span>
                    <span>{t.project}</span>
                    <span className="sep">·</span>
                    <span>{t.due}</span>
                  </div>
                </div>
                <div className={`task-prio ${t.prio}`}>{t.prio}</div>
                <div className="task-time">{t.est.toFixed(1)}h</div>
              </div>
            ))}
          </div>
          <div style={{display:'flex', gap: 8, marginTop: 6}}>
            <button className="filter-chip on">+ New task</button>
            <button className="filter-chip">Open binder</button>
            <button className="filter-chip">Time entry</button>
          </div>
        </div>

        <div className="card">
          <div className="k">Agenda</div>
          <h4>Today's calendar</h4>
          <div>
            {data.upcoming.map((m, i) => (
              <div key={i} style={{padding:'10px 0', borderBottom: i < data.upcoming.length-1 ? '1px solid var(--line-2)' : '0', display:'grid', gridTemplateColumns:'auto 1fr auto', gap: 12, alignItems:'center'}}>
                <div style={{fontFamily:'JetBrains Mono, monospace', fontSize: 12, color:'var(--ink-2)', minWidth: 44}}>{m.time}</div>
                <div>
                  <div style={{fontSize: 13, color:'var(--ink)', lineHeight: 1.2}}>{m.title}</div>
                  <div style={{fontSize: 11, color:'var(--mute)', marginTop: 3}}>{m.where}</div>
                </div>
                <div style={{fontFamily:'JetBrains Mono, monospace', fontSize: 10.5, color:'var(--mute)'}}>{m.duration}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ManagerDashboard, AssociateDashboard });