"use client";

import { useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import type { SimCatalogProduct } from "@customer-portal/domain/services";
import { usePublicSimCatalog } from "@/features/services/hooks";
import { useServicesBasePath } from "@/features/services/hooks/useServicesBasePath";
import {
  SimPlansContent,
  type SimPlansTab,
} from "@/features/services/components/sim/SimPlansContent";

/**
 * Public SIM Plans View
 *
 * Displays SIM plans for unauthenticated users.
 * Uses the shared plans UI, with a public navigation handler.
 */
export function PublicSimPlansView() {
  const router = useRouter();
  const servicesBasePath = useServicesBasePath();
  const { data, isLoading, error } = usePublicSimCatalog();
  const plans: SimCatalogProduct[] = useMemo(() => data?.plans ?? [], [data?.plans]);
  const [activeTab, setActiveTab] = useState<SimPlansTab>("data-voice");

  const handleSelectPlan = (planSku: string) => {
    router.push(`${servicesBasePath}/sim/configure?planSku=${encodeURIComponent(planSku)}`);
  };

  return (
    <SimPlansContent
      variant="public"
      plans={plans}
      isLoading={isLoading}
      error={error}
      activeTab={activeTab}
      onTabChange={setActiveTab}
      onSelectPlan={handleSelectPlan}
    />
  );
}

export default PublicSimPlansView;