"use client";

import { useState } from "react";
import { Plus, AlertTriangle, Trash2 } from "lucide-react";
import type { SkillDefinition } from "@/lib/types";
import { SkillAddModal } from "./SkillAddModal";

interface SkillListProps {
  skills: SkillDefinition[];
  loading: boolean;
  selectedName?: string;
  onSelect: (name: string) => void;
  onAddFromPath: (path: string) => Promise<void>;
  onAddFromFile: (file: File) => Promise<void>;
  onDelete: (name: string) => Promise<void>;
}

export function SkillList({
  skills,
  loading,
  selectedName,
  onSelect,
  onAddFromPath,
  onAddFromFile,
  onDelete,
}: SkillListProps) {
  const [showAdd, setShowAdd] = useState(false);
  const [confirmDelete, setConfirmDelete] = useState<string | null>(null);

  return (
    <div className="flex h-full flex-col border-r border-zinc-200 dark:border-zinc-800">
      <div className="flex items-center justify-between border-b border-zinc-200 px-4 py-3 dark:border-zinc-800">
        <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">Skills</h3>
        <button
          onClick={() => setShowAdd(true)}
          className="flex items-center gap-1 rounded-lg px-2 py-1 text-xs font-medium text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-900/20"
        >
          <Plus size={14} />
          Add
        </button>
      </div>

      <div className="flex-1 overflow-y-auto">
        {loading && (
          <p className="px-4 py-3 text-sm text-zinc-400">Loading...</p>
        )}
        {!loading && skills.length === 0 && (
          <p className="px-4 py-3 text-sm text-zinc-400">No skills registered</p>
        )}
        {skills.map((skill) => (
          <div
            key={skill.name}
            className="group relative"
          >
            <button
              onClick={() => onSelect(skill.name)}
              className={`flex w-full flex-col gap-0.5 px-4 py-3 text-left transition-colors ${
                selectedName === skill.name
                  ? "bg-zinc-100 dark:bg-zinc-800"
                  : "hover:bg-zinc-50 dark:hover:bg-zinc-800/50"
              }`}
            >
              <div className="flex items-center gap-2">
                <span className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
                  {skill.name}
                </span>
                {skill.fileNotFound && (
                  <AlertTriangle size={12} className="text-amber-500" />
                )}
                <span className="text-xs text-zinc-400">v{skill.version}</span>
              </div>
              <span className="line-clamp-1 text-xs text-zinc-500 dark:text-zinc-400">
                {skill.description}
              </span>
            </button>
            <button
              onClick={(e) => {
                e.stopPropagation();
                setConfirmDelete(skill.name);
              }}
              className="absolute right-2 top-3 hidden rounded p-1 text-zinc-400 hover:bg-zinc-200 hover:text-red-500 group-hover:block dark:hover:bg-zinc-700"
            >
              <Trash2 size={14} />
            </button>

            {confirmDelete === skill.name && (
              <div className="absolute right-2 top-3 z-10 flex items-center gap-1 rounded-lg border border-zinc-200 bg-white px-2 py-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-800">
                <span className="text-xs text-zinc-500">Delete?</span>
                <button
                  onClick={() => { onDelete(skill.name); setConfirmDelete(null); }}
                  className="rounded px-2 py-0.5 text-xs font-medium text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20"
                >
                  Yes
                </button>
                <button
                  onClick={() => setConfirmDelete(null)}
                  className="rounded px-2 py-0.5 text-xs text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-700"
                >
                  No
                </button>
              </div>
            )}
          </div>
        ))}
      </div>

      {showAdd && (
        <SkillAddModal
          onClose={() => setShowAdd(false)}
          onAddFromPath={onAddFromPath}
          onAddFromFile={onAddFromFile}
        />
      )}
    </div>
  );
}
