import React from 'react';
import { useAdmin, CATEGORY_LABELS } from '../context/AdminContext';
import Sidebar from './Sidebar';
import OverviewPanel      from './client/OverviewPanel';
import CampaignsPanel     from './client/CampaignsPanel';
import NewCampaignPanel   from './client/NewCampaignPanel';
import PerformancePanel   from './client/PerformancePanel';
import RecommendationsPanel from './client/RecommendationsPanel';
import DocumentsPanel     from './client/DocumentsPanel';
import HelpPanel          from './client/HelpPanel';

export default function Dashboard() {
    const {
        activeCategory, activeTab, tabs, collapsed,
        setActiveCategory, setActiveTab, setCollapsed,
    } = useAdmin();

    return (
        <div className="dashboard-layout">
            <Sidebar
                activeCategory={activeCategory}
                onSelectCategory={setActiveCategory}
                collapsed={collapsed}
                onToggleCollapse={() => setCollapsed(c => !c)}
            />

            <div className="dashboard-main">
                <header className="dashboard-header">
                    <div className="dashboard-header-top">
                        <h1 className="dashboard-title">
                            {CATEGORY_LABELS[activeCategory] || activeCategory}
                        </h1>
                    </div>
                    {tabs.length > 1 && (
                        <div className="dashboard-tabs">
                            {tabs.map(tab => (
                                <button
                                    key={tab.id}
                                    className={`tab-btn ${activeTab === tab.id ? 'active' : ''}`}
                                    onClick={() => setActiveTab(tab.id)}
                                >
                                    {tab.label}
                                </button>
                            ))}
                        </div>
                    )}
                </header>

                <div className="dashboard-content">
                    {activeTab === 'overview'         && <OverviewPanel />}
                    {activeTab === 'myCampaigns'      && <CampaignsPanel />}
                    {activeTab === 'newCampaign'      && <NewCampaignPanel />}
                    {activeTab === 'metrics'          && <PerformancePanel />}
                    {activeTab === 'recommendations'  && <RecommendationsPanel />}
                    {activeTab === 'myDocuments'      && <DocumentsPanel />}
                    {activeTab === 'help'             && <HelpPanel />}
                    {activeTab === 'invoices'         && (
                        <div className="placeholder-panel">
                            <div className="placeholder-icon">💳</div>
                            <h3>Billing</h3>
                            <p>Invoice history and payment management coming soon.</p>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
}
