// app/components/admin/orders/OrdersTable.tsx
'use client';

import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
import toast from 'react-hot-toast';
import { usePermissions } from '@/hooks/usePermissions';
import { PERMISSIONS } from '@/lib/permissions';
import { useAlert } from '@/contexts/AlertContext';
import DataTable from '@/app/components/admin/CommonComponents/DataTable';
import TablePagination from '@/app/components/admin/CommonComponents/TablePagination';
import TableFilters from '@/app/components/admin/CommonComponents/TableFilters';
import OrderDetailModal from './OrderDetailModal';
import SubmitLinksModal from './SubmitLinksModal';
import StatsCards from './StatsCards';
import {
  Order,
  PaginationData,
  DashboardStats,
  DEFAULT_DASHBOARD_STATS,
  DEFAULT_PAGINATION,
  OrderStatus,
  PaymentStatus,
  OrderType,
} from '@/types/order';
import { FilterValues } from '@/types/admin-table';

// ─── Static config ────────────────────────────────────────────────────────────

type TabType = 'all' | OrderStatus;

interface TabConfig {
  id: TabType;
  label: string;
  color: 'gray' | 'yellow' | 'blue' | 'purple' | 'green' | 'red';
  status?: OrderStatus;
  icon: React.ReactNode;
}

const TAB_COLOR_MAP: Record<TabConfig['color'], { active: string; inactive: string }> = {
  gray: {
    active: 'bg-var-surface-hover text-var-text border-var-border',
    inactive: 'text-var-text-secondary hover:text-var-text hover:bg-var-surface-hover',
  },
  yellow: {
    active: 'bg-var-warning-bg text-var-warning-text border-var-warning-border',
    inactive: 'text-var-warning hover:text-var-warning-text hover:bg-var-warning-bg',
  },
  blue: {
    active: 'bg-var-primary-muted text-var-primary-text border-var-primary',
    inactive: 'text-var-primary hover:text-var-primary-text hover:bg-var-primary-muted',
  },
  purple: {
    active: 'bg-var-info-bg text-var-info-text border-var-info-border',
    inactive: 'text-var-info hover:text-var-info-text hover:bg-var-info-bg',
  },
  green: {
    active: 'bg-var-success-bg text-var-success-text border-var-success-border',
    inactive: 'text-var-success hover:text-var-success-text hover:bg-var-success-bg',
  },
  red: {
    active: 'bg-var-danger-bg text-var-danger-text border-var-danger-border',
    inactive: 'text-var-danger hover:text-var-danger-text hover:bg-var-danger-bg',
  },
};

// FIX: Extracted icon components so memoized `actions` array doesn't recreate
// inline React elements on every render.
function IconEye() {
  return (
    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
    </svg>
  );
}
function IconLink() {
  return (
    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.102m3.172-3.172a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
    </svg>
  );
}
function IconCheck() {
  return (
    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  );
}
function IconTick() {
  return (
    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
    </svg>
  );
}
function IconX() {
  return (
    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  );
}

const TABS: TabConfig[] = [
  {
    id: 'all',
    label: 'All Orders',
    color: 'gray',
    icon: (
      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    ),
  },
  {
    id: 'pending',
    label: 'Pending',
    color: 'yellow',
    status: 'pending',
    icon: (
      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    ),
  },
  {
    id: 'confirmed',
    label: 'Confirmed',
    color: 'blue',
    status: 'confirmed',
    icon: (
      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    ),
  },
  {
    id: 'pending_review',
    label: 'Pending Review',
    color: 'purple',
    status: 'pending_review',
    icon: (
      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
      </svg>
    ),
  },
  {
    id: 'completed',
    label: 'Completed',
    color: 'green',
    status: 'completed',
    icon: (
      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
      </svg>
    ),
  },
  {
    id: 'cancelled',
    label: 'Cancelled',
    color: 'red',
    status: 'cancelled',
    icon: (
      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
      </svg>
    ),
  },
];

const TAB_STAT_KEY: Record<TabType, keyof DashboardStats> = {
  all: 'totalOrders',
  pending: 'pendingOrders',
  confirmed: 'confirmedOrders',
  pending_review: 'pendingReviewOrders',
  completed: 'completedOrders',
  cancelled: 'cancelledOrders',
};

const ORDER_STATUS_BADGE: Record<OrderStatus, string> = {
  pending: 'bg-var-warning-bg text-var-warning-text',
  confirmed: 'bg-var-primary-muted text-var-primary-text',
  pending_review: 'bg-var-info-bg text-var-info-text',
  completed: 'bg-var-success-bg text-var-success-text',
  cancelled: 'bg-var-danger-bg text-var-danger-text',
};

const PAYMENT_STATUS_BADGE: Record<PaymentStatus, string> = {
  pending: 'bg-var-warning-bg text-var-warning-text',
  paid: 'bg-var-success-bg text-var-success-text',
  failed: 'bg-var-danger-bg text-var-danger-text',
  refunded: 'bg-var-surface-hover text-var-text-muted',
};

const ORDER_TYPE_BADGE: Record<OrderType, string> = {
  individual: 'bg-var-primary-muted text-var-primary-text',
  package: 'bg-var-info-bg text-var-info-text',
  package_individual: 'bg-var-accent-purple bg-opacity-10 text-var-accent-purple',
};

const ORDER_TYPE_LABEL: Record<OrderType, string> = {
  individual: 'Individual',
  package: 'Package',
  package_individual: 'Mixed',
};

interface OrdersTableProps {
  initialData?: {
    orders: Order[];
    pagination: PaginationData;
  };
}

export default function OrdersTable({ initialData }: OrdersTableProps) {
  const [orders, setOrders] = useState<Order[]>(initialData?.orders ?? []);
  const [loading, setLoading] = useState(false);
  const [statsLoading, setStatsLoading] = useState(false);
  const [filtersVisible, setFiltersVisible] = useState(false);
  const [activeTab, setActiveTab] = useState<TabType>('all');
  const [stats, setStats] = useState<DashboardStats>(DEFAULT_DASHBOARD_STATS);
  const [pagination, setPagination] = useState<PaginationData>(
    initialData?.pagination ?? DEFAULT_PAGINATION
  );
  const [filters, setFilters] = useState<FilterValues>({ search: '', payment_status: '' });
  const [selectedOrder, setSelectedOrder] = useState<Order | null>(null);
  const [showDetailModal, setShowDetailModal] = useState(false);
  const [showLinksModal, setShowLinksModal] = useState(false);
  const [actionOrder, setActionOrder] = useState<Order | null>(null);

  // FIX: Use a ref to always have the latest limit without adding it to fetchOrders deps,
  // preventing unnecessary re-creation of the callback.
  const pageLimitRef = useRef(initialData?.pagination?.limit ?? DEFAULT_PAGINATION.limit);

  const { hasPermission } = usePermissions();
  const { showAlert } = useAlert();

  const canViewOrder = hasPermission(PERMISSIONS.ORDERS_VIEW);
  const canRejectOrder = hasPermission(PERMISSIONS.ORDERS_REJECT);
  const canSubmitLinks = hasPermission(PERMISSIONS.ORDERS_SUBMIT_LINKS);
  const canUpdateOrder = hasPermission(PERMISSIONS.ORDERS_UPDATE);

  const fetchStats = useCallback(async () => {
    setStatsLoading(true);
    try {
      const response = await fetch('/api/backend/admin/orders/stats');
      const data = await response.json();
      if (response.ok) setStats(data);
    } catch (error) {
      console.error('Failed to fetch stats:', error);
    } finally {
      setStatsLoading(false);
    }
  }, []); // No deps — endpoint is stable

  // FIX: fetchOrders takes explicit tab and filters params instead of closing over
  // state. This prevents the stale-filter bug (setFilters is async so closures see
  // old values) and removes the circular dependency that caused infinite re-fetches.
  const fetchOrders = useCallback(
    async (
      page: number,
      tab: TabType,
      currentFilters: FilterValues
    ) => {
      setLoading(true);
      try {
        const params = new URLSearchParams({ page: String(page), limit: String(pageLimitRef.current) });

        if (currentFilters.search) params.append('search', currentFilters.search as string);
        if (currentFilters.payment_status)
          params.append('payment_status', currentFilters.payment_status as string);

        if (tab !== 'all') {
          const tabConfig = TABS.find((t) => t.id === tab);
          if (tabConfig?.status) params.append('status', tabConfig.status);
        }

        const response = await fetch(`/api/backend/admin/orders?${params}`);
        const data = await response.json();

        if (response.ok) {
          setOrders(data.orders);
          setPagination(data.pagination);
          // Keep ref in sync with server-returned limit
          pageLimitRef.current = data.pagination.limit ?? pageLimitRef.current;
        } else {
          toast.error(
            response.status === 403
              ? 'You do not have permission to view orders'
              : (data.error ?? 'Failed to fetch orders')
          );
        }
      } catch (error) {
        toast.error('Failed to fetch orders');
        console.error(error);
      } finally {
        setLoading(false);
      }
    },
    [] // FIX: No state deps — all inputs are passed explicitly as arguments
  );

  // FIX: Initial load — no circular dep. fetchOrders and fetchStats are stable.
  useEffect(() => {
    fetchOrders(1, 'all', { search: '', payment_status: '' });
    fetchStats();
  }, [fetchOrders, fetchStats]);

  // FIX: Tab change passes new tab + current filters explicitly
  const handleTabChange = useCallback(
    (tabId: TabType) => {
      setActiveTab(tabId);
      fetchOrders(1, tabId, filters);
    },
    [fetchOrders, filters]
  );

  // FIX: New filters passed directly to fetchOrders — no stale closure issue
  const handleFilterChange = useCallback(
    (newFilters: FilterValues) => {
      setFilters(newFilters);
      fetchOrders(1, activeTab, newFilters);
    },
    [fetchOrders, activeTab]
  );

  // FIX: Page change passes current tab + filters explicitly
  const handlePageChange = useCallback(
    (page: number) => {
      fetchOrders(page, activeTab, filters);
    },
    [fetchOrders, activeTab, filters]
  );

  const handleViewDetails = useCallback(
    async (order: Order) => {
      if (!canViewOrder) {
        toast.error('You do not have permission to view order details');
        return;
      }
      try {
        const response = await fetch(`/api/backend/admin/orders/${order.id}`);
        const data = await response.json();
        if (response.ok) {
          setSelectedOrder(data.order);
          setShowDetailModal(true);
        } else {
          toast.error(data.error ?? 'Failed to fetch order details');
        }
      } catch (error) {
        toast.error('Failed to fetch order details');
        console.error(error);
      }
    },
    [canViewOrder]
  );

  const handleSubmitLinks = useCallback(
    (order: Order) => {
      if (!canSubmitLinks) {
        toast.error('You do not have permission to submit live links');
        return;
      }
      setActionOrder(order);
      setShowLinksModal(true);
    },
    [canSubmitLinks]
  );

  const refreshAfterMutation = useCallback(() => {
    // FIX: Use current pagination page from state via functional read to avoid stale closure
    setPagination((prev) => {
      fetchOrders(prev.page, activeTab, filters);
      return prev;
    });
    fetchStats();
  }, [fetchOrders, fetchStats, activeTab, filters]);

  const updateOrderStatus = useCallback(
    async (orderId: string, status: string) => {
      const updateData: { status: string; payment_status?: string } = { status };
      if (status === 'completed') updateData.payment_status = 'paid';

      try {
        const response = await fetch(`/api/backend/admin/orders/${orderId}`, {
          method: 'PATCH',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(updateData),
        });
        const data = await response.json();
        if (response.ok) {
          toast.success(`Order ${status} successfully`);
          refreshAfterMutation();
        } else {
          toast.error(data.error ?? 'Failed to update order status');
        }
      } catch (error) {
        toast.error('Failed to update order status');
        console.error(error);
      }
    },
    [refreshAfterMutation]
  );

  const confirmOrder = useCallback(
    async (orderId: string) => {
      try {
        const response = await fetch(`/api/backend/admin/orders/${orderId}`, {
          method: 'PATCH',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ status: 'confirmed', payment_status: 'paid' }),
        });
        const data = await response.json();
        if (response.ok) {
          toast.success('Order confirmed and payment marked as paid');
          refreshAfterMutation();
        } else {
          toast.error(data.error ?? 'Failed to confirm order');
        }
      } catch (error) {
        toast.error('Failed to confirm order');
        console.error(error);
      }
    },
    [refreshAfterMutation]
  );

  const rejectOrder = useCallback(
    async (orderId: string) => {
      try {
        const response = await fetch(`/api/backend/admin/orders/${orderId}/reject`, {
          method: 'POST',
        });
        const data = await response.json();
        if (response.ok) {
          toast.success('Order rejected successfully');
          refreshAfterMutation();
        } else {
          toast.error(data.error ?? 'Failed to reject order');
        }
      } catch (error) {
        toast.error('Failed to reject order');
        console.error(error);
      }
    },
    [refreshAfterMutation]
  );

  const handleCompleteOrder = useCallback(
    (order: Order) => {
      if (!canUpdateOrder) {
        toast.error('You do not have permission to update orders');
        return;
      }
      showAlert({
        title: 'Complete Order',
        message: `Are you sure you want to mark order #${order.order_number} as completed?`,
        confirmText: 'Complete Order',
        cancelText: 'Cancel',
        onConfirm: () => updateOrderStatus(order.id, 'completed'),
      });
    },
    [canUpdateOrder, showAlert, updateOrderStatus]
  );

  const handleConfirmOrder = useCallback(
    (order: Order) => {
      if (!canUpdateOrder) {
        toast.error('You do not have permission to update orders');
        return;
      }
      showAlert({
        title: 'Confirm Order',
        message: `Are you sure you want to confirm order #${order.order_number}? This will also mark the payment as paid.`,
        confirmText: 'Confirm Order',
        cancelText: 'Cancel',
        onConfirm: () => confirmOrder(order.id),
      });
    },
    [canUpdateOrder, showAlert, confirmOrder]
  );

  const handleRejectOrder = useCallback(
    (order: Order) => {
      if (!canRejectOrder) {
        toast.error('You do not have permission to reject orders');
        return;
      }
      showAlert({
        title: 'Reject Order',
        message: `Are you sure you want to reject order #${order.order_number}? This action cannot be undone.`,
        confirmText: 'Reject Order',
        cancelText: 'Cancel',
        onConfirm: () => rejectOrder(order.id),
      });
    },
    [canRejectOrder, showAlert, rejectOrder]
  );

  // FIX: Columns use stable named icon components, not inline JSX
  const columns = useMemo(
    () => [
      {
        key: 'order_number',
        label: 'Order #',
        render: (order: Order) => (
          <div>
            <div className="text-sm font-medium text-var-text">#{order.order_number}</div>
            <div className="text-xs text-var-text-muted">
              {new Date(order.created_at).toLocaleDateString()}
            </div>
          </div>
        ),
      },
      {
        key: 'customer',
        label: 'Customer',
        render: (order: Order) => (
          <div>
            <div className="text-sm text-var-text">
              {order.user?.display_name ??
                order.user?.first_name ??
                order.user?.email ??
                'Guest'}
            </div>
            <div className="text-xs text-var-text-muted">{order.user?.email ?? 'N/A'}</div>
          </div>
        ),
      },
      {
        key: 'type',
        label: 'Type',
        render: (order: Order) => (
          <span
            className={`inline-flex items-center px-2 py-1 rounded text-xs font-medium ${ORDER_TYPE_BADGE[order.order_type]}`}
          >
            {ORDER_TYPE_LABEL[order.order_type]}
          </span>
        ),
      },
      {
        key: 'total',
        label: 'Total Amount',
        render: (order: Order) => (
          <div className="text-sm font-semibold text-var-text">
            ${order.total_amount.toFixed(2)}
          </div>
        ),
      },
      {
        key: 'payment_status',
        label: 'Payment',
        render: (order: Order) => (
          <span
            className={`inline-flex items-center px-2 py-1 rounded text-xs font-medium ${PAYMENT_STATUS_BADGE[order.payment_status]}`}
          >
            {order.payment_status.toUpperCase()}
          </span>
        ),
      },
      {
        key: 'status',
        label: 'Status',
        render: (order: Order) => (
          <span
            className={`inline-flex items-center px-2 py-1 rounded text-xs font-medium ${ORDER_STATUS_BADGE[order.status]}`}
          >
            {order.status.replace(/_/g, ' ').toUpperCase()}
          </span>
        ),
      },
    ],
    []
  );

  // FIX: actions use named icon components — no inline JSX recreation on each memo call
  const actions = useMemo(
    () => [
      ...(canViewOrder
        ? [
            {
              key: 'view',
              icon: <IconEye />,
              onClick: handleViewDetails,
              className: 'text-var-primary hover:text-var-primary-hover hover:bg-var-primary-muted',
              title: 'View order details',
            },
          ]
        : []),
      ...(canSubmitLinks
        ? [
            {
              key: 'submit-links',
              icon: <IconLink />,
              onClick: handleSubmitLinks,
              condition: (order: Order) => order.status === 'confirmed',
              className: 'text-var-success hover:text-var-success-text hover:bg-var-success-bg',
              title: 'Submit live links',
            },
          ]
        : []),
      ...(canUpdateOrder
        ? [
            {
              key: 'confirm',
              icon: <IconCheck />,
              onClick: handleConfirmOrder,
              condition: (order: Order) => order.status === 'pending',
              className: 'text-var-primary hover:text-var-primary-hover hover:bg-var-primary-muted',
              title: 'Confirm order',
            },
            {
              key: 'complete',
              icon: <IconTick />,
              onClick: handleCompleteOrder,
              condition: (order: Order) => order.status === 'pending_review',
              className: 'text-var-success hover:text-var-success-text hover:bg-var-success-bg',
              title: 'Complete order',
            },
          ]
        : []),
      ...(canRejectOrder
        ? [
            {
              key: 'reject',
              icon: <IconX />,
              onClick: handleRejectOrder,
              condition: (order: Order) => order.status === 'pending',
              className: 'text-var-danger hover:text-var-danger-text hover:bg-var-danger-bg',
              title: 'Reject order',
            },
          ]
        : []),
    ],
    [
      canViewOrder,
      canSubmitLinks,
      canUpdateOrder,
      canRejectOrder,
      handleViewDetails,
      handleSubmitLinks,
      handleConfirmOrder,
      handleCompleteOrder,
      handleRejectOrder,
    ]
  );

  const getTabButtonClass = useCallback(
    (tab: TabConfig) => {
      const isActive = activeTab === tab.id;
      const colors = TAB_COLOR_MAP[tab.color];
      return isActive ? colors.active : colors.inactive;
    },
    [activeTab]
  );

  const activeTabLabel = useMemo(
    () => TABS.find((t) => t.id === activeTab)?.label ?? 'All',
    [activeTab]
  );

  const filterConfig = useMemo(
    () => [
      {
        key: 'search',
        label: 'Search',
        type: 'search' as const,
        placeholder: 'Search by order number or customer...',
      },
      {
        key: 'payment_status',
        label: 'Payment Status',
        type: 'select' as const,
        options: [
          { value: '', label: 'All Payments' },
          { value: 'pending', label: 'Pending Payment' },
          { value: 'paid', label: 'Paid' },
          { value: 'failed', label: 'Failed' },
          { value: 'refunded', label: 'Refunded' },
        ],
      },
    ],
    []
  );

  const toggleFilters = () => {
    setFiltersVisible(!filtersVisible);
  };

  return (
    <div className="space-y-6">
      <StatsCards stats={stats} loading={statsLoading} />

      <div className="bg-var-surface rounded-2xl shadow-var-card border border-var-border overflow-hidden">
        {/* Tabs */}
        <div className="border-b border-var-border bg-var-surface-hover/50 px-4 sm:px-6">
          <div className="flex flex-wrap gap-1 sm:gap-2 overflow-x-auto">
            {TABS.map((tab) => (
              <button
                key={tab.id}
                onClick={() => handleTabChange(tab.id)}
                className={`
                  flex items-center space-x-2 px-3 sm:px-4 py-2.5 sm:py-3 text-sm font-medium
                  border-b-2 transition-all duration-200 whitespace-nowrap
                  ${activeTab === tab.id ? 'border-current' : 'border-transparent'}
                  ${getTabButtonClass(tab)}
                `}
              >
                <span className="w-4 h-4">{tab.icon}</span>
                <span>{tab.label}</span>
                <span
                  className={`ml-1 px-2 py-0.5 text-xs rounded-full ${
                    activeTab === tab.id ? 'bg-var-surface bg-opacity-50' : 'bg-var-surface-hover'
                  } text-var-text-secondary`}
                >
                  {stats[TAB_STAT_KEY[tab.id]] as number}
                </span>
              </button>
            ))}
          </div>
        </div>

        {/* Header + Filters */}
        <div className="px-6 py-4 border-b border-var-border">
          <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-4 lg:space-y-0">
            <div>
              <h2 className="text-lg font-semibold text-var-text">{activeTabLabel} Orders</h2>
              <p className="text-sm text-var-text-secondary mt-1">
                {pagination.total} order{pagination.total !== 1 ? 's' : ''} found
              </p>
            </div>
            
            {/* Filter Toggle Button */}
            <button
              onClick={toggleFilters}
              className="inline-flex items-center px-3 py-2 bg-var-surface border border-var-border text-var-text-secondary font-medium rounded-xl hover:bg-var-surface-hover hover:text-var-text transition-all duration-200 shadow-var-button"
              title={filtersVisible ? "Hide filters" : "Show filters"}
            >
              <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
              </svg>
              {filtersVisible ? 'Hide Filters' : 'Show Filters'}
            </button>
          </div>
          
          {/* Filters - Conditionally rendered */}
          {filtersVisible && (
            <div className="mt-4">
              <TableFilters
                filters={filterConfig}
                onFilterChange={handleFilterChange}
                initialValues={filters}
              />
            </div>
          )}
        </div>

        <DataTable
          data={orders}
          columns={columns}
          actions={actions}
          loading={loading}
          emptyMessage={`No ${activeTab === 'all' ? '' : activeTabLabel.toLowerCase()} orders found`}
          emptyDescription="Try adjusting your search or filters"
          keyExtractor={(order) => order.id}
        />

        <TablePagination pagination={pagination} onPageChange={handlePageChange} />
      </div>

      {showDetailModal && selectedOrder && (
        <OrderDetailModal order={selectedOrder} onClose={() => setShowDetailModal(false)} />
      )}

      {showLinksModal && actionOrder && (
        <SubmitLinksModal
          order={actionOrder}
          onClose={() => {
            setShowLinksModal(false);
            setActionOrder(null);
          }}
          onSuccess={refreshAfterMutation}
        />
      )}
    </div>
  );
}