"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 type {
  InternetPlanCatalogItem,
  InternetInstallationCatalogItem,
  InternetAddonCatalogItem,
} from "@customer-portal/domain/catalog";
import type { AccessModeValue } from "@customer-portal/domain/orders";

interface Props {
  plan: InternetPlanCatalogItem;
  selectedInstallation: InternetInstallationCatalogItem;
  selectedAddonSkus: string[];
  addons: InternetAddonCatalogItem[];
  mode: AccessModeValue | null;
  isTransitioning: boolean;
  onBack: () => void;
  onConfirm: () => void;
}

export function ReviewOrderStep({
  plan,
  selectedInstallation,
  selectedAddonSkus,
  addons,
  mode,
  isTransitioning,
  onBack,
  onConfirm,
}: Props) {
  const selectedAddons = addons.filter(addon => selectedAddonSkus.includes(addon.sku));

  // Calculate display totals from catalog prices
  // Note: BFF will recalculate authoritative pricing
  const monthlyTotal =
    (plan.monthlyPrice ?? 0) +
    (selectedInstallation.monthlyPrice ?? 0) +
    selectedAddons.reduce((sum, addon) => sum + (addon.monthlyPrice ?? 0), 0);

  const oneTimeTotal =
    (plan.oneTimePrice ?? 0) +
    (selectedInstallation.oneTimePrice ?? 0) +
    selectedAddons.reduce((sum, addon) => sum + (addon.oneTimePrice ?? 0), 0);

  return (
    <AnimatedCard
      variant="static"
      className={`p-8 transition-all duration-150 ease-in-out transform ${
        isTransitioning ? "opacity-0 translate-y-2" : "opacity-100 translate-y-0"
      }`}
    >
      <div className="mb-6">
        <StepHeader
          stepNumber={4}
          title="Review Your Order"
          description="Review your configuration and proceed to checkout"
        />
      </div>

      <div className="max-w-lg mx-auto mb-8">
        <OrderSummary
          plan={plan}
          selectedInstallation={selectedInstallation}
          selectedAddons={selectedAddons}
          mode={mode}
          monthlyTotal={monthlyTotal}
          oneTimeTotal={oneTimeTotal}
        />
      </div>

      <div className="flex justify-between pt-6 border-t">
        <Button onClick={onBack} variant="outline" leftIcon={<ArrowLeftIcon className="w-4 h-4" />}>
          Back to Add-ons
        </Button>
        <Button onClick={onConfirm} rightIcon={<ArrowRightIcon className="w-4 h-4" />}>
          Proceed to Checkout
        </Button>
      </div>
    </AnimatedCard>
  );
}

function OrderSummary({
  plan,
  selectedInstallation,
  selectedAddons,
  mode,
  monthlyTotal,
  oneTimeTotal,
}: {
  plan: InternetPlanCatalogItem;
  selectedInstallation: InternetInstallationCatalogItem;
  selectedAddons: InternetAddonCatalogItem[];
  mode: AccessModeValue | null;
  monthlyTotal: number;
  oneTimeTotal: number;
}) {
  return (
    <div className="bg-gradient-to-b from-white to-gray-50 shadow-xl rounded-lg border border-gray-200 p-6">
      {/* Receipt Header */}
      <div className="text-center border-b-2 border-dashed border-gray-300 pb-4 mb-6">
        <h3 className="text-xl font-bold text-gray-900 mb-1">Order Summary</h3>
        <p className="text-sm text-gray-500">Review your configuration</p>
      </div>

      {/* Plan Details */}
      <div className="space-y-3 mb-6">
        <div className="flex justify-between items-start">
          <div>
            <h4 className="font-semibold text-gray-900">{plan.name}</h4>
            <p className="text-sm text-gray-600">Internet Service</p>
            {mode && <p className="text-sm text-gray-600">Access Mode: {mode}</p>}
          </div>
          <div className="text-right">
            <p className="font-semibold text-gray-900">
              ¥{(plan.monthlyPrice ?? 0).toLocaleString()}
            </p>
            <p className="text-xs text-gray-500">per month</p>
          </div>
        </div>
      </div>

      {/* Installation */}
      {(selectedInstallation.monthlyPrice ?? 0) > 0 ||
      (selectedInstallation.oneTimePrice ?? 0) > 0 ? (
        <div className="border-t border-gray-200 pt-4 mb-6">
          <h4 className="font-medium text-gray-900 mb-3">Installation</h4>
          <div className="flex justify-between text-sm">
            <span className="text-gray-600">{selectedInstallation.name}</span>
            <span className="text-gray-900">
              {selectedInstallation.monthlyPrice && selectedInstallation.monthlyPrice > 0 && (
                <>
                  ¥{selectedInstallation.monthlyPrice.toLocaleString()}
                  <span className="text-xs text-gray-500 ml-1">/mo</span>
                </>
              )}
              {selectedInstallation.oneTimePrice && selectedInstallation.oneTimePrice > 0 && (
                <>
                  ¥{selectedInstallation.oneTimePrice.toLocaleString()}
                  <span className="text-xs text-gray-500 ml-1">/once</span>
                </>
              )}
            </span>
          </div>
        </div>
      ) : null}

      {/* Add-ons */}
      {selectedAddons.length > 0 && (
        <div className="border-t border-gray-200 pt-4 mb-6">
          <h4 className="font-medium text-gray-900 mb-3">Add-ons</h4>
          <div className="space-y-2">
            {selectedAddons.map(addon => (
              <div key={addon.sku} className="flex justify-between text-sm">
                <span className="text-gray-600">{addon.name}</span>
                <span className="text-gray-900">
                  {addon.monthlyPrice && addon.monthlyPrice > 0 && (
                    <>
                      ¥{addon.monthlyPrice.toLocaleString()}
                      <span className="text-xs text-gray-500 ml-1">/mo</span>
                    </>
                  )}
                  {addon.oneTimePrice && addon.oneTimePrice > 0 && (
                    <>
                      ¥{addon.oneTimePrice.toLocaleString()}
                      <span className="text-xs text-gray-500 ml-1">/once</span>
                    </>
                  )}
                </span>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Totals */}
      <div className="border-t-2 border-dashed border-gray-300 pt-4 bg-gray-50 -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-gray-900">Monthly Total</span>
            <span className="text-blue-600">¥{monthlyTotal.toLocaleString()}</span>
          </div>
          {oneTimeTotal > 0 && (
            <div className="flex justify-between text-sm">
              <span className="text-gray-600">One-time Total</span>
              <span className="text-orange-600 font-semibold">
                ¥{oneTimeTotal.toLocaleString()}
              </span>
            </div>
          )}
        </div>
      </div>

      {/* Receipt Footer */}
      <div className="text-center mt-6 pt-4 border-t border-gray-200">
        <p className="text-xs text-gray-500">High-speed internet service</p>
      </div>
    </div>
  );
}
