'use client';

import { useState } from 'react';
import { Task } from '@/lib/types';
import { TaskCard } from './TaskCard';
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
import { Badge } from '@/components/ui/Badge';

interface ObjectivesBoardProps {
  tasks: Task[];
  onDeleteTask?: (taskId: string) => Promise<void>;
  onEditTask?: (task: Task) => void;
  onUpdateTitle?: (taskId: string, newTitle: string) => Promise<void>;
  compactView?: boolean;
  pinnedTagName?: string;
}

export function ObjectivesBoard({ 
  tasks, 
  onDeleteTask, 
  onEditTask, 
  onUpdateTitle, 
  compactView = false,
  pinnedTagName = "Objectifs"
}: ObjectivesBoardProps) {
  const [isCollapsed, setIsCollapsed] = useState(false);
  
  if (tasks.length === 0) {
    return null; // Ne rien afficher s'il n'y a pas d'objectifs
  }

  return (
    <div className="bg-gradient-to-r from-purple-900/20 to-blue-900/20 border-b border-purple-500/30">
      <div className="container mx-auto px-6 py-4">
        <Card className="bg-slate-800/50 border-purple-500/30 shadow-purple-500/10 shadow-lg">
          <CardHeader className="pb-3">
            <div className="flex items-center justify-between">
              <button
                onClick={() => setIsCollapsed(!isCollapsed)}
                className="flex items-center gap-3 hover:bg-purple-900/20 rounded-lg p-2 -m-2 transition-colors group"
              >
                <div className="w-3 h-3 bg-purple-400 rounded-full animate-pulse shadow-purple-400/50 shadow-lg"></div>
                <h2 className="text-lg font-mono font-bold text-purple-300 uppercase tracking-wider">
                  🎯 Objectifs Principaux
                </h2>
                {pinnedTagName && (
                  <Badge variant="outline" className="border-purple-400/50 text-purple-300">
                    {pinnedTagName}
                  </Badge>
                )}
                
                {/* Flèche de collapse */}
                <svg
                  className={`w-4 h-4 text-purple-400 transition-transform duration-200 ${
                    isCollapsed ? 'rotate-180' : ''
                  }`}
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </button>
              
              <div className="flex items-center gap-2">
                <Badge variant="primary" size="sm" className="bg-purple-600">
                  {String(tasks.length).padStart(2, '0')}
                </Badge>
                
                {/* Bouton collapse séparé pour mobile */}
                <button
                  onClick={() => setIsCollapsed(!isCollapsed)}
                  className="lg:hidden p-1 hover:bg-purple-900/20 rounded transition-colors"
                  aria-label={isCollapsed ? "Développer" : "Réduire"}
                >
                  <svg
                    className={`w-4 h-4 text-purple-400 transition-transform duration-200 ${
                      isCollapsed ? 'rotate-180' : ''
                    }`}
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                  </svg>
                </button>
              </div>
            </div>
          </CardHeader>

          {!isCollapsed && (
            <CardContent className="pt-0">
              {(() => {
              // Séparer les tâches par statut
              const activeTasks = tasks.filter(task => task.status === 'todo' || task.status === 'in_progress');
              const completedTasks = tasks.filter(task => task.status === 'done');

              return (
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                  {/* Colonne En cours / À faire */}
                  <div className="space-y-3">
                    <div className="flex items-center gap-2 pb-2 border-b border-purple-500/20">
                      <div className="w-2 h-2 bg-blue-400 rounded-full"></div>
                      <h3 className="text-sm font-mono font-medium text-blue-300 uppercase tracking-wider">
                        En cours / À faire
                      </h3>
                      <div className="flex-1"></div>
                      <span className="text-xs text-slate-400 bg-slate-800/50 px-2 py-1 rounded">
                        {activeTasks.length}
                      </span>
                    </div>
                    
                    {activeTasks.length === 0 ? (
                      <div className="text-center py-8 text-slate-400 text-sm">
                        <div className="text-2xl mb-2">🎯</div>
                        Aucun objectif actif
                      </div>
                    ) : (
                      <div className="space-y-3">
                        {activeTasks.map(task => (
                          <div key={task.id} className="transform hover:scale-[1.02] transition-transform duration-200">
                            <TaskCard
                              task={task}
                              onDelete={onDeleteTask}
                              onEdit={onEditTask}
                              onUpdateTitle={onUpdateTitle}
                              compactView={compactView}
                            />
                          </div>
                        ))}
                      </div>
                    )}
                  </div>

                  {/* Colonne Terminé */}
                  <div className="space-y-3">
                    <div className="flex items-center gap-2 pb-2 border-b border-purple-500/20">
                      <div className="w-2 h-2 bg-green-400 rounded-full"></div>
                      <h3 className="text-sm font-mono font-medium text-green-300 uppercase tracking-wider">
                        Terminé
                      </h3>
                      <div className="flex-1"></div>
                      <span className="text-xs text-slate-400 bg-slate-800/50 px-2 py-1 rounded">
                        {completedTasks.length}
                      </span>
                    </div>
                    
                    {completedTasks.length === 0 ? (
                      <div className="text-center py-8 text-slate-400 text-sm">
                        <div className="text-2xl mb-2">✅</div>
                        Aucun objectif terminé
                      </div>
                    ) : (
                      <div className="space-y-3">
                        {completedTasks.map(task => (
                          <div key={task.id} className="transform hover:scale-[1.02] transition-transform duration-200 opacity-75">
                            <TaskCard
                              task={task}
                              onDelete={onDeleteTask}
                              onEdit={onEditTask}
                              onUpdateTitle={onUpdateTitle}
                              compactView={compactView}
                            />
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                </div>
              );
              })()}
            </CardContent>
          )}
        </Card>
      </div>
    </div>
  );
}