import { useState } from 'react';
import { Navigate, useNavigate, useParams } from 'react-router-dom';
import { PackagesStep } from '../../../../components/pages/PackagesStep';
import { providersById, toPackagesStepProvider } from '../../../shared/fixtures/providers';
import {
  packagesByProvider,
  makeBasketKey,
  nearbyVerifiedSamples,
} from '../../../shared/fixtures/packages';
import { useComparisonBasket } from '../../../shared/state/useComparisonBasket';
import { demoNav } from '../DemoNav';

export function PackagesRoute() {
  const { providerId = '' } = useParams();
  const navigate = useNavigate();
  const provider = providersById[providerId];
  const bundle = packagesByProvider[providerId];
  const basket = useComparisonBasket();

  const [selectedId, setSelectedId] = useState<string | null>(bundle?.matching[0]?.id ?? null);

  if (!provider || !bundle) return <Navigate to="/" replace />;

  // Compare CTA on the PackageDetail panel just adds the selection to the
  // basket. The floating CompareBar (mounted in App.tsx) handles navigation
  // once the user has 2+ packages selected.
  const handleCompare = () => {
    if (selectedId) basket.add(makeBasketKey(provider.id, selectedId));
  };

  // Tier-3 / tier-2 providers show "nearby verified" cards instead of
  // "more from this provider".
  const secondaryList =
    provider.tier === 'verified'
      ? { kind: 'same-provider-more' as const, packages: bundle.other }
      : { kind: 'nearby-verified' as const, packages: nearbyVerifiedSamples };

  return (
    <PackagesStep
      provider={toPackagesStepProvider(provider)}
      providerTier={provider.tier}
      packages={bundle.matching}
      secondaryList={secondaryList.packages.length > 0 ? secondaryList : undefined}
      selectedPackageId={selectedId}
      onSelectPackage={setSelectedId}
      onArrange={() =>
        alert(
          provider.tier === 'verified'
            ? 'Make Arrangement — would route to next wizard step.'
            : 'Make an enquiry — would open enquiry form.',
        )
      }
      onCompare={handleCompare}
      onNearbyPackageClick={(key) => {
        const [otherProviderId] = key.split(':');
        if (otherProviderId) navigate(`/providers/${otherProviderId}/packages`);
      }}
      onProviderClick={() => alert('Provider profile — not built in this demo slice.')}
      onBack={() => navigate('/')}
      navigation={demoNav}
    />
  );
}
