"use client";

import { useState } from "react";
import Link from "next/link";
import { ChevronRight, 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 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);

  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-5">
          {grouped.map(({ category, skills }) => (
            <div key={category}>
              <div className="section-label mb-2">{category}</div>
              {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 "{search}"</p>
          )}
        </div>
      )}
    </div>
  );
}
