'use client';

import { useState, useMemo, useCallback } from 'react';
import Image from 'next/image';
import DataTable, { Column } from '@/components/ui/DataTable';
import Modal from '@/components/ui/CustomModal';
import { toast } from 'react-hot-toast';
import { Heart, Trash2, User, Mail } from 'lucide-react';
import { getCloudinaryThumbnail } from '@/lib/cloudinary';
import { useRouter } from 'next/navigation';
import { getApiErrorMessage } from '@/lib/utils/apiError';
import { useCurrencyStore } from '@/store/currencyStore';

// ─── Types ────────────────────────────────────────────────────────────────
interface WishlistItem {
  id: string;
  user_id: string | null;
  session_id: string | null;
  product_id: string;
  variant_id: string | null;
  product_name: string;
  sku: string;
  unit_price: number;
  image_url: string | null;
  user_name?: string;
  user_email?: string;
  last_reminder_sent_at?: string | null;
  reminder_count?: number;
  created_at: string;
}

interface WishlistTableProps {
  data: WishlistItem[];
  onRefresh?: () => void;
}

// ─── Component ────────────────────────────────────────────────────────────
export default function WishlistTable({ data }: WishlistTableProps) {
  const formatAmount = useCurrencyStore((s) => s.formatAmount);
  const [loading, setLoading] = useState(false);
  const [selectedIds] = useState<Set<string>>(new Set());
  const [deleteId, setDeleteId] = useState<string | null>(null);
  const [items, setItems] = useState<WishlistItem[]>(data);
  const [sendingReminder, setSendingReminder] = useState<string | null>(null);

  const router = useRouter();

  // Update items when data prop changes
  if (data !== items) {
    setItems(data);
  }

  // ─── Handlers ───────────────────────────────────────────────────────
  const handleDelete = useCallback(async () => {
    if (!deleteId) return;
    setLoading(true);
    try {
      const res = await fetch(`/api/wishlist/${deleteId}`, { method: 'DELETE' });
      if (res.ok) {
        setItems((prev) => prev.filter((i) => i.id !== deleteId));
        toast.success('Removed from wishlist');
        router.refresh();
        const responseData = await res.json();
        toast.error(getApiErrorMessage(responseData, 'Failed to remove'));
      }
    } catch {
      toast.error('Network error');
    } finally {
      setLoading(false);
      setDeleteId(null);
    }
  }, [deleteId, router]);

  const handleDeleteClick = useCallback((id: string) => {
    setDeleteId(id);
  }, []);

  const handleSendReminder = useCallback(
    async (userId: string) => {
      if (!userId) return;
      setSendingReminder(userId);
      try {
        const res = await fetch('/api/wishlist/send-reminder', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ user_id: userId }),
        });
        const responseData = await res.json();
        if (res.ok) {
          toast.success('Wishlist reminder sent!');
          router.refresh();
        } else {
          toast.error(getApiErrorMessage(responseData, 'Failed to send reminder'));
        }
      } catch {
        toast.error('Network error');
      } finally {
        setSendingReminder(null);
      }
    },
    [router]
  );

  const closeModal = useCallback(() => {
    if (!loading) {
      setDeleteId(null);
    }
  }, [loading]);

  // ─── Columns ────────────────────────────────────────────────────────
  const columns = useMemo<Column<WishlistItem>[]>(
    () => [
      {
        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 shrink-0"
              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.user_name || 'Guest User'}
              </p>
              <p className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
                {row.user_email ||
                  (row.session_id
                    ? row.session_id.substring(0, 16) + '...'
                    : 'No email')}
              </p>
              {row.last_reminder_sent_at && (
                <p className="text-xs mt-0.5" style={{ color: '#EC4899' }}>
                  📧 Reminder sent {row.reminder_count || 0}x | Last:{' '}
                  {new Date(row.last_reminder_sent_at).toLocaleDateString()}
                </p>
              )}
            </div>
          </div>
        ),
      },
      {
        key: 'product',
        header: 'Product',
        render: (row) => (
          <div className="flex items-center gap-3">
            {row.image_url ? (
              <div className="w-10 h-10 rounded-lg overflow-hidden shrink-0 relative bg-gray-100">
                <Image
                  src={getCloudinaryThumbnail(row.image_url)}
                  alt={row.product_name}
                  fill
                  className="object-cover"
                  sizes="40px"
                />
              </div>
            ) : (
              <div
                className="w-10 h-10 rounded-lg flex items-center justify-center shrink-0"
                style={{ background: 'var(--color-cta-light)' }}
              >
                <Heart size={16} style={{ color: '#EC4899' }} />
              </div>
            )}
            <div>
              <p className="text-sm font-medium" style={{ color: 'var(--color-text)' }}>
                {row.product_name}
              </p>
              <p className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
                SKU: {row.sku}
              </p>
            </div>
          </div>
        ),
      },
      {
        key: 'price',
        header: 'Price',
        render: (row) => (
          <span className="text-sm font-semibold" style={{ color: 'var(--color-text)' }}>
            {formatAmount(row.unit_price || 0)}
          </span>
        ),
      },
      {
        key: 'date',
        header: 'Added On',
        render: (row) => (
          <span className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
            {new Date(row.created_at).toLocaleDateString('en-US', {
              day: '2-digit',
              month: 'short',
              year: 'numeric',
            })}
          </span>
        ),
      },
      {
        key: 'actions',
        header: '',
        className: 'text-right',
        render: (row) => (
          <div className="flex justify-end gap-1">
            {row.user_id && row.user_email && (
              <button
                onClick={() => handleSendReminder(row.user_id!)}
                disabled={sendingReminder === row.user_id}
                className="p-1.5 rounded hover:bg-surface-alt transition-colors"
                style={{ color: '#EC4899' }}
                title="Send Wishlist Reminder"
              >
                {sendingReminder === row.user_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={() => handleDeleteClick(row.id)}
              className="p-1.5 rounded hover:bg-red-50 transition-colors"
              style={{ color: 'var(--color-danger)' }}
              title="Remove from Wishlist"
            >
              <Trash2 size={14} />
            </button>
          </div>
        ),
      },
    ],
    [handleDeleteClick, handleSendReminder, sendingReminder, formatAmount]
  );

  // ─── Render ──────────────────────────────────────────────────────────
  if (!items || items.length === 0) {
    return (
      <div
        className="text-center py-16 rounded-lg"
        style={{
          background: 'var(--color-surface)',
          border: '1px solid var(--color-border)',
        }}
      >
        <Heart
          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 Wishlist Items
        </h3>
        <p className="text-sm" style={{ color: 'var(--color-text-secondary)' }}>
          Customers haven&apos;t saved any products to their wishlists yet.
        </p>
      </div>
    );
  }

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

      <Modal
        isOpen={!!deleteId}
        onClose={closeModal}
        onConfirm={handleDelete}
        title="Remove from Wishlist"
        message="Are you sure you want to remove this item from the wishlist?"
        confirmText="Remove"
        cancelText="Cancel"
        type="danger"
        isLoading={loading}
      />
    </>
  );
}