/* Main app shell — sidebar, topbar, view router */
const NAV = [
  { id: 'dashboard',   name: 'Dashboard',           icon: 'dashboard' },
  { id: 'cycles',      name: 'Evaluation Cycles',   icon: 'cycles',     badge: '6' },
  { id: 'templates',   name: 'Survey Templates',    icon: 'template' },
  { id: 'questions',   name: 'Question Bank',       icon: 'bank' },
  { id: 'competencies',name: 'Competency Library',  icon: 'competency' },
  { id: 'raters',      name: 'Rater Assignment',    icon: 'rater' },
  { id: 'myevals',     name: 'My Evaluations',      icon: 'myeval',     badge: '4' },
  { id: 'team',        name: 'Team Results',        icon: 'team' },
  { id: 'dept',        name: 'Department Analytics',icon: 'dept' },
  { id: 'reports',     name: 'Reports',             icon: 'reports' },
  { id: 'settings',    name: 'Settings',            icon: 'settings' },
];

const App = () => {
  const [route, setRoute] = React.useState('dashboard');
  const [lang, setLang] = React.useState('EN');
  const [surveyEval, setSurveyEval] = React.useState(null);
  const [surveyStage, setSurveyStage] = React.useState('list'); // 'list' | 'survey' | 'confirm'
  const [reportView, setReportView] = React.useState('list'); // for reports

  const navigateTo = (id) => {
    setRoute(id);
    setSurveyStage('list');
    setReportView('list');
  };

  // Survey-only fullscreen mode
  if (route === 'myevals' && surveyStage === 'survey') {
    return <SurveyScreen
      evaluation={surveyEval}
      onExit={() => setSurveyStage('list')}
      onSubmitted={() => setSurveyStage('confirm')}
    />;
  }
  if (route === 'myevals' && surveyStage === 'confirm') {
    return <SurveyConfirmation onDone={() => { setSurveyStage('list'); setRoute('dashboard'); }}/>;
  }

  const renderRoute = () => {
    switch (route) {
      case 'dashboard':    return <DashboardScreen onNav={navigateTo}/>;
      case 'cycles':       return <CyclesScreen/>;
      case 'templates':    return <TemplatesScreen/>;
      case 'questions':    return <QuestionsScreen/>;
      case 'competencies': return <CompetenciesScreen/>;
      case 'raters':       return <RaterScreen/>;
      case 'myevals':      return <MyEvaluationsScreen onStartSurvey={(e) => { setSurveyEval(e); setSurveyStage('survey'); }}/>;
      case 'team':         return <TeamResultsScreen/>;
      case 'dept':         return <DeptScreen/>;
      case 'reports':      return reportView === 'individual'
                             ? <IndividualReport onBack={() => setReportView('list')}/>
                             : <ReportsScreen onOpenIndividual={() => setReportView('individual')}/>;
      case 'settings':     return <SettingsScreen/>;
      default:             return <DashboardScreen onNav={navigateTo}/>;
    }
  };

  return (
    <div className="app" data-screen-label={`Pulse360 — ${NAV.find(n => n.id === route)?.name}`}>
      {/* Sidebar */}
      <aside className="sidebar">
        <div className="brand">
          <div className="brand-mark"></div>
          <div>
            <div className="brand-name">Pulse360</div>
            <div className="brand-sub">People Platform</div>
          </div>
        </div>

        <div className="nav-group-label">Plan & Build</div>
        {NAV.slice(0, 6).map(n => (
          <div key={n.id} className={`nav-item ${route === n.id ? 'active' : ''}`} onClick={() => navigateTo(n.id)}>
            <Icon name={n.icon} size={17} className="nav-icon"/>
            {n.name}
            {n.badge && <span className="nav-badge">{n.badge}</span>}
          </div>
        ))}

        <div className="nav-group-label">Participate & Analyze</div>
        {NAV.slice(6, 10).map(n => (
          <div key={n.id} className={`nav-item ${route === n.id ? 'active' : ''}`} onClick={() => navigateTo(n.id)}>
            <Icon name={n.icon} size={17} className="nav-icon"/>
            {n.name}
            {n.badge && <span className="nav-badge">{n.badge}</span>}
          </div>
        ))}

        <div className="nav-group-label">Admin</div>
        {NAV.slice(10).map(n => (
          <div key={n.id} className={`nav-item ${route === n.id ? 'active' : ''}`} onClick={() => navigateTo(n.id)}>
            <Icon name={n.icon} size={17} className="nav-icon"/>
            {n.name}
            {n.badge && <span className="nav-badge">{n.badge}</span>}
          </div>
        ))}

        <div className="sidebar-footer">
          <div className="avatar">DA</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12.5, fontWeight: 600, color: 'white' }}>Defne Aydın</div>
            <div style={{ fontSize: 10.5, opacity: 0.65 }}>HR Admin · Workspace</div>
          </div>
          <Icon name="chevdown" size={14}/>
        </div>
      </aside>

      {/* Main */}
      <main className="main">
        <header className="topbar">
          <div className="search">
            <Icon name="search" className="search-icon"/>
            <input placeholder="Search cycles, employees, templates, questions…"/>
            <span className="kbd">⌘K</span>
          </div>

          <div className="cycle-picker">
            <span className="dot"></span>
            <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.1 }}>
              <span style={{ fontSize: 10.5, color: 'var(--ink-500)', fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase' }}>Active period</span>
              <span style={{ fontSize: 12.5, fontWeight: 700 }}>Q2 2026 · May 02 – Jun 14</span>
            </div>
            <Icon name="chevdown" size={13}/>
          </div>

          <div className="lang">
            <button className={lang === 'TR' ? 'active' : ''} onClick={() => setLang('TR')}>TR</button>
            <button className={lang === 'EN' ? 'active' : ''} onClick={() => setLang('EN')}>EN</button>
          </div>

          <button className="icon-btn" title="Notifications">
            <Icon name="bell" size={17}/>
            <span className="dot-notif"></span>
          </button>

          <div className="user">
            <div className="avatar">DA</div>
            <div>
              <div className="name">Defne Aydın</div>
              <div className="role">HR Admin</div>
            </div>
            <Icon name="chevdown" size={13} style={{ color: 'var(--ink-500)', marginLeft: 4 }}/>
          </div>
        </header>

        <div className="page">
          {renderRoute()}
        </div>
      </main>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);