'use client'

import { useMemo } from 'react'
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 (
    <>
      <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>
    </>
  )
}