'use client';

import { useState, useCallback, useEffect, useMemo, useRef } from 'react';
import DataTable, { Column } from '@/components/ui/DataTable';
import Pagination from '@/components/ui/Pagination';
import FilterPanel from '@/components/ui/FilterPanel';
import Toolbar from '@/components/ui/Toolbar';
import Modal from '@/components/ui/CustomModal';
import CommonTimelineModal from '@/components/ui/CommonTimelineModal';
import StatusChangeModal from '@/components/admin/orders/StatusChangeModal';
import OrderDetailModal from '@/components/admin/orders/OrderDetailModal';
import OrderEditModal from '@/components/admin/orders/OrderEditModal';
import BulkStatusModal from '@/components/admin/orders/BulkStatusModal';
import { toast } from 'react-hot-toast';
import { History, Eye, RefreshCw, Ban, RotateCcw, Trash2, SquarePen } from 'lucide-react';
import { getApiErrorMessage } from '@/lib/utils/apiError';
import { useCurrencyStore } from '@/store/currencyStore';

// ─── Types ────────────────────────────────────────────────────────────────
interface Order {
  id: string;
  order_number: string;
  user_id: string;
  user_name?: string;
  user_email?: string;
  status: string;
  payment_method: string;
  payment_status: string;
  delivery_fee: number;
  coupon_code: string | null;
  coupon_discount_amount: number;
  items_count: number;
  active_items_count?: number;
  returned_items_count?: number;
  items_total: number;
  grand_total: number;
  shipping_city: string | null;
  shipping_full_name?: string | null;
  shipping_phone?: string | null;
  shipping_address_line1?: string | null;
  shipping_address_line2?: string | null;
  shipping_state?: string | null;
  shipping_postal_code?: string | null;
  shipping_country?: string | null;
  shipping_landmark?: string | null;
  customer_notes: string | null;
  deleted_at: string | null;
  created_at: string;
}

interface PaginationData {
  page: number;
  limit: number;
  total: number;
  totalPages: number;
}

interface TabCounts {
  all: number;
  pending: number;
  confirmed: number;
  shipped: number;
  delivered: number;
  cancelled: number;
  returned: number;
  refunded: number;
  deleted: number;
}

interface OrdersTableProps {
  canUpdate: boolean;
  canDelete: boolean;
  canUpdateStatus: boolean;
  canCancel: boolean;
  canSingleItemStatus: boolean;
  canRefund: boolean;
  canViewPayments: boolean;
  canManagePayments: boolean;
  canDeletePayments: boolean;
  canViewPaymentTimeline: boolean;
  canRestorePayments: boolean;
  canViewDeletedPayments: boolean;
  canPermanentDeletePayments: boolean;
  canExport: boolean;
  canBulkUpdate: boolean;
  canBulkDelete: boolean;
  canBulkRestore: boolean;
  canViewTimeline: boolean;
  canViewDeleted: boolean;
  canPermanentDelete: boolean;
  canRestore: boolean;
  initialOrders: {
    orders: Order[];
    pagination: PaginationData;
  };
  initialCounts: TabCounts;
}

type TabType = string;

interface ActiveFilters {
  search: string;
  payment_method: string;
  payment_status: string;
  startDate: string;
  endDate: string;
}

interface DeletedFilters {
  search: string;
  startDate: string;
  endDate: string;
}

interface ModalConfig {
  isOpen: boolean;
  type: 'danger' | 'warning' | 'info' | 'success';
  title: string;
  message: string;
  confirmText?: string;
  cancelText?: string;
  onConfirm: () => void;
}

interface TimelineModalState {
  isOpen: boolean;
  entityId: string;
  entityName: string;
}

interface StatusModalState {
  isOpen: boolean;
  orderId: string | null;
  orderNumber: string;
  currentStatus: string;
}

interface DetailModalState {
  isOpen: boolean;
  orderId: string | null;
}

interface EditModalState {
  isOpen: boolean;
  orderId: string | null;
}

interface BulkStatusModalState {
  isOpen: boolean;
  selectedCount: number;
}

// ─── Constants ────────────────────────────────────────────────────────────
const STATUS_COLORS: Record<string, string> = {
  pending: '#F59E0B',
  confirmed: '#3B82F6',
  shipped: '#8B5CF6',
  delivered: '#059669',
  cancelled: '#EF4444',
  returned: '#DC2626',
  refunded: '#F97316',
};

const STATUS_LABELS: Record<string, string> = {
  pending: 'Pending',
  confirmed: 'Confirmed',
  shipped: 'Shipped',
  delivered: 'Delivered',
  cancelled: 'Cancelled',
  returned: 'Returned',
  refunded: 'Refunded',
};

const PAYMENT_METHOD_LABELS: Record<string, string> = {
  cod: 'COD',
  bank_transfer: 'Bank Transfer',
  paypal: 'PayPal',
  stripe: 'Stripe',
};

const PAYMENT_STATUS_COLORS: Record<string, string> = {
  pending: '#F59E0B',
  paid: '#10B981',
  failed: '#EF4444',
  refunded: '#8B5CF6',
  partially_refunded: '#F97316',
};

const TABS = [
  { key: 'all', label: 'All Orders' },
  { key: 'pending', label: 'Pending' },
  { key: 'confirmed', label: 'Confirmed' },
  { key: 'shipped', label: 'Shipped' },
  { key: 'delivered', label: 'Delivered' },
  { key: 'cancelled', label: 'Cancelled' },
  { key: 'returned', label: 'Returned' },
  { key: 'refunded', label: 'Refunded' },
];

const EMPTY_ACTIVE_FILTERS: ActiveFilters = {
  search: '',
  payment_method: '',
  payment_status: '',
  startDate: '',
  endDate: '',
};

const EMPTY_DELETED_FILTERS: DeletedFilters = {
  search: '',
  startDate: '',
  endDate: '',
};

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

interface EditOrderItem {
  id: string;
  product_name: string;
  sku: string;
  variant_name: string | null;
  variant_sku?: string | null;
  quantity: number;
  unit_price: number;
  total_price: number;
  is_returned: boolean;
}

interface EditShippingData {
  shipping_full_name?: string | null;
  shipping_phone?: string | null;
  shipping_address_line1?: string | null;
  shipping_address_line2?: string | null;
  shipping_city?: string | null;
  shipping_state?: string | null;
  shipping_postal_code?: string | null;
  shipping_landmark?: string | null;
}

const TIMELINE_MODAL_CLOSED: TimelineModalState = { isOpen: false, entityId: '', entityName: '' };

const STATUS_MODAL_CLOSED: StatusModalState = {
  isOpen: false,
  orderId: null,
  orderNumber: '',
  currentStatus: '',
};

const DETAIL_MODAL_CLOSED: DetailModalState = {
  isOpen: false,
  orderId: null,
};

const EDIT_MODAL_CLOSED: EditModalState = {
  isOpen: false,
  orderId: null,
};

const BULK_STATUS_MODAL_CLOSED: BulkStatusModalState = {
  isOpen: false,
  selectedCount: 0,
};

// ─── API Helpers ──────────────────────────────────────────────────────────
async function fetchOrdersApi(
  page: number,
  tab: string,
  active: ActiveFilters,
  deleted: DeletedFilters,
  signal: AbortSignal
) {
  const params = new URLSearchParams({ page: String(page), limit: '10' });

  if (tab === 'deleted') {
    params.append('includeDeleted', 'true');
    if (deleted.search.trim()) params.append('search', deleted.search.trim());
    if (deleted.startDate) params.append('deletedStartDate', deleted.startDate);
    if (deleted.endDate) params.append('deletedEndDate', deleted.endDate);
  } else {
    if (tab !== 'all') params.append('status', tab);
    if (active.search.trim()) params.append('search', active.search.trim());
    if (active.payment_method) params.append('payment_method', active.payment_method);
    if (active.payment_status) params.append('payment_status', active.payment_status);
    if (active.startDate) params.append('startDate', active.startDate);
    if (active.endDate) params.append('endDate', active.endDate);
  }

  const res = await fetch(`/api/orders?${params}`, { cache: 'no-store', signal });
  if (!res.ok) throw new Error('Failed to fetch orders');
  return res.json() as Promise<{ data: { orders: Order[]; pagination: PaginationData } }>;
}

async function fetchCountsApi(): Promise<TabCounts> {
  const res = await fetch('/api/orders/counts', { cache: 'no-store' });
  if (!res.ok) throw new Error('Failed to fetch counts');
  const json = await res.json();
  return json.data as TabCounts;
}

// ─── Badge Components ─────────────────────────────────────────────────────
function StatusBadge({ status }: { status: string }) {
  return (
    <span
      className="inline-flex px-2 py-1 text-xs font-medium rounded-full capitalize"
      style={{
        background: `${STATUS_COLORS[status]}20`,
        color: STATUS_COLORS[status],
        border: `1px solid ${STATUS_COLORS[status]}40`,
      }}
    >
      {STATUS_LABELS[status] || status}
    </span>
  );
}

function PaymentBadge({ method, status }: { method: string; status: string }) {
  return (
    <div className="flex flex-col gap-0.5">
      <span className="text-xs font-medium" style={{ color: 'var(--color-text)' }}>
        {PAYMENT_METHOD_LABELS[method] || method}
      </span>
      <span className="text-xs capitalize" style={{ color: PAYMENT_STATUS_COLORS[status] }}>
        {status.replace(/_/g, ' ')}
      </span>
    </div>
  );
}

// ─── Main Component ───────────────────────────────────────────────────────
export default function OrdersTable({
  canUpdate,
  canDelete,
  canUpdateStatus,
  canCancel,
  canSingleItemStatus,
  canDeletePayments,
  canViewPayments,
  canManagePayments,
  canRefund,
  canExport,
  canBulkUpdate,
  canBulkDelete,
  canBulkRestore,
  canViewTimeline,
  canViewDeleted,
  canPermanentDelete,
  canRestore,
  canViewPaymentTimeline,
  canRestorePayments,
  canViewDeletedPayments,
  canPermanentDeletePayments,
  initialOrders,
  initialCounts,
}: OrdersTableProps) {

  // ── Core state ──────────────────────────────────────────────────────
  const formatAmount = useCurrencyStore((s) => s.formatAmount);
  const [orders, setOrders] = useState<Order[]>(initialOrders.orders);
  const [pagination, setPagination] = useState<PaginationData>(initialOrders.pagination);
  const [counts, setCounts] = useState<TabCounts>(initialCounts);
  const [currentPage, setCurrentPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const [activeTab, setActiveTab] = useState<TabType>('pending');
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
  const [showFilters, setShowFilters] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);

  // ── Modal states ────────────────────────────────────────────────────
  const [modal, setModal] = useState<ModalConfig>(MODAL_CLOSED);
  const [timelineModal, setTimelineModal] = useState<TimelineModalState>(TIMELINE_MODAL_CLOSED);
  const [statusModal, setStatusModal] = useState<StatusModalState>(STATUS_MODAL_CLOSED);
  const [detailModal, setDetailModal] = useState<DetailModalState>(DETAIL_MODAL_CLOSED);
  const [editModal, setEditModal] = useState<EditModalState>(EDIT_MODAL_CLOSED);
  const [bulkStatusModal, setBulkStatusModal] = useState<BulkStatusModalState>(BULK_STATUS_MODAL_CLOSED);

  // ── Edit data state ─────────────────────────────────────────────────
  const [editItems, setEditItems] = useState<EditOrderItem[]>([]);
const [editShipping, setEditShipping] = useState<EditShippingData>({});
  const [editNotes, setEditNotes] = useState<string | null>(null);

  // ── Filters ─────────────────────────────────────────────────────────
  const [activeFilters, setActiveFilters] = useState<ActiveFilters>(EMPTY_ACTIVE_FILTERS);
  const [deletedFilters, setDeletedFilters] = useState<DeletedFilters>(EMPTY_DELETED_FILTERS);
  const [draftActive, setDraftActive] = useState<ActiveFilters>(EMPTY_ACTIVE_FILTERS);
  const [draftDeleted, setDraftDeleted] = useState<DeletedFilters>(EMPTY_DELETED_FILTERS);

  // ── Refs ────────────────────────────────────────────────────────────
  const abortRef = useRef<AbortController | null>(null);
  const ordersRef = useRef(orders);
  const selectedRef = useRef(selectedIds);

  useEffect(() => {
    ordersRef.current = orders;
  }, [orders]);
  useEffect(() => {
    selectedRef.current = selectedIds;
  }, [selectedIds]);
  useEffect(() => () => abortRef.current?.abort(), []);

  // ── Fetch functions ─────────────────────────────────────────────────
  const fetchOrders = useCallback(
    async (
      page: number,
      tab: string,
      committed: { active: ActiveFilters; deleted: DeletedFilters }
    ) => {
      abortRef.current?.abort();
      const ctrl = new AbortController();
      abortRef.current = ctrl;
      setLoading(true);
      try {
        const json = await fetchOrdersApi(page, tab, committed.active, committed.deleted, ctrl.signal);
        setOrders(json.data.orders);
        setPagination(json.data.pagination);
        setCurrentPage(page);
        setSelectedIds(new Set());
      } catch (err) {
        if ((err as Error).name === 'AbortError') return;
        toast.error('Failed to load orders');
      } finally {
        if (abortRef.current === ctrl) setLoading(false);
      }
    },
    []
  );

  const refreshCounts = useCallback(async () => {
    try {
      setCounts(await fetchCountsApi());
    } catch {
      /* ignore */
    }
  }, []);

  const refreshAfterMutation = useCallback(
    async (
      tab: string,
      committed: { active: ActiveFilters; deleted: DeletedFilters },
      page: number
    ) => {
      await Promise.all([fetchOrders(page, tab, committed), refreshCounts()]);
    },
    [fetchOrders, refreshCounts]
  );

  // ── Auto-refresh for child modals ───────────────────────────────────
  const handleOrderDataChange = useCallback(() => {
    refreshAfterMutation(activeTab, { active: activeFilters, deleted: deletedFilters }, currentPage);
  }, [refreshAfterMutation, activeTab, activeFilters, deletedFilters, currentPage]);

  // ── Modal helpers ───────────────────────────────────────────────────
  const closeModal = useCallback(() => {
    if (!isDeleting) setModal(MODAL_CLOSED);
  }, [isDeleting]);

  const openModal = useCallback((config: Omit<ModalConfig, 'isOpen'>) => {
    setModal({ isOpen: true, ...config });
  }, []);

  // ── Timeline ────────────────────────────────────────────────────────
  const handleTimelineClick = useCallback((order: Order) => {
    setTimelineModal({ isOpen: true, entityId: order.id, entityName: order.order_number });
  }, []);

  // ── Status Change Modal ─────────────────────────────────────────────
  const handleStatusClick = useCallback((order: Order) => {
    setStatusModal({
      isOpen: true,
      orderId: order.id,
      orderNumber: order.order_number,
      currentStatus: order.status,
    });
  }, []);

  const handleStatusChange = useCallback(
    async (orderId: string, newStatus: string, note: string) => {
      try {
        const res = await fetch(`/api/orders/${orderId}/status`, {
          method: 'PATCH',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ status: newStatus, note }),
        });
        const data = await res.json();
        if (res.ok && data.success) {
          setStatusModal(STATUS_MODAL_CLOSED);
          await refreshAfterMutation(activeTab, { active: activeFilters, deleted: deletedFilters }, currentPage);
          toast.success(data.message || 'Status updated');
        } else {
          toast.error(getApiErrorMessage(data, 'Failed to update status'));
        }
      } catch {
        toast.error('Network error');
      }
    },
    [refreshAfterMutation, activeTab, activeFilters, deletedFilters, currentPage]
  );

  // ── Bulk Status Change ──────────────────────────────────────────────
  const handleBulkStatusChange = useCallback(
    async (status: string, note: string) => {
      try {
        const res = await fetch('/api/orders/bulk/status', {
          method: 'PATCH',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ ids: Array.from(selectedRef.current), status, note }),
        });
        const data = await res.json();
        if (res.ok && data.success) {
          setBulkStatusModal(BULK_STATUS_MODAL_CLOSED);
          await refreshAfterMutation(activeTab, { active: activeFilters, deleted: deletedFilters }, currentPage);
          toast.success(data.message || 'Orders updated');
        } else {
          toast.error(getApiErrorMessage(data, 'Failed to update orders'));
        }
      } catch {
        toast.error('Network error');
      }
    },
    [refreshAfterMutation, activeTab, activeFilters, deletedFilters, currentPage]
  );

  // ── Order Detail Modal ──────────────────────────────────────────────
  const handleViewClick = useCallback((orderId: string) => {
    setDetailModal({ isOpen: true, orderId });
  }, []);

  const handleStatusChangeFromDetail = useCallback(
    (orderId: string) => {
      setDetailModal(DETAIL_MODAL_CLOSED);
      setTimeout(() => {
        const order = ordersRef.current.find((o) => o.id === orderId);
        if (order) handleStatusClick(order);
      }, 300);
    },
    [handleStatusClick]
  );

  // ── Order Edit Modal ────────────────────────────────────────────────
  const handleEditClick = useCallback(async (order: Order) => {
    try {
      const res = await fetch(`/api/orders/${order.id}`);
      if (res.ok) {
        const data = await res.json();
        setEditItems(data.data.items || []);
        const ord = data.data.order;
        setEditShipping({
          shipping_full_name: ord?.shipping_full_name,
          shipping_phone: ord?.shipping_phone,
          shipping_address_line1: ord?.shipping_address_line1,
          shipping_address_line2: ord?.shipping_address_line2,
          shipping_city: ord?.shipping_city,
          shipping_state: ord?.shipping_state,
          shipping_postal_code: ord?.shipping_postal_code,
          shipping_landmark: ord?.shipping_landmark,
        });
        setEditNotes(ord?.customer_notes || null);
        setEditModal({ isOpen: true, orderId: order.id });
      } else {
        toast.error('Failed to load order details');
      }
    } catch {
      toast.error('Network error');
    }
  }, []);

  // ── CRUD operations ─────────────────────────────────────────────────
  const handleDeleteOrder = useCallback(
    async (id: string) => {
      setIsDeleting(true);
      try {
        const res = await fetch(`/api/orders/${id}`, { method: 'DELETE' });
        if (res.ok) {
          setModal(MODAL_CLOSED);
          await refreshAfterMutation(activeTab, { active: activeFilters, deleted: deletedFilters }, currentPage);
          toast.success('Order deleted');
        } else {
          toast.error((await res.json()).message || 'Failed to delete order');
        }
      } catch {
        toast.error('Network error');
      } finally {
        setIsDeleting(false);
      }
    },
    [refreshAfterMutation, activeTab, activeFilters, deletedFilters, currentPage]
  );

  const handleRestoreOrder = useCallback(
    async (id: string) => {
      setIsDeleting(true);
      try {
        const res = await fetch(`/api/orders/${id}/restore`, { method: 'POST' });
        if (res.ok) {
          setModal(MODAL_CLOSED);
          await refreshAfterMutation(activeTab, { active: activeFilters, deleted: deletedFilters }, currentPage);
          toast.success('Order restored');
        } else {
          toast.error((await res.json()).message || 'Failed to restore');
        }
      } catch {
        toast.error('Network error');
      } finally {
        setIsDeleting(false);
      }
    },
    [refreshAfterMutation, activeTab, activeFilters, deletedFilters, currentPage]
  );

  const handlePermanentDelete = useCallback(
    async (id: string) => {
      setIsDeleting(true);
      try {
        const res = await fetch(`/api/orders/${id}/permanent`, { method: 'DELETE' });
        if (res.ok) {
          setModal(MODAL_CLOSED);
          await refreshAfterMutation(activeTab, { active: activeFilters, deleted: deletedFilters }, currentPage);
          toast.success('Order permanently deleted');
        } else {
          toast.error((await res.json()).message || 'Failed to delete');
        }
      } catch {
        toast.error('Network error');
      } finally {
        setIsDeleting(false);
      }
    },
    [refreshAfterMutation, activeTab, activeFilters, deletedFilters, currentPage]
  );

  // ── Bulk operations ─────────────────────────────────────────────────
  const handleBulkDelete = useCallback(async () => {
    setIsDeleting(true);
    try {
      const res = await fetch('/api/orders/bulk', {
        method: 'DELETE',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ids: Array.from(selectedRef.current) }),
      });
      if (res.ok) {
        setModal(MODAL_CLOSED);
        await refreshAfterMutation(activeTab, { active: activeFilters, deleted: deletedFilters }, currentPage);
        toast.success('Orders deleted');
      } else {
        toast.error((await res.json()).message || 'Failed to delete');
      }
    } catch {
      toast.error('Network error');
    } finally {
      setIsDeleting(false);
    }
  }, [refreshAfterMutation, activeTab, activeFilters, deletedFilters, currentPage]);

  const handleBulkRestore = useCallback(async () => {
    setIsDeleting(true);
    try {
      const res = await fetch('/api/orders/bulk/restore', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ids: Array.from(selectedRef.current) }),
      });
      if (res.ok) {
        setModal(MODAL_CLOSED);
        await refreshAfterMutation(activeTab, { active: activeFilters, deleted: deletedFilters }, currentPage);
        toast.success('Orders restored');
      } else {
        toast.error((await res.json()).message || 'Failed to restore');
      }
    } catch {
      toast.error('Network error');
    } finally {
      setIsDeleting(false);
    }
  }, [refreshAfterMutation, activeTab, activeFilters, deletedFilters, currentPage]);

  const handleBulkPermanentDelete = useCallback(async () => {
    setIsDeleting(true);
    try {
      const res = await fetch('/api/orders/bulk/permanent', {
        method: 'DELETE',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ids: Array.from(selectedRef.current) }),
      });
      if (res.ok) {
        setModal(MODAL_CLOSED);
        await refreshAfterMutation(activeTab, { active: activeFilters, deleted: deletedFilters }, currentPage);
        toast.success('Orders permanently deleted');
      } else {
        toast.error((await res.json()).message || 'Failed to delete');
      }
    } catch {
      toast.error('Network error');
    } finally {
      setIsDeleting(false);
    }
  }, [refreshAfterMutation, activeTab, activeFilters, deletedFilters, currentPage]);

  // ── Tab change ──────────────────────────────────────────────────────
  const handleTabChange = useCallback(
    (tab: TabType) => {
      setActiveTab(tab);
      setShowFilters(false);
      setActiveFilters(EMPTY_ACTIVE_FILTERS);
      setDeletedFilters(EMPTY_DELETED_FILTERS);
      setDraftActive(EMPTY_ACTIVE_FILTERS);
      setDraftDeleted(EMPTY_DELETED_FILTERS);
      fetchOrders(1, tab, {
        active: EMPTY_ACTIVE_FILTERS,
        deleted: EMPTY_DELETED_FILTERS,
      });
    },
    [fetchOrders]
  );

  // ── Pagination ──────────────────────────────────────────────────────
  const handlePageChange = useCallback(
    (page: number) => {
      if (page < 1 || page > pagination.totalPages) return;
      fetchOrders(page, activeTab, { active: activeFilters, deleted: deletedFilters });
    },
    [pagination.totalPages, fetchOrders, activeTab, activeFilters, deletedFilters]
  );

  // ── Filter handlers ─────────────────────────────────────────────────
  const handleToggleFilters = useCallback(() => {
    setShowFilters((prev) => {
      if (!prev) {
        setDraftActive({ ...activeFilters });
        setDraftDeleted({ ...deletedFilters });
      }
      return !prev;
    });
  }, [activeFilters, deletedFilters]);

  const handleApplyFilters = useCallback(() => {
    if (activeTab === 'deleted') {
      setDeletedFilters(draftDeleted);
      fetchOrders(1, activeTab, { active: activeFilters, deleted: draftDeleted });
    } else {
      setActiveFilters(draftActive);
      fetchOrders(1, activeTab, { active: draftActive, deleted: deletedFilters });
    }
  }, [activeTab, draftActive, draftDeleted, activeFilters, deletedFilters, fetchOrders]);

  const handleResetFilters = useCallback(() => {
    if (activeTab === 'deleted') {
      setDraftDeleted(EMPTY_DELETED_FILTERS);
      setDeletedFilters(EMPTY_DELETED_FILTERS);
      fetchOrders(1, activeTab, { active: activeFilters, deleted: EMPTY_DELETED_FILTERS });
    } else {
      setDraftActive(EMPTY_ACTIVE_FILTERS);
      setActiveFilters(EMPTY_ACTIVE_FILTERS);
      fetchOrders(1, activeTab, { active: EMPTY_ACTIVE_FILTERS, deleted: deletedFilters });
    }
  }, [activeTab, activeFilters, deletedFilters, fetchOrders]);

  // ── Selection ───────────────────────────────────────────────────────
  const handleSelectAll = useCallback(() => {
    setSelectedIds((prev) =>
      prev.size === ordersRef.current.length
        ? new Set()
        : new Set(ordersRef.current.map((r) => r.id))
    );
  }, []);

  const handleSelectOrder = useCallback((id: string) => {
    setSelectedIds((prev) => {
      const next = new Set(prev);
      if (next.has(id)) {
        next.delete(id);
      } else {
        next.add(id);
      }
      return next;
    });
  }, []);

  // ── Columns ─────────────────────────────────────────────────────────
  const columns = useMemo<Column<Order>[]>(() => {
    const cols: Column<Order>[] = [
      {
        key: 'order',
        header: 'Order',
        render: (order) => (
          <div>
            <div className="font-mono font-bold text-sm" style={{ color: 'var(--color-cta)' }}>
              {order.order_number}
            </div>
            <div className="text-xs" style={{ color: 'var(--color-text-secondary)' }}>
              {order.user_name || order.user_email || 'Guest'}
            </div>
          </div>
        ),
      },
      {
        key: 'items',
        header: 'Items',
        render: (order) => (
          <div className="text-center">
            <div className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
              {order.active_items_count || order.items_count} items
            </div>
            <div className="font-medium text-sm" style={{ color: 'var(--color-text)' }}>
              {formatAmount(order.grand_total || 0)}
            </div>
            {Number(order.returned_items_count || 0) > 0 && (
              <div className="text-xs mt-0.5" style={{ color: 'var(--color-danger)' }}>
                {order.returned_items_count} returned
              </div>
            )}
          </div>
        ),
      },
      {
        key: 'status',
        header: 'Status',
        render: (order) => <StatusBadge status={order.status} />,
      },
      {
        key: 'payment',
        header: 'Payment',
        render: (order) => (
          <PaymentBadge method={order.payment_method} status={order.payment_status} />
        ),
      },
      {
        key: 'date',
        header: 'Date',
        render: (order) => (
          <span className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
            {new Date(order.created_at).toLocaleDateString()}
          </span>
        ),
      },
    ];

    if (activeTab === 'deleted') {
      cols.push({
        key: 'deleted_at',
        header: 'Deleted',
        render: (order) => (
          <span className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
            {order.deleted_at ? new Date(order.deleted_at).toLocaleDateString() : '-'}
          </span>
        ),
      });
    }

    cols.push({
      key: 'actions',
      header: 'Actions',
      className: 'text-right',
      render: (order) => {
        const actions: React.ReactNode[] = [];

        // View details
        actions.push(
          <button
            key="view"
            onClick={() => handleViewClick(order.id)}
            className="p-1 rounded hover:bg-surface-alt transition-colors"
            style={{ color: 'var(--color-info)' }}
            title="View Details"
          >
            <Eye size={16} />
          </button>
        );

        // Timeline
        if (canViewTimeline) {
          actions.push(
            <button
              key="timeline"
              onClick={() => handleTimelineClick(order)}
              className="p-1 rounded hover:bg-surface-alt transition-colors"
              style={{ color: 'var(--color-text-secondary)' }}
              title="Timeline"
            >
              <History size={16} />
            </button>
          );
        }

        if (activeTab === 'deleted') {
          if (canRestore)
            actions.push(
              <button
                key="restore"
                onClick={() =>
                  openModal({
                    type: 'info',
                    title: 'Restore',
                    message: `Restore "${order.order_number}"?`,
                    confirmText: 'Restore',
                    cancelText: 'Cancel',
                    onConfirm: () => handleRestoreOrder(order.id),
                  })
                }
                className="p-1 rounded hover:bg-surface-alt"
                style={{ color: 'var(--color-success)' }}
                title="Restore"
              >
                <RotateCcw size={16} />
              </button>
            );
          if (canPermanentDelete)
            actions.push(
              <button
                key="perm-del"
                onClick={() =>
                  openModal({
                    type: 'danger',
                    title: 'Delete Permanently',
                    message: `Delete "${order.order_number}" forever?`,
                    confirmText: 'Delete',
                    cancelText: 'Cancel',
                    onConfirm: () => handlePermanentDelete(order.id),
                  })
                }
                className="p-1 rounded hover:bg-surface-alt"
                style={{ color: 'var(--color-danger)' }}
                title="Delete"
              >
                <Trash2 size={16} />
              </button>
            );
        } else {
          // Edit order (only pending/confirmed)
          if (canUpdate && ['pending', 'confirmed'].includes(order.status)) {
            actions.push(
              <button
                key="edit"
                onClick={() => handleEditClick(order)}
                className="p-1 rounded hover:bg-surface-alt transition-colors"
                style={{ color: 'var(--color-info)' }}
                title="Edit Order"
              >
                <SquarePen size={16} />
              </button>
            );
          }

          // Status change
          if (canUpdateStatus) {
            actions.push(
              <button
                key="status"
                onClick={() => handleStatusClick(order)}
                className="p-1 rounded hover:bg-surface-alt"
                style={{ color: 'var(--color-warning)' }}
                title="Change Status"
              >
                <RefreshCw size={16} />
              </button>
            );
          }

          // Cancel order
          if (
            canCancel &&
            !['cancelled', 'delivered', 'returned', 'refunded'].includes(order.status)
          ) {
            actions.push(
              <button
                key="cancel"
                onClick={() =>
                  openModal({
                    type: 'warning',
                    title: 'Cancel Order',
                    message: `Cancel "${order.order_number}"?`,
                    confirmText: 'Cancel Order',
                    cancelText: 'Keep',
                    onConfirm: () =>
                      handleStatusChange(order.id, 'cancelled', 'Order cancelled by admin'),
                  })
                }
                className="p-1 rounded hover:bg-surface-alt"
                style={{ color: 'var(--color-danger)' }}
                title="Cancel"
              >
                <Ban size={16} />
              </button>
            );
          }

          // Delete
          if (canDelete) {
            actions.push(
              <button
                key="delete"
                onClick={() =>
                  openModal({
                    type: 'danger',
                    title: 'Delete',
                    message: `Delete "${order.order_number}"?`,
                    confirmText: 'Delete',
                    cancelText: 'Cancel',
                    onConfirm: () => handleDeleteOrder(order.id),
                  })
                }
                className="p-1 rounded hover:bg-surface-alt"
                style={{ color: 'var(--color-danger)' }}
                title="Delete"
              >
                <Trash2 size={16} />
              </button>
            );
          }
        }

        return <div className="flex justify-end gap-1">{actions}</div>;
      },
    });

    return cols;
  }, [
    activeTab,
    canUpdate,
    canUpdateStatus,
    canCancel,
    canDelete,
    canPermanentDelete,
    canRestore,
    canViewTimeline,
    handleViewClick,
    handleEditClick,
    handleTimelineClick,
    handleStatusClick,
    handleRestoreOrder,
    handlePermanentDelete,
    handleDeleteOrder,
    handleStatusChange,
    openModal,
    formatAmount,
  ]);

  // ── Filter fields ───────────────────────────────────────────────────
  const filterFields = useMemo(() => {
    if (activeTab === 'deleted') {
      return [
        {
          name: 'deletedSearch',
          label: 'Search',
          type: 'text' as const,
          placeholder: 'Order number...',
          value: draftDeleted.search,
          onChange: (v: string) => setDraftDeleted((p) => ({ ...p, search: v })),
        },
        {
          name: 'deletedStartDate',
          label: 'Deleted From',
          type: 'date' as const,
          value: draftDeleted.startDate,
          onChange: (v: string) => setDraftDeleted((p) => ({ ...p, startDate: v })),
        },
        {
          name: 'deletedEndDate',
          label: 'Deleted To',
          type: 'date' as const,
          value: draftDeleted.endDate,
          onChange: (v: string) => setDraftDeleted((p) => ({ ...p, endDate: v })),
        },
      ];
    }
    return [
      {
        name: 'search',
        label: 'Search',
        type: 'text' as const,
        placeholder: 'Order number or customer...',
        value: draftActive.search,
        onChange: (v: string) => setDraftActive((p) => ({ ...p, search: v })),
      },
      {
        name: 'payment_method',
        label: 'Payment Method',
        type: 'select' as const,
        options: [
          { value: '', label: 'All' },
          { value: 'cod', label: 'COD' },
          { value: 'bank_transfer', label: 'Bank Transfer' },
          { value: 'paypal', label: 'PayPal' },
          { value: 'stripe', label: 'Stripe' },
        ],
        value: draftActive.payment_method,
        onChange: (v: string) => setDraftActive((p) => ({ ...p, payment_method: v })),
      },
      {
        name: 'payment_status',
        label: 'Payment Status',
        type: 'select' as const,
        options: [
          { value: '', label: 'All' },
          { value: 'pending', label: 'Pending' },
          { value: 'paid', label: 'Paid' },
          { value: 'failed', label: 'Failed' },
          { value: 'refunded', label: 'Refunded' },
        ],
        value: draftActive.payment_status,
        onChange: (v: string) => setDraftActive((p) => ({ ...p, payment_status: v })),
      },
      {
        name: 'startDate',
        label: 'From Date',
        type: 'date' as const,
        value: draftActive.startDate,
        onChange: (v: string) => setDraftActive((p) => ({ ...p, startDate: v })),
      },
      {
        name: 'endDate',
        label: 'To Date',
        type: 'date' as const,
        value: draftActive.endDate,
        onChange: (v: string) => setDraftActive((p) => ({ ...p, endDate: v })),
      },
    ];
  }, [activeTab, draftActive, draftDeleted]);

  // ── Bulk action bar ─────────────────────────────────────────────────
  const bulkActionBar = useMemo(() => {
    if (selectedIds.size === 0) return null;

    if (activeTab === 'deleted') {
      return (
        <div className="flex gap-2">
          {canBulkRestore && (
            <button
              onClick={() =>
                openModal({
                  type: 'info',
                  title: 'Bulk Restore',
                  message: `Restore ${selectedIds.size} order(s)?`,
                  confirmText: 'Restore All',
                  cancelText: 'Cancel',
                  onConfirm: handleBulkRestore,
                })
              }
              className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium"
              style={{ background: 'var(--color-success)', color: 'white' }}
            >
              <RotateCcw size={16} /> Restore ({selectedIds.size})
            </button>
          )}
          {canPermanentDelete && (
            <button
              onClick={() =>
                openModal({
                  type: 'danger',
                  title: 'Delete All',
                  message: `Permanently delete ${selectedIds.size} order(s)?`,
                  confirmText: 'Delete All',
                  cancelText: 'Cancel',
                  onConfirm: handleBulkPermanentDelete,
                })
              }
              className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium"
              style={{ background: 'var(--color-danger)', color: 'white' }}
            >
              <Trash2 size={16} /> Delete ({selectedIds.size})
            </button>
          )}
        </div>
      );
    }

    return (
      <div className="flex gap-2">
        {canBulkUpdate && (
          <button
            onClick={() =>
              setBulkStatusModal({ isOpen: true, selectedCount: selectedIds.size })
            }
            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium"
            style={{ background: 'var(--color-cta)', color: 'white' }}
          >
            <RefreshCw size={16} /> Update Status ({selectedIds.size})
          </button>
        )}
        {canBulkDelete && (
          <button
            onClick={() =>
              openModal({
                type: 'danger',
                title: 'Bulk Delete',
                message: `Delete ${selectedIds.size} order(s)?`,
                confirmText: 'Delete All',
                cancelText: 'Cancel',
                onConfirm: handleBulkDelete,
              })
            }
            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium"
            style={{ background: 'var(--color-danger)', color: 'white' }}
          >
            <Trash2 size={16} /> Delete ({selectedIds.size})
          </button>
        )}
      </div>
    );
  }, [
    selectedIds,
    activeTab,
    canBulkUpdate,
    canBulkDelete,
    canBulkRestore,
    canPermanentDelete,
    handleBulkDelete,
    handleBulkRestore,
    handleBulkPermanentDelete,
    openModal,
  ]);

  // ── Render ──────────────────────────────────────────────────────────
  return (
    <div className="space-y-4">
      {/* Tabs */}
      <div
        className="flex flex-wrap gap-1 border-b overflow-x-auto"
        style={{ borderColor: 'var(--color-border)' }}
      >
        {TABS.map((tab) => (
          <button
            key={tab.key}
            onClick={() => handleTabChange(tab.key)}
            className={`px-3 py-2 text-sm font-medium transition-all border-b-2 whitespace-nowrap ${
              activeTab === tab.key
                ? 'border-current'
                : 'border-transparent text-gray-500 hover:text-gray-700'
            }`}
            style={{
              color: activeTab === tab.key ? 'var(--color-cta)' : undefined,
              borderColor: activeTab === tab.key ? 'var(--color-cta)' : undefined,
            }}
          >
            {tab.label}
            <span
              className="ml-1.5 px-1.5 py-0.5 text-xs rounded-full"
              style={{
                background:
                  activeTab === tab.key ? 'var(--color-cta-light)' : 'var(--color-surface-alt)',
                color:
                  activeTab === tab.key ? 'var(--color-cta)' : 'var(--color-text-tertiary)',
              }}
            >
              {counts[tab.key as keyof TabCounts] || 0}
            </span>
          </button>
        ))}
        {canViewDeleted && (
          <button
            onClick={() => handleTabChange('deleted')}
            className={`px-3 py-2 text-sm font-medium transition-all border-b-2 whitespace-nowrap ${
              activeTab === 'deleted'
                ? 'border-red-500 text-red-600'
                : 'border-transparent text-gray-500 hover:text-gray-700'
            }`}
          >
            Deleted
            <span
              className="ml-1.5 px-1.5 py-0.5 text-xs rounded-full"
              style={{
                background:
                  activeTab === 'deleted'
                    ? 'rgba(239,68,68,0.1)'
                    : 'var(--color-surface-alt)',
                color: activeTab === 'deleted' ? '#EF4444' : 'var(--color-text-tertiary)',
              }}
            >
              {counts.deleted || 0}
            </span>
          </button>
        )}
      </div>

      {/* Toolbar */}
      <Toolbar
        leftActions={
          <>
            <button
              onClick={handleToggleFilters}
              className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all border"
              style={{
                borderColor: 'var(--color-border)',
                color: 'var(--color-text)',
                background: 'var(--color-surface)',
              }}
            >
              <svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
              >
                <path d="M3 6h18M6 12h12M10 18h4" />
              </svg>
              {showFilters ? 'Hide Filters' : 'Filters'}
            </button>
            {bulkActionBar}
          </>
        }
      />

      {/* Filter Panel */}
      {showFilters && (
        <FilterPanel
          fields={filterFields}
          onApply={handleApplyFilters}
          onReset={handleResetFilters}
          applyButtonText="Apply"
          resetButtonText="Reset"
        />
      )}

      {/* Data Table */}
      <DataTable
        columns={columns}
        data={orders}
        loading={loading}
        selectedIds={selectedIds}
        onSelect={handleSelectOrder}
        onSelectAll={handleSelectAll}
        getRowId={(o) => o.id}
        showCheckbox={
          activeTab === 'deleted'
            ? canPermanentDelete || canBulkRestore
            : canBulkUpdate || canBulkDelete
        }
        emptyMessage={activeTab === 'deleted' ? 'No deleted orders' : 'No orders found'}
        skeletonRows={10}
      />

      {/* Pagination */}
      {!loading && pagination.totalPages > 0 && (
        <Pagination
          currentPage={currentPage}
          totalPages={pagination.totalPages}
          totalItems={pagination.total}
          itemsPerPage={pagination.limit}
          onPageChange={handlePageChange}
          showItemsInfo
        />
      )}

      {/* ─── Modals ──────────────────────────────────────────────────── */}

      {/* Confirmation Modal */}
      <Modal
        isOpen={modal.isOpen}
        onClose={closeModal}
        onConfirm={modal.onConfirm}
        title={modal.title}
        message={modal.message}
        confirmText={modal.confirmText}
        cancelText={modal.cancelText}
        type={modal.type}
        isLoading={isDeleting}
      />

      {/* Timeline Modal */}
      <CommonTimelineModal
        isOpen={timelineModal.isOpen}
        onClose={() => setTimelineModal(TIMELINE_MODAL_CLOSED)}
        entityType="order"
        entityId={timelineModal.entityId}
        entityName={timelineModal.entityName}
        title={`Order ${timelineModal.entityName} Timeline`}
      />

      {/* Status Change Modal */}
      <StatusChangeModal
        isOpen={statusModal.isOpen}
        orderNumber={statusModal.orderNumber}
        currentStatus={statusModal.currentStatus}
        onClose={() => setStatusModal(STATUS_MODAL_CLOSED)}
        onConfirm={(newStatus, note) =>
          statusModal.orderId && handleStatusChange(statusModal.orderId, newStatus, note)
        }
      />

      {/* Order Detail Modal */}
      <OrderDetailModal
        isOpen={detailModal.isOpen}
        orderId={detailModal.orderId}
        onClose={() => setDetailModal(DETAIL_MODAL_CLOSED)}
        canUpdateStatus={canUpdateStatus}
        canSingleItemStatus={canSingleItemStatus}
        canViewPayments={canViewPayments}
        canManagePayments={canManagePayments}
        canRefund={canRefund}
        canDeletePayments={canDeletePayments}
        canViewPaymentTimeline={canViewPaymentTimeline}
        canRestorePayments={canRestorePayments}
        canViewDeletedPayments={canViewDeletedPayments}
        canPermanentDeletePayments={canPermanentDeletePayments}
        onStatusChange={handleStatusChangeFromDetail}
        onDataChange={handleOrderDataChange}
        canExport={canExport}
      />

      {/* Order Edit Modal */}
      <OrderEditModal
        isOpen={editModal.isOpen}
        orderId={editModal.orderId || ''}
        orderNumber={orders.find((o) => o.id === editModal.orderId)?.order_number || ''}
        currentStatus={orders.find((o) => o.id === editModal.orderId)?.status || ''}
        items={editItems}
        shippingAddress={editShipping}
        customerNotes={editNotes}
        onClose={() => setEditModal(EDIT_MODAL_CLOSED)}
        onSaved={() =>
          refreshAfterMutation(activeTab, { active: activeFilters, deleted: deletedFilters }, currentPage)
        }
      />

      {/* Bulk Status Modal */}
      <BulkStatusModal
        isOpen={bulkStatusModal.isOpen}
        selectedCount={bulkStatusModal.selectedCount}
        onClose={() => setBulkStatusModal(BULK_STATUS_MODAL_CLOSED)}
        onConfirm={handleBulkStatusChange}
      />
    </div>
  );
}