import React, { useState } from 'react';
import { ShoppingCart, Trash2, CreditCard, ArrowRight, Package, CheckCircle2 } from 'lucide-react';
import { CartItem, ClientStats } from '../types';

interface CartViewProps {
  cart: CartItem[];
  stats: ClientStats | null;
  onRemove: (index: number) => void;
  onCheckout: () => Promise<void>;
}

const CartView: React.FC<CartViewProps> = ({ cart, stats, onRemove, onCheckout }) => {
  const [isProcessing, setIsProcessing] = useState(false);
  const [orderSuccess, setOrderSuccess] = useState(false);

  const total = cart.reduce((sum, item) => sum + item.price, 0);
  const currencyPrefix = stats?.currencyPrefix ?? '৳';
  const currencySuffix = stats?.currencySuffix ?? '';

  const handleCheckout = async () => {
    setIsProcessing(true);
    try {
      await onCheckout();
      setOrderSuccess(true);
    } catch (error) {
      console.error(error);
      // Handle error (could add an error state to show message)
    } finally {
      setIsProcessing(false);
    }
  };

  if (orderSuccess) {
    return (
      <div className="flex flex-col items-center justify-center min-h-[50vh] text-center animate-in fade-in zoom-in duration-500">
        <div className="w-20 h-20 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mb-6 shadow-lg shadow-emerald-500/20">
          <CheckCircle2 size={40} />
        </div>
        <h2 className="text-2xl font-black text-slate-900 mb-2">Order Placed Successfully!</h2>
        <p className="text-slate-500 max-w-md mb-8">
          Your order has been received and is being processed. You will receive a confirmation email shortly.
        </p>
        <button 
          onClick={() => window.location.reload()} 
          className="px-6 py-3 bg-slate-900 text-white rounded-xl font-bold text-sm hover:bg-slate-800 transition-all"
        >
          Return to Dashboard
        </button>
      </div>
    );
  }

  return (
    <div className="space-y-8 animate-in slide-in-from-bottom-4 duration-500">
      <div>
        <h1 className="text-2xl font-bold text-slate-900">Shopping Cart</h1>
        <p className="text-slate-500">Review your selected services before checkout.</p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div className="lg:col-span-2 space-y-4">
          {cart.length === 0 ? (
            <div className="bg-white rounded-3xl border border-slate-100 p-12 text-center">
              <div className="w-16 h-16 bg-slate-50 text-slate-300 rounded-full flex items-center justify-center mx-auto mb-4">
                <ShoppingCart size={32} />
              </div>
              <h3 className="text-lg font-bold text-slate-900 mb-1">Your cart is empty</h3>
              <p className="text-slate-400 text-sm">Looks like you haven't added any services yet.</p>
            </div>
          ) : (
            <div className="bg-white rounded-3xl border border-slate-100 shadow-sm overflow-hidden">
              <div className="divide-y divide-slate-50">
                {cart.map((item, index) => (
                  <div key={index} className="p-6 flex items-center justify-between group hover:bg-slate-50/50 transition-colors">
                    <div className="flex items-center gap-4">
                      <div className="w-12 h-12 bg-blue-50 text-blue-600 rounded-xl flex items-center justify-center">
                        <Package size={24} />
                      </div>
                      <div>
                        <h4 className="font-bold text-slate-900">{item.name}</h4>
                        <p className="text-xs text-slate-500 font-medium uppercase tracking-wider">{item.billingCycle}</p>
                        {item.domain && <p className="text-xs text-blue-600 mt-0.5">{item.domain}</p>}
                      </div>
                    </div>
                    <div className="flex items-center gap-6">
                      <p className="font-bold text-slate-900 text-lg">
                        {currencyPrefix}{item.price.toFixed(2)}{currencySuffix}
                      </p>
                      <button 
                        onClick={() => onRemove(index)}
                        className="p-2 text-slate-300 hover:text-red-500 hover:bg-red-50 rounded-lg transition-all"
                      >
                        <Trash2 size={18} />
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>

        <div className="space-y-6">
          <div className="bg-white rounded-3xl border border-slate-100 shadow-sm p-6">
            <h3 className="font-bold text-slate-900 mb-6">Order Summary</h3>
            
            <div className="space-y-3 mb-6">
              <div className="flex justify-between text-sm">
                <span className="text-slate-500">Subtotal</span>
                <span className="font-bold text-slate-900">{currencyPrefix}{total.toFixed(2)}{currencySuffix}</span>
              </div>
              <div className="flex justify-between text-sm">
                <span className="text-slate-500">Tax (0%)</span>
                <span className="font-bold text-slate-900">{currencyPrefix}0.00{currencySuffix}</span>
              </div>
              <div className="pt-3 border-t border-slate-50 flex justify-between items-center">
                <span className="font-bold text-slate-900">Total</span>
                <span className="font-black text-2xl text-blue-600">{currencyPrefix}{total.toFixed(2)}{currencySuffix}</span>
              </div>
            </div>

            <button 
              onClick={handleCheckout}
              disabled={cart.length === 0 || isProcessing}
              className="w-full py-4 bg-blue-600 text-white rounded-2xl font-bold text-sm hover:bg-blue-700 transition-all flex items-center justify-center gap-2 shadow-lg shadow-blue-500/20 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {isProcessing ? (
                <>Processing...</>
              ) : (
                <>
                  Checkout Now <ArrowRight size={18} />
                </>
              )}
            </button>
            
            <div className="mt-4 flex items-center justify-center gap-2 text-[10px] text-slate-400 font-bold uppercase tracking-widest">
              <CreditCard size={12} />
              Secure SSL Payment
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CartView;