import { Task, TaskStatus } from '@/lib/types';
import { TaskCard } from './TaskCard';

interface KanbanColumnProps {
  id: TaskStatus;
  title: string;
  color: string;
  tasks: Task[];
}

export function KanbanColumn({ id, title, color, tasks }: KanbanColumnProps) {
  // Couleurs tech/cyberpunk
  const techStyles = {
    gray: {
      border: 'border-slate-700',
      glow: 'shadow-slate-500/20',
      accent: 'text-slate-400',
      badge: 'bg-slate-800 text-slate-300 border border-slate-600'
    },
    blue: {
      border: 'border-cyan-500/30',
      glow: 'shadow-cyan-500/20',
      accent: 'text-cyan-400',
      badge: 'bg-cyan-950 text-cyan-300 border border-cyan-500/30'
    },
    green: {
      border: 'border-emerald-500/30',
      glow: 'shadow-emerald-500/20',
      accent: 'text-emerald-400',
      badge: 'bg-emerald-950 text-emerald-300 border border-emerald-500/30'
    },
    red: {
      border: 'border-red-500/30',
      glow: 'shadow-red-500/20',
      accent: 'text-red-400',
      badge: 'bg-red-950 text-red-300 border border-red-500/30'
    }
  };

  const style = techStyles[color as keyof typeof techStyles];

  // Icônes tech
  const techIcons = {
    todo: '⚡',
    in_progress: '🔄',
    done: '✓',
    cancelled: '✕'
  };

  return (
    <div className="flex-shrink-0 w-80 h-full">
      {/* Header tech avec glow */}
      <div className={`bg-slate-900 ${style.border} border rounded-t-lg p-4 ${style.glow} shadow-lg`}>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className={`w-2 h-2 rounded-full ${style.accent.replace('text-', 'bg-')} animate-pulse`}></div>
            <h3 className={`font-mono text-sm font-bold ${style.accent} uppercase tracking-wider`}>
              {title}
            </h3>
          </div>
          <span className={`${style.badge} px-3 py-1 rounded-full text-xs font-mono font-bold`}>
            {String(tasks.length).padStart(2, '0')}
          </span>
        </div>
      </div>

      {/* Zone de contenu tech */}
      <div className={`bg-slate-900/80 backdrop-blur-sm ${style.border} border-t-0 border rounded-b-lg p-4 h-[calc(100vh-220px)] overflow-y-auto ${style.glow} shadow-lg`}>
        <div className="space-y-3">
          {tasks.length === 0 ? (
            <div className="text-center py-20">
              <div className={`w-16 h-16 mx-auto mb-4 rounded-full bg-slate-800 border-2 border-dashed ${style.border} flex items-center justify-center`}>
                <span className={`text-2xl ${style.accent} opacity-50`}>{techIcons[id]}</span>
              </div>
              <p className="text-xs font-mono text-slate-500 uppercase tracking-wide">NO DATA</p>
              <div className="mt-2 flex justify-center">
                <div className={`w-8 h-0.5 ${style.accent.replace('text-', 'bg-')} opacity-30`}></div>
              </div>
            </div>
          ) : (
            tasks.map((task) => (
              <TaskCard key={task.id} task={task} />
            ))
          )}
        </div>
      </div>
    </div>
  );
}