
import React from 'react';
import { Card } from '../ui/card';
import { Tag, ShieldCheck } from 'lucide-react';

interface OrderSummaryProps {
  subtotal: number;
  taxRate?: number;
  discount?: { code: string; amount: number; type: 'percent' | 'fixed' };
  currency?: string;
  onCheckout?: () => void;
  loading?: boolean;
}

export const OrderSummary: React.FC<OrderSummaryProps> = ({ 
  subtotal, 
  taxRate = 0.08, 
  discount, 
  currency = 'USD',
  onCheckout,
  loading = false
}) => {
  const discountAmount = discount 
    ? (discount.type === 'percent' ? subtotal * (discount.amount / 100) : discount.amount) 
    : 0;
  
  const taxableAmount = Math.max(0, subtotal - discountAmount);
  const taxAmount = taxableAmount * taxRate;
  const total = taxableAmount + taxAmount;

  const formatPrice = (amount: number) => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency,
    }).format(amount);
  };

  return (
    <div className="space-y-6">
        <Card variant="gaming" className="p-6">
            <h3 className="font-bold text-white mb-6 uppercase tracking-wider text-sm border-b border-gray-700 pb-2">Order Summary</h3>
            
            <div className="space-y-3 text-sm mb-6">
                <div className="flex justify-between text-gray-400">
                    <span>Subtotal</span>
                    <span className="text-white font-mono">{formatPrice(subtotal)}</span>
                </div>
                
                {discount && (
                    <div className="flex justify-between text-kodo-lime">
                        <span className="flex items-center gap-2"><Tag className="w-3 h-3" /> Discount ({discount.code})</span>
                        <span className="font-mono">-{formatPrice(discountAmount)}</span>
                    </div>
                )}

                <div className="flex justify-between text-gray-400">
                    <span>Estimated Tax ({(taxRate * 100).toFixed(0)}%)</span>
                    <span className="text-white font-mono">{formatPrice(taxAmount)}</span>
                </div>
            </div>

            <div className="border-t border-gray-700 pt-4 mb-6">
                <div className="flex justify-between items-end">
                    <span className="font-bold text-white">Total</span>
                    <span className="text-2xl font-mono font-bold text-kodo-cyan">{formatPrice(total)}</span>
                </div>
            </div>

            {onCheckout && (
                <button 
                    className="w-full h-12 bg-gradient-to-r from-kodo-cyan-dim to-kodo-cyan text-kodo-void hover:shadow-lg hover:shadow-kodo-cyan/20 border border-transparent font-bold tracking-wide rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
                    onClick={onCheckout}
                    disabled={loading}
                >
                    {loading ? 'PROCESSING...' : 'PROCEED TO CHECKOUT'}
                </button>
            )}
        </Card>

        <div className="bg-kodo-ink/50 p-4 rounded-xl border border-kodo-steel/50 flex items-start gap-3">
            <ShieldCheck className="w-5 h-5 text-kodo-gold flex-shrink-0" />
            <div>
                <h4 className="font-bold text-white text-sm mb-1">Secure Checkout</h4>
                <p className="text-xs text-gray-400 leading-relaxed">
                    Transactions are encrypted. Downloads are available immediately after payment.
                </p>
            </div>
        </div>
    </div>
  );
};
