import { useState } from 'react';
import UsersAdmin from './UsersAdmin.jsx';
import Profile from './Profile.jsx';
import MailSettings from './MailSettings.jsx';
import Training from './Training.jsx';
import SettingsAdmin from './SettingsAdmin.jsx';
import GenerateTest from './GenerateTest.jsx';
import ApplicationsAdmin from './ApplicationsAdmin.jsx';
import ApplicationTest from './ApplicationTest.jsx';
import Journal from './Journal.jsx';
import Overview from './Overview.jsx';

// Разделы для каждой роли. Часть будет реализована на следующих этапах.
const ADMIN_SECTIONS = [
  { key: 'overview', label: 'Обзор' },
  { key: 'users', label: 'Пользователи' },
  { key: 'training', label: 'Обучение ИИ' },
  { key: 'settings', label: 'Настройки Claude' },
  { key: 'applications', label: 'Анкеты (формы)' },
  { key: 'generate', label: 'Тест генерации' },
  { key: 'apptest', label: 'Тест анкеты' },
];
const USER_SECTIONS = [
  { key: 'overview', label: 'Обзор' },
  { key: 'mail', label: 'Почта (IMAP/SMTP)' },
  { key: 'profile', label: 'Профиль' },
  { key: 'generate', label: 'Тест генерации' },
  { key: 'apptest', label: 'Тест анкеты' },
  { key: 'journal', label: 'Журнал писем' },
];

function Placeholder({ title }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p className="muted">Этот раздел появится на следующем этапе разработки.</p>
    </div>
  );
}

export default function Dashboard({ user, onLogout }) {
  const sections = user.role === 'admin' ? ADMIN_SECTIONS : USER_SECTIONS;
  const [active, setActive] = useState(sections[0].key);

  function renderSection() {
    switch (active) {
      case 'overview': return <Overview user={user} />;
      case 'users': return <UsersAdmin currentUser={user} />;
      case 'training': return <Training />;
      case 'settings': return <SettingsAdmin />;
      case 'applications': return <ApplicationsAdmin />;
      case 'generate': return <GenerateTest />;
      case 'apptest': return <ApplicationTest />;
      case 'mail': return <MailSettings />;
      case 'profile': return <Profile />;
      case 'journal': return <Journal />;
      default: return null;
    }
  }

  return (
    <div className="layout">
      <aside className="sidebar">
        <div className="brand">Автоответчик</div>
        <nav>
          {sections.map((s) => (
            <button
              key={s.key}
              className={active === s.key ? 'nav-item active' : 'nav-item'}
              onClick={() => setActive(s.key)}
            >
              {s.label}
            </button>
          ))}
        </nav>
        <div className="sidebar-footer">
          <div className="user-badge">
            <div className="user-email">{user.email}</div>
            <div className="user-role">{user.role === 'admin' ? 'Администратор' : 'Пользователь'}</div>
          </div>
          <button className="logout" onClick={onLogout}>Выйти</button>
        </div>
      </aside>
      <main className="content">{renderSection()}</main>
    </div>
  );
}
