"use client";

import { AnimatedCard } from "@/components/molecules";
import { Button } from "@/components/atoms/button";
import { StepHeader } from "@/components/atoms";
import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/24/outline";
import { formatIsoMonthDay } from "@/shared/utils";
import type { ReviewOrderStepProps } from "../types";

function getAddonAmount(
  addon:
    | {
        billingCycle?: string | undefined;
        monthlyPrice?: number | undefined;
        unitPrice?: number | undefined;
        oneTimePrice?: number | undefined;
      }
    | undefined
): number {
  if (!addon) return 0;
  return addon.billingCycle === "Monthly"
    ? (addon.monthlyPrice ?? addon.unitPrice ?? 0)
    : (addon.oneTimePrice ?? addon.unitPrice ?? 0);
}

export function ReviewOrderStep({
  plan,
  simType,
  eid,
  activationType,
  scheduledActivationDate,
  wantsMnp,
  selectedAddons,
  addons,
  activationFee,
  monthlyTotal,
  oneTimeTotal,
  onBack,
  onConfirm,
  isDefault,
}: ReviewOrderStepProps) {
  return (
    <AnimatedCard variant="static" className="p-8">
      <div className="mb-6">
        <StepHeader
          stepNumber={5}
          title="Review Your Order"
          description="Review your configuration and proceed to checkout"
        />
      </div>

      <div className="max-w-lg mx-auto mb-8 bg-card shadow-[var(--cp-shadow-2)] rounded-lg border border-border p-6">
        <div className="text-center border-b-2 border-dashed border-border/60 pb-4 mb-6">
          <h3 className="text-xl font-bold text-foreground mb-1">Order Summary</h3>
          <p className="text-sm text-muted-foreground">Review your configuration</p>
        </div>

        <div className="space-y-3 mb-6">
          <div className="flex justify-between items-start">
            <div>
              <h4 className="font-semibold text-foreground">{plan.name}</h4>
              <p className="text-sm text-muted-foreground">{plan.simDataSize}</p>
            </div>
            <div className="text-right">
              <p className="font-semibold text-foreground">
                ¥{plan.monthlyPrice?.toLocaleString()}
              </p>
              <p className="text-xs text-muted-foreground">per month</p>
            </div>
          </div>
        </div>

        <div className="border-t border-border pt-4 mb-6">
          <h4 className="font-medium text-foreground mb-3">Configuration</h4>
          <div className="space-y-2 text-sm">
            <div className="flex justify-between">
              <span className="text-muted-foreground">SIM Type:</span>
              <span className="text-foreground">{simType || "Not selected"}</span>
            </div>
            {simType === "eSIM" && eid && (
              <div className="flex justify-between">
                <span className="text-muted-foreground">EID:</span>
                <span className="text-foreground font-mono text-xs">{eid.slice(0, 12)}...</span>
              </div>
            )}
            <div className="flex justify-between">
              <span className="text-muted-foreground">Activation:</span>
              <span className="text-foreground">
                {activationType === "Scheduled" && scheduledActivationDate
                  ? formatIsoMonthDay(scheduledActivationDate)
                  : activationType || "Not selected"}
              </span>
            </div>
            {wantsMnp && (
              <div className="flex justify-between">
                <span className="text-muted-foreground">Number Porting:</span>
                <span className="text-foreground">Requested</span>
              </div>
            )}
          </div>
        </div>

        {selectedAddons.length > 0 && (
          <div className="border-t border-border pt-4 mb-6">
            <h4 className="font-medium text-foreground mb-3">Add-ons</h4>
            <div className="space-y-2">
              {selectedAddons.map(addonSku => {
                const addon = addons.find(a => a.sku === addonSku);
                const addonAmount = getAddonAmount(addon);
                return (
                  <div key={addonSku} className="flex justify-between text-sm">
                    <span className="text-muted-foreground">{addon?.name || addonSku}</span>
                    <span className="text-foreground">
                      ¥{addonAmount.toLocaleString()}
                      <span className="text-xs text-muted-foreground ml-1">
                        /{addon?.billingCycle === "Monthly" ? "mo" : "once"}
                      </span>
                    </span>
                  </div>
                );
              })}
            </div>
          </div>
        )}

        {activationFee && (
          <div className="border-t border-border pt-4 mb-6">
            <h4 className="font-medium text-foreground mb-3">One-time Fees</h4>
            <div className="space-y-2">
              <div className="flex justify-between text-sm">
                <span className="text-muted-foreground">{activationFee.name}</span>
                <span className="text-foreground">¥{activationFee.amount.toLocaleString()}</span>
              </div>
              {isDefault && (
                <p className="text-xs text-muted-foreground">
                  Required for all new SIM activations
                </p>
              )}
            </div>
          </div>
        )}

        <div className="border-t-2 border-dashed border-border/60 pt-4 bg-muted -mx-6 px-6 py-4 rounded-b-lg">
          <div className="space-y-2">
            <div className="flex justify-between text-xl font-bold">
              <span className="text-foreground">Monthly Total</span>
              <span className="text-primary">¥{monthlyTotal.toLocaleString()}</span>
            </div>
            {oneTimeTotal > 0 && (
              <div className="flex justify-between text-sm">
                <span className="text-muted-foreground">One-time Total</span>
                <span className="text-warning font-semibold">¥{oneTimeTotal.toLocaleString()}</span>
              </div>
            )}
            <p className="text-xs text-muted-foreground pt-2">Prices exclude 10% consumption tax</p>
          </div>
        </div>
      </div>

      <div className="max-w-lg mx-auto mb-6 bg-info/10 border border-info/25 rounded-lg p-4">
        <p className="text-sm text-foreground">
          <span className="font-medium">Next steps after checkout:</span>{" "}
          <span className="text-muted-foreground">
            We'll review your order and ID verification within 1-2 business days. You'll receive an
            email once approved.
          </span>
        </p>
      </div>

      <div className="flex justify-between items-center pt-6 border-t border-border">
        <Button
          onClick={onBack}
          variant="outline"
          size="lg"
          className="px-8 py-4 text-lg"
          leftIcon={<ArrowLeftIcon className="w-5 h-5" />}
        >
          Back to Number Porting
        </Button>
        <Button
          onClick={onConfirm}
          size="lg"
          className="px-12 py-4 text-lg font-semibold"
          rightIcon={<ArrowRightIcon className="w-5 h-5" />}
        >
          Proceed to Checkout
        </Button>
      </div>
    </AnimatedCard>
  );
}
