'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 EditReviewModal from '@/components/admin/reviews/EditReviewModal';
import { toast } from 'react-hot-toast';
import { ArchiveRestore, History, SquarePen, Trash2, Check, X, Home, Star, BadgeCheck } from 'lucide-react';
import { getApiErrorMessage } from '@/lib/utils/apiError';

// ─── Types ────────────────────────────────────────────────────────────────
interface Review {
  id: string;
  product_id: string;
  product_name: string;
  reviewer_name: string;
  reviewer_email: string | null;
  rating: number;
  title: string | null;
  content: string;
  status: 'pending' | 'approved' | 'rejected';
  display_on_home: boolean;
  is_verified: boolean;
  deleted_at: string | null;
  created_at: string;
}

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

interface TabCounts {
  active: number;
  deleted: number;
  pending: number;
  approved: number;
  rejected: number;
}

interface ReviewsTableProps {
  canEdit: boolean;
  canDelete: boolean;
  canBulkDelete: boolean;
  canViewDeleted: boolean;
  canPermanentDelete: boolean;
  canRestore: boolean;
  canBulkRestore: boolean;
  canViewTimeline: boolean;
  initialReviews: { reviews: Review[]; pagination: PaginationData };
  initialCounts: TabCounts;
}

type TabType = 'active' | 'deleted';

interface ActiveFilters {
  search: string;
  status: string;
  rating: string;
  display_on_home: 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;
}

// ─── Constants ────────────────────────────────────────────────────────────
const ICON_STROKE = { fill: 'none', stroke: 'currentColor', strokeWidth: 2 } as const;

const EMPTY_ACTIVE_FILTERS: ActiveFilters = {
  search: '', status: '', rating: '', display_on_home: '', 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: () => {},
};

// ─── API Helpers ──────────────────────────────────────────────────────────
async function fetchReviewsApi(
  page: number,
  tab: TabType,
  active: ActiveFilters,
  deleted: DeletedFilters,
  signal: AbortSignal,
) {
  const params = new URLSearchParams({
    page: String(page),
    limit: '10',
    includeDeleted: tab === 'deleted' ? 'true' : 'false',
  });

  if (tab === 'deleted') {
    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 (active.search.trim()) params.append('search', active.search.trim());
    if (active.status) params.append('status', active.status);
    if (active.rating) params.append('rating', active.rating);
    if (active.display_on_home) params.append('display_on_home', active.display_on_home);
    if (active.startDate) params.append('startDate', active.startDate);
    if (active.endDate) params.append('endDate', active.endDate);
  }

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

async function fetchCountsApi(): Promise<TabCounts> {
  const res = await fetch('/api/reviews/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 RatingStars({ rating }: { rating: number }) {
  return (
    <div className="flex items-center gap-0.5" style={{ color: '#F59E0B' }}>
      {Array.from({ length: 5 }).map((_, i) => (
        <Star key={i} size={13} fill={i < rating ? '#F59E0B' : 'none'} stroke="#F59E0B" />
      ))}
    </div>
  );
}

function ReviewStatusBadge({ review }: { review: Review }) {
  if (review.deleted_at) {
    return (
      <span className="inline-flex px-2 py-1 text-xs font-medium rounded-full"
        style={{ background: 'var(--color-danger-light)', color: 'var(--color-danger)' }}>
        Deleted
      </span>
    );
  }

  const styles: Record<Review['status'], { bg: string; color: string; label: string }> = {
    pending: { bg: 'var(--color-warning-light)', color: 'var(--color-warning)', label: 'Pending' },
    approved: { bg: 'var(--color-success-light)', color: 'var(--color-success)', label: 'Approved' },
    rejected: { bg: 'var(--color-danger-light)', color: 'var(--color-danger)', label: 'Rejected' },
  };
  const s = styles[review.status];

  return (
    <span className="inline-flex px-2 py-1 text-xs font-medium rounded-full" style={{ background: s.bg, color: s.color }}>
      {s.label}
    </span>
  );
}

// ─── Main Component ───────────────────────────────────────────────────────
export default function ReviewsTable({
  canEdit,
  canDelete,
  canBulkDelete,
  canViewDeleted,
  canPermanentDelete,
  canRestore,
  canBulkRestore,
  canViewTimeline,
  initialReviews,
  initialCounts,
}: ReviewsTableProps) {
  // ── Core State ──────────────────────────────────────────────────────
  const [reviews, setReviews] = useState<Review[]>(initialReviews.reviews);
  const [pagination, setPagination] = useState<PaginationData>(initialReviews.pagination);
  const [counts, setCounts] = useState<TabCounts>(initialCounts);
  const [currentPage, setCurrentPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const [activeTab, setActiveTab] = useState<TabType>('active');
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
  const [showFilters, setShowFilters] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);

  // ── Timeline state ──────────────────────────────────────────────────
  const [timelineModal, setTimelineModal] = useState<{ isOpen: boolean; reviewId: string; reviewName: string }>({
    isOpen: false, reviewId: '', reviewName: '',
  });

  // ── Edit modal state ─────────────────────────────────────────────────
  const [editModal, setEditModal] = useState<{ isOpen: boolean; review: Review | null }>({
    isOpen: false, review: null,
  });

  // ── Modal States ────────────────────────────────────────────────────
  const [modal, setModal] = useState<ModalConfig>(MODAL_CLOSED);

  // ── 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 reviewsRef = useRef(reviews);
  const selectedRef = useRef(selectedIds);

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

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

  const refreshCounts = useCallback(async () => {
    try {
      const updated = await fetchCountsApi();
      setCounts(updated);
    } catch {
      console.warn('Could not refresh review counts');
    }
  }, []);

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

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

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

  // ── Timeline handlers ─────────────────────────────────────────────────────
  const handleTimelineClick = useCallback((review: Review) => {
    setTimelineModal({ isOpen: true, reviewId: review.id, reviewName: review.title || review.product_name });
  }, []);

  // ── Edit handlers ─────────────────────────────────────────────────────────
  const handleEditClick = useCallback((review: Review) => {
    setEditModal({ isOpen: true, review });
  }, []);

  // ── CRUD Operations ─────────────────────────────────────────────────

  const handleStatusChange = useCallback(async (id: string, body: { status?: string; display_on_home?: boolean }, successMessage: string) => {
    setIsDeleting(true);
    try {
      const res = await fetch(`/api/reviews/${id}/status`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      });

      if (res.ok) {
        setModal(MODAL_CLOSED);
        await refreshAfterMutation(activeTab, { active: activeFilters, deleted: deletedFilters }, currentPage);
        toast.success(successMessage);
      } else {
        const data = await res.json();
        toast.error(getApiErrorMessage(data, 'Failed to update review'));
      }
    } catch { toast.error('Network error — please try again'); }
    finally { setIsDeleting(false); }
  }, [refreshAfterMutation, activeTab, activeFilters, deletedFilters, currentPage]);

  const handleDeleteReview = useCallback(async (id: string) => {
    setIsDeleting(true);
    try {
      const res = await fetch(`/api/reviews/${id}`, { method: 'DELETE' });
      if (res.ok) {
        setModal(MODAL_CLOSED);
        await refreshAfterMutation(activeTab, { active: activeFilters, deleted: deletedFilters }, currentPage);
        toast.success('Review deleted successfully');
      } else {
        const data = await res.json();
        toast.error(getApiErrorMessage(data, 'Failed to delete review'));
      }
    } catch { toast.error('Network error — please try again'); }
    finally { setIsDeleting(false); }
  }, [refreshAfterMutation, activeTab, activeFilters, deletedFilters, currentPage]);

  const handleRestoreReview = useCallback(async (id: string) => {
    setIsDeleting(true);
    try {
      const res = await fetch(`/api/reviews/${id}/restore`, { method: 'POST' });
      if (res.ok) {
        setModal(MODAL_CLOSED);
        await refreshAfterMutation(activeTab, { active: activeFilters, deleted: deletedFilters }, currentPage);
        toast.success('Review restored successfully');
      } else {
        const data = await res.json();
        toast.error(getApiErrorMessage(data, 'Failed to restore review'));
      }
    } catch { toast.error('Network error — please try again'); }
    finally { setIsDeleting(false); }
  }, [refreshAfterMutation, activeTab, activeFilters, deletedFilters, currentPage]);

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

  const handleBulkDelete = useCallback(async () => {
    setIsDeleting(true);
    try {
      const res = await fetch('/api/reviews/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('Reviews deleted successfully');
      } else {
        const data = await res.json();
        toast.error(getApiErrorMessage(data, 'Failed to delete reviews'));
      }
    } catch { toast.error('Network error — please try again'); }
    finally { setIsDeleting(false); }
  }, [refreshAfterMutation, activeTab, activeFilters, deletedFilters, currentPage]);

  const handleBulkRestore = useCallback(async () => {
    setIsDeleting(true);
    try {
      const res = await fetch('/api/reviews/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('Reviews restored successfully');
      } else {
        const data = await res.json();
        toast.error(getApiErrorMessage(data, 'Failed to restore reviews'));
      }
    } catch { toast.error('Network error — please try again'); }
    finally { setIsDeleting(false); }
  }, [refreshAfterMutation, activeTab, activeFilters, deletedFilters, currentPage]);

  const handleBulkPermanentDelete = useCallback(async () => {
    setIsDeleting(true);
    try {
      const res = await fetch('/api/reviews/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('Reviews permanently deleted');
      } else {
        const data = await res.json();
        toast.error(getApiErrorMessage(data, 'Failed to delete reviews'));
      }
    } catch { toast.error('Network error — please try again'); }
    finally { setIsDeleting(false); }
  }, [refreshAfterMutation, activeTab, activeFilters, deletedFilters, currentPage]);

  // ── Action handlers ───────────────────────────────────────────────────────

  const handleDeleteClick = useCallback((review: Review) => {
    if (activeTab === 'deleted') {
      openModal({
        type: 'danger',
        title: 'Permanent Delete Review',
        message: `Permanently delete this review? This cannot be undone.`,
        confirmText: 'Permanently Delete',
        cancelText: 'Cancel',
        onConfirm: () => handlePermanentDelete(review.id),
      });
      return;
    }

    openModal({
      type: 'danger',
      title: 'Delete Review',
      message: `Delete this review by "${review.reviewer_name}"? It will move to deleted items.`,
      confirmText: 'Delete',
      cancelText: 'Cancel',
      onConfirm: () => handleDeleteReview(review.id),
    });
  }, [activeTab, handleDeleteReview, handlePermanentDelete, openModal]);

  const handleRestoreClick = useCallback((review: Review) => {
    openModal({
      type: 'info',
      title: 'Restore Review',
      message: `Restore this review by "${review.reviewer_name}"? It will go back to "Pending" for a fresh moderation look.`,
      confirmText: 'Restore',
      cancelText: 'Cancel',
      onConfirm: () => handleRestoreReview(review.id),
    });
  }, [handleRestoreReview, openModal]);

  const handleApproveClick = useCallback((review: Review) => {
    openModal({
      type: 'success',
      title: 'Approve Review',
      message: `Approve this review by "${review.reviewer_name}"? It will become visible wherever approved reviews are shown.`,
      confirmText: 'Approve',
      cancelText: 'Cancel',
      onConfirm: () => handleStatusChange(review.id, { status: 'approved' }, 'Review approved'),
    });
  }, [handleStatusChange, openModal]);

  const handleRejectClick = useCallback((review: Review) => {
    openModal({
      type: 'warning',
      title: 'Reject Review',
      message: `Reject this review by "${review.reviewer_name}"?`,
      confirmText: 'Reject',
      cancelText: 'Cancel',
      onConfirm: () => handleStatusChange(review.id, { status: 'rejected' }, 'Review rejected'),
    });
  }, [handleStatusChange, openModal]);

  const handleToggleDisplayOnHome = useCallback((review: Review) => {
    const next = !review.display_on_home;
    handleStatusChange(
      review.id,
      { display_on_home: next },
      next ? 'Now showing on homepage' : 'Removed from homepage',
    );
  }, [handleStatusChange]);

  // ── Bulk actions ──────────────────────────────────────────────────────────

  const showBulkDeleteConfirmation = useCallback(() => {
    if (activeTab === 'deleted') {
      openModal({
        type: 'danger',
        title: 'Permanent Bulk Delete',
        message: `Permanently delete ${selectedRef.current.size} review(s)? This cannot be undone.`,
        confirmText: 'Permanently Delete All',
        cancelText: 'Cancel',
        onConfirm: handleBulkPermanentDelete,
      });
      return;
    }

    openModal({
      type: 'danger',
      title: 'Bulk Delete Reviews',
      message: `Delete ${selectedRef.current.size} review(s)? They will move to deleted items.`,
      confirmText: 'Delete All',
      cancelText: 'Cancel',
      onConfirm: handleBulkDelete,
    });
  }, [activeTab, handleBulkDelete, handleBulkPermanentDelete, openModal]);

  const showBulkRestoreConfirmation = useCallback(() => {
    openModal({
      type: 'info',
      title: 'Bulk Restore Reviews',
      message: `Restore ${selectedRef.current.size} review(s)?`,
      confirmText: 'Restore All',
      cancelText: 'Cancel',
      onConfirm: handleBulkRestore,
    });
  }, [handleBulkRestore, openModal]);

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

  // ── 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);
      fetchReviews(1, activeTab, { active: activeFilters, deleted: draftDeleted });
    } else {
      setActiveFilters(draftActive);
      fetchReviews(1, activeTab, { active: draftActive, deleted: deletedFilters });
    }
  }, [activeTab, draftActive, draftDeleted, activeFilters, deletedFilters, fetchReviews]);

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

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

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

  const handleSelectReview = 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<Review>[]>(() => {
    const cols: Column<Review>[] = [
      {
        key: 'product',
        header: 'Product',
        render: (r) => (
          <div className="text-sm font-medium" style={{ color: 'var(--color-text)' }}>
            {r.product_name}
          </div>
        ),
      },
      {
        key: 'reviewer',
        header: 'Reviewer',
        render: (r) => (
          <div>
            <div className="text-sm" style={{ color: 'var(--color-text)' }}>{r.reviewer_name}</div>
            {r.is_verified && (
              <span className="inline-flex items-center gap-1 text-xs" style={{ color: 'var(--color-success)' }}>
                <BadgeCheck size={12} /> Verified purchase
              </span>
            )}
          </div>
        ),
      },
      {
        key: 'rating',
        header: 'Rating',
        render: (r) => <RatingStars rating={r.rating} />,
      },
      {
        key: 'review',
        header: 'Review',
        render: (r) => (
          <div className="max-w-xs">
            {r.title && <div className="text-sm font-medium" style={{ color: 'var(--color-text)' }}>{r.title}</div>}
            <div className="text-xs line-clamp-2" style={{ color: 'var(--color-text-secondary)' }}>{r.content}</div>
          </div>
        ),
      },
      {
        key: 'status',
        header: 'Status',
        render: (r) => (
          <div className="flex flex-col gap-1 items-start">
            <ReviewStatusBadge review={r} />
            {r.display_on_home && (
              <span className="inline-flex items-center gap-1 px-1.5 py-0.5 text-xs font-medium rounded-full"
                style={{ background: 'var(--color-cta-light)', color: 'var(--color-cta)' }}>
                <Home size={11} /> On Home
              </span>
            )}
          </div>
        ),
      },
      {
        key: 'created_at',
        header: 'Submitted',
        render: (r) => (
          <span className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
            {new Date(r.created_at).toLocaleDateString()}
          </span>
        ),
      },
    ];

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

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

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

        if (activeTab === 'deleted') {
          if (canRestore) actions.push(
            <button key="restore" onClick={() => handleRestoreClick(review)}
              className="p-1 rounded hover:bg-surface-alt transition-colors"
              style={{ color: 'var(--color-success)' }} title="Restore Review">
              <ArchiveRestore size={16} />
            </button>,
          );
          if (canPermanentDelete) actions.push(
            <button key="perm-del" onClick={() => handleDeleteClick(review)}
              className="p-1 rounded hover:bg-surface-alt transition-colors"
              style={{ color: 'var(--color-danger)' }} title="Permanently Delete">
              <Trash2 size={16} />
            </button>,
          );
        } else {
          if (canEdit && review.status === 'pending') {
            actions.push(
              <button key="approve" onClick={() => handleApproveClick(review)}
                className="p-1 rounded hover:bg-surface-alt transition-colors"
                style={{ color: 'var(--color-success)' }} title="Approve Review">
                <Check size={16} />
              </button>,
            );
            actions.push(
              <button key="reject" onClick={() => handleRejectClick(review)}
                className="p-1 rounded hover:bg-surface-alt transition-colors"
                style={{ color: 'var(--color-danger)' }} title="Reject Review">
                <X size={16} />
              </button>,
            );
          }

          if (canEdit && review.status === 'approved') {
            actions.push(
              <button key="toggle-home" onClick={() => handleToggleDisplayOnHome(review)}
                className="p-1 rounded hover:bg-surface-alt transition-colors"
                style={{ color: review.display_on_home ? 'var(--color-cta)' : 'var(--color-text-tertiary)' }}
                title={review.display_on_home ? 'Remove from Homepage' : 'Show on Homepage'}>
                <Home size={16} />
              </button>,
            );
          }

          if (canEdit) actions.push(
            <button key="edit" onClick={() => handleEditClick(review)}
              className="p-1 rounded hover:bg-surface-alt transition-colors"
              style={{ color: 'var(--color-info)' }} title="Edit Review">
              <SquarePen size={16} />
            </button>,
          );

          if (canDelete) actions.push(
            <button key="delete" onClick={() => handleDeleteClick(review)}
              className="p-1 rounded hover:bg-surface-alt transition-colors"
              style={{ color: 'var(--color-danger)' }} title="Delete">
              <Trash2 size={16} />
            </button>,
          );
        }

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

    return cols;
  }, [
    activeTab, canEdit, canDelete, canPermanentDelete, canRestore, canViewTimeline,
    handleEditClick, handleDeleteClick, handleRestoreClick, handleTimelineClick,
    handleApproveClick, handleRejectClick, handleToggleDisplayOnHome,
  ]);

  // ── Filter Fields ───────────────────────────────────────────────────
  const filterFields = useMemo(() => {
    if (activeTab === 'deleted') {
      return [
        {
          name: 'deletedSearch', label: 'Search', type: 'text' as const,
          placeholder: 'Search by title or content...',
          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: 'Search by title or content...',
        value: draftActive.search,
        onChange: (v: string) => setDraftActive((p) => ({ ...p, search: v })),
      },
      {
        name: 'status', label: 'Status', type: 'select' as const,
        options: [
          { value: '', label: 'All Status' },
          { value: 'pending', label: 'Pending' },
          { value: 'approved', label: 'Approved' },
          { value: 'rejected', label: 'Rejected' },
        ],
        value: draftActive.status,
        onChange: (v: string) => setDraftActive((p) => ({ ...p, status: v })),
      },
      {
        name: 'rating', label: 'Rating', type: 'select' as const,
        options: [
          { value: '', label: 'All Ratings' },
          { value: '5', label: '5 Stars' },
          { value: '4', label: '4 Stars' },
          { value: '3', label: '3 Stars' },
          { value: '2', label: '2 Stars' },
          { value: '1', label: '1 Star' },
        ],
        value: draftActive.rating,
        onChange: (v: string) => setDraftActive((p) => ({ ...p, rating: v })),
      },
      {
        name: 'display_on_home', label: 'Homepage', type: 'select' as const,
        options: [
          { value: '', label: 'All' },
          { value: '1', label: 'Shown on Home' },
          { value: '0', label: 'Not on Home' },
        ],
        value: draftActive.display_on_home,
        onChange: (v: string) => setDraftActive((p) => ({ ...p, display_on_home: v })),
      },
      {
        name: 'startDate', label: 'Submitted From', type: 'date' as const,
        value: draftActive.startDate,
        onChange: (v: string) => setDraftActive((p) => ({ ...p, startDate: v })),
      },
      {
        name: 'endDate', label: 'Submitted To', 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={showBulkRestoreConfirmation}
              className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium"
              style={{ background: 'var(--color-success)', color: 'white' }}>
              <svg width="16" height="16" {...ICON_STROKE}>
                <path d="M3 12a9 9 0 1 0 9-9m0 0v6m0-6h-6" /><path d="M21 12a9 9 0 1 1-9-9" />
              </svg>
              Restore ({selectedIds.size})
            </button>
          )}
          {canPermanentDelete && (
            <button onClick={showBulkDeleteConfirmation}
              className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium"
              style={{ background: 'var(--color-danger)', color: 'white' }}>
              <svg width="16" height="16" {...ICON_STROKE}>
                <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
              </svg>
              Permanently Delete ({selectedIds.size})
            </button>
          )}
        </div>
      );
    }

    if (canBulkDelete) {
      return (
        <button onClick={showBulkDeleteConfirmation}
          className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium"
          style={{ background: 'var(--color-danger)', color: 'white' }}>
          <svg width="16" height="16" {...ICON_STROKE}>
            <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
          </svg>
          Delete ({selectedIds.size})
        </button>
      );
    }

    return null;
  }, [selectedIds, activeTab, canBulkDelete, canBulkRestore, canPermanentDelete, showBulkDeleteConfirmation, showBulkRestoreConfirmation]);

  // ── Render ──────────────────────────────────────────────────────────
  return (
    <div className="space-y-4">
      {canViewDeleted && (
        <div className="flex border-b overflow-x-auto whitespace-nowrap" style={{ borderColor: 'var(--color-border)' }}>
          <button onClick={() => handleTabChange('active')}
            className={`px-4 py-2 text-sm font-medium transition-all border-b-2 ${
              activeTab === 'active' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'
            }`}>
            Active Reviews ({counts.active})
          </button>
          <button onClick={() => handleTabChange('deleted')}
            className={`px-4 py-2 text-sm font-medium transition-all border-b-2 ${
              activeTab === 'deleted' ? 'border-red-500 text-red-600' : 'border-transparent text-gray-500 hover:text-gray-700'
            }`}>
            Deleted Reviews ({counts.deleted})
          </button>
        </div>
      )}

      {activeTab === 'active' && (
        <div className="flex gap-3 text-xs">
          <span className="px-2 py-1 rounded-full" style={{ background: 'var(--color-warning-light)', color: 'var(--color-warning)' }}>
            {counts.pending} Pending
          </span>
          <span className="px-2 py-1 rounded-full" style={{ background: 'var(--color-success-light)', color: 'var(--color-success)' }}>
            {counts.approved} Approved
          </span>
          <span className="px-2 py-1 rounded-full" style={{ background: 'var(--color-danger-light)', color: 'var(--color-danger)' }}>
            {counts.rejected} Rejected
          </span>
        </div>
      )}

      <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" {...ICON_STROKE}>
                <path d="M3 6h18M6 12h12M10 18h4" />
              </svg>
              {showFilters ? 'Hide Filters' : 'Show Filters'}
            </button>
            {bulkActionBar}
          </>
        }
      />

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

      <DataTable
        columns={columns}
        data={reviews}
        loading={loading}
        selectedIds={selectedIds}
        onSelect={handleSelectReview}
        onSelectAll={handleSelectAll}
        getRowId={(r) => r.id}
        showCheckbox={activeTab === 'deleted' ? (canPermanentDelete || canBulkRestore) : canBulkDelete}
        emptyMessage={activeTab === 'deleted' ? 'No deleted reviews found' : 'No reviews found'}
        skeletonRows={10}
      />

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

      <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}
      />

      <EditReviewModal
        isOpen={editModal.isOpen}
        review={editModal.review}
        onClose={() => setEditModal({ isOpen: false, review: null })}
        onSaved={() => refreshAfterMutation(activeTab, { active: activeFilters, deleted: deletedFilters }, currentPage)}
      />

      <CommonTimelineModal
        isOpen={timelineModal.isOpen}
        onClose={() => setTimelineModal({ isOpen: false, reviewId: '', reviewName: '' })}
        entityType="product_review"
        entityId={timelineModal.reviewId}
        entityName={timelineModal.reviewName}
        title="Review Timeline"
      />
    </div>
  );
}