import { Edit, FileCode, Plus, Puzzle, RefreshCw, Search, Trash2, UserCheck } from "lucide-react";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { AgentIdenticon } from "../components/AgentIdenticon";
import { Button } from "../components/ui/button";
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "../components/ui/dialog";
import { Input } from "../components/ui/input";
import { Label } from "../components/ui/label";
import { Textarea } from "../components/ui/textarea";
import { useAgents, useUpdateAgent } from "../hooks/useAgents";
import { useCreateSkill, useDeleteSkill, useImportSkill, useSkill, useSkills, useUpdateSkill } from "../hooks/useSkills";

export function SkillsPage() {
  const { skills, loading: skillsLoading, refresh: refreshSkills } = useSkills();
  const { agents, refresh: refreshAgents } = useAgents();
  const updateAgent = useUpdateAgent();

  const createSkillMutation = useCreateSkill();
  const updateSkillMutation = useUpdateSkill();
  const deleteSkillMutation = useDeleteSkill();
  const importSkillMutation = useImportSkill();

  const [selectedSkillId, setSelectedSkillId] = useState<string | null>(null);
  const { skill: selectedSkill, loading: skillLoading } = useSkill(selectedSkillId ?? undefined);

  const [searchQuery, setSearchQuery] = useState("");
  const [activeTab, setActiveTab] = useState<"content" | "assign">("content");

  // Dialog states
  const [importOpen, setImportOpen] = useState(false);
  const [importRef, setImportRef] = useState("");

  const [createOpen, setCreateOpen] = useState(false);
  const [editOpen, setEditOpen] = useState(false);

  // Form states
  const [formId, setFormId] = useState("");
  const [formName, setFormName] = useState("");
  const [formDesc, setFormDesc] = useState("");
  const [formContent, setFormContent] = useState("");

  // Agent updating tracking by agent ID
  const [updatingAgentId, setUpdatingAgentId] = useState<string | null>(null);

  // Default selection
  useEffect(() => {
    if (skills.length > 0 && !selectedSkillId) {
      setSelectedSkillId(skills[0].id);
    }
  }, [skills, selectedSkillId]);

  const filteredSkills = skills.filter(
    (s) =>
      s.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
      s.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      (s.description || "").toLowerCase().includes(searchQuery.toLowerCase()),
  );

  const handleImport = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!importRef.trim()) return;
    try {
      await importSkillMutation.mutateAsync(importRef.trim());
      toast.success("Skill imported successfully!");
      setImportOpen(false);
      setImportRef("");
      refreshSkills();
    } catch (err: any) {
      toast.error(err.message || "Failed to import skill");
    }
  };

  const handleCreate = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!formId.trim() || !formName.trim() || !formContent.trim()) {
      toast.error("Please fill in ID, Name, and Content");
      return;
    }
    try {
      const newSkill = await createSkillMutation.mutateAsync({
        id: formId.trim(),
        name: formName.trim(),
        description: formDesc.trim() || undefined,
        content: formContent.trim(),
      });
      toast.success("Skill created successfully!");
      setCreateOpen(false);
      clearForm();
      setSelectedSkillId(newSkill.id);
      refreshSkills();
    } catch (err: any) {
      toast.error(err.message || "Failed to create skill");
    }
  };

  const handleEdit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedSkillId) return;
    try {
      await updateSkillMutation.mutateAsync({
        id: selectedSkillId,
        body: {
          name: formName.trim(),
          description: formDesc.trim() || null,
          content: formContent.trim(),
        },
      });
      toast.success("Skill updated successfully!");
      setEditOpen(false);
      clearForm();
      refreshSkills();
    } catch (err: any) {
      toast.error(err.message || "Failed to update skill");
    }
  };

  const handleDelete = async (id: string) => {
    if (!confirm("Are you sure you want to delete this skill? This will not remove it from agents automatically but they won't be able to fetch it."))
      return;
    try {
      await deleteSkillMutation.mutateAsync(id);
      toast.success("Skill deleted successfully!");
      setSelectedSkillId(null);
      refreshSkills();
    } catch (err: any) {
      toast.error(err.message || "Failed to delete skill");
    }
  };

  const handleToggleAssign = async (agent: any, isChecked: boolean) => {
    if (!selectedSkillId) return;
    setUpdatingAgentId(agent.id);
    try {
      const currentSkills = agent.skills || [];
      const nextSkills = isChecked
        ? [...currentSkills.filter((s: string) => s !== selectedSkillId), selectedSkillId]
        : currentSkills.filter((s: string) => s !== selectedSkillId);

      await updateAgent.mutateAsync({
        id: agent.id,
        body: { skills: nextSkills },
      });
      toast.success(isChecked ? `Assigned to agent ${agent.name}` : `Removed from agent ${agent.name}`);
      refreshAgents();
    } catch (err: any) {
      toast.error(err.message || "Failed to update agent skills");
    } finally {
      setUpdatingAgentId(null);
    }
  };

  const clearForm = () => {
    setFormId("");
    setFormName("");
    setFormDesc("");
    setFormContent("");
  };

  const openEdit = () => {
    if (!selectedSkill) return;
    setFormName(selectedSkill.name);
    setFormDesc(selectedSkill.description || "");
    setFormContent(selectedSkill.content);
    setEditOpen(true);
  };

  const latestAgents = agents.filter((a) => a.version === "latest");

  return (
    <div className="flex flex-1 overflow-hidden h-full">
      {/* Left panel: List */}
      <div className="w-80 flex-shrink-0 border-r border-border bg-surface-secondary flex flex-col h-full">
        <div className="p-4 border-b border-border space-y-3">
          <div className="flex items-center justify-between">
            <h1 className="text-xl font-bold text-content-primary flex items-center gap-2">
              <Puzzle className="size-5 text-accent" />
              Skills
            </h1>
            <div className="flex gap-1.5">
              <Button variant="outline" size="sm" onClick={() => setImportOpen(true)} className="h-8 text-xs px-2.5 font-medium">
                Import
              </Button>
              <Button
                size="sm"
                onClick={() => {
                  clearForm();
                  setCreateOpen(true);
                }}
                className="h-8 text-xs px-2.5 bg-accent hover:opacity-90 text-surface-primary"
              >
                <Plus className="size-3.5 mr-1" />
                Create
              </Button>
            </div>
          </div>
          <div className="relative">
            <Search className="absolute left-2.5 top-2.5 size-4 text-content-tertiary" />
            <Input
              type="search"
              placeholder="Search skills..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-8 h-9 text-xs"
            />
          </div>
        </div>

        <div className="flex-1 overflow-y-auto p-2 space-y-1">
          {skillsLoading ? (
            <div className="space-y-2 p-2">
              {[0, 1, 2, 3].map((i) => (
                <div key={i} className="h-16 rounded-md bg-surface-primary/40 animate-pulse border border-border/55" />
              ))}
            </div>
          ) : filteredSkills.length === 0 ? (
            <div className="text-center py-10 text-xs text-content-tertiary">No skills found.</div>
          ) : (
            filteredSkills.map((s) => (
              <button
                key={s.id}
                onClick={() => setSelectedSkillId(s.id)}
                className={`w-full text-left p-3 rounded-lg border transition-all ${
                  selectedSkillId === s.id ? "bg-accent/10 border-accent/40 shadow-xs" : "bg-surface-primary hover:bg-surface-tertiary border-border"
                }`}
              >
                <div className="flex justify-between items-start gap-2">
                  <div className="font-semibold text-sm text-content-primary truncate">{s.name}</div>
                  <span className="text-[10px] font-mono text-content-tertiary bg-surface-secondary px-1 py-0.5 rounded truncate shrink-0 max-w-[120px]">
                    {s.id.includes("@") ? s.id.split("@")[1] : s.id}
                  </span>
                </div>
                {s.description && <p className="text-xs text-content-tertiary line-clamp-2 mt-1">{s.description}</p>}
              </button>
            ))
          )}
        </div>
      </div>

      {/* Right panel: Details */}
      <div className="flex-1 bg-surface-primary flex flex-col overflow-hidden h-full">
        {selectedSkillId ? (
          skillLoading ? (
            <div className="p-8 space-y-6 flex-1 flex flex-col justify-center items-center">
              <RefreshCw className="size-8 text-accent animate-spin" />
              <p className="text-xs text-content-tertiary font-mono">Loading skill details...</p>
            </div>
          ) : selectedSkill ? (
            <div className="flex flex-col flex-1 overflow-hidden h-full">
              {/* Detail Header */}
              <div className="p-6 border-b border-border bg-surface-secondary/40 flex justify-between items-start gap-4">
                <div className="space-y-1.5 min-w-0">
                  <div className="flex items-center gap-2.5">
                    <h2 className="text-xl font-bold text-content-primary truncate">{selectedSkill.name}</h2>
                    {selectedSkill.id.includes("@") && (
                      <span className="inline-flex items-center gap-1 text-[10px] font-mono font-medium text-success bg-success/10 px-2 py-0.5 rounded-full border border-success/20 shrink-0">
                        Imported
                      </span>
                    )}
                  </div>
                  <div className="font-mono text-xs text-content-tertiary truncate">ID: {selectedSkill.id}</div>
                  {selectedSkill.description && <p className="text-sm text-content-secondary max-w-3xl">{selectedSkill.description}</p>}
                </div>
                <div className="flex items-center gap-2 shrink-0">
                  <Button variant="outline" size="sm" onClick={openEdit} className="h-8 px-3">
                    <Edit className="size-3.5 mr-1" />
                    Edit
                  </Button>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => handleDelete(selectedSkill.id)}
                    className="h-8 px-3 text-error border-error/20 hover:bg-error/10"
                  >
                    <Trash2 className="size-3.5 mr-1" />
                    Delete
                  </Button>
                </div>
              </div>

              {/* Tabs list */}
              <div className="border-b border-border px-6 flex bg-surface-secondary/20">
                <button
                  onClick={() => setActiveTab("content")}
                  className={`py-3 px-4 font-mono text-xs font-medium border-b-2 transition-all ${
                    activeTab === "content" ? "border-accent text-accent" : "border-transparent text-content-tertiary hover:text-content-secondary"
                  }`}
                >
                  <FileCode className="inline size-3.5 mr-1.5 align-text-bottom" />
                  Content (SKILL.md)
                </button>
                <button
                  onClick={() => setActiveTab("assign")}
                  className={`py-3 px-4 font-mono text-xs font-medium border-b-2 transition-all ${
                    activeTab === "assign" ? "border-accent text-accent" : "border-transparent text-content-tertiary hover:text-content-secondary"
                  }`}
                >
                  <UserCheck className="inline size-3.5 mr-1.5 align-text-bottom" />
                  Assign to Agents
                </button>
              </div>

              {/* Tab Contents */}
              <div className="flex-1 overflow-hidden p-6 relative">
                {activeTab === "content" && (
                  <div className="h-full flex flex-col">
                    <div className="flex-1 overflow-auto rounded-lg border border-border bg-surface-secondary p-5 font-mono text-sm leading-relaxed text-content-secondary select-text">
                      <pre className="whitespace-pre-wrap">{selectedSkill.content}</pre>
                    </div>
                  </div>
                )}

                {activeTab === "assign" && (
                  <div className="h-full overflow-y-auto space-y-4 max-w-xl">
                    <h3 className="text-sm font-semibold text-content-primary">Select agents to assign this skill</h3>
                    <div className="space-y-2">
                      {latestAgents.length === 0 ? (
                        <p className="text-xs text-content-tertiary">No active agents found.</p>
                      ) : (
                        latestAgents.map((agent) => {
                          const isAssigned = (agent.skills || []).includes(selectedSkill.id);
                          const isUpdating = updatingAgentId === agent.id;

                          return (
                            <div
                              key={agent.id}
                              className="flex items-center justify-between p-3.5 rounded-lg border border-border bg-surface-secondary hover:bg-surface-tertiary transition-colors"
                            >
                              <div className="flex items-center gap-3">
                                <AgentIdenticon publicKey={agent.id} size={32} />
                                <div>
                                  <div className="font-semibold text-sm text-content-primary">{agent.name}</div>
                                  <div className="text-xs text-content-tertiary font-mono">@{agent.username}</div>
                                </div>
                              </div>
                              <label className="flex items-center gap-2.5 cursor-pointer p-1">
                                {isUpdating ? (
                                  <RefreshCw className="size-4 animate-spin text-accent" />
                                ) : (
                                  <input
                                    type="checkbox"
                                    checked={isAssigned}
                                    onChange={(e) => handleToggleAssign(agent, e.target.checked)}
                                    className="rounded border-border text-accent focus:ring-accent size-4 cursor-pointer accent-accent"
                                  />
                                )}
                              </label>
                            </div>
                          );
                        })
                      )}
                    </div>
                  </div>
                )}
              </div>
            </div>
          ) : (
            <div className="flex-1 flex flex-col justify-center items-center p-8 text-center">
              <Puzzle className="size-12 text-content-tertiary mb-3 animate-pulse" />
              <p className="text-sm text-content-secondary">Skill not found.</p>
            </div>
          )
        ) : (
          <div className="flex-1 flex flex-col justify-center items-center p-8 text-center">
            <Puzzle className="size-16 text-content-tertiary/40 mb-3" />
            <h3 className="text-sm font-semibold text-content-secondary">No skill selected</h3>
            <p className="text-xs text-content-tertiary mt-1 max-w-[260px]">Select a skill from the list, or create/import a new one to begin.</p>
          </div>
        )}
      </div>

      {/* Dialog: Import Skill */}
      <Dialog open={importOpen} onOpenChange={setImportOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Import Skill from GitHub</DialogTitle>
          </DialogHeader>
          <form onSubmit={handleImport} className="space-y-4">
            <div className="space-y-1.5">
              <Label htmlFor="import-ref">GitHub reference</Label>
              <Input
                id="import-ref"
                placeholder="e.g. obra/superpowers@verification-before-completion"
                value={importRef}
                onChange={(e) => setImportRef(e.target.value)}
                className="font-mono text-xs"
              />
              <p className="text-[10px] text-content-tertiary leading-relaxed">
                Format: <code>owner/repo[#branch]@skill-name</code>.<br />
                The source will fetch from <code>raw.githubusercontent.com</code> at the specified path.
              </p>
            </div>
            <DialogFooter>
              <Button type="button" variant="outline" onClick={() => setImportOpen(false)}>
                Cancel
              </Button>
              <Button type="submit" disabled={importSkillMutation.isPending} className="bg-accent hover:opacity-90 text-surface-primary">
                {importSkillMutation.isPending ? "Importing..." : "Import"}
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>

      {/* Dialog: Create Skill */}
      <Dialog open={createOpen} onOpenChange={setCreateOpen}>
        <DialogContent className="sm:max-w-xl">
          <DialogHeader>
            <DialogTitle>Create Custom Skill</DialogTitle>
          </DialogHeader>
          <form onSubmit={handleCreate} className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-1.5">
                <Label htmlFor="skill-id">Skill ID / Identifier</Label>
                <Input
                  id="skill-id"
                  placeholder="e.g. custom-skill-name"
                  value={formId}
                  onChange={(e) => setFormId(e.target.value.toLowerCase().replace(/[^a-z0-9-_]/g, "-"))}
                  className="font-mono text-xs"
                />
              </div>
              <div className="space-y-1.5">
                <Label htmlFor="skill-name">Display Name</Label>
                <Input
                  id="skill-name"
                  placeholder="e.g. My Custom Skill"
                  value={formName}
                  onChange={(e) => setFormName(e.target.value)}
                  className="text-xs"
                />
              </div>
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="skill-desc">Description</Label>
              <Input
                id="skill-desc"
                placeholder="Brief summary of what this skill does"
                value={formDesc}
                onChange={(e) => setFormDesc(e.target.value)}
                className="text-xs"
              />
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="skill-content">SKILL.md Markdown Content</Label>
              <Textarea
                id="skill-content"
                rows={12}
                placeholder={`---\nname: my-custom-skill\ndescription: Brief description\n---\n# Instructions\nDetail the agent instructions here...`}
                value={formContent}
                onChange={(e) => setFormContent(e.target.value)}
                className="font-mono text-xs leading-normal"
              />
            </div>
            <DialogFooter>
              <Button type="button" variant="outline" onClick={() => setCreateOpen(false)}>
                Cancel
              </Button>
              <Button type="submit" disabled={createSkillMutation.isPending} className="bg-accent hover:opacity-90 text-surface-primary">
                {createSkillMutation.isPending ? "Creating..." : "Create"}
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>

      {/* Dialog: Edit Skill */}
      <Dialog open={editOpen} onOpenChange={setEditOpen}>
        <DialogContent className="sm:max-w-xl">
          <DialogHeader>
            <DialogTitle>Edit Skill</DialogTitle>
          </DialogHeader>
          <form onSubmit={handleEdit} className="space-y-4">
            <div className="space-y-1.5">
              <Label htmlFor="edit-name">Display Name</Label>
              <Input
                id="edit-name"
                placeholder="e.g. My Custom Skill"
                value={formName}
                onChange={(e) => setFormName(e.target.value)}
                className="text-xs"
              />
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="edit-desc">Description</Label>
              <Input
                id="edit-desc"
                placeholder="Brief summary of what this skill does"
                value={formDesc}
                onChange={(e) => setFormDesc(e.target.value)}
                className="text-xs"
              />
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="edit-content">SKILL.md Markdown Content</Label>
              <Textarea
                id="edit-content"
                rows={12}
                placeholder="Markdown instructions..."
                value={formContent}
                onChange={(e) => setFormContent(e.target.value)}
                className="font-mono text-xs leading-normal"
              />
            </div>
            <DialogFooter>
              <Button type="button" variant="outline" onClick={() => setEditOpen(false)}>
                Cancel
              </Button>
              <Button type="submit" disabled={updateSkillMutation.isPending} className="bg-accent hover:opacity-90 text-surface-primary">
                {updateSkillMutation.isPending ? "Saving..." : "Save changes"}
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  );
}