import { Link, useParams } from 'react-router-dom';
import Breadcrumbs from '../components/Breadcrumbs';
import PackageMissing from '../components/PackageMissing';
import { findPackage } from './bgm';

/**
 * Summary view for a single bgm package: its metadata and counts of parts,
 * surfaces, and setups, each linking to its collection page.
 */
export default function BgmPackagePage() {
  const { id } = useParams<{ id: string }>();
  const pkg = findPackage(id);
  if (!pkg) return <PackageMissing id={id ?? ''} />;

  const partCount = Object.keys(pkg.parts).length;
  const surfaceCount = Object.keys(pkg.surfaces).length;
  const setupCount = Object.keys(pkg.setups).length;

  const sections = [
    {
      label: 'Parts',
      count: partCount,
      to: `/bgm/${pkg.meta.id}/parts`,
    },
    {
      label: 'Surfaces',
      count: surfaceCount,
      to: `/bgm/${pkg.meta.id}/surfaces`,
    },
    {
      label: 'Setups',
      count: setupCount,
      to: `/bgm/${pkg.meta.id}/setups`,
    },
  ];

  return (
    <div className="space-y-6">
      <Breadcrumbs
        crumbs={[{ label: 'Board games', to: '/bgm' }, { label: pkg.meta.title ?? pkg.meta.id }]}
      />

      <div>
        <h1 className="text-2xl font-semibold">{pkg.meta.title ?? pkg.meta.id}</h1>
        <p className="mt-1 text-sm text-zinc-400">
          {pkg.meta.designer ? `${pkg.meta.designer} · ` : ''}
          {pkg.meta.players ? `${pkg.meta.players} players · ` : ''}
          {pkg.meta.language}
        </p>
      </div>

      <ul className="grid gap-2 sm:grid-cols-3">
        {sections.map((section) => (
          <li key={section.label}>
            <Link
              to={section.to}
              className="block rounded-lg border border-zinc-800 bg-zinc-900 p-3 hover:border-zinc-600"
            >
              <div className="font-medium">{section.label}</div>
              <div className="mt-1 text-sm text-zinc-400">{section.count}</div>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}