'use client';

import { useState, useMemo, useCallback } from 'react';
import DataTable, { Column } from '@/components/ui/DataTable';
import CartDetailModal from '@/components/admin/cart/CartDetailModal';
import Modal from '@/components/ui/CustomModal';
import { toast } from 'react-hot-toast';
import { useCurrencyStore } from '@/store/currencyStore';
import { Trash2, ShoppingCart, User, Eye, Mail } from 'lucide-react';
import { useRouter } from 'next/navigation';
import { getApiErrorMessage } from '@/lib/utils/apiError';

// ─── Types ────────────────────────────────────────────────────────────────
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 Cart {
  id: string;
  user_id: string | null;
  session_id: string | null;
  coupon_code: string | null;
  coupon_discount: number;
  notes: string | null;
  last_reminder_sent_at: string | null;
  reminder_count: number;
  created_at: string;
  updated_at: string;
  user_name?: string;
  user_email?: string;
}

interface CartWithItems {
  cart: Cart;
  items: CartItem[];
  summary: {
    items_count: number;
    items_total: number;
    discount: number;
    grand_total: number;
  };
}

interface CartTableProps {
  carts: CartWithItems[];
  onRefresh?: () => void;
}

// ─── Constants ────────────────────────────────────────────────────────────
const MODAL_CLOSED = {
  isOpen: false,
  type: 'danger' as const,
  title: '',
  message: '',
  confirmText: 'Confirm',
  cancelText: 'Cancel',
  onConfirm: () => {},
};

// ─── Component ────────────────────────────────────────────────────────────
export default function CartTable({ carts }: CartTableProps) {
  const formatAmount = useCurrencyStore((s) => s.formatAmount);
  const [loading, setLoading] = useState(false);
  const [selectedIds] = useState<Set<string>>(new Set());
  const [detailModal, setDetailModal] = useState<{
    isOpen: boolean;
    cart: CartWithItems | null;
  }>({ isOpen: false, cart: null });
  const [confirmModal, setConfirmModal] = useState(MODAL_CLOSED);
  const [clearingCartId, setClearingCartId] = useState<string | null>(null);
  const [sendingReminder, setSendingReminder] = useState<string | null>(null);

  const router = useRouter();

  // ─── Handlers ───────────────────────────────────────────────────────
  const handleClearCart = useCallback(async (cartId: string) => {
    setClearingCartId(cartId);
    setLoading(true);
    try {
      const res = await fetch('/api/cart/clear', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ cart_id: cartId }),
      });
      if (res.ok) {
        toast.success('Cart cleared successfully');
        router.refresh();
      } else {
        const data = await res.json();
        toast.error(getApiErrorMessage(data, 'Failed to clear cart'));
      }
    } catch {
      toast.error('Network error');
    } finally {
      setLoading(false);
      setClearingCartId(null);
      setConfirmModal(MODAL_CLOSED);
    }
  }, [router]);

  const handleClearCartClick = useCallback((cartId: string) => {
    setConfirmModal({
      isOpen: true,
      type: 'danger',
      title: 'Clear Cart',
      message: 'Are you sure you want to clear this cart? All items will be removed.',
      confirmText: 'Clear Cart',
      cancelText: 'Cancel',
      onConfirm: () => handleClearCart(cartId),
    });
  }, [handleClearCart]);

  const handleSendReminder = useCallback(async (cartId: string) => {
    setSendingReminder(cartId);
    try {
      const res = await fetch(`/api/cart/${cartId}/send-reminder`, { method: 'POST' });
      const data = await res.json();
      if (res.ok) {
        toast.success('Reminder email sent!');
        router.refresh();
      } else {
        toast.error(getApiErrorMessage(data, 'Failed to send reminder'));
      }
    } catch {
      toast.error('Network error');
    } finally {
      setSendingReminder(null);
    }
  }, [router]);

  const closeConfirmModal = useCallback(() => {
    if (!loading) {
      setConfirmModal(MODAL_CLOSED);
    }
  }, [loading]);

  // ─── Columns ────────────────────────────────────────────────────────
  const columns = useMemo<Column<CartWithItems>[]>(
    () => [
      {
        key: 'customer',
        header: 'Customer',
        render: (row) => (
          <div className="flex items-center gap-3">
            <div
              className="w-8 h-8 rounded-full flex items-center justify-center"
              style={{ background: 'var(--color-cta-light)' }}
            >
              <User size={16} style={{ color: 'var(--color-cta)' }} />
            </div>
            <div>
              <p className="text-sm font-medium" style={{ color: 'var(--color-text)' }}>
                {row.cart.user_name || 'Guest User'}
              </p>
              <p className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
                {row.cart.user_email ||
                  (row.cart.session_id
                    ? row.cart.session_id.substring(0, 16) + '...'
                    : 'No email')}
              </p>
              {row.cart.last_reminder_sent_at && (
                <p className="text-xs mt-0.5" style={{ color: 'var(--color-info)' }}>
                  📧 Reminder sent {row.cart.reminder_count}x | Last: {new Date(row.cart.last_reminder_sent_at).toLocaleDateString()}
                </p>
              )}
            </div>
          </div>
        ),
      },
      {
        key: 'items',
        header: 'Items',
        render: (row) => (
          <div>
            <div className="text-sm font-medium" style={{ color: 'var(--color-text)' }}>
              {row.summary.items_count} items
            </div>
            <div className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
              {formatAmount(row.summary.items_total)}
            </div>
          </div>
        ),
      },
      {
        key: 'coupon',
        header: 'Coupon',
        render: (row) => (
          <div>
            {row.cart.coupon_code ? (
              <div className="flex items-center gap-1">
                <span
                  className="text-xs font-mono font-bold"
                  style={{ color: 'var(--color-cta)' }}
                >
                  {row.cart.coupon_code}
                </span>
                <span className="text-xs" style={{ color: 'var(--color-success)' }}>
                  -{formatAmount(row.cart.coupon_discount)}
                </span>
              </div>
            ) : (
              <span className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
                None
              </span>
            )}
          </div>
        ),
      },
      {
        key: 'total',
        header: 'Total',
        render: (row) => (
          <div>
            <div className="text-sm font-bold" style={{ color: 'var(--color-text)' }}>
              {formatAmount(row.summary.grand_total)}
            </div>
            {Number(row.cart.coupon_discount) > 0 && (
              <div className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
                after discount
              </div>
            )}
          </div>
        ),
      },
      {
        key: 'date',
        header: 'Last Updated',
        render: (row) => (
          <span className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
            {new Date(row.cart.updated_at).toLocaleDateString('en-US', {
              day: '2-digit',
              month: 'short',
              year: 'numeric',
              hour: '2-digit',
              minute: '2-digit',
            })}
          </span>
        ),
      },
      {
        key: 'actions',
        header: 'Actions',
        className: 'text-right',
        render: (row) => (
          <div className="flex justify-end gap-1">
            <button
              onClick={() => setDetailModal({ isOpen: true, cart: row })}
              className="p-1.5 rounded hover:bg-surface-alt transition-colors"
              style={{ color: 'var(--color-info)' }}
              title="View Items"
            >
              <Eye size={14} />
            </button>
            {row.cart.user_email && (
              <button
                onClick={() => handleSendReminder(row.cart.id)}
                disabled={sendingReminder === row.cart.id}
                className="p-1.5 rounded hover:bg-surface-alt transition-colors"
                style={{ color: 'var(--color-cta)' }}
                title="Send Reminder Email"
              >
                {sendingReminder === row.cart.id ? (
                  <svg className="animate-spin h-3.5 w-3.5" viewBox="0 0 24 24">
                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"/>
                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                  </svg>
                ) : (
                  <Mail size={14} />
                )}
              </button>
            )}
            <button
              onClick={() => handleClearCartClick(row.cart.id)}
              className="p-1.5 rounded hover:bg-red-50 transition-colors"
              style={{ color: 'var(--color-danger)' }}
              title="Clear Cart"
            >
              <Trash2 size={14} />
            </button>
          </div>
        ),
      },
    ],
    [handleClearCartClick, handleSendReminder, sendingReminder, formatAmount]
  );

  // ─── Render ──────────────────────────────────────────────────────────
  if (!carts || carts.length === 0) {
    return (
      <div
        className="text-center py-16 rounded-lg"
        style={{
          background: 'var(--color-surface)',
          border: '1px solid var(--color-border)',
        }}
      >
        <ShoppingCart
          size={56}
          className="mx-auto mb-4"
          style={{ color: 'var(--color-text-tertiary)' }}
        />
        <h3 className="text-lg font-semibold mb-2" style={{ color: 'var(--color-text)' }}>
          No Active Carts
        </h3>
        <p className="text-sm" style={{ color: 'var(--color-text-secondary)' }}>
          No customers have items in their carts right now.
        </p>
      </div>
    );
  }

  return (
    <>
      <DataTable
        columns={columns}
        data={carts}
        loading={loading}
        selectedIds={selectedIds}
        onSelect={() => {}}
        onSelectAll={() => {}}
        getRowId={(row) => row.cart.id}
        showCheckbox={false}
        emptyMessage="No carts found"
        skeletonRows={5}
      />

      <CartDetailModal
        isOpen={detailModal.isOpen}
        cart={detailModal.cart}
        onClose={() => setDetailModal({ isOpen: false, cart: null })}
      />

      <Modal
        isOpen={confirmModal.isOpen}
        onClose={closeConfirmModal}
        onConfirm={confirmModal.onConfirm}
        title={confirmModal.title}
        message={confirmModal.message}
        confirmText={confirmModal.confirmText}
        cancelText={confirmModal.cancelText}
        type={confirmModal.type}
        isLoading={!!clearingCartId}
      />
    </>
  );
}