"use client";

import { useState, useEffect } from "react";
import { Save, AlertTriangle } from "lucide-react";
import { AgentToggleRow } from "./AgentToggleRow";

interface SkillWithContent {
  name: string;
  description: string;
  version: string;
  file: string;
  allowedTools: string[];
  agents: string[];
  fileNotFound?: boolean;
  content?: string;
}

interface SkillDetailProps {
  skill: SkillWithContent;
  onUpdate: (name: string, updates: { description?: string; version?: string; allowedTools?: string[]; content?: string }) => Promise<void>;
  onToggleAgent: (agentName: string, enabled: boolean) => void;
}

export function SkillDetail({ skill, onUpdate, onToggleAgent }: SkillDetailProps) {
  const [description, setDescription] = useState(skill.description);
  const [version, setVersion] = useState(skill.version);
  const [content, setContent] = useState(skill.content || "");
  const [saving, setSaving] = useState(false);
  const [dirty, setDirty] = useState(false);

  useEffect(() => {
    setDescription(skill.description);
    setVersion(skill.version);
    setContent(skill.content || "");
    setDirty(false);
  }, [skill.name, skill.description, skill.version, skill.content]);

  const handleSave = async () => {
    setSaving(true);
    try {
      await onUpdate(skill.name, { description, version, content });
      setDirty(false);
    } finally {
      setSaving(false);
    }
  };

  const markDirty = () => setDirty(true);

  return (
    <div className="flex h-full flex-col overflow-y-auto p-6">
      {/* Header */}
      <div className="mb-6 flex items-start justify-between">
        <div>
          <h2 className="text-xl font-bold text-zinc-900 dark:text-zinc-100">{skill.name}</h2>
          <p className="mt-1 text-xs text-zinc-400">File: {skill.file}</p>
          {skill.fileNotFound && (
            <div className="mt-2 flex items-center gap-1.5 text-sm text-amber-500">
              <AlertTriangle size={14} />
              Skill file not found on disk
            </div>
          )}
        </div>
        <button
          onClick={handleSave}
          disabled={!dirty || saving}
          className="flex items-center gap-1.5 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
        >
          <Save size={14} />
          {saving ? "Saving..." : "Save"}
        </button>
      </div>

      {/* Metadata */}
      <div className="mb-6 grid grid-cols-2 gap-4">
        <div>
          <label className="mb-1 block text-xs font-semibold uppercase tracking-wider text-zinc-400">
            Description
          </label>
          <input
            value={description}
            onChange={(e) => { setDescription(e.target.value); markDirty(); }}
            className="w-full rounded-lg border border-zinc-200 px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100"
          />
        </div>
        <div>
          <label className="mb-1 block text-xs font-semibold uppercase tracking-wider text-zinc-400">
            Version
          </label>
          <input
            value={version}
            onChange={(e) => { setVersion(e.target.value); markDirty(); }}
            className="w-full rounded-lg border border-zinc-200 px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100"
          />
        </div>
      </div>

      {/* Allowed Tools */}
      <div className="mb-6">
        <label className="mb-2 block text-xs font-semibold uppercase tracking-wider text-zinc-400">
          Allowed Tools
        </label>
        <div className="flex flex-wrap gap-1.5">
          {skill.allowedTools.map((tool) => (
            <span
              key={tool}
              className="rounded-full bg-zinc-100 px-2.5 py-0.5 text-xs font-medium text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400"
            >
              {tool}
            </span>
          ))}
        </div>
      </div>

      {/* Content Editor */}
      <div className="mb-6 flex-1">
        <label className="mb-2 block text-xs font-semibold uppercase tracking-wider text-zinc-400">
          Skill Content
        </label>
        <textarea
          value={content}
          onChange={(e) => { setContent(e.target.value); markDirty(); }}
          className="h-64 w-full resize-y rounded-lg border border-zinc-200 px-3 py-2 font-mono text-sm dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100"
          spellCheck={false}
        />
      </div>

      {/* Agent Assignments */}
      <AgentToggleRow
        assignedAgents={skill.agents}
        onToggle={onToggleAgent}
      />
    </div>
  );
}
