import { useState } from 'react';
import { ChevronRight, ChevronDown, Check } from 'lucide-react';
import type { Task } from '@/types';
import { cn } from '@/lib/utils';
import { useTasksStore } from '@/stores/tasks';

interface CompletedSectionProps {
  tasks: Task[];
}

export function CompletedSection({ tasks }: CompletedSectionProps) {
  const [isOpen, setIsOpen] = useState(false);
  const { toggleComplete, setSelectedTask } = useTasksStore();

  if (tasks.length === 0) return null;

  return (
    <div className="mt-6 border-t border-gray-100 pt-4">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-center gap-2 text-sm font-medium text-gray-500 hover:text-gray-700 transition-colors"
      >
        {isOpen ? (
          <ChevronDown className="w-4 h-4" />
        ) : (
          <ChevronRight className="w-4 h-4" />
        )}
        Completed ({tasks.length})
      </button>

      {isOpen && (
        <div className="mt-2 space-y-1">
          {tasks.map((task) => (
            <div
              key={task.id}
              className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-50 cursor-pointer group opacity-60"
              onClick={() => setSelectedTask(task)}
            >
              <button
                onClick={(e) => {
                  e.stopPropagation();
                  toggleComplete(task.id);
                }}
                className="flex-shrink-0 w-5 h-5 rounded-full bg-gray-400 border-2 border-gray-400 flex items-center justify-center"
              >
                <Check className="w-3 h-3 text-white" />
              </button>
              <span className="text-sm text-gray-500 line-through">
                {task.title}
              </span>
              {task.project && (
                <span className="ml-auto flex items-center gap-1.5 text-xs text-gray-400">
                  <span
                    className="w-2 h-2 rounded"
                    style={{ backgroundColor: task.project.color }}
                  />
                  {task.project.name}
                </span>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}