import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/24/outline";
import type { CatalogProductBase } from "@customer-portal/domain/catalog";
import { useRouter } from "next/navigation";
import { Button } from "@/components/atoms/button";

interface OrderSummaryProps {
  plan: {
    name: string;
    monthlyPrice?: number | null;
    internetPlanTier?: string | null;
  };

  // Selected items
  selectedAddons?: CatalogProductBase[];
  activationFees?: CatalogProductBase[];

  // Configuration details
  configDetails?: Array<{
    label: string;
    value: string;
  }>;

  // Additional info lines
  infoLines?: string[];

  // Totals
  monthlyTotal: number;
  oneTimeTotal?: number;
  hasMissingPrices?: boolean;

  // Actions (optional)
  onContinue?: () => void;
  backUrl?: string;
  backLabel?: string;
  continueLabel?: string;
  showActions?: boolean;

  // Styling
  variant?: "simple" | "enhanced";
  disabled?: boolean;
}

export function OrderSummary({
  plan,
  selectedAddons = [],
  activationFees = [],
  configDetails = [],
  infoLines = [],
  monthlyTotal,
  oneTimeTotal = 0,
  hasMissingPrices = false,
  onContinue,
  backUrl,
  backLabel = "Back to Plans",
  continueLabel = "Continue to Checkout",
  showActions = true,
  variant = "simple",
  disabled = false,
}: OrderSummaryProps) {
  const router = useRouter();
  const containerClass =
    variant === "enhanced"
      ? "bg-gradient-to-br from-gray-50 to-blue-50 rounded-2xl border-2 border-gray-200 p-8 shadow-lg"
      : "bg-white border border-gray-200 rounded-xl p-6";

  return (
    <div className={containerClass}>
      <h3 className="text-lg font-semibold text-gray-900 mb-4">Order Summary</h3>

      {/* Plan & Configuration Details */}
      <div className="space-y-2 text-sm mb-4">
        <div className="flex justify-between">
          <span className="text-gray-600">Plan:</span>
          <span className="font-medium">
            {plan.name}
            {plan.internetPlanTier && ` (${plan.internetPlanTier})`}
          </span>
        </div>

        {configDetails.map((detail, index) => (
          <div key={index} className="flex justify-between">
            <span className="text-gray-600">{detail.label}:</span>
            <span className="font-medium">{detail.value}</span>
          </div>
        ))}

        {selectedAddons.length > 0 && (
          <div className="flex justify-between">
            <span className="text-gray-600">Add-ons:</span>
            <span className="font-medium">{selectedAddons.length} selected</span>
          </div>
        )}
      </div>

      {/* Pricing Breakdown */}
      {variant === "enhanced" && (
        <div className="pt-2 border-t border-gray-300 mb-4">
          <h4 className="font-semibold text-gray-900 mb-3">Pricing Summary</h4>

          {/* Monthly Costs */}
          <div className="space-y-2 mb-4">
            <div className="text-sm font-medium text-gray-700 mb-1">Monthly Costs:</div>
            {plan.monthlyPrice != null && (
              <div className="flex justify-between text-sm">
                <span className="text-gray-600">
                  Base Plan {plan.internetPlanTier && `(${plan.internetPlanTier})`}:
                </span>
                <span className="font-medium">¥{plan.monthlyPrice.toLocaleString()}</span>
              </div>
            )}

            {selectedAddons.map(
              (addon, index) =>
                addon.billingCycle === "Monthly" && (
                  <div key={index} className="flex justify-between text-sm">
                    <span className="text-gray-600">{String(addon.name)}:</span>
                    <span className="font-medium">
                      ¥{(addon.monthlyPrice ?? 0).toLocaleString()}/month
                    </span>
                  </div>
                )
            )}

            <div className="flex justify-between pt-2 border-t border-gray-200">
              <span className="font-semibold text-gray-900">Total Monthly:</span>
              <span className="font-bold text-lg text-blue-600">
                {hasMissingPrices ? (
                  <span className="text-red-600 text-sm">Some prices unavailable</span>
                ) : (
                  `¥${monthlyTotal.toLocaleString()}`
                )}
              </span>
            </div>
          </div>

          {/* One-time Costs */}
          {(oneTimeTotal > 0 || activationFees.length > 0) && (
            <div className="space-y-2">
              <div className="text-sm font-medium text-gray-700 mb-1">One-time Costs:</div>

              {activationFees.map((fee, index) => (
                <div key={index} className="flex justify-between text-sm">
                  <span className="text-gray-600">{String(fee.name)}:</span>
                  <span className="font-medium">¥{(fee.oneTimePrice ?? 0).toLocaleString()}</span>
                </div>
              ))}

              {selectedAddons.map(
                (addon, index) =>
                  addon.billingCycle !== "Monthly" && (
                    <div key={index} className="flex justify-between text-sm">
                      <span className="text-gray-600">{String(addon.name)}:</span>
                      <span className="font-medium">
                        ¥{(addon.oneTimePrice ?? 0).toLocaleString()}
                      </span>
                    </div>
                  )
              )}

              {oneTimeTotal > 0 && (
                <div className="flex justify-between pt-2 border-t border-gray-200">
                  <span className="font-semibold text-gray-900">Total One-time:</span>
                  <span className="font-bold text-lg text-orange-600">
                    ¥{oneTimeTotal.toLocaleString()}
                  </span>
                </div>
              )}
            </div>
          )}
        </div>
      )}

      {/* Simple variant totals */}
      {variant === "simple" && (
        <>
          {/* Show base plan */}
          <div className="space-y-2 mb-4">
            <div className="flex justify-between">
              <span className="text-gray-600">{plan.name}</span>
              <span className="font-medium">¥{(plan.monthlyPrice ?? 0).toLocaleString()}/mo</span>
            </div>

            {/* Show activation fees */}
            {activationFees.map((fee, index) => (
              <div key={index} className="flex justify-between">
                <span className="text-gray-600">{String(fee.name)}</span>
                <span className="font-medium">
                  ¥{(fee.oneTimePrice ?? fee.unitPrice ?? 0).toLocaleString()} one-time
                </span>
              </div>
            ))}

            {/* Show selected addons */}
            {selectedAddons.map((addon, index) => (
              <div key={index} className="flex justify-between">
                <span className="text-gray-600">{String(addon.name)}</span>
                <span className="font-medium">
                  ¥
                  {(addon.billingCycle === "Monthly"
                    ? (addon.monthlyPrice ?? 0)
                    : (addon.oneTimePrice ?? 0)
                  ).toLocaleString()}
                  {addon.billingCycle === "Monthly" ? "/mo" : " one-time"}
                </span>
              </div>
            ))}
          </div>

          {/* Info lines */}
          {infoLines.length > 0 && (
            <div className="text-xs text-gray-500 mb-4 space-y-1">
              {infoLines.map((line, index) => (
                <div key={index}>• {line}</div>
              ))}
            </div>
          )}

          {/* Totals */}
          <div className="border-t pt-4 mb-4">
            <div className="flex justify-between text-lg font-semibold">
              <span>Monthly Total:</span>
              <span>¥{monthlyTotal.toLocaleString()}/mo</span>
            </div>
            {oneTimeTotal > 0 && (
              <div className="flex justify-between text-lg font-semibold text-orange-600">
                <span>One-time Total:</span>
                <span>¥{oneTimeTotal.toLocaleString()}</span>
              </div>
            )}
          </div>
        </>
      )}

      {/* Action Buttons */}
      {showActions && (
        <div className={variant === "enhanced" ? "" : "flex gap-4"}>
          {variant === "simple" ? (
            <>
              {backUrl ? (
                <Button
                  variant="outline"
                  className="flex-1"
                  leftIcon={<ArrowLeftIcon className="h-4 w-4" />}
                  onClick={() => {
                    if (!disabled) router.push(backUrl);
                  }}
                  disabled={disabled}
                >
                  {backLabel}
                </Button>
              ) : null}

              {onContinue ? (
                <Button
                  className="flex-1"
                  rightIcon={<ArrowRightIcon className="h-4 w-4" />}
                  onClick={onContinue}
                  disabled={disabled}
                >
                  {continueLabel}
                </Button>
              ) : null}
            </>
          ) : onContinue ? (
            <Button
              size="lg"
              className="w-full mt-8 group text-lg font-bold"
              rightIcon={<ArrowRightIcon className="w-5 h-5" />}
              onClick={onContinue}
              disabled={disabled}
            >
              {continueLabel}
            </Button>
          ) : null}
        </div>
      )}
    </div>
  );
}
