import { useState } from 'react';
import { DesignHeader } from './DesignHeader';
import type { DesignTab } from './DesignHeader';
import { DesignSidebar } from './DesignSidebar';
import type { MenuItemId } from './DesignSidebar';

import { ComponentsContent } from './ComponentsContent';
import { ColorPaletteContent } from './ColorPaletteContent';
import { TypographyContent } from './TypographyContent';
import { RadiusContent } from './RadiusContent';
import { LayoutContent } from './LayoutContent';
import FoundationsOverview from './FoundationsOverview';
import ComponentsOverview from './ComponentsOverview';
import { ButtonContent } from './ButtonContent';
import { TextFieldContent } from './TextFieldContent';
import { getTheme } from './designTheme';
import type { ThemeMode } from './designTheme';

const FIRST_ITEM: Record<DesignTab, MenuItemId> = {
  foundations: 'overview',
  components: 'overview',
};

export const DesignPage = () => {
  const [activeTab, setActiveTab] = useState<DesignTab>('foundations');
  const [themeMode, setThemeMode] = useState<ThemeMode>('dark');
  const [sidebarItem, setSidebarItem] = useState<MenuItemId>('overview');

  const theme = getTheme(themeMode);

  const handleTabChange = (tab: DesignTab) => {
    setActiveTab(tab);
    setSidebarItem(FIRST_ITEM[tab]);
  };

  const renderContent = () => {
    if (activeTab === 'foundations') {
      switch (sidebarItem) {
        case 'overview':
          return <FoundationsOverview theme={theme} onNavigate={(id) => setSidebarItem(id as MenuItemId)} />;
        case 'color':
          return <ColorPaletteContent theme={theme} />;
        case 'typography':
          return <TypographyContent theme={theme} />;
        case 'radius':
          return <RadiusContent theme={theme} />;
        case 'layout':
          return <LayoutContent theme={theme} />;
        default:
          return <FoundationsOverview theme={theme} onNavigate={(id) => setSidebarItem(id as MenuItemId)} />;
      }
    }
    switch (sidebarItem) {
      case 'overview':
        return <ComponentsOverview theme={theme} onNavigate={(id) => setSidebarItem(id as MenuItemId)} />;
      case 'buttons':
        return <ButtonContent theme={theme} />;
      case 'text-field':
        return <TextFieldContent theme={theme} />;
      default:
        return <ComponentsContent />;
    }
  };

  return (
    <div
      className="h-screen w-screen overflow-hidden flex flex-col"
      style={{ backgroundColor: theme.pageBg }}
    >
      <DesignHeader activeTab={activeTab} onTabChange={handleTabChange} theme={theme} onThemeToggle={() => setThemeMode(themeMode === 'dark' ? 'light' : 'dark')} />
      <div className="flex flex-1 overflow-hidden">
        <DesignSidebar theme={theme} activeTab={activeTab} activeItem={sidebarItem} onItemChange={setSidebarItem} />
        <main className="flex-1 overflow-y-auto">
          {renderContent()}
        </main>
      </div>
    </div>
  );
};

export default DesignPage;