import Link from "next/link";
import { listAllCollections } from "@/lib/db/queries";
import { createCollectionAction } from "@/app/actions/collections";
import { FolderHeart, Plus, RectangleVertical, RectangleHorizontal } from "lucide-react";
import { ReorderableCollectionsIndex } from "@/components/collections/ReorderableCollectionsIndex";
import { cn } from "@/lib/utils";

export const dynamic = "force-dynamic";

type View = "portrait" | "landscape";

export default async function CollectionsPage({
  searchParams,
}: {
  searchParams: Promise<Record<string, string | string[] | undefined>>;
}) {
  const sp = await searchParams;
  const view: View = sp.view === "portrait" ? "portrait" : "landscape";
  const items = listAllCollections();
  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">Collection</h1>
          <p className="text-[var(--color-fg-dim)] mt-1">{items.length} total</p>
        </div>
        <div className="flex items-center gap-2">
          <form action={createCollectionAction} className="flex items-center gap-2">
            <input
              name="name"
              placeholder="New Collection Name"
              required
              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 className="flex items-center rounded-lg glass overflow-hidden text-xs">
            <Link
              href="/collection"
              className={cn(
                "flex items-center gap-1 px-2.5 py-1.5",
                view === "landscape"
                  ? "bg-[var(--color-cyan)] text-black font-medium"
                  : "text-[var(--color-fg-dim)] hover:text-[var(--color-fg)] hover:bg-[var(--color-glass)]",
              )}
              title="Landscape layout"
            >
              <RectangleHorizontal className="w-3.5 h-3.5" /> L
            </Link>
            <Link
              href="/collection?view=portrait"
              className={cn(
                "flex items-center gap-1 px-2.5 py-1.5",
                view === "portrait"
                  ? "bg-[var(--color-cyan)] text-black font-medium"
                  : "text-[var(--color-fg-dim)] hover:text-[var(--color-fg)] hover:bg-[var(--color-glass)]",
              )}
              title="Portrait layout"
            >
              <RectangleVertical className="w-3.5 h-3.5" /> P
            </Link>
          </div>
        </div>
      </div>

      {items.length === 0 ? (
        <div className="glass rounded-2xl p-card text-center">
          <FolderHeart className="w-8 h-8 mx-auto text-[var(--color-fg-dim)] mb-label" />
          <p className="text-[var(--color-fg-dim)]">No collections yet.</p>
        </div>
      ) : (
        <ReorderableCollectionsIndex items={items} view={view} />
      )}
    </div>
  );
}