'use client';

import { useState } from 'react';
import { Header } from '@/components/ui/Header';
import { Tabs, TabItem } from '@/components/ui/Tabs';
import { Calendar } from '@/components/ui/Calendar';
import { PeriodSelector } from '@/components/ui/PeriodSelector';
import { ToggleButton } from '@/components/ui/ToggleButton';
import { FontSizeToggle } from '@/components/ui/FontSizeToggle';
import { Modal } from '@/components/ui/Modal';
import { KeyboardShortcutsModal } from '@/components/ui/KeyboardShortcutsModal';

export function NavigationSection() {
  const [activeTab, setActiveTab] = useState('tab1');
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [selectedPeriod, setSelectedPeriod] = useState('7d');
  const [showModal, setShowModal] = useState(false);
  const [showKeyboardModal, setShowKeyboardModal] = useState(false);
  const [isToggled, setIsToggled] = useState(false);

  const tabItems: TabItem[] = [
    { id: 'tab1', label: 'Vue Executive', icon: '📝' },
    { id: 'tab2', label: 'Accomplissements', icon: '✅', count: 5 },
    { id: 'tab3', label: 'Enjeux', icon: '🎯', count: 3 },
    { id: 'tab4', label: 'Métriques', icon: '📊' },
  ];

  return (
    <section id="navigation" className="space-y-8">
      <h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">
        Navigation & Controls
      </h2>

      <div className="space-y-8">
        {/* Header */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Header
          </h3>
          <Header
            title="Sample Header"
            subtitle="This is a sample header component"
          />
        </div>

        {/* Tabs */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">Tabs</h3>
          <Tabs
            items={tabItems}
            activeTab={activeTab}
            onTabChange={setActiveTab}
          />
          <div className="p-4 bg-[var(--card)] rounded-lg">
            <p className="text-[var(--muted-foreground)]">
              Active tab: <span className="font-mono">{activeTab}</span>
            </p>
          </div>
        </div>

        {/* Calendar */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Calendar
          </h3>
          <div className="max-w-md">
            <Calendar
              currentDate={selectedDate}
              onDateSelect={setSelectedDate}
            />
          </div>
        </div>

        {/* Period Selector */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Period Selector
          </h3>
          <PeriodSelector
            selectedValue={selectedPeriod}
            onValueChange={setSelectedPeriod}
            options={[
              { value: '1d', label: '1 jour' },
              { value: '7d', label: '7 jours' },
              { value: '30d', label: '30 jours' },
              { value: '90d', label: '90 jours' },
            ]}
          />
        </div>

        {/* Toggle Buttons */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Toggle Buttons
          </h3>
          <div className="flex flex-wrap gap-4">
            <ToggleButton
              isActive={isToggled}
              onClick={() => setIsToggled(!isToggled)}
              icon="🔔"
            />
            <ToggleButton
              isActive={!isToggled}
              onClick={() => setIsToggled(!isToggled)}
              icon="🌙"
            />
            <FontSizeToggle />
          </div>
        </div>

        {/* Modals */}
        <div className="space-y-4">
          <h3 className="text-lg font-medium text-[var(--foreground)]">
            Modals
          </h3>
          <div className="flex gap-4">
            <button
              onClick={() => setShowModal(true)}
              className="px-4 py-2 bg-[var(--primary)] text-[var(--primary-foreground)] rounded-lg hover:bg-[var(--primary)]/90"
            >
              Open Modal
            </button>
            <button
              onClick={() => setShowKeyboardModal(true)}
              className="px-4 py-2 bg-[var(--secondary)] text-[var(--foreground)] rounded-lg hover:bg-[var(--secondary)]/90"
            >
              Keyboard Shortcuts
            </button>
          </div>
        </div>

        {/* Modal Components */}
        <Modal
          isOpen={showModal}
          onClose={() => setShowModal(false)}
          title="Example Modal"
        >
          <div className="p-6">
            <p className="text-[var(--muted-foreground)] mb-4">
              This is an example modal with some content.
            </p>
            <div className="flex justify-end gap-2">
              <button
                onClick={() => setShowModal(false)}
                className="px-4 py-2 bg-[var(--secondary)] text-[var(--foreground)] rounded-lg hover:bg-[var(--secondary)]/90"
              >
                Cancel
              </button>
              <button
                onClick={() => setShowModal(false)}
                className="px-4 py-2 bg-[var(--primary)] text-[var(--primary-foreground)] rounded-lg hover:bg-[var(--primary)]/90"
              >
                Confirm
              </button>
            </div>
          </div>
        </Modal>

        <KeyboardShortcutsModal
          isOpen={showKeyboardModal}
          onClose={() => setShowKeyboardModal(false)}
          shortcuts={[]}
        />
      </div>
    </section>
  );
}
