'use client';

import { useState, useEffect, useCallback } from 'react';
import { useRouter } from 'next/navigation';
import {
  Search,
  RefreshCw,
  Trash2,
  Clock,
  MapPin,
  Bug,
  Lightbulb,
  TrendingUp,
  HelpCircle,
  CheckSquare,
  Square,
  MoreHorizontal,
  Eye,
  BarChart3,
} from 'lucide-react';
import { useTranslation } from '@/hooks/useTranslation';
import { toast } from '@/lib/toast';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { PageState } from '@/components/common/feedback/PageState';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from '@/components/ui/dialog';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
  getFeedbacks,
  deleteFeedback,
  batchUpdateStatus,
  getFeedbackStats,
  AdminFeedback,
  FeedbackType,
  FeedbackStatus,
  FeedbackPriority,
  FeedbackStats,
  getFeedbackTypeLabel,
  getFeedbackStatusLabel,
  getFeedbackPriorityLabel,
  getFeedbackStatusColor,
  getFeedbackTypeColor,
  getFeedbackPriorityColor,
  ApiClientError,
} from '@/services/api/feedback';

// 类型图标映射
const TYPE_ICONS = {
  [FeedbackType.BUG]: Bug,
  [FeedbackType.FEATURE]: Lightbulb,
  [FeedbackType.IMPROVEMENT]: TrendingUp,
  [FeedbackType.OTHER]: HelpCircle,
};

/**
 * 反馈管理页面（管理员）
 */
export default function FeedbackManagementPage() {
  const router = useRouter();
  const { t, locale } = useTranslation();

  // 列表状态
  const [feedbacks, setFeedbacks] = useState<AdminFeedback[]>([]);
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [pageSize] = useState(20);
  const [totalPages, setTotalPages] = useState(0);

  // 统计数据
  const [stats, setStats] = useState<FeedbackStats | null>(null);
  const [showStats, setShowStats] = useState(true);

  // 筛选
  const [keyword, setKeyword] = useState('');
  const [statusFilter, setStatusFilter] = useState<FeedbackStatus | ''>('');
  const [typeFilter, setTypeFilter] = useState<FeedbackType | ''>('');
  const [priorityFilter, setPriorityFilter] = useState<FeedbackPriority | ''>('');
  const [regionFilter, setRegionFilter] = useState('');

  // 多选
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  const [selectAll, setSelectAll] = useState(false);

  // 批量操作弹窗
  const [batchModalOpen, setBatchModalOpen] = useState(false);
  const [batchStatus, setBatchStatus] = useState<FeedbackStatus>(FeedbackStatus.IN_PROGRESS);
  const [batchLoading, setBatchLoading] = useState(false);

  // 删除确认弹窗
  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
  const [deleteId, setDeleteId] = useState<string | null>(null);
  const [deleteLoading, setDeleteLoading] = useState(false);

  // 加载反馈列表
  const loadFeedbacks = useCallback(async (isRefresh = false) => {
    try {
      if (isRefresh) {
        setRefreshing(true);
      } else {
        setLoading(true);
      }

      const params = {
        page,
        pageSize,
        ...(keyword && { keyword }),
        ...(statusFilter && { status: statusFilter }),
        ...(typeFilter && { type: typeFilter }),
        ...(priorityFilter && { priority: priorityFilter }),
        ...(regionFilter && { region: regionFilter }),
        sortBy: 'createdAt',
        sortOrder: 'desc' as const,
      };

      const result = await getFeedbacks(params);
      setFeedbacks(result.items);
      setTotal(result.total);
      setTotalPages(result.totalPages);
      setSelectedIds([]);
      setSelectAll(false);
    } catch (error) {
      if (error instanceof ApiClientError) {
        toast.error(error.message);
      } else {
        toast.error(t.feedback?.error?.loadFailed || t.common?.loadFailed || 'Failed to load feedback');
      }
    } finally {
      setLoading(false);
      setRefreshing(false);
    }
  }, [page, pageSize, keyword, statusFilter, typeFilter, priorityFilter, regionFilter, t]);

  // 加载统计数据
  const loadStats = useCallback(async () => {
    try {
      const result = await getFeedbackStats();
      setStats(result);
    } catch (error) {
      console.error('Failed to load stats:', error);
    }
  }, []);

  useEffect(() => {
    loadFeedbacks();
    loadStats();
  }, [loadFeedbacks, loadStats]);

  // 搜索防抖
  useEffect(() => {
    const timer = setTimeout(() => {
      if (page !== 1) {
        setPage(1);
      } else {
        loadFeedbacks();
      }
    }, 300);
    return () => clearTimeout(timer);
  }, [keyword]);

  // 刷新
  const handleRefresh = () => {
    loadFeedbacks(true);
    loadStats();
  };

  // 重置筛选
  const handleResetFilters = () => {
    setKeyword('');
    setStatusFilter('');
    setTypeFilter('');
    setPriorityFilter('');
    setRegionFilter('');
    setPage(1);
  };

  // 多选
  const handleSelectAll = () => {
    if (selectAll) {
      setSelectedIds([]);
    } else {
      setSelectedIds(feedbacks.map((f) => f.id));
    }
    setSelectAll(!selectAll);
  };

  const handleSelectOne = (id: string) => {
    if (selectedIds.includes(id)) {
      setSelectedIds(selectedIds.filter((i) => i !== id));
    } else {
      setSelectedIds([...selectedIds, id]);
    }
  };

  // 批量更新状态
  const handleBatchUpdate = async () => {
    if (selectedIds.length === 0) return;

    setBatchLoading(true);
    try {
      const result = await batchUpdateStatus({
        ids: selectedIds,
        status: batchStatus,
      });

      if (result.failed > 0) {
        toast.warning(
          t.feedback?.admin?.batchUpdatePartialFail
            ?.replace('{failed}', String(result.failed))
            ?.replace('{total}', String(result.total)) ||
            `Partial failure: ${result.failed}/${result.total}`
        );
      } else {
        toast.success(t.feedback?.admin?.batchUpdateSuccess || t.common?.updateSuccess || 'Batch update completed');
      }

      setBatchModalOpen(false);
      loadFeedbacks(true);
      loadStats();
    } catch (error) {
      if (error instanceof ApiClientError) {
        toast.error(error.message);
      } else {
        toast.error(t.feedback?.error?.updateFailed || t.common?.updateFailed || 'Failed to update');
      }
    } finally {
      setBatchLoading(false);
    }
  };

  // 删除反馈
  const handleDelete = async () => {
    if (!deleteId) return;

    setDeleteLoading(true);
    try {
      await deleteFeedback(deleteId);
      toast.success(t.feedback?.admin?.deleteSuccess || t.common?.deleteSuccess || 'Deleted successfully');
      setDeleteModalOpen(false);
      setDeleteId(null);
      loadFeedbacks(true);
      loadStats();
    } catch (error) {
      if (error instanceof ApiClientError) {
        toast.error(error.message);
      } else {
        toast.error(t.feedback?.error?.deleteFailed || t.common?.deleteFailed || 'Failed to delete');
      }
    } finally {
      setDeleteLoading(false);
    }
  };

  // 格式化时间
  const formatDate = (dateStr: string) => {
    const date = new Date(dateStr);
    const dateLocale = locale === 'zh' ? 'zh-CN' : 'en-US';
    return date.toLocaleDateString(dateLocale, {
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
    });
  };

  return (
    <div className="p-6 min-h-screen bg-gray-50">
      {/* 页面头部 */}
      <div className="mb-6">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-semibold text-gray-900" data-testid="page-title">
              {t.feedback?.feedbackManagement || 'Feedback Management'}
            </h1>
            <p className="text-sm text-gray-500 mt-1">
              {t.feedback?.list?.total?.replace('{total}', String(total)) ||
                `Total ${total} feedback(s)`}
            </p>
          </div>
          <div className="flex items-center gap-3">
            <Button
              variant="outline"
              size="sm"
              onClick={() => setShowStats(!showStats)}
            >
              <BarChart3 className="w-4 h-4 mr-2" />
              {showStats
                ? t.feedback?.stats?.hideStats || 'Hide Stats'
                : t.feedback?.stats?.showStats || 'Show Stats'}
            </Button>
            <Button
              variant="outline"
              size="sm"
              onClick={handleRefresh}
              disabled={refreshing}
            >
              <RefreshCw className={`w-4 h-4 mr-2 ${refreshing ? 'animate-spin' : ''}`} />
              {t.feedback?.list?.refresh || t.common?.refresh || 'Refresh'}
            </Button>
          </div>
        </div>
      </div>

      {/* 统计卡片 */}
      {showStats && stats && (
        <div className="grid grid-cols-5 gap-4 mb-6">
          <div className="bg-white rounded-lg border border-gray-200 p-4">
            <div className="text-2xl font-bold text-gray-900">{stats.total}</div>
            <div className="text-sm text-gray-500">{t.feedback?.stats?.total || 'Total'}</div>
          </div>
          <div className="bg-white rounded-lg border border-yellow-200 p-4 bg-yellow-50">
            <div className="text-2xl font-bold text-yellow-600">{stats.byStatus?.PENDING || 0}</div>
            <div className="text-sm text-yellow-600">{t.feedback?.stats?.pending || 'Pending'}</div>
          </div>
          <div className="bg-white rounded-lg border border-blue-200 p-4 bg-blue-50">
            <div className="text-2xl font-bold text-blue-600">{stats.byStatus?.IN_PROGRESS || 0}</div>
            <div className="text-sm text-blue-600">{t.feedback?.stats?.inProgress || 'In Progress'}</div>
          </div>
          <div className="bg-white rounded-lg border border-green-200 p-4 bg-green-50">
            <div className="text-2xl font-bold text-green-600">{stats.byStatus?.RESOLVED || 0}</div>
            <div className="text-sm text-green-600">{t.feedback?.stats?.resolved || 'Resolved'}</div>
          </div>
          <div className="bg-white rounded-lg border border-gray-200 p-4">
            <div className="text-2xl font-bold text-gray-600">{stats.todayNew || 0}</div>
            <div className="text-sm text-gray-500">{t.feedback?.stats?.todayNew || t.common?.today || 'Today'}</div>
          </div>
        </div>
      )}

      {/* 筛选栏 */}
      <div className="bg-white rounded-lg border border-gray-200 p-4 mb-4">
        <div className="flex flex-wrap items-center gap-4">
          {/* 搜索 */}
          <div className="relative flex-1 min-w-[200px] max-w-[300px]">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
            <Input
              name="keyword"
              value={keyword}
              onChange={(e) => setKeyword(e.target.value)}
              placeholder={t.feedback?.list?.searchPlaceholder || 'Search title or content...'}
              className="pl-9"
            />
          </div>

          {/* 状态筛选 */}
          <select
            name="status"
            value={statusFilter}
            onChange={(e) => {
              setStatusFilter(e.target.value as FeedbackStatus | '');
              setPage(1);
            }}
            className="px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="">{t.feedback?.list?.allStatus || t.common?.all || 'All'}</option>
            <option value={FeedbackStatus.PENDING}>{t.feedback?.statusPending || 'Pending'}</option>
            <option value={FeedbackStatus.IN_PROGRESS}>{t.feedback?.statusInProgress || 'In Progress'}</option>
            <option value={FeedbackStatus.RESOLVED}>{t.feedback?.statusResolved || 'Resolved'}</option>
            <option value={FeedbackStatus.CLOSED}>{t.feedback?.statusClosed || 'Closed'}</option>
          </select>

          {/* 类型筛选 */}
          <select
            name="type"
            value={typeFilter}
            onChange={(e) => {
              setTypeFilter(e.target.value as FeedbackType | '');
              setPage(1);
            }}
            className="px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="">{t.feedback?.list?.allTypes || t.common?.all || 'All'}</option>
            <option value={FeedbackType.BUG}>{t.feedback?.typeBug || 'Bug Report'}</option>
            <option value={FeedbackType.FEATURE}>{t.feedback?.typeFeature || 'Feature Request'}</option>
            <option value={FeedbackType.IMPROVEMENT}>{t.feedback?.typeImprovement || 'Improvement'}</option>
            <option value={FeedbackType.OTHER}>{t.feedback?.typeOther || 'Other'}</option>
          </select>

          {/* 优先级筛选 */}
          <select
            name="priority"
            value={priorityFilter}
            onChange={(e) => {
              setPriorityFilter(e.target.value as FeedbackPriority | '');
              setPage(1);
            }}
            className="px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="">{t.feedback?.list?.allPriority || t.common?.all || 'All'}</option>
            <option value={FeedbackPriority.LOW}>{t.feedback?.priorityLow || 'Low'}</option>
            <option value={FeedbackPriority.MEDIUM}>{t.feedback?.priorityMedium || 'Medium'}</option>
            <option value={FeedbackPriority.HIGH}>{t.feedback?.priorityHigh || 'High'}</option>
            <option value={FeedbackPriority.URGENT}>{t.feedback?.priorityUrgent || 'Urgent'}</option>
          </select>

          {/* 重置按钮 */}
          {(keyword || statusFilter || typeFilter || priorityFilter || regionFilter) && (
            <Button variant="ghost" size="sm" onClick={handleResetFilters}>
              {t.feedback?.list?.reset || t.common?.reset || 'Reset'}
            </Button>
          )}

          {/* 批量操作 */}
          {selectedIds.length > 0 && (
            <div className="flex items-center gap-2 ml-auto" data-testid="batch-actions">
              <span className="text-sm text-gray-500">
                {t.feedback?.list?.selected?.replace('{count}', String(selectedIds.length)) ||
                  `${selectedIds.length} selected`}
              </span>
              <Button
                size="sm"
                onClick={() => setBatchModalOpen(true)}
              >
                {t.feedback?.list?.batchUpdate || 'Batch Update'}
              </Button>
            </div>
          )}
        </div>
      </div>

      {/* 反馈列表表格 */}
      <div
        className="bg-white rounded-lg border border-gray-200 overflow-hidden"
        data-testid="admin-feedback-table"
      >
        {loading ? (
          <div className="p-12 text-center" data-testid="loading">
            <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-blue-600 mx-auto"></div>
            <p className="mt-4 text-gray-500">{t.common?.loading || 'Loading...'}</p>
          </div>
        ) : feedbacks.length === 0 ? (
          <div className="p-12 text-center" data-testid="empty-state">
            <PageState
              variant="empty"
              title={t.feedback?.list?.empty || t.common.noData}
              description={t.feedback?.list?.adminEmptyDesc}
              layout="center"
              className="border-0 bg-transparent"
            />
          </div>
        ) : (
          <>
            <table className="w-full" data-testid="feedback-table">
              <thead className="bg-gray-50 border-b border-gray-200">
                <tr>
                  <th className="px-4 py-3 text-left">
                    <button onClick={handleSelectAll} className="p-1">
                      {selectAll ? (
                        <CheckSquare className="w-4 h-4 text-blue-600" />
                      ) : (
                        <Square className="w-4 h-4 text-gray-400" />
                      )}
                    </button>
                  </th>
                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                    {t.feedback?.table?.content || t.common?.description || 'Content'}
                  </th>
                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                    {t.feedback?.detail?.submitter || t.common?.user || 'Submitter'}
                  </th>
                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                    {t.common?.type || 'Type'}
                  </th>
                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                    {t.common?.status || 'Status'}
                  </th>
                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                    {t.feedback?.admin?.priority || 'Priority'}
                  </th>
                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                    {t.feedback?.detail?.submitTime || t.common?.createdAt || 'Submit Time'}
                  </th>
                  <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">
                    {t.common?.actions || 'Actions'}
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-100">
                {feedbacks.map((feedback) => {
                  const TypeIcon = TYPE_ICONS[feedback.type] || HelpCircle;
                  const typeColor = getFeedbackTypeColor(feedback.type);
                  const statusColor = getFeedbackStatusColor(feedback.status);
                  const priorityColor = getFeedbackPriorityColor(feedback.priority);
                  const isSelected = selectedIds.includes(feedback.id);

                  return (
                    <tr
                      key={feedback.id}
                      className={`hover:bg-gray-50 transition-colors ${isSelected ? 'bg-blue-50' : ''}`}
                    >
                      <td className="px-4 py-3">
                        <button onClick={() => handleSelectOne(feedback.id)} className="p-1">
                          {isSelected ? (
                            <CheckSquare className="w-4 h-4 text-blue-600" />
                          ) : (
                            <Square className="w-4 h-4 text-gray-400" />
                          )}
                        </button>
                      </td>
                      <td className="px-4 py-3">
                        <div
                          className="cursor-pointer"
                          onClick={() => router.push(`/settings/feedback/${feedback.id}`)}
                        >
                          <div className="text-sm font-medium text-gray-900 truncate max-w-[300px]">
                            {feedback.title}
                          </div>
                          <div className="text-xs text-gray-500 truncate max-w-[300px]">
                            {feedback.content}
                          </div>
                        </div>
                      </td>
                      <td className="px-4 py-3">
                        <div className="flex items-center gap-2">
                          <div className="w-7 h-7 rounded-full bg-blue-100 flex items-center justify-center text-xs font-medium text-blue-600">
                            {feedback.user?.displayName?.[0] || 'U'}
                          </div>
                          <div>
                            <div className="text-sm text-gray-900">
                              {feedback.user?.displayName || '-'}
                            </div>
                            <div className="text-xs text-gray-400 flex items-center gap-1">
                              <MapPin className="w-3 h-3" />
                              {feedback.region}
                            </div>
                          </div>
                        </div>
                      </td>
                      <td className="px-4 py-3">
                        <div className="flex items-center gap-1.5">
                          <TypeIcon className={`w-4 h-4 ${typeColor.text}`} />
                          <span className={`text-sm ${typeColor.text}`}>
                            {getFeedbackTypeLabel(feedback.type, t)}
                          </span>
                        </div>
                      </td>
                      <td className="px-4 py-3">
                        <Badge
                          className={`${statusColor.bg} ${statusColor.text} ${statusColor.border} border`}
                          variant="outline"
                        >
                          {getFeedbackStatusLabel(feedback.status, t)}
                        </Badge>
                      </td>
                      <td className="px-4 py-3">
                        {feedback.priority ? (
                          <span className={`text-sm ${priorityColor.text}`}>
                            {getFeedbackPriorityLabel(feedback.priority, t)}
                          </span>
                        ) : (
                          <span className="text-sm text-gray-400">-</span>
                        )}
                      </td>
                      <td className="px-4 py-3">
                        <div className="text-sm text-gray-500 flex items-center gap-1">
                          <Clock className="w-3.5 h-3.5" />
                          {formatDate(feedback.createdAt)}
                        </div>
                      </td>
                      <td className="px-4 py-3 text-right">
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                              <MoreHorizontal className="w-4 h-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuItem
                              onClick={() => router.push(`/settings/feedback/${feedback.id}`)}
                            >
                              <Eye className="w-4 h-4 mr-2" />
                              {t.common?.viewDetails || t.common?.details || 'View Details'}
                            </DropdownMenuItem>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem
                              onClick={() => {
                                setDeleteId(feedback.id);
                                setDeleteModalOpen(true);
                              }}
                              className="text-red-600"
                            >
                              <Trash2 className="w-4 h-4 mr-2" />
                              {t.common?.delete || 'Delete'}
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>

            {/* 分页 */}
            {totalPages > 1 && (
              <div
                className="p-4 border-t border-gray-100 flex items-center justify-between"
                data-testid="pagination"
              >
                <span className="text-sm text-gray-500">
                  {t.feedback?.list?.pageInfo
                    ?.replace('{page}', String(page))
                    ?.replace('{totalPages}', String(totalPages))
                    ?.replace('{total}', String(total)) ||
                    `Page ${page} of ${totalPages}, ${total} total`}
                </span>
                <div className="flex items-center gap-2">
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setPage((p) => Math.max(1, p - 1))}
                    disabled={page <= 1}
                  >
                    {t.common?.previousPage || t.common?.previous || 'Previous'}
                  </Button>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
                    disabled={page >= totalPages}
                  >
                    {t.common?.nextPage || t.common?.next || 'Next'}
                  </Button>
                </div>
              </div>
            )}
          </>
        )}
      </div>

      {/* 批量更新弹窗 */}
      <Dialog open={batchModalOpen} onOpenChange={setBatchModalOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{t.feedback?.admin?.batchUpdateTitle || 'Batch Update Status'}</DialogTitle>
            <DialogDescription>
              {t.feedback?.admin?.batchUpdateConfirm
                ?.replace('{count}', String(selectedIds.length))
                ?.replace('{status}', getFeedbackStatusLabel(batchStatus, t)) ||
                `Update ${selectedIds.length} feedback(s) to "${getFeedbackStatusLabel(batchStatus, t)}"?`}
            </DialogDescription>
          </DialogHeader>
          <div className="py-4">
            <label className="text-sm font-medium text-gray-700 mb-2 block">
              {t.feedback?.admin?.batchUpdateStatus || t.common?.status || 'Target Status'}
            </label>
            <select
              value={batchStatus}
              onChange={(e) => setBatchStatus(e.target.value as FeedbackStatus)}
              className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              <option value={FeedbackStatus.PENDING}>{getFeedbackStatusLabel(FeedbackStatus.PENDING, t)}</option>
              <option value={FeedbackStatus.IN_PROGRESS}>{getFeedbackStatusLabel(FeedbackStatus.IN_PROGRESS, t)}</option>
              <option value={FeedbackStatus.RESOLVED}>{getFeedbackStatusLabel(FeedbackStatus.RESOLVED, t)}</option>
              <option value={FeedbackStatus.CLOSED}>{getFeedbackStatusLabel(FeedbackStatus.CLOSED, t)}</option>
            </select>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setBatchModalOpen(false)}>
              {t.common?.cancel || 'Cancel'}
            </Button>
            <Button onClick={handleBatchUpdate} disabled={batchLoading}>
              {batchLoading
                ? t.common?.updating || 'Updating...'
                : t.common?.confirmUpdate || t.common?.confirm || 'Confirm Update'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 删除确认弹窗 */}
      <Dialog open={deleteModalOpen} onOpenChange={setDeleteModalOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{t.feedback?.admin?.delete || t.common?.delete || 'Delete Feedback'}</DialogTitle>
            <DialogDescription>
              {t.feedback?.admin?.deleteConfirm || t.common?.confirmDelete || 'Are you sure you want to delete?'}
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDeleteModalOpen(false)}>
              {t.common?.cancel || 'Cancel'}
            </Button>
            <Button variant="destructive" onClick={handleDelete} disabled={deleteLoading}>
              {deleteLoading
                ? t.common?.deleting || 'Deleting...'
                : t.common?.confirm || 'Confirm'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}