import Link from "next/link";
import { listAllTags, listAllTagCategories, type TagSort } from "@/lib/db/queries";
import { createTagAction } from "@/app/actions/tags";
import { Tag, Plus, ArrowDownAZ, Hash } from "lucide-react";
import { cn } from "@/lib/utils";
import { TagImportButton } from "@/components/tag/TagImportButton";
import { TagsList } from "@/components/tag/TagsList";

export const dynamic = "force-dynamic";

export default async function TagsPage({
  searchParams,
}: {
  searchParams: Promise<Record<string, string | string[] | undefined>>;
}) {
  const sp = await searchParams;
  const sort: TagSort = sp.sort === "count" ? "count" : "az";
  const tags = listAllTags(sort);
  const categories = listAllTagCategories("az");
  return (
    <div className="max-w-[1600px] mx-auto px-6 py-6 fade-in">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-3xl font-semibold tracking-tight">Tags</h1>
          <p className="text-[var(--color-fg-dim)] mt-1">{tags.length} total</p>
        </div>
        <div className="flex items-center gap-2">
          <div className="flex items-center rounded-lg glass overflow-hidden text-xs">
            <Link
              href="/tag"
              className={cn(
                "flex items-center gap-1 px-2.5 py-1.5",
                sort === "az"
                  ? "bg-[var(--color-cyan)] text-black font-medium"
                  : "text-[var(--color-fg-dim)] hover:text-[var(--color-fg)] hover:bg-[var(--color-glass)]",
              )}
              title="Sort A → Z"
            >
              <ArrowDownAZ className="w-3.5 h-3.5" /> A-Z
            </Link>
            <Link
              href="/tag?sort=count"
              className={cn(
                "flex items-center gap-1 px-2.5 py-1.5",
                sort === "count"
                  ? "bg-[var(--color-cyan)] text-black font-medium"
                  : "text-[var(--color-fg-dim)] hover:text-[var(--color-fg)] hover:bg-[var(--color-glass)]",
              )}
              title="Sort by image count"
            >
              <Hash className="w-3.5 h-3.5" /> Count
            </Link>
          </div>
          <TagImportButton
            existingTagNames={tags.map((t) => t.name)}
            existingCategoryNames={categories.map((c) => c.name)}
          />
          <form action={createTagAction} className="flex items-center gap-2">
          <input
            name="name"
            placeholder="New tag"
            required
            maxLength={48}
            className="glass rounded-lg px-3 py-1.5 text-sm outline-none focus:border-[var(--color-cyan)] w-56"
          />
          <button className="flex items-center gap-1 text-sm px-3 py-1.5 rounded-lg bg-[var(--color-cyan)] text-black font-medium">
            <Plus className="w-4 h-4" /> Create
          </button>
          </form>
        </div>
      </div>

      {tags.length === 0 ? (
        <div className="glass rounded-2xl p-card text-center">
          <Tag className="w-8 h-8 mx-auto text-[var(--color-fg-dim)] mb-label" />
          <p className="text-[var(--color-fg-dim)]">No tags yet. Create one above or add from any image.</p>
        </div>
      ) : (
        <TagsList tags={tags.map((t) => ({
          id: t.id,
          name: t.name,
          count: t.count,
          categoryId: t.categoryId,
          categoryName: t.categoryName,
          categoryColor: t.categoryColor,
        }))} sort={sort} />
      )}
    </div>
  );
}