"use client";

import { useRouter } from "next/navigation";
import { logger } from "@/lib/logger";
import { useInternetConfigure } from "@/features/catalog/hooks/useInternetConfigure";
import { InternetConfigureView as InternetConfigureInnerView } from "@/features/catalog/components/internet/InternetConfigureView";

export function InternetConfigureContainer() {
  const router = useRouter();
  const vm = useInternetConfigure();

  // Debug: log current state
  logger.debug("InternetConfigure state", {
    plan: vm.plan?.sku,
    mode: vm.mode,
    installation: vm.selectedInstallation?.sku,
    addons: vm.selectedAddonSkus,
  });

  const handleConfirm = () => {
    logger.debug("handleConfirm called, current state", {
      plan: vm.plan?.sku,
      mode: vm.mode,
      installation: vm.selectedInstallation?.sku,
      selectedInstallationSku: vm.selectedInstallation?.sku,
    });

    const params = vm.buildCheckoutSearchParams();
    if (!params) {
      logger.error("Cannot proceed to checkout: missing required configuration", {
        plan: vm.plan?.sku,
        mode: vm.mode,
        installation: vm.selectedInstallation?.sku,
      });

      // Determine what's missing
      const missingItems: string[] = [];
      if (!vm.plan) missingItems.push("plan selection");
      if (!vm.mode) missingItems.push("access mode");
      if (!vm.selectedInstallation) missingItems.push("installation option");

      alert(`Please complete the following before proceeding:\n- ${missingItems.join("\n- ")}`);
      return;
    }

    logger.debug("Navigating to checkout with params", {
      params: params.toString(),
    });
    router.push(`/checkout?${params.toString()}`);
  };

  return <InternetConfigureInnerView {...vm} onConfirm={handleConfirm} />;
}

export default InternetConfigureContainer;
