"use client";

import { ShieldCheck } from "lucide-react";
import { Button } from "@/components/atoms/button";
import { AlertBanner } from "@/components/molecules/AlertBanner/AlertBanner";

interface CartPricing {
  monthlyTotal: number;
  oneTimeTotal: number;
}

interface OrderSubmitSectionProps {
  pricing: CartPricing;
  submitError: string | null;
  isSubmitting: boolean;
  canSubmit: boolean;
  onSubmit: () => void;
  onBack: () => void;
}

export function OrderSubmitSection({
  pricing,
  submitError,
  isSubmitting,
  canSubmit,
  onSubmit,
  onBack,
}: OrderSubmitSectionProps) {
  return (
    <>
      <div className="bg-card border border-border rounded-2xl p-6 md:p-7 text-center shadow-[var(--cp-shadow-1)]">
        <div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4 shadow-sm border border-primary/20">
          <ShieldCheck className="w-8 h-8 text-primary" />
        </div>
        <h2 className="text-2xl font-bold text-foreground mb-2">Review & Submit</h2>
        <p className="text-muted-foreground mb-4 max-w-xl mx-auto">
          You're almost done. Confirm your details above, then submit your order. We'll review and
          notify you when everything is ready.
        </p>

        {submitError && (
          <div className="pb-4">
            <AlertBanner variant="error" title="Unable to submit order" elevated>
              {submitError}
            </AlertBanner>
          </div>
        )}

        <div className="bg-muted/50 rounded-lg p-4 border border-border text-left max-w-2xl mx-auto">
          <h3 className="font-semibold text-foreground mb-2">What to expect</h3>
          <div className="text-sm text-muted-foreground space-y-1">
            <p>• Our team reviews your order and schedules setup if needed</p>
            <p>• We may contact you to confirm details or availability</p>
            <p>• We verify your residence card before service activation</p>
            <p>• We only charge your card after the order is approved</p>
            <p>• You'll receive confirmation and next steps by email</p>
          </div>
        </div>

        <div className="mt-4 bg-card rounded-lg p-4 border border-border max-w-2xl mx-auto shadow-[var(--cp-shadow-1)]">
          <div className="flex justify-between items-center">
            <span className="font-medium text-muted-foreground">Estimated Total</span>
            <div className="text-right">
              <div className="text-xl font-bold text-foreground">
                ¥{pricing.monthlyTotal.toLocaleString()}/mo
              </div>
              {pricing.oneTimeTotal > 0 && (
                <div className="text-sm text-warning font-medium">
                  + ¥{pricing.oneTimeTotal.toLocaleString()} one-time
                </div>
              )}
            </div>
          </div>
        </div>
      </div>

      <div className="flex gap-4">
        <Button
          type="button"
          variant="ghost"
          className="flex-1 py-4 text-muted-foreground hover:text-foreground"
          onClick={onBack}
        >
          ← Back to Configuration
        </Button>
        <Button
          type="button"
          className="flex-1 py-4 text-lg"
          onClick={onSubmit}
          disabled={!canSubmit || isSubmitting}
          isLoading={isSubmitting}
          loadingText="Submitting..."
        >
          Submit order
        </Button>
      </div>
    </>
  );
}
