"use client";

import Link from "next/link";
import {
  Combine,
  Crop,
  FileImage,
  FileOutput,
  FileText,
  Hash,
  Image as ImageIcon,
  Layers,
  Lock,
  Minimize2,
  PenSquare,
  Plus,
  RotateCw,
  ScanText,
  Scaling,
  Scissors,
  ShieldOff,
  SplitSquareVertical,
  Stamp,
  Trash2,
  Type,
} from "lucide-react";
import { SiteHeader } from "@/components/site-header";
import { CATEGORY_LABELS, TOOL_CONFIGS, type ToolConfig } from "@/lib/tool-configs";

const TOOL_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
  editor: PenSquare,
  "merge-pdf": Combine,
  "split-pdf": SplitSquareVertical,
  "compress-pdf": Minimize2,
  "rotate-pdf": RotateCw,
  "delete-pages": Trash2,
  "extract-pages": Scissors,
  "rearrange-pages": Layers,
  "add-blank-page": Plus,
  watermark: Stamp,
  "header-footer": Type,
  "page-number": Hash,
  "crop-pdf": Crop,
  "resize-pages": Scaling,
  "protect-pdf": Lock,
  "unlock-pdf": ShieldOff,
  "jpg-to-pdf": ImageIcon,
  "pdf-to-jpg": FileImage,
  "pdf-to-png": FileImage,
  "txt-to-pdf": FileText,
  "pdf-to-txt": FileOutput,
  ocr: ScanText,
};

interface DisplayTool {
  slug: string;
  name: string;
  description: string;
  category: ToolConfig["category"];
}

const mergeTool: DisplayTool = {
  slug: "merge-pdf",
  name: "Merge PDF",
  description: "Combine multiple PDFs into one file in the order you choose.",
  category: "organize",
};

const editorTool: DisplayTool = {
  slug: "editor",
  name: "Visual PDF Editor",
  description: "Edit PDFs like in Canva — text, images, shapes, signatures, tables, QR codes and more.",
  category: "edit",
};

const allTools: DisplayTool[] = [mergeTool, editorTool, ...TOOL_CONFIGS];
const categories = ["organize", "edit", "secure", "convert", "ocr"] as const;

export default function ToolsIndexPage() {
  return (
    <div className="min-h-screen bg-slate-50 dark:bg-slate-900">
      <SiteHeader />
      <main className="mx-auto max-w-6xl px-4 py-10">
        <div className="mb-10 text-center">
          <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">All PDF tools</h1>
          <p className="mt-2 text-slate-500 dark:text-slate-400">
            Every tool is free. Pick one and get started — no watermarks, no limits games.
          </p>
        </div>

        <div className="space-y-10">
          {categories.map((category) => {
            const tools = allTools.filter((t) => t.category === category);
            if (tools.length === 0) return null;
            return (
              <section key={category}>
                <h2 className="mb-4 text-lg font-semibold text-slate-700 dark:text-slate-300">
                  {CATEGORY_LABELS[category]}
                </h2>
                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                  {tools.map((tool) => {
                    const Icon = TOOL_ICONS[tool.slug] ?? FileText;
                    return (
                      <Link
                        key={tool.slug}
                        href={tool.slug === "editor" ? "/editor" : `/tools/${tool.slug}`}
                        className="group rounded-lg border border-slate-200 bg-white p-5 shadow-sm transition-all hover:-translate-y-0.5 hover:border-brand-300 hover:shadow-md dark:border-slate-700 dark:bg-slate-800 dark:hover:border-brand-600"
                      >
                        <Icon className="h-7 w-7 text-brand-600 transition-transform group-hover:scale-110" />
                        <h3 className="mt-3 font-semibold text-slate-900 dark:text-slate-100">{tool.name}</h3>
                        <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">{tool.description}</p>
                      </Link>
                    );
                  })}
                </div>
              </section>
            );
          })}
        </div>
      </main>
    </div>
  );
}