const { useState, useEffect, useMemo, useRef } = React;

function DashApp() {
  const projects = window.PROJECTS;
  const users = window.USERS;
  const [currentUserId, setCurrentUserId] = useState("jh");
  const currentUser = users.find(u => u.id === currentUserId) || users[0];

  const [selectedId, setSelectedId] = useState(projects[0].id);
  const [filter, setFilter] = useState("all");
  const [chatOpen, setChatOpen] = useState(false);

  // Reset selected project when switching role to one with a different scope
  useEffect(() => {
    if (currentUser.roleKey === 'manager') {
      const mgrProjects = projects.filter(p => p.manager === "M. Patel");
      setSelectedId(mgrProjects[0]?.id || projects[0].id);
    } else if (currentUser.roleKey === 'partner') {
      setSelectedId(projects[0].id);
    }
  }, [currentUserId]);

  const selected = projects.find(p => p.id === selectedId) || projects[0];
  const filtered = projects.filter(p => filter === "all" ? true : p.health === filter);

  // KPIs (partner)
  const totalFee = projects.reduce((s, p) => s + p.fee, 0);
  const totalBilled = projects.reduce((s, p) => s + p.billed, 0);
  const overBudget = projects.filter(p => p.actualToDate > p.budgetedToDate + 5).length;
  const avgUtil = Math.round(projects.reduce((s, p) => s + (p.actualHours / p.budgetHours) * 100, 0) / projects.length);

  // Per-role nav projects in sidebar
  const navProjects =
    currentUser.roleKey === 'partner'   ? projects :
    currentUser.roleKey === 'manager'   ? projects.filter(p => p.manager === "M. Patel") :
    /* associate */                       projects.filter(p => p.team.some(t => t.initials === currentUser.initials));

  // Topbar copy per role
  const topbarSub =
    currentUser.roleKey === 'partner'   ? "Partner view · FY 2026 · Updated just now" :
    currentUser.roleKey === 'manager'   ? "Manager view · 2 active engagements · Updated just now" :
    /* associate */                       "Associate view · Personal queue · Updated just now";

  return (
    <div className="dash-app">
      <DashSidebar
        projects={navProjects}
        selectedId={selectedId}
        setSelectedId={setSelectedId}
        currentUser={currentUser}
        users={users}
        onSwitchUser={setCurrentUserId}
      />
      <div className="dash-main">
        <div className="dash-top">
          <div>
            <h2>Engagement Dashboard</h2>
            <div className="sub">{topbarSub}</div>
          </div>
          <div className="actions">
            <input className="search" placeholder={
              currentUser.roleKey === 'associate' ? "Search tasks, work papers, notes…" :
              currentUser.roleKey === 'manager' ? "Search engagements, review notes, team…" :
              "Search clients, binders, work papers…"
            } />
            <button className="icon-btn" title="Filters">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M6 12h12M10 18h4"/></svg>
            </button>
            <button className="icon-btn" title="Export">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 3v12m0 0l-4-4m4 4l4-4M4 17v2a2 2 0 002 2h12a2 2 0 002-2v-2"/></svg>
            </button>
          </div>
        </div>

        {currentUser.roleKey === 'partner' && (
          <PartnerBody
            projects={projects}
            filtered={filtered}
            filter={filter}
            setFilter={setFilter}
            selected={selected}
            selectedId={selectedId}
            setSelectedId={setSelectedId}
            kpis={{ totalFee, totalBilled, overBudget, avgUtil }}
          />
        )}
        {currentUser.roleKey === 'manager' && <ManagerDashboard user={currentUser} />}
        {currentUser.roleKey === 'associate' && <AssociateDashboard user={currentUser} />}
      </div>

      <ChatFab onClick={() => setChatOpen(true)} open={chatOpen} />
      <div className={`chat-scrim ${chatOpen?'open':''}`} onClick={() => setChatOpen(false)} />
      <ChatPanel open={chatOpen} onClose={() => setChatOpen(false)} project={selected} />
    </div>
  );
}

function PartnerBody({ projects, filtered, filter, setFilter, selected, selectedId, setSelectedId, kpis }) {
  const { totalFee, totalBilled, overBudget, avgUtil } = kpis;
  return (
    <div className="dash-body">
      <div className="kpi-row">
        <div className="kpi"><div className="l">Total Fees</div><div className="v">${(totalFee/1000).toLocaleString('en-US', {maximumFractionDigits:0})}k</div><div className="d">{projects.length} active engagements</div></div>
        <div className="kpi"><div className="l">Billed YTD</div><div className="v">${(totalBilled/1000).toLocaleString('en-US', {maximumFractionDigits:0})}k<span className="c">· {Math.round(totalBilled/totalFee*100)}%</span></div><div className="d">${((totalFee-totalBilled)/1000).toLocaleString('en-US', {maximumFractionDigits:0})}k remaining</div></div>
        <div className="kpi"><div className="l">Budget Utilization</div><div className="v">{avgUtil}<span className="c">%</span></div><div className="d">Weighted avg. across active</div></div>
        <div className="kpi"><div className="l">Projects at Risk</div><div className="v">{overBudget}</div><div className={`d ${overBudget>0?'red':'green'}`}>{overBudget>0?'Attention required':'All on track'}</div></div>
      </div>

      <div className="section-head">
        <div>
          <h3>Active projects</h3>
          <div className="sh-sub">Click a row to open the engagement detail below.</div>
        </div>
        <div className="filters">
          {[["all","All"],["red","Red"],["yellow","Yellow"],["green","Green"]].map(([k,l]) => (
            <button key={k} className={`filter-chip ${filter===k?'on':''}`} onClick={() => setFilter(k)}>{l}</button>
          ))}
        </div>
      </div>

      <ProjectTable projects={filtered} selectedId={selectedId} onSelect={setSelectedId} scroll />

      <div className="section-head" style={{marginTop: 8}}>
        <div>
          <h3>{selected.client}</h3>
          <div className="sh-sub">{selected.type} · FYE {selected.fye} · Partner {selected.partner}</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} />
    </div>
  );
}

function DashSidebar({ projects, selectedId, setSelectedId, currentUser, users, onSwitchUser }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    if (!open) return;
    const handler = (e) => {
      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, [open]);

  const roleClass =
    currentUser.roleKey === 'manager'   ? 'role-manager' :
    currentUser.roleKey === 'associate' ? 'role-associate' : '';

  // Per-role nav menu
  const nav =
    currentUser.roleKey === 'partner'   ? [
      { label: "Dashboard", active: true, accent: true },
      { label: "Engagements", count: projects.length },
      { label: "Binders" },
      { label: "Time & Billing" },
      { label: "Team" },
    ] :
    currentUser.roleKey === 'manager'   ? [
      { label: "Dashboard", active: true, accent: true },
      { label: "Review queue", count: 5 },
      { label: "My engagements", count: projects.length },
      { label: "Team" },
      { label: "Schedule" },
    ] :
    /* associate */                       [
      { label: "Today", active: true, accent: true },
      { label: "My tasks", count: 5 },
      { label: "Review notes", count: 2 },
      { label: "Time entry" },
      { label: "Learning" },
    ];

  const projectsLabel =
    currentUser.roleKey === 'partner'   ? "Projects" :
    currentUser.roleKey === 'manager'   ? "My engagements" :
    /* associate */                       "On these jobs";

  return (
    <aside className={`dash-sidebar ${roleClass}`}>
      <div className="brand">
        <div className="mark">H</div>
        <div>
          <div className="name">Harrington</div>
        </div>
      </div>

      <div className="dash-nav">
        <div className="dash-nav-label">Workspace</div>
        {nav.map((n, i) => (
          <button key={i} className={`dash-nav-item ${n.active ? 'active' : ''}`}>
            <span className="bull" style={n.accent ? {background:'var(--accent)'} : {}}/>
            {n.label}
            {n.count != null && <span className="count">{n.count}</span>}
          </button>
        ))}

        <div className="dash-nav-label">{projectsLabel}</div>
        {projects.map(p => (
          <button key={p.id} className={`dash-nav-item ${selectedId===p.id?'active':''}`} onClick={() => setSelectedId(p.id)}>
            <span className={`bull ${p.health}`}/>
            <span style={{overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{p.client.split(' ').slice(0,2).join(' ')}</span>
            <span className="count">{p.phase.slice(0,4)}</span>
          </button>
        ))}
      </div>

      <div ref={ref} className={`dash-user ${open ? 'open' : ''}`} onClick={() => setOpen(o => !o)}>
        <div className="av">{currentUser.initials}</div>
        <div style={{minWidth: 0, flex: 1}}>
          <div className="nm">{currentUser.name}</div>
          <div className="rl">{currentUser.role}</div>
        </div>
        <svg className="chev" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M6 9l6 6 6-6"/>
        </svg>

        {open && (
          <div className="user-switch" onClick={(e) => e.stopPropagation()}>
            <div className="lbl">Switch user</div>
            {users.map(u => (
              <button
                key={u.id}
                className={`opt ${u.id === currentUser.id ? 'active' : ''}`}
                onClick={() => { onSwitchUser(u.id); setOpen(false); }}
              >
                <div className={`av role-${u.roleKey}`}>{u.initials}</div>
                <div style={{minWidth: 0, flex: 1}}>
                  <div className="nm">{u.name}</div>
                  <div className="rl">{u.role}</div>
                </div>
                <span className="check">●</span>
              </button>
            ))}
            <div style={{borderTop:'1px solid var(--line-2)', margin:'6px -6px 0', paddingTop: 4}}/>
            <button className="opt" style={{color:'var(--mute)'}}>
              <div className="av" style={{background:'var(--cream-2)', color:'var(--ink-3)'}}>⚙</div>
              <div style={{minWidth: 0, flex: 1}}>
                <div className="nm" style={{color:'var(--ink-3)'}}>Account settings</div>
                <div className="rl">Preferences, notifications</div>
              </div>
            </button>
          </div>
        )}
      </div>
    </aside>
  );
}

function ProjectTable({ projects, selectedId, onSelect, scroll }) {
  const fmtMoney = (n) => `$${n.toLocaleString('en-US')}`;
  return (
    <div className={scroll ? "proj-scroll" : ""}>
    <div className="proj-table">
      <div className="proj-head">
        <div>Client / Engagement</div>
        <div>Phase</div>
        <div>P&L · Budget vs. Actual</div>
        <div>Team</div>
        <div style={{textAlign:'right'}}>Health</div>
      </div>
      {projects.map(p => {
        const phaseKey = p.phase.toLowerCase().replace(' ','');
        return (
          <div key={p.id} className={`proj-row ${selectedId===p.id?'selected':''}`} onClick={() => onSelect(p.id)}>
            <div className="proj-name">
              <div className="c">{p.client}</div>
              <div className="t">{p.type} · FYE {p.fye}</div>
            </div>
            <div><span className={`phase-pill ${phaseKey}`}>{p.phase}</span></div>
            <div className="pnl-bar">
              <div className="pnl-nums">
                <span>Billed <b>{fmtMoney(p.billed)}</b> / {fmtMoney(p.fee)}</span>
                <span style={{color: p.health === 'red' ? '#C94A2A' : p.health === 'yellow' ? '#A07A14' : '#4E8A4E'}}>
                  {p.actualToDate > p.budgetedToDate ? '+' : ''}{p.actualToDate - p.budgetedToDate}% vs. plan
                </span>
              </div>
              <div className="pnl-track">
                <div className="pnl-expected" style={{ left: `${p.budgetedToDate}%` }}/>
                <div className={`pnl-fill ${p.health}`} style={{ width: `${p.actualToDate}%` }}/>
              </div>
              <div className="pnl-nums">
                <span>{p.actualHours}h / {p.budgetHours}h budgeted</span>
                <span>{p.phase}</span>
              </div>
            </div>
            <div className="team-chip-row">
              {p.team.slice(0, 4).map(t => (
                <div key={t.initials} className="avch" title={t.name}>{t.initials}</div>
              ))}
            </div>
            <div className={`health-dot ${p.health}`}/>
          </div>
        );
      })}
    </div>
    </div>
  );
}

function ProjectProgressTable({ projects, selectedId, onSelect, scroll }) {
  return (
    <div className={scroll ? "proj-scroll" : ""}>
    <div className="proj-table">
      <div className="proj-head">
        <div>Client / Engagement</div>
        <div>Phase</div>
        <div>Project progress</div>
        <div>Team</div>
        <div style={{textAlign:'right'}}>Health</div>
      </div>
      {projects.map(p => {
        const phaseKey = p.phase.toLowerCase().replace(' ','');
        const delta = p.actualToDate - p.budgetedToDate;
        return (
          <div key={p.id} className={`proj-row ${selectedId===p.id?'selected':''}`} onClick={() => onSelect && onSelect(p.id)}>
            <div className="proj-name">
              <div className="c">{p.client}</div>
              <div className="t">{p.type} · FYE {p.fye}</div>
            </div>
            <div><span className={`phase-pill ${phaseKey}`}>{p.phase}</span></div>
            <div className="pnl-bar">
              <div className="pnl-nums">
                <span>Binder <b>{p.binderPct}%</b> · Suralink {p.suralinkPct}%</span>
                <span style={{color: p.health === 'red' ? '#C94A2A' : p.health === 'yellow' ? '#A07A14' : '#4E8A4E'}}>
                  {delta > 0 ? '+' : ''}{delta}% vs. plan
                </span>
              </div>
              <div className="pnl-track">
                <div className="pnl-expected" style={{ left: `${p.budgetedToDate}%` }}/>
                <div className={`pnl-fill ${p.health}`} style={{ width: `${p.binderPct}%` }}/>
              </div>
              <div className="pnl-nums">
                <span>{p.actualHours}h / {p.budgetHours}h budgeted</span>
                <span>Due {p.dueDate}</span>
              </div>
            </div>
            <div className="team-chip-row">
              {p.team.slice(0, 4).map(t => (
                <div key={t.initials} className="avch" title={t.name}>{t.initials}</div>
              ))}
            </div>
            <div className={`health-dot ${p.health}`}/>
          </div>
        );
      })}
    </div>
    </div>
  );
}

Object.assign(window, { DashApp, DashSidebar, ProjectTable, ProjectProgressTable, PartnerBody });