'use client';

import { useState } from 'react';
import { Button, ToggleButton, ControlPanel } from '@/components/ui';
import { IntegrationFilter } from '@/components/dashboard/IntegrationFilter';
import { FontSizeToggle } from '@/components/ui/FontSizeToggle';
import type { KanbanFilters } from '@/lib/types';
import { Menu, Plus, Settings, Target, List, Grid3X3 } from 'lucide-react';

interface MobileControlsProps {
  showFilters: boolean;
  showObjectives: boolean;
  compactView: boolean;
  activeFiltersCount: number;
  kanbanFilters: KanbanFilters;
  onToggleFilters: () => void;
  onToggleObjectives: () => void;
  onToggleCompactView: () => void;
  onFiltersChange: (filters: KanbanFilters) => void;
  onCreateTask: () => void;
}

export function MobileControls({
  showFilters,
  showObjectives,
  compactView,
  activeFiltersCount,
  kanbanFilters,
  onToggleFilters,
  onToggleObjectives,
  onToggleCompactView,
  onFiltersChange,
  onCreateTask,
}: MobileControlsProps) {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <ControlPanel className="px-4 py-2">
      {/* Barre principale mobile */}
      <div className="flex items-center justify-between">
        {/* Bouton menu hamburger */}
        <ToggleButton
          variant="primary"
          isActive={isMenuOpen}
          count={activeFiltersCount}
          onClick={() => setIsMenuOpen(!isMenuOpen)}
          icon={<Menu className="w-4 h-4" />}
        >
          Options
        </ToggleButton>

        {/* Bouton d'ajout de tâche */}
        <Button
          variant="primary"
          onClick={onCreateTask}
          className="flex items-center gap-2"
          size="sm"
        >
          <Plus className="w-4 h-4" />
          <span className="hidden xs:inline">Nouvelle</span>
        </Button>
      </div>

      {/* Menu déroulant */}
      {isMenuOpen && (
        <div className="mt-3 p-3 bg-[var(--card)] border border-[var(--border)] rounded-lg shadow-lg">
          {/* Section Affichage */}
          <div className="mb-4">
            <h3 className="text-xs font-mono text-[var(--muted-foreground)] uppercase tracking-wide mb-2">
              Affichage
            </h3>
            <div className="grid grid-cols-2 gap-2">
              <ToggleButton
                variant="primary"
                isActive={showFilters}
                onClick={() => {
                  onToggleFilters();
                  setIsMenuOpen(false);
                }}
                icon={<Settings className="w-4 h-4" />}
              >
                Filtres
              </ToggleButton>

              <ToggleButton
                variant="accent"
                isActive={showObjectives}
                onClick={() => {
                  onToggleObjectives();
                  setIsMenuOpen(false);
                }}
                icon={<Target className="w-4 h-4" />}
              >
                Objectifs
              </ToggleButton>
            </div>
          </div>

          {/* Section Paramètres */}
          <div className="mb-4">
            <h3 className="text-xs font-mono text-[var(--muted-foreground)] uppercase tracking-wide mb-2">
              Paramètres
            </h3>
            <div className="space-y-2">
              <ToggleButton
                variant="secondary"
                isActive={compactView}
                onClick={() => {
                  onToggleCompactView();
                  setIsMenuOpen(false);
                }}
                className="w-full"
                icon={
                  compactView ? (
                    <List className="w-4 h-4" />
                  ) : (
                    <Grid3X3 className="w-4 h-4" />
                  )
                }
              >
                Vue {compactView ? 'détaillée' : 'compacte'}
              </ToggleButton>

              <div className="flex items-center justify-between px-3 py-2 bg-[var(--muted)]/30 border border-[var(--border)] rounded-md">
                <span className="text-sm font-mono text-[var(--muted-foreground)]">
                  Taille police
                </span>
                <FontSizeToggle />
              </div>
            </div>
          </div>

          {/* Section Sources */}
          <div>
            <h3 className="text-xs font-mono text-[var(--muted-foreground)] uppercase tracking-wide mb-2">
              Sources
            </h3>
            <div className="space-y-2">
              <IntegrationFilter
                filters={kanbanFilters}
                onFiltersChange={onFiltersChange}
              />
            </div>
          </div>
        </div>
      )}
    </ControlPanel>
  );
}
