"use client";

import Link from "next/link";
import type { Game } from "@/lib/types";
import { GameGrid } from "@/components/GameGrid";
import { SearchBar } from "@/components/SearchBar";
import { ClassicsDropIn } from "@/components/ClassicsDropIn";
import { ContinueRow } from "@/components/ContinueRow";
import { Suspense } from "react";

export function ClassicHome({
  local,
  free,
  results,
  query,
}: {
  local: Game[];
  free: Game[];
  results: Game[] | null;
  query?: string;
}) {
  return (
    <div className="hc-classic-full flex min-h-[100dvh] flex-col">
      <section
        id="library"
        className="hc-library relative flex flex-1 flex-col px-4 pt-6 pb-10 sm:px-8 lg:px-12"
      >
        <div className="mx-auto flex w-full max-w-7xl flex-1 flex-col">
          <div className="flex flex-col gap-4 border-b border-line/60 pb-6 sm:flex-row sm:items-end sm:justify-between">
            <div>
              <h1 className="font-display text-3xl tracking-wide text-foreground sm:text-4xl">
                Library
              </h1>
              <p className="mt-1 text-sm text-muted">Search and play.</p>
            </div>
            <Suspense fallback={null}>
              <SearchBar defaultValue={query ?? ""} />
            </Suspense>
          </div>

          <div className="flex-1 pt-8">
            {results ? (
              <div>
                <h2 className="font-display text-lg tracking-wide">
                  Results for “{query}”
                </h2>
                <div className="mt-6">
                  <GameGrid
                    games={results}
                    emptyMessage="Nothing matched that search."
                  />
                </div>
              </div>
            ) : (
              <>
                <ContinueRow />
                {local.length > 0 && (
                  <div className="mt-10">
                    <div className="mb-6">
                      <h2 className="font-display text-xl tracking-wide sm:text-2xl">
                        Your games
                      </h2>
                      <p className="mt-1 text-sm text-muted">
                        On this machine only.
                      </p>
                    </div>
                    <GameGrid games={local} />
                  </div>
                )}
                <div className="mt-14">
                  <div className="mb-6">
                    <h2 className="font-display text-xl tracking-wide sm:text-2xl">
                      Free to play
                    </h2>
                    <p className="mt-1 text-sm text-muted">
                      Homebrew and public-domain titles.
                    </p>
                  </div>
                  <GameGrid games={free} />
                </div>
                <ClassicsDropIn />
              </>
            )}
          </div>
        </div>
      </section>

      <footer className="hc-bottom-brand relative mt-auto overflow-hidden border-t border-line">
        <div className="hc-hero-glow opacity-40" aria-hidden />
        <div className="hc-hero-scan opacity-30" aria-hidden />
        <div className="relative z-10 mx-auto flex max-w-7xl flex-col gap-6 px-4 py-10 sm:flex-row sm:items-end sm:justify-between sm:px-8 lg:px-12">
          <div>
            <p className="font-display text-[0.6rem] tracking-[0.35em] text-amber uppercase">
              Personal retro cabinet
            </p>
            <p className="mt-2 font-display text-2xl tracking-wide sm:text-3xl">
              HOLLOW<span className="text-amber">CADE</span>
            </p>
            <p className="mt-2 max-w-sm text-sm text-muted">
              Boot theater, local saves, and the cabinet face you pick.
            </p>
          </div>
          <div className="flex flex-wrap gap-3">
            <Link href="/setup/ui" className="btn-primary">
              Change UI
            </Link>
            <Link href="/load" className="btn-ghost">
              Open ROM
            </Link>
            <Link href="/contribute" className="btn-ghost">
              Add public
            </Link>
            <Link href="/profiles" className="btn-ghost">
              Profiles
            </Link>
            <Link href="/settings" className="btn-ghost">
              Settings
            </Link>
          </div>
        </div>
      </footer>
    </div>
  );
}