import React from 'react';
import { Button } from './ui/button';
import { Card, CardContent } from './ui/card';
import { Badge } from './ui/badge';
import { Separator } from './ui/separator';
import { 
  ShoppingBag, 
  Trash2, 
  Plus, 
  ArrowRight,
  Shield,
  CheckCircle,
  Home,
  ChevronRight
} from 'lucide-react';
import { motion } from 'motion/react';
import { navigateTo } from './Router';
import { ImageWithFallback } from './figma/ImageWithFallback';
import { useCart } from './CartContext';

export function Cart() {
  const { cartItems, removeFromCart, getCartTotal } = useCart();

  // Calculate pricing
  const subtotal = getCartTotal();
  const gstRate = 0.18; // 18% GST
  const gstAmount = subtotal * gstRate;
  const total = subtotal + gstAmount;

  const handleProceedToPayment = () => {
    // Navigate to checkout/payment page
    navigateTo('/checkout');
  };

  const handleAddMoreProgrammes = () => {
    navigateTo('/learning-online');
  };

  return (
    <div style={{ backgroundColor: '#FFFFFF' }}>
      {/* Breadcrumb Navigation */}
      <div className="section-margin-x py-6 border-b border-gray-200">
        <div className="flex items-center gap-2 text-sm">
          <button
            onClick={() => navigateTo('/')}
            className="flex items-center gap-1 text-gray-600 hover:text-gray-900 transition-colors"
            style={{
              fontSize: 'var(--font-small)',
              fontFamily: 'var(--font-family-base)'
            }}
          >
            <Home className="w-4 h-4" />
            Home
          </button>
          <ChevronRight className="w-4 h-4 text-gray-400" />
          <span 
            className="text-gray-900 font-medium"
            style={{
              fontSize: 'var(--font-small)',
              fontFamily: 'var(--font-family-base)'
            }}
          >
            Cart
          </span>
        </div>
      </div>

      {/* Main Cart Content */}
      <div className="section-margin-x py-8">
        {/* Page Header */}
        <div className="flex items-center gap-3 mb-8">
          <div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center">
            <ShoppingBag className="w-5 h-5 text-gray-700" />
          </div>
          <div>
            <h1 
              style={{
                fontSize: 'var(--font-h2)',
                fontWeight: 'var(--font-weight-h2)',
                color: 'var(--color-black)',
                fontFamily: 'var(--font-family-base)',
                lineHeight: 'var(--line-height-h2)'
              }}
            >
              Shopping Cart
            </h1>
            <p 
              style={{
                fontSize: 'var(--font-body)',
                color: 'var(--color-gray-muted)',
                fontFamily: 'var(--font-family-base)',
                marginTop: '0.25rem'
              }}
            >
              Review your selected programmes before proceeding to payment
            </p>
          </div>
        </div>

        {cartItems.length === 0 ? (
          /* Empty Cart State */
          <div className="text-center py-16">
            <div className="w-24 h-24 mx-auto mb-6 rounded-full bg-gray-100 flex items-center justify-center">
              <ShoppingBag className="w-10 h-10 text-gray-400" />
            </div>
            <h2 
              className="mb-4"
              style={{
                fontSize: 'var(--font-h3)',
                fontWeight: 'var(--font-weight-h3)',
                color: 'var(--color-black)',
                fontFamily: 'var(--font-family-base)'
              }}
            >
              Your cart is empty
            </h2>
            <p 
              className="mb-8 max-w-md mx-auto"
              style={{
                fontSize: 'var(--font-body)',
                color: 'var(--color-gray-muted)',
                fontFamily: 'var(--font-family-base)',
                lineHeight: 'var(--line-height-body)'
              }}
            >
              Browse our comprehensive leadership development programmes and add them to your cart.
            </p>
            <Button
              onClick={handleAddMoreProgrammes}
              className="inline-flex items-center gap-2 h-12 px-6 rounded-lg font-medium"
              style={{
                backgroundColor: 'var(--color-primary)',
                color: 'white',
                fontSize: 'var(--font-body)',
                fontFamily: 'var(--font-family-base)',
                fontWeight: '500'
              }}
            >
              Browse Programmes
              <ArrowRight className="w-4 h-4" />
            </Button>
          </div>
        ) : (
          /* Cart with Items */
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            
            {/* Left Column - Cart Items */}
            <div className="lg:col-span-2">
              {/* Cart Items Header */}
              <div className="flex items-center justify-between mb-6">
                <div className="flex items-center gap-3">
                  <h2 
                    style={{
                      fontSize: 'var(--font-h4)',
                      fontWeight: 'var(--font-weight-h4)',
                      color: 'var(--color-black)',
                      fontFamily: 'var(--font-family-base)'
                    }}
                  >
                    Cart Items ({cartItems.length})
                  </h2>
                  <Badge 
                    className="px-3 py-1 rounded-full"
                    style={{
                      backgroundColor: 'rgba(248, 195, 1, 0.15)',
                      color: 'var(--color-black)',
                      fontSize: 'var(--font-small)',
                      fontFamily: 'var(--font-family-base)'
                    }}
                  >
                    {cartItems.length} programme{cartItems.length !== 1 ? 's' : ''}
                  </Badge>
                </div>
              </div>

              {/* Cart Items List */}
              <div className="space-y-6">
                {cartItems.map((item, index) => (
                  <motion.div
                    key={item.id}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: index * 0.1 }}
                  >
                    <Card className="overflow-hidden hover:shadow-md transition-all duration-300">
                      <CardContent className="p-6">
                        <div className="flex items-start gap-6">
                          
                          {/* Programme Thumbnail */}
                          <div className="w-24 h-16 rounded-lg overflow-hidden flex-shrink-0 bg-gray-100">
                            <ImageWithFallback
                              src={item.thumbnail}
                              alt={item.title}
                              className="w-full h-full object-cover"
                            />
                          </div>

                          {/* Programme Details */}
                          <div className="flex-1 min-w-0">
                            
                            {/* Programme Title */}
                            <h3 
                              className="mb-3 line-clamp-2"
                              style={{
                                fontSize: 'var(--font-h4)',
                                fontWeight: 'var(--font-weight-h4)',
                                color: 'var(--color-black)',
                                fontFamily: 'var(--font-family-base)',
                                lineHeight: 'var(--line-height-h4)'
                              }}
                            >
                              {item.title}
                            </h3>

                            {/* Course Details Row */}
                            <div className="flex flex-wrap items-center gap-4 mb-4">
                              <div className="flex items-center gap-2">
                                <span 
                                  className="text-xs px-3 py-1 bg-gray-100 rounded-full"
                                  style={{
                                    fontSize: 'var(--font-small)',
                                    color: 'var(--color-gray-muted)',
                                    fontFamily: 'var(--font-family-base)'
                                  }}
                                >
                                  Course ID: {item.category.toUpperCase().slice(0, 3)}-{item.id}
                                </span>
                                <span 
                                  className="text-xs px-3 py-1 rounded-full"
                                  style={{
                                    fontSize: 'var(--font-small)',
                                    color: 'var(--color-primary)',
                                    backgroundColor: 'rgba(4, 4, 91, 0.1)',
                                    fontFamily: 'var(--font-family-base)'
                                  }}
                                >
                                  {item.level}
                                </span>
                                <span 
                                  className="text-xs px-3 py-1 bg-blue-50 text-blue-700 rounded-full"
                                  style={{
                                    fontSize: 'var(--font-small)',
                                    fontFamily: 'var(--font-family-base)'
                                  }}
                                >
                                  Advanced
                                </span>
                              </div>
                            </div>

                            {/* Pricing Row */}
                            <div className="flex items-center justify-between">
                              <div className="flex items-center gap-3">
                                <span 
                                  className="font-bold"
                                  style={{
                                    fontSize: 'var(--font-h4)',
                                    color: 'var(--color-primary)',
                                    fontFamily: 'var(--font-family-base)'
                                  }}
                                >
                                  {item.price}
                                </span>
                                {item.originalPrice && (
                                  <span 
                                    className="line-through"
                                    style={{
                                      fontSize: 'var(--font-body)',
                                      color: 'var(--color-gray-muted)',
                                      fontFamily: 'var(--font-family-base)'
                                    }}
                                  >
                                    {item.originalPrice}
                                  </span>
                                )}
                              </div>

                              {/* Remove Button */}
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => removeFromCart(item.id)}
                                className="text-red-500 hover:text-red-700 hover:bg-red-50 p-2"
                              >
                                <Trash2 className="w-4 h-4" />
                              </Button>
                            </div>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </motion.div>
                ))}
              </div>

              {/* Add More Programmes Button */}
              <div className="mt-8 pt-6 border-t border-gray-200">
                <Button
                  variant="outline"
                  onClick={handleAddMoreProgrammes}
                  className="flex items-center gap-2 h-12 px-6 rounded-lg border-2 border-dashed border-gray-300 hover:border-gray-400 transition-all duration-300 w-full"
                  style={{
                    fontSize: 'var(--font-body)',
                    fontFamily: 'var(--font-family-base)',
                    fontWeight: '500'
                  }}
                >
                  <Plus className="w-5 h-5" />
                  Add More Programmes
                </Button>
              </div>
            </div>

            {/* Right Column - Order Summary */}
            <div className="lg:col-span-1">
              <Card className="sticky top-4">
                <CardContent className="p-6">
                  
                  {/* Order Summary Header */}
                  <h3 
                    className="mb-6"
                    style={{
                      fontSize: 'var(--font-h4)',
                      fontWeight: 'var(--font-weight-h4)',
                      color: 'var(--color-black)',
                      fontFamily: 'var(--font-family-base)'
                    }}
                  >
                    Order Summary
                  </h3>

                  {/* Pricing Breakdown */}
                  <div className="space-y-4 mb-6">
                    
                    {/* Subtotal */}
                    <div className="flex justify-between">
                      <span 
                        style={{
                          fontSize: 'var(--font-body)',
                          color: 'var(--color-gray-muted)',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        Subtotal
                      </span>
                      <span 
                        style={{
                          fontSize: 'var(--font-body)',
                          color: 'var(--color-black)',
                          fontFamily: 'var(--font-family-base)',
                          fontWeight: '500'
                        }}
                      >
                        ₹{subtotal.toLocaleString('en-IN')}
                      </span>
                    </div>

                    {/* GST */}
                    <div className="flex justify-between">
                      <div className="flex items-center gap-2">
                        <span 
                          style={{
                            fontSize: 'var(--font-body)',
                            color: 'var(--color-gray-muted)',
                            fontFamily: 'var(--font-family-base)'
                          }}
                        >
                          GST (18%)
                        </span>
                        <div className="w-4 h-4 rounded-full bg-gray-200 flex items-center justify-center cursor-help">
                          <span className="text-xs text-gray-600">i</span>
                        </div>
                      </div>
                      <span 
                        style={{
                          fontSize: 'var(--font-body)',
                          color: 'var(--color-black)',
                          fontFamily: 'var(--font-family-base)',
                          fontWeight: '500'
                        }}
                      >
                        ₹{gstAmount.toLocaleString('en-IN')}
                      </span>
                    </div>

                    <Separator />

                    {/* Total */}
                    <div className="flex justify-between">
                      <span 
                        style={{
                          fontSize: 'var(--font-h4)',
                          fontWeight: 'var(--font-weight-h4)',
                          color: 'var(--color-black)',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        Total
                      </span>
                      <span 
                        style={{
                          fontSize: 'var(--font-h4)',
                          fontWeight: 'var(--font-weight-h4)',
                          color: 'var(--color-primary)',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        ₹{total.toLocaleString('en-IN')}
                      </span>
                    </div>
                  </div>

                  {/* Proceed to Payment Button */}
                  <Button
                    onClick={handleProceedToPayment}
                    className="w-full flex items-center justify-center gap-2 h-14 rounded-lg font-semibold mb-6"
                    style={{
                      backgroundColor: 'var(--color-primary)',
                      color: 'white',
                      fontSize: 'var(--font-body-lg)',
                      fontFamily: 'var(--font-family-base)'
                    }}
                  >
                    Proceed to Payment
                    <ArrowRight className="w-5 h-5" />
                  </Button>

                  {/* Security Features */}
                  <div className="space-y-3 pt-4 border-t border-gray-200">
                    <div className="flex items-center gap-3 text-sm">
                      <CheckCircle className="w-4 h-4 text-green-600 flex-shrink-0" />
                      <span 
                        style={{
                          fontSize: 'var(--font-small)',
                          color: 'var(--color-gray-muted)',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        Secure payment processing
                      </span>
                    </div>
                    <div className="flex items-center gap-3 text-sm">
                      <CheckCircle className="w-4 h-4 text-green-600 flex-shrink-0" />
                      <span 
                        style={{
                          fontSize: 'var(--font-small)',
                          color: 'var(--color-gray-muted)',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        Instant course access
                      </span>
                    </div>
                    <div className="flex items-center gap-3 text-sm">
                      <CheckCircle className="w-4 h-4 text-green-600 flex-shrink-0" />
                      <span 
                        style={{
                          fontSize: 'var(--font-small)',
                          color: 'var(--color-gray-muted)',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        Certificate upon completion
                      </span>
                    </div>
                  </div>

                  {/* Security Note */}
                  <div className="flex items-start gap-2 mt-6 p-4 bg-gray-50 rounded-lg">
                    <Shield className="w-4 h-4 text-gray-600 mt-0.5 flex-shrink-0" />
                    <div>
                      <p 
                        style={{
                          fontSize: 'var(--font-small)',
                          color: 'var(--color-gray-muted)',
                          fontFamily: 'var(--font-family-base)',
                          lineHeight: 'var(--line-height-small)'
                        }}
                      >
                        <strong>Need help with payment?</strong><br />
                        Our AI assistant can guide you through the checkout process and answer questions about course enrollment. Click the chat icon to get started.
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}