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,
  nearbyVerifiedProviders,
} 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 toggles the selection in the
  // basket — adds when absent, removes when present. The button's visible
  // state (Compare / Added + ✓) reflects `isSelectedInCart` below. The
  // floating CompareBar (mounted in App.tsx) handles navigation once the
  // user has 2+ packages selected.
  const handleCompare = () => {
    if (selectedId) basket.toggle(makeBasketKey(provider.id, selectedId));
  };

  // When the selected package is already in the basket, PackageDetail swaps
  // the Compare button into its "In comparison" selected state.
  const isSelectedInCart = selectedId ? basket.has(makeBasketKey(provider.id, selectedId)) : false;

  // Tier-3 / tier-2 providers show verified-provider MiniCards instead of
  // "more from this provider". Exclude the current provider from the
  // "similar" list in case we ever add a verified id that collides.
  const secondaryList =
    provider.tier === 'verified'
      ? { kind: 'same-provider-more' as const, packages: bundle.other }
      : {
          kind: 'nearby-verified' as const,
          providers: nearbyVerifiedProviders.filter((p) => p.id !== provider.id),
        };

  const secondaryHasItems =
    secondaryList.kind === 'same-provider-more'
      ? secondaryList.packages.length > 0
      : secondaryList.providers.length > 0;

  return (
    <PackagesStep
      provider={toPackagesStepProvider(provider)}
      providerTier={provider.tier}
      packages={bundle.matching}
      secondaryList={secondaryHasItems ? 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}
      isSelectedPackageInCart={isSelectedInCart}
      onNearbyProviderClick={(id) => navigate(`/providers/${id}/packages`)}
      onProviderClick={() => alert('Provider profile — not built in this demo slice.')}
      onBack={() => navigate('/')}
      navigation={demoNav}
    />
  );
}