'use client';

import { useState, useEffect } from 'react';
import { KanbanBoardContainer } from '@/components/kanban/BoardContainer';
import { Header } from '@/components/ui/Header';
import { TasksProvider, useTasksContext } from '@/contexts/TasksContext';
import { Task, Tag, TaskStats } from '@/lib/types';
import { CreateTaskData } from '@/clients/tasks-client';
import { userPreferencesService } from '@/services/user-preferences';
import { CreateTaskForm } from '@/components/forms/CreateTaskForm';
import { Button } from '@/components/ui/Button';

interface HomePageClientProps {
  initialTasks: Task[];
  initialStats: TaskStats;
  initialTags: (Tag & { usage: number })[];
}

function HomePageContent() {
  const { stats, syncing, createTask } = useTasksContext();
  const [showFilters, setShowFilters] = useState(true);
  const [showObjectives, setShowObjectives] = useState(true);
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);

  // Charger les préférences depuis le service
  useEffect(() => {
    const viewPreferences = userPreferencesService.getViewPreferences();
    setShowFilters(viewPreferences.showFilters);
    setShowObjectives(viewPreferences.showObjectives);
  }, []);

  // Sauvegarder les préférences via le service
  const handleToggleFilters = () => {
    const newValue = !showFilters;
    setShowFilters(newValue);
    userPreferencesService.updateViewPreferences({ showFilters: newValue });
  };

  const handleToggleObjectives = () => {
    const newValue = !showObjectives;
    setShowObjectives(newValue);
    userPreferencesService.updateViewPreferences({ showObjectives: newValue });
  };

  // Handler pour la création de tâche depuis la barre de contrôles
  const handleCreateTask = async (data: CreateTaskData) => {
    await createTask(data);
    setIsCreateModalOpen(false);
  };

  return (
    <div className="min-h-screen bg-[var(--background)]">
      <Header 
        title="TowerControl" 
        subtitle="Gestionnaire de tâches moderne"
        stats={stats}
        syncing={syncing}
      />
      
      {/* Barre de contrôles de visibilité */}
      <div className="bg-[var(--card)]/30 border-b border-[var(--border)]/30">
        <div className="container mx-auto px-6 py-2">
          <div className="flex items-center justify-between w-full">
            <div className="flex items-center gap-4">
              <div className="flex items-center gap-2">
                <button
                  onClick={handleToggleFilters}
                  className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-mono transition-all ${
                    showFilters 
                      ? 'bg-[var(--primary)]/20 text-[var(--primary)] border border-[var(--primary)]/30' 
                      : 'bg-[var(--card)] text-[var(--muted-foreground)] border border-[var(--border)] hover:border-[var(--primary)]/50'
                  }`}
                >
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4" />
                  </svg>
                  Filtres
                </button>
                
                <button
                  onClick={handleToggleObjectives}
                  className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-mono transition-all ${
                    showObjectives 
                      ? 'bg-[var(--accent)]/20 text-[var(--accent)] border border-[var(--accent)]/30' 
                      : 'bg-[var(--card)] text-[var(--muted-foreground)] border border-[var(--border)] hover:border-[var(--accent)]/50'
                  }`}
                >
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
                  </svg>
                  Objectifs
                </button>
              </div>
              
            </div>

            {/* Bouton d'ajout de tâche */}
            <Button
              variant="primary"
              onClick={() => setIsCreateModalOpen(true)}
              className="flex items-center gap-2"
            >
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
              </svg>
              Nouvelle tâche
            </Button>
          </div>
        </div>
      </div>
      
      <main className="h-[calc(100vh-160px)]">
        <KanbanBoardContainer 
          showFilters={showFilters}
          showObjectives={showObjectives}
        />
      </main>

      {/* Modal de création de tâche */}
      <CreateTaskForm
        isOpen={isCreateModalOpen}
        onClose={() => setIsCreateModalOpen(false)}
        onSubmit={handleCreateTask}
        loading={false}
      />
    </div>
  );
}

export function HomePageClient({ initialTasks, initialStats, initialTags }: HomePageClientProps) {
  return (
    <TasksProvider 
      initialTasks={initialTasks} 
      initialStats={initialStats}
      initialTags={initialTags}
    >
      <HomePageContent />
    </TasksProvider>
  );
}