"use client"

import { useMemo } from "react"
import { Breadcrumbs } from "@/components/breadcrumbs"
import { PublicInset, PublicPageHeader } from "@/components/public-surface"
import { ManualsPageShell } from "@/components/manuals-page-shell"
import {
  groupManuals,
  getCategories,
  getManufacturers,
} from "@/lib/manuals-catalog"
import type { Manual } from "@/lib/manuals-types"

interface ManualsPageExperienceProps {
  initialManuals: Manual[]
}

export function ManualsPageExperience({
  initialManuals,
}: ManualsPageExperienceProps) {
  const groupedManuals = useMemo(
    () => groupManuals(initialManuals),
    [initialManuals]
  )
  const manufacturers = useMemo(
    () => getManufacturers(initialManuals),
    [initialManuals]
  )
  const categories = useMemo(
    () => getCategories(initialManuals),
    [initialManuals]
  )

  return (
    <>
      <Breadcrumbs
        className="mb-6"
        items={[{ label: "Manuals", href: "/manuals" }]}
      />

      <PublicPageHeader
        eyebrow="Manual Library"
        title="Vending Machine Manuals"
        description="Download manuals, service guides, and parts documentation for hundreds of vending machine models. Browse by manufacturer, machine type, or search by model details."
      >
        <PublicInset className="inline-flex w-fit items-center gap-2 rounded-full px-4 py-2 text-sm text-muted-foreground shadow-none">
          <span>
            <strong>{initialManuals.length}</strong> manuals available from{" "}
            <strong>{manufacturers.length}</strong> manufacturers
          </span>
        </PublicInset>
      </PublicPageHeader>

      <div className="mt-8 md:mt-10">
        <ManualsPageShell
          manuals={initialManuals}
          groupedManuals={groupedManuals}
          manufacturers={manufacturers}
          categories={categories}
        />
      </div>
    </>
  )
}