"use client";

import { useState } from "react";
import Link from "next/link";
import { ChevronRight, ChevronDown, Search, X } from "lucide-react";
import { useSkills } from "@/lib/hooks";
import type { SkillSummary } from "@/lib/types";

export default function SkillsPage() {
  const { data, isLoading } = useSkills();
  const [search, setSearch] = useState("");
  const [collapsed, setCollapsed] = useState<Set<string>>(new Set());

  const skills = data?.skills || [];
  const categories = [...new Set(skills.map((s) => s.category || "uncategorized"))].sort();

  const filtered = search
    ? skills.filter((s) => s.name.toLowerCase().includes(search.toLowerCase()) || s.description.toLowerCase().includes(search.toLowerCase()))
    : skills;

  const grouped = categories
    .map((cat) => ({ category: cat, skills: filtered.filter((s) => (s.category || "uncategorized") === cat) }))
    .filter((g) => g.skills.length > 0);

  const toggle = (cat: string) => {
    setCollapsed((prev) => {
      const next = new Set(prev);
      next.has(cat) ? next.delete(cat) : next.add(cat);
      return next;
    });
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h1 className="text-xl font-semibold" style={{ color: "var(--text-1)" }}>Skills</h1>
        <span className="text-[12px]" style={{ color: "var(--text-3)" }}>{skills.length}</span>
      </div>

      <div className="relative">
        <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2" style={{ color: "var(--text-3)" }} />
        <input
          type="text"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          placeholder="Filter..."
          className="w-full pl-9 pr-9 py-2.5 rounded-xl text-sm outline-none transition-colors"
          style={{ background: "var(--bg-raised)", border: "1px solid var(--border)", color: "var(--text-1)" }}
        />
        {search && (
          <button onClick={() => setSearch("")} className="absolute right-3 top-1/2 -translate-y-1/2" style={{ color: "var(--text-3)" }}>
            <X size={16} />
          </button>
        )}
      </div>

      {isLoading ? (
        <div className="space-y-2">{[...Array(5)].map((_, i) => <div key={i} className="card p-4 animate-pulse"><div className="h-4 rounded w-3/4" style={{ background: "var(--bg-hover)" }} /></div>)}</div>
      ) : (
        <div className="space-y-3">
          {grouped.map(({ category, skills }) => {
            const isCollapsed = collapsed.has(category) && !search;
            return (
              <div key={category}>
                <button
                  onClick={() => toggle(category)}
                  className="flex items-center gap-1.5 w-full text-left mb-1.5 px-1 active:opacity-70"
                >
                  {isCollapsed ? (
                    <ChevronRight size={14} style={{ color: "var(--text-3)" }} />
                  ) : (
                    <ChevronDown size={14} style={{ color: "var(--text-3)" }} />
                  )}
                  <span className="section-label">{category}</span>
                  <span className="text-[10px] ml-1" style={{ color: "var(--text-3)" }}>{skills.length}</span>
                </button>
                {!isCollapsed && skills.map((s) => (
                  <Link key={s.name} href={"/skills/" + s.name}>
                    <div className="flex items-center gap-3 py-2.5 px-1 border-b border-white/[0.04] active:bg-white/[0.02] transition-colors">
                      <div className="flex-1 min-w-0">
                        <div className="text-[14px]" style={{ color: "var(--text-1)" }}>{s.name}</div>
                        <div className="text-[12px] line-clamp-1" style={{ color: "var(--text-3)" }}>{s.description}</div>
                      </div>
                      <ChevronRight size={16} style={{ color: "var(--text-3)" }} />
                    </div>
                  </Link>
                ))}
              </div>
            );
          })}
          {grouped.length === 0 && (
            <p className="text-sm py-8 text-center" style={{ color: "var(--text-3)" }}>No skills match &ldquo;{search}&rdquo;</p>
          )}
        </div>
      )}
    </div>
  );
}