import React from 'react';
import { ArrowLeft, Check, RotateCcw, ClipboardList } from 'lucide-react';
import { TaskInstance, PendingUndoItem } from '../types';

interface TasksViewProps {
  tasks: TaskInstance[];
  pendingUndos: Record<string, PendingUndoItem>;
  onBack: () => void;
  onMarkDone: (task: TaskInstance) => void;
  onCancelUndo: (key: string) => void;
}

export const TasksView: React.FC<TasksViewProps> = ({
  tasks,
  pendingUndos,
  onBack,
  onMarkDone,
  onCancelUndo,
}) => {
  // Visible tasks: non-done tasks plus those currently in 5-second pending undo state
  const visibleTasks = tasks.filter((t) => !t.fait || pendingUndos[`task-${t.id}`]);

  return (
    <div className="flex flex-col gap-3">
      {/* Header */}
      <div className="flex items-center gap-3">
        <button
          onClick={onBack}
          className="w-11 h-11 rounded-xl bg-[var(--surface)] border border-[var(--border)] flex items-center justify-center text-[var(--ink)] hover:bg-[var(--surface-alt)] transition-colors cursor-pointer"
        >
          <ArrowLeft className="w-5 h-5" />
        </button>
        <div>
          <h1 className="text-xl sm:text-2xl font-bold text-[var(--ink)] m-0 leading-tight">
            Tâches du jour
          </h1>
          <p className="text-xs text-[var(--ink-soft)] m-0">
            {visibleTasks.length} tâche{visibleTasks.length > 1 ? 's' : ''} à réaliser aujourd'hui
          </p>
        </div>
      </div>

      {/* Liste des tâches */}
      <div className="flex flex-col gap-2.5 mt-1">
        {visibleTasks.length === 0 ? (
          <div className="py-12 px-4 text-center rounded-2xl bg-[var(--surface)] border border-[var(--border)] text-[var(--ink-soft)] flex flex-col items-center justify-center gap-2">
            <ClipboardList className="w-10 h-10 text-[#4EAA6A]" />
            <p className="text-base font-semibold text-[var(--ink)] m-0">
              Toutes les tâches du jour sont terminées !
            </p>
            <p className="text-xs m-0">
              Merci pour votre aide et votre présence auprès des parents.
            </p>
          </div>
        ) : (
          visibleTasks.map((task) => {
            const undoKey = `task-${task.id}`;
            const pending = pendingUndos[undoKey];
            const isDonePending = !!pending;

            return (
              <div
                key={task.id}
                className={`rounded-xl p-3.5 sm:p-4 flex items-center justify-between gap-3 border transition-all duration-300 ${
                  isDonePending
                    ? 'bg-[#183823] border-[#3F7D53] text-[#DEECE1]'
                    : 'bg-[var(--surface)] border-[var(--border)] text-[var(--ink)]'
                }`}
              >
                <div className="flex items-center gap-3 overflow-hidden">
                  <div
                    className={`w-9 h-9 rounded-lg flex items-center justify-center shrink-0 ${
                      isDonePending
                        ? 'bg-[#3F7D53] text-white'
                        : 'bg-[var(--surface-alt)] text-[var(--ink-soft)]'
                    }`}
                  >
                    {isDonePending ? (
                      <Check className="w-5 h-5" />
                    ) : (
                      <ClipboardList className="w-4 h-4" />
                    )}
                  </div>
                  <div className="truncate">
                    <p
                      className={`text-base font-semibold truncate m-0 ${
                        isDonePending ? 'line-through text-white/90' : 'text-[var(--ink)]'
                      }`}
                    >
                      {task.nom}
                    </p>
                    <div className="flex items-center gap-2 text-xs text-[var(--ink-soft)] mt-0.5">
                      <span className="capitalize">{task.categorie}</span>
                      {task.afficher_alerte && (
                        <span className="text-amber-400 font-medium">• Prioritaire</span>
                      )}
                      {isDonePending && (
                        <span className="text-emerald-300 font-medium">
                          • Validé par {pending.validatedBy}
                        </span>
                      )}
                    </div>
                  </div>
                </div>

                {/* Bouton Fait / Annuler (5s) */}
                <div className="shrink-0">
                  {isDonePending ? (
                    <button
                      onClick={() => onCancelUndo(undoKey)}
                      className="flex items-center gap-1.5 px-3.5 py-2 rounded-xl bg-emerald-600 text-white text-xs sm:text-sm font-semibold hover:bg-emerald-700 transition-colors shadow-sm cursor-pointer animate-pulse"
                    >
                      <RotateCcw className="w-3.5 h-3.5" />
                      <span>Annuler ({pending.secondsRemaining}s)</span>
                    </button>
                  ) : (
                    <button
                      onClick={() => onMarkDone(task)}
                      className="px-5 py-2 rounded-xl bg-transparent border border-[var(--border)] hover:border-[var(--ink-soft)] text-[var(--ink)] text-sm font-semibold hover:bg-[var(--surface-alt)] transition-colors active:scale-95 cursor-pointer min-w-[76px]"
                    >
                      Fait
                    </button>
                  )}
                </div>
              </div>
            );
          })
        )}
      </div>
    </div>
  );
};