"use client";

import { PageLayout } from "@/components/templates/PageLayout";
import { ProgressSteps } from "@/components/molecules";
import { ServicesBackLink } from "@/features/services/components/base/ServicesBackLink";
import { useServicesBasePath } from "@/features/services/hooks/useServicesBasePath";
import { DevicePhoneMobileIcon } from "@heroicons/react/24/outline";
import type { UseSimConfigureResult } from "@/features/services/hooks/useSimConfigure";
import {
  LoadingSkeleton,
  PlanNotFound,
  PlanCard,
  PlatinumNotice,
  SimTypeStep,
  ActivationStep,
  AddonsStep,
  NumberPortingStep,
  ReviewOrderStep,
  getRequiredActivationFee,
  resolveOneTimeCharge,
  formatActivationFeeDetails,
  calculateOrderTotals,
} from "./configure";

type Props = UseSimConfigureResult & {
  onConfirm: () => void;
};

export function SimConfigureView({
  plan,
  activationFees,
  addons,
  loading,
  simType,
  setSimType,
  eid,
  setEid,
  selectedAddons,
  setSelectedAddons,
  activationType,
  setActivationType,
  scheduledActivationDate,
  setScheduledActivationDate,
  wantsMnp,
  setWantsMnp,
  mnpData,
  setMnpData,
  validate,
  currentStep,
  setCurrentStep,
  onConfirm,
}: Props) {
  const servicesBasePath = useServicesBasePath();

  if (loading) {
    return <LoadingSkeleton />;
  }

  if (!plan) {
    return <PlanNotFound />;
  }

  const requiredActivationFee = getRequiredActivationFee(activationFees);
  const activationFeeAmount = resolveOneTimeCharge(requiredActivationFee);
  const activationFeeDetails = formatActivationFeeDetails(
    requiredActivationFee,
    activationFeeAmount
  );
  const totals = calculateOrderTotals(plan, selectedAddons, addons, activationFeeAmount);

  const steps = [
    { number: 1, title: "SIM Type", completed: currentStep > 1 },
    { number: 2, title: "Activation", completed: currentStep > 2 },
    { number: 3, title: "Add-ons", completed: currentStep > 3 },
    { number: 4, title: "Number Porting", completed: currentStep > 4 },
  ];

  const renderStep = () => {
    switch (currentStep) {
      case 1:
        return (
          <SimTypeStep
            simType={simType}
            setSimType={setSimType}
            eid={eid}
            setEid={setEid}
            validate={validate}
            onNext={() => setCurrentStep(2)}
          />
        );
      case 2:
        return (
          <ActivationStep
            activationType={activationType}
            setActivationType={setActivationType}
            scheduledActivationDate={scheduledActivationDate}
            setScheduledActivationDate={setScheduledActivationDate}
            activationFee={activationFeeDetails}
            validate={validate}
            onNext={() => setCurrentStep(3)}
            onBack={() => setCurrentStep(1)}
          />
        );
      case 3:
        return (
          <AddonsStep
            addons={addons}
            selectedAddons={selectedAddons}
            setSelectedAddons={setSelectedAddons}
            planType={plan.simPlanType ?? ""}
            onNext={() => setCurrentStep(4)}
            onBack={() => setCurrentStep(2)}
          />
        );
      case 4:
        return (
          <NumberPortingStep
            wantsMnp={wantsMnp}
            setWantsMnp={setWantsMnp}
            mnpData={mnpData}
            setMnpData={setMnpData}
            activationType={activationType}
            validate={validate}
            onNext={() => setCurrentStep(5)}
            onBack={() => setCurrentStep(3)}
          />
        );
      case 5:
        return (
          <ReviewOrderStep
            plan={plan}
            simType={simType}
            eid={eid}
            activationType={activationType}
            scheduledActivationDate={scheduledActivationDate}
            wantsMnp={wantsMnp}
            selectedAddons={selectedAddons}
            addons={addons}
            activationFee={activationFeeDetails}
            monthlyTotal={totals.monthly}
            oneTimeTotal={totals.oneTime}
            onBack={() => setCurrentStep(4)}
            onConfirm={onConfirm}
            isDefault={requiredActivationFee?.catalogMetadata?.isDefault}
          />
        );
      default:
        return null;
    }
  };

  return (
    <PageLayout
      title={`Configure ${plan.name}`}
      description="Customize your mobile service"
      icon={<DevicePhoneMobileIcon className="h-6 w-6" />}
    >
      <div className="max-w-4xl mx-auto space-y-8">
        <ServicesBackLink href={`${servicesBasePath}/sim`} label="Back to SIM Plans" />
        <PlanCard plan={plan} />
        <ProgressSteps steps={steps} currentStep={currentStep} />
        <PlatinumNotice planName={plan.name} />
        <div className="space-y-8">{renderStep()}</div>
      </div>
    </PageLayout>
  );
}
