'use client';

import { Suspense, useEffect, useState, useCallback } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { useTranslation } from '@/hooks/useTranslation';
import { PageState } from '@/components/common/feedback/PageState';
import {
  getAuditLogs,
  exportLogs,
  AuditLogItem,
  QueryAuditLogParams,
  AuditAction,
  AuditStatus,
  RiskLevel,
  getActionLabel,
  getActionColor,
  getRiskLevelLabel,
  getRiskLevelColor,
  getStatusLabel,
  getStatusColor,
  formatModuleName,
} from '@/services/api/audit';
import { PaginatedData, ApiClientError } from '@/lib/api-client';
import {
  Search,
  Filter,
  RefreshCw,
  ChevronLeft,
  ChevronRight,
  FileText,
  Clock,
  AlertTriangle,
  DollarSign,
  X,
  Download,
} from 'lucide-react';

/**
 * 审计日志列表页面 - 包装组件
 */
export default function AuditLogsPage() {
  return (
    <Suspense fallback={<div className="p-6 text-center text-gray-500">加载中...</div>}>
      <AuditLogsContent />
    </Suspense>
  );
}

/**
 * 审计日志列表页面 - 内容组件
 */
function AuditLogsContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { t } = useTranslation();

  // 状态
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [data, setData] = useState<PaginatedData<AuditLogItem> | null>(null);
  const [showFilters, setShowFilters] = useState(false);
  const [exporting, setExporting] = useState(false);
  const [showExportMenu, setShowExportMenu] = useState(false);

  // 筛选条件
  const [filters, setFilters] = useState<QueryAuditLogParams>({
    page: 1,
    limit: 20,
    sortBy: 'when',
    sortOrder: 'desc',
    keyword: searchParams.get('keyword') || '',
    action: (searchParams.get('action') as AuditAction) || undefined,
    status: (searchParams.get('status') as AuditStatus) || undefined,
    module: searchParams.get('module') || undefined,
    riskLevel: (searchParams.get('riskLevel') as RiskLevel) || undefined,
    isFinancial: searchParams.get('isFinancial') === 'true' ? true : undefined,
    isSensitive: searchParams.get('isSensitive') === 'true' ? true : undefined,
    startDate: searchParams.get('startDate') || undefined,
    endDate: searchParams.get('endDate') || undefined,
  });

  // 加载数据
  const loadData = useCallback(async () => {
    try {
      setLoading(true);
      setError(null);

      const cleanFilters: QueryAuditLogParams = { ...filters };
      // 清理空值
      Object.keys(cleanFilters).forEach((key) => {
        const k = key as keyof QueryAuditLogParams;
        if (cleanFilters[k] === '' || cleanFilters[k] === undefined) {
          delete cleanFilters[k];
        }
      });

      const result = await getAuditLogs(cleanFilters);
      setData(result);
    } catch (err) {
      console.error('Failed to load audit logs:', err);
      if (err instanceof ApiClientError) {
        setError(err.message);
      } else {
        setError('加载审计日志失败');
      }
    } finally {
      setLoading(false);
    }
  }, [filters]);

  useEffect(() => {
    loadData();
  }, [loadData]);

  // 更新筛选条件
  const updateFilter = (key: keyof QueryAuditLogParams, value: string | number | boolean | undefined) => {
    setFilters((prev) => ({
      ...prev,
      [key]: value,
      page: key === 'page' ? (value as number) : 1, // 非分页筛选时重置页码
    }));
  };

  // 清除所有筛选
  const clearFilters = () => {
    setFilters({
      page: 1,
      limit: 20,
      sortBy: 'when',
      sortOrder: 'desc',
    });
  };

  // 导出审计日志
  const handleExport = async (format: 'csv' | 'json') => {
    try {
      setExporting(true);
      setShowExportMenu(false);
      setError(null);

      // 设置默认时间范围（如果未指定）
      const endDate = filters.endDate || new Date().toISOString();
      const startDate = filters.startDate || (() => {
        const d = new Date();
        d.setDate(d.getDate() - 30);
        return d.toISOString();
      })();

      const blob = await exportLogs({
        startDate,
        endDate,
        format,
        filters: {
          userId: filters.userId,
          module: filters.module,
          action: filters.action,
          isFinancial: filters.isFinancial,
          isSensitive: filters.isSensitive,
        },
      });

      // 创建下载链接
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      const dateStr = new Date().toISOString().split('T')[0];
      link.download = `audit-logs-${dateStr}.${format}`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
    } catch (err) {
      console.error('Failed to export audit logs:', err);
      if (err instanceof ApiClientError) {
        setError(err.message);
      } else {
        setError('导出审计日志失败');
      }
    } finally {
      setExporting(false);
    }
  };

  // 格式化时间
  const formatDateTime = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
    });
  };

  // 是否有活动筛选
  const hasActiveFilters = !!(
    filters.keyword ||
    filters.action ||
    filters.status ||
    filters.module ||
    filters.riskLevel ||
    filters.isFinancial ||
    filters.isSensitive ||
    filters.startDate ||
    filters.endDate
  );

  return (
    <div className="p-6 space-y-6">
      {/* 搜索栏 */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
        <div className="flex items-center space-x-3">
          <div className="flex-1 relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
            <input
              type="text"
              placeholder={'搜索操作描述、用户名...'}
              value={filters.keyword || ''}
              onChange={(e) => updateFilter('keyword', e.target.value)}
              onKeyDown={(e) => e.key === 'Enter' && loadData()}
              className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
            />
          </div>
          <button
            onClick={loadData}
            className="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors flex-shrink-0"
          >
            {'搜索'}
          </button>
          <button
            onClick={() => setShowFilters(!showFilters)}
            className={`flex items-center px-4 py-2 rounded-lg border transition-colors flex-shrink-0 ${
              showFilters || hasActiveFilters
                ? 'bg-indigo-50 border-indigo-200 text-indigo-600'
                : 'border-gray-200 text-gray-600 hover:bg-gray-50'
            }`}
          >
            <Filter className="w-4 h-4 mr-2" />
            {'筛选'}
            {hasActiveFilters && (
              <span className="ml-2 w-2 h-2 bg-indigo-600 rounded-full" />
            )}
          </button>
          {/* 导出按钮 */}
          <div className="relative flex-shrink-0">
            <button
              onClick={() => setShowExportMenu(!showExportMenu)}
              disabled={exporting}
              className="flex items-center px-4 py-2 border border-gray-200 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors disabled:opacity-50"
            >
              <Download className={`w-4 h-4 mr-2 ${exporting ? 'animate-pulse' : ''}`} />
              {exporting ? ('导出中...') : ('导出')}
            </button>
            {showExportMenu && (
              <div className="absolute right-0 mt-2 w-40 bg-white rounded-lg shadow-lg border border-gray-100 py-1 z-10">
                <button
                  onClick={() => handleExport('csv')}
                  className="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50"
                >
                  {'导出 CSV'}
                </button>
                <button
                  onClick={() => handleExport('json')}
                  className="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50"
                >
                  {'导出 JSON'}
                </button>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* 筛选面板 */}
      {showFilters && (
        <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-lg font-medium text-gray-900">{'高级筛选'}</h3>
            {hasActiveFilters && (
              <button
                onClick={clearFilters}
                className="text-sm text-gray-500 hover:text-gray-700 flex items-center"
              >
                <X className="w-4 h-4 mr-1" />
                {'清除筛选'}
              </button>
            )}
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {/* 操作类型 */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                {'操作类型'}
              </label>
              <select
                value={filters.action || ''}
                onChange={(e) => updateFilter('action', e.target.value || undefined)}
                className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
              >
                <option value="">{'全部'}</option>
                {Object.values(AuditAction).map((action) => (
                  <option key={action} value={action}>
                    {getActionLabel(action, t)}
                  </option>
                ))}
              </select>
            </div>

            {/* 状态 */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                {'状态'}
              </label>
              <select
                value={filters.status || ''}
                onChange={(e) => updateFilter('status', e.target.value || undefined)}
                className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
              >
                <option value="">{'全部'}</option>
                {Object.values(AuditStatus).map((status) => (
                  <option key={status} value={status}>
                    {getStatusLabel(status, t)}
                  </option>
                ))}
              </select>
            </div>

            {/* 风险级别 */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                {'风险级别'}
              </label>
              <select
                value={filters.riskLevel || ''}
                onChange={(e) => updateFilter('riskLevel', e.target.value || undefined)}
                className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
              >
                <option value="">{'全部'}</option>
                {Object.values(RiskLevel).map((level) => (
                  <option key={level} value={level}>
                    {getRiskLevelLabel(level, t)}
                  </option>
                ))}
              </select>
            </div>

            {/* 模块 */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                {'模块'}
              </label>
              <select
                value={filters.module || ''}
                onChange={(e) => updateFilter('module', e.target.value || undefined)}
                className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
              >
                <option value="">{'全部模块'}</option>
                <option value="APPROVAL">{'审批管理'}</option>
                <option value="IAM">{'权限管理'}</option>
                <option value="USER">{'用户管理'}</option>
                <option value="ORGANIZATION">{'组织架构'}</option>
                <option value="FORM">{'表单管理'}</option>
                <option value="FINANCIAL">{'财务管理'}</option>
                <option value="SYSTEM">{'系统管理'}</option>
              </select>
            </div>

            {/* 开始日期 */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                {'开始日期'}
              </label>
              <input
                type="date"
                value={filters.startDate?.split('T')[0] || ''}
                onChange={(e) =>
                  updateFilter('startDate', e.target.value ? `${e.target.value}T00:00:00.000Z` : undefined)
                }
                className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
              />
            </div>

            {/* 结束日期 */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                {'结束日期'}
              </label>
              <input
                type="date"
                value={filters.endDate?.split('T')[0] || ''}
                onChange={(e) =>
                  updateFilter('endDate', e.target.value ? `${e.target.value}T23:59:59.999Z` : undefined)
                }
                className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
              />
            </div>

            {/* 财务操作 */}
            <div className="flex items-center">
              <label className="flex items-center cursor-pointer">
                <input
                  type="checkbox"
                  checked={filters.isFinancial || false}
                  onChange={(e) => updateFilter('isFinancial', e.target.checked || undefined)}
                  className="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
                />
                <span className="ml-2 text-sm text-gray-700">{'仅财务操作'}</span>
              </label>
            </div>

            {/* 敏感操作 */}
            <div className="flex items-center">
              <label className="flex items-center cursor-pointer">
                <input
                  type="checkbox"
                  checked={filters.isSensitive || false}
                  onChange={(e) => updateFilter('isSensitive', e.target.checked || undefined)}
                  className="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
                />
                <span className="ml-2 text-sm text-gray-700">{'仅敏感操作'}</span>
              </label>
            </div>
          </div>
        </div>
      )}

      {/* 错误提示 */}
      {error && (
        <div className="bg-red-50 border border-red-200 rounded-lg p-4 flex items-center">
          <AlertTriangle className="w-5 h-5 text-red-500 mr-3" />
          <span className="text-red-700">{error}</span>
        </div>
      )}

      {/* 日志列表 */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        {/* 表头 */}
        <div className="px-6 py-3 bg-gray-50 border-b border-gray-100">
          <div className="flex items-center justify-between">
            <span className="text-sm text-gray-500">
              {t.audit?.logs?.totalRecords?.replace('{count}', String(data?.total || 0)) || `共 ${data?.total || 0} 条记录`}
            </span>
            <div className="flex items-center space-x-2">
              <span className="text-sm text-gray-500">{'每页'}</span>
              <select
                value={filters.limit}
                onChange={(e) => updateFilter('limit', parseInt(e.target.value))}
                className="px-2 py-1 border border-gray-200 rounded text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
              >
                <option value={10}>10</option>
                <option value={20}>20</option>
                <option value={50}>50</option>
                <option value={100}>100</option>
              </select>
              <span className="text-sm text-gray-500">{'条'}</span>
            </div>
          </div>
        </div>

        {/* 加载状态 */}
        {loading && (
          <div className="flex items-center justify-center py-12">
            <RefreshCw className="w-8 h-8 text-indigo-600 animate-spin" />
          </div>
        )}

        {/* 空状态 */}
        {!loading && (!data?.items || data.items.length === 0) && (
          <div className="py-12 flex items-center justify-center">
            <PageState
              variant="empty"
              title={t.audit?.overview?.noLogs || t.audit?.overview?.noData || t.common.noData}
              layout="center"
              className="border-0 bg-transparent"
            />
          </div>
        )}

        {/* 日志列表 */}
        {!loading && data?.items && data.items.length > 0 && (
          <div className="divide-y divide-gray-100">
            {data.items.map((log) => {
              const actionColor = getActionColor(log.action);
              const statusColor = getStatusColor(log.status);
              const riskColor = getRiskLevelColor(log.riskLevel);

              return (
                <div
                  key={log.id}
                  onClick={() => router.push(`/audit/logs/${log.id}`)}
                  className="px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors"
                >
                  <div className="flex items-start justify-between">
                    <div className="flex items-start space-x-4">
                      <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${actionColor.bg}`}>
                        <FileText className={`w-5 h-5 ${actionColor.text}`} />
                      </div>
                      <div>
                        <div className="flex items-center space-x-2 flex-wrap gap-y-1">
                          <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${actionColor.bg} ${actionColor.text}`}>
                            {getActionLabel(log.action, t)}
                          </span>
                          <span className="text-gray-900 font-medium">
                            {formatModuleName(log.module, t)}
                          </span>
                          <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${statusColor.bg} ${statusColor.text}`}>
                            {getStatusLabel(log.status, t)}
                          </span>
                          {log.riskLevel !== RiskLevel.LOW && (
                            <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${riskColor.bg} ${riskColor.text}`}>
                              {getRiskLevelLabel(log.riskLevel, t)}
                            </span>
                          )}
                          {log.isSensitive && (
                            <span className="inline-flex items-center text-amber-500">
                              <AlertTriangle className="w-4 h-4" />
                            </span>
                          )}
                          {log.isFinancial && (
                            <span className="inline-flex items-center text-emerald-500">
                              <DollarSign className="w-4 h-4" />
                            </span>
                          )}
                        </div>
                        <p className="text-sm text-gray-600 mt-1 line-clamp-1">
                          {log.what}
                        </p>
                        <div className="flex items-center space-x-4 mt-2 text-xs text-gray-400">
                          <span>{log.user?.displayName || log.user?.username || log.who}</span>
                          <span>•</span>
                          <span>{log.entityType}#{log.entityId.substring(0, 8)}</span>
                          <span>•</span>
                          <span>{log.ipAddress}</span>
                        </div>
                      </div>
                    </div>
                    <div className="flex flex-col items-end">
                      <span className="text-sm text-gray-500 flex items-center">
                        <Clock className="w-4 h-4 mr-1" />
                        {formatDateTime(log.when)}
                      </span>
                      {log.duration && (
                        <span className="text-xs text-gray-400 mt-1">
                          耗时 {log.duration}ms
                        </span>
                      )}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        )}

        {/* 分页 */}
        {data && data.totalPages > 1 && (
          <div className="px-6 py-4 border-t border-gray-100 flex items-center justify-between">
            <div className="text-sm text-gray-500">
              第 {data.page} / {data.totalPages} 页
            </div>
            <div className="flex items-center space-x-2">
              <button
                onClick={() => updateFilter('page', data.page - 1)}
                disabled={!data.hasPrev}
                className={`p-2 rounded-lg border ${
                  data.hasPrev
                    ? 'border-gray-200 text-gray-600 hover:bg-gray-50'
                    : 'border-gray-100 text-gray-300 cursor-not-allowed'
                }`}
              >
                <ChevronLeft className="w-5 h-5" />
              </button>
              <button
                onClick={() => updateFilter('page', data.page + 1)}
                disabled={!data.hasNext}
                className={`p-2 rounded-lg border ${
                  data.hasNext
                    ? 'border-gray-200 text-gray-600 hover:bg-gray-50'
                    : 'border-gray-100 text-gray-300 cursor-not-allowed'
                }`}
              >
                <ChevronRight className="w-5 h-5" />
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}