import React, { useState } from 'react';
import SideMenu from '../components/SideMenu';
import Header from '../components/Header';
import { useUser } from '../context/UserContext';
import UsersPage from './UsersPage';
import SmtpServersPage from './SmtpServersPage';
import EmailTemplatesPage from './EmailTemplatesPage';
import UnsubscribedPage from './UnsubscribedPage';
import GroupsPage from './GroupsPage';
import DeliveryHistoryPage from './DeliveryHistoryPage';
import CampaignPage from './CampaignPage';

const Dashboard = () => {
  const [active, setActive] = useState('smtp');
  const { user, logout } = useUser();

  const handleLogout = () => {
    logout();
    window.location.href = '/login';
  };

  function renderPage() {
    switch (active) {
      case 'users': return <UsersPage />;
      case 'smtp': return <SmtpServersPage />;
      case 'template': return <EmailTemplatesPage />;
      case 'unsubscribed': return <UnsubscribedPage />;
      case 'groups': return <GroupsPage />;
      case 'history': return <DeliveryHistoryPage />;
      case 'campaign': return <CampaignPage />;
      default: return null;
    }
  }

  return (
    <div style={{ display: 'flex', minHeight: '100vh', background: '#f8fafc' }}>
      <SideMenu active={active} onSelect={setActive} />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <Header user={user} onLogout={handleLogout} />
        <div style={{ flex: 1, padding: 32 }}>
          {renderPage()}
        </div>
      </div>
    </div>
  );
};

export default Dashboard;