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

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="glass" className="p-8 bg-black/40 border-white/5 relative overflow-hidden group">
        <div className="absolute inset-x-0 top-0 h-[1px] bg-gradient-to-r from-transparent via-primary/50 to-transparent" />

        <h3 className="font-bold text-white mb-8 uppercase tracking-[0.2em] text-xs flex items-center gap-3">
          <CreditCard className="w-4 h-4 text-primary" /> Checkout Summary
        </h3>

        <div className="space-y-5 text-sm mb-8">
          <div className="flex justify-between text-muted-foreground font-mono uppercase text-[10px]">
            <span>Transaction Base</span>
            <span className="text-white font-bold">
              {formatPrice(subtotal)}
            </span>
          </div>

          {discount && (
            <div className="flex justify-between text-lime-500 font-mono uppercase text-[10px] bg-lime-500/5 p-2 rounded border border-lime-500/20">
              <span className="flex items-center gap-2">
                <Tag className="w-3 h-3" /> Protocol: {discount.code}
              </span>
              <span className="font-bold">-{formatPrice(discountAmount)}</span>
            </div>
          )}

          <div className="flex justify-between text-muted-foreground font-mono uppercase text-[10px]">
            <span>Regulatory Levy ({(taxRate * 100).toFixed(0)}%)</span>
            <span className="text-white font-bold">
              {formatPrice(taxAmount)}
            </span>
          </div>
        </div>

        <div className="border-t border-white/5 pt-6 mb-8">
          <div className="flex justify-between items-end">
            <span className="text-xs font-mono text-muted-foreground uppercase tracking-widest">Total Liability</span>
            <span className="text-3xl font-display font-bold text-white shadow-glow-cyan">
              {formatPrice(total)}
            </span>
          </div>
        </div>

        {onCheckout && (
          <Button
            variant="primary"
            className="w-full h-14 font-mono tracking-widest uppercase text-xs shadow-glow-cyan"
            onClick={onCheckout}
            disabled={loading}
          >
            {loading ? 'PROCESSING UPLINK...' : 'AUTHORIZE TRANSACTION'}
          </Button>
        )}
      </Card>

      <div className="bg-white/2 backdrop-blur-md p-5 rounded-2xl border border-white/5 flex items-start gap-4">
        <div className="p-2 bg-gold-500/10 rounded-lg">
          <ShieldCheck className="w-5 h-5 text-gold-500" />
        </div>
        <div>
          <h4 className="font-bold text-white text-xs mb-1 uppercase tracking-wider">Encrypted Node</h4>
          <p className="text-[10px] text-muted-foreground leading-relaxed font-mono uppercase">
            SECURE FLOW ENABLED. DATA PACKETS ARE ENCRYPTED VIA AES-256.
          </p>
        </div>
      </div>
    </div>
  );
};