'use client';

import { useState } from 'react';
import { X, Package, ShoppingCart } from 'lucide-react';
import { useCurrencyStore } from '@/store/currencyStore';

interface CartItem {
  id: string;
  product_name: string;
  sku: string;
  variant_name: string | null;
  variant_sku: string | null;
  quantity: number;
  unit_price: number;
  compare_price: number | null;
  subtotal: number;
  image_url: string | null;
}

interface CartSummary {
  items_count: number;
  items_total: number;
  discount: number;
  grand_total: number;
}

interface CartData {
  cart: {
    id: string;
    user_id: string | null;
    user_name?: string;
    user_email?: string;
    coupon_code: string | null;
    coupon_discount: number;
    notes: string | null;
    updated_at: string;
  };
  items: CartItem[];
  summary: CartSummary;
}

interface CartDetailModalProps {
  isOpen: boolean;
  cart: CartData | null;
  onClose: () => void;
}

export default function CartDetailModal({ isOpen, cart, onClose }: CartDetailModalProps) {
  const formatAmount = useCurrencyStore((s) => s.formatAmount);
  if (!isOpen || !cart) return null;

  const { items, summary } = cart;

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center p-4"
      style={{ background: 'rgba(0,0,0,0.5)' }}
      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
    >
      <div
        className="rounded-xl w-full max-w-2xl max-h-[80vh] overflow-y-auto"
        style={{
          background: 'var(--color-surface)',
          border: '1px solid var(--color-border)',
          boxShadow: 'var(--shadow-card-lg)',
        }}
      >
        {/* Header */}
        <div
          className="flex items-center justify-between p-6 border-b"
          style={{ borderColor: 'var(--color-border)' }}
        >
          <div className="flex items-center gap-3">
            <div
              className="w-10 h-10 rounded-lg flex items-center justify-center"
              style={{ background: 'var(--color-cta-light)' }}
            >
              <ShoppingCart size={20} style={{ color: 'var(--color-cta)' }} />
            </div>
            <div>
              <h2 className="text-lg font-bold" style={{ color: 'var(--color-text)' }}>
                Cart Details
              </h2>
              <p className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
                {cart.cart.user_name || 'Guest'} • {summary.items_count} items
              </p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="p-2 rounded-lg hover:bg-surface-alt"
            style={{ color: 'var(--color-text-secondary)' }}
          >
            <X size={20} />
          </button>
        </div>

        {/* Items */}
        <div className="p-6">
          {items.length === 0 ? (
            <div className="text-center py-12">
              <Package size={48} className="mx-auto mb-4" style={{ color: 'var(--color-text-tertiary)' }} />
              <p className="text-sm" style={{ color: 'var(--color-text-secondary)' }}>Cart is empty</p>
            </div>
          ) : (
            <div className="space-y-3">
              {items.map((item, index) => (
                <div
                  key={item.id}
                  className="p-4 rounded-lg flex items-center justify-between"
                  style={{
                    background: 'var(--color-surface-alt)',
                    border: '1px solid var(--color-border)',
                  }}
                >
                  <div className="flex items-center gap-4">
                    <span
                      className="w-6 h-6 rounded-full flex items-center justify-center text-xs font-medium"
                      style={{ background: 'var(--color-cta-light)', color: 'var(--color-cta)' }}
                    >
                      {index + 1}
                    </span>
                    <div>
                      <p className="text-sm font-medium" style={{ color: 'var(--color-text)' }}>
                        {item.product_name}
                      </p>
                      <p className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
                        SKU: {item.sku}
                      </p>
                      {item.variant_name && (
                        <p className="text-xs" style={{ color: 'var(--color-text-secondary)' }}>
                          Variant: {item.variant_name}
                        </p>
                      )}
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="flex items-center gap-4">
                      <span
                        className="text-xs px-2 py-0.5 rounded"
                        style={{
                          background: 'var(--color-surface)',
                          color: 'var(--color-text-secondary)',
                        }}
                      >
                        Qty: {Number(item.quantity)}
                      </span>
                      <div>
                        <p className="text-sm font-bold" style={{ color: 'var(--color-text)' }}>
                          {formatAmount(item.subtotal)}
                        </p>
                        <p className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
                          {Number(item.quantity)} x {formatAmount(item.unit_price)}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              ))}

              {/* Totals */}
              <div
                className="border-t pt-4 mt-4"
                style={{ borderColor: 'var(--color-border)' }}
              >
                <div className="space-y-1.5 text-sm max-w-xs ml-auto">
                  <div className="flex justify-between">
                    <span style={{ color: 'var(--color-text-secondary)' }}>Subtotal</span>
                    <span style={{ color: 'var(--color-text)' }}>
                      {formatAmount(summary.items_total)}
                    </span>
                  </div>
                  {summary.discount > 0 && (
                    <div className="flex justify-between">
                      <span style={{ color: 'var(--color-text-secondary)' }}>
                        Coupon ({cart.cart.coupon_code})
                      </span>
                      <span style={{ color: 'var(--color-success)' }}>
                        - {formatAmount(summary.discount)}
                      </span>
                    </div>
                  )}
                  <div
                    className="flex justify-between font-bold text-base pt-2 border-t"
                    style={{ borderColor: 'var(--color-border)' }}
                  >
                    <span style={{ color: 'var(--color-text)' }}>Grand Total</span>
                    <span style={{ color: 'var(--color-cta)' }}>
                      {formatAmount(summary.grand_total)}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}