'use client';

import { useEffect, useState, useCallback } from 'react';
import { useRouter } from 'next/navigation';
import { useTranslation } from '@/hooks/useTranslation';
import { PageState } from '@/components/common/feedback/PageState';
import {
  getSensitiveLogs,
  SensitiveLogsResponse,
  AuditAction,
  RiskLevel,
  getActionLabel,
  getActionColor,
  getRiskLevelLabel,
  getRiskLevelColor,
  getStatusLabel,
  getStatusColor,
  formatModuleName,
} from '@/services/api/audit';
import { ApiClientError } from '@/lib/api-client';
import {
  AlertTriangle,
  Shield,
  Calendar,
  RefreshCw,
  ChevronLeft,
  ChevronRight,
  Clock,
  Filter,
  X,
  ShieldAlert,
  Lock,
  Key,
} from 'lucide-react';

/**
 * 敏感操作审计页面
 */
export default function AuditSensitivePage() {
  const router = useRouter();
  const { t } = useTranslation();

  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [data, setData] = useState<SensitiveLogsResponse | null>(null);
  const [showFilters, setShowFilters] = useState(false);

  // 筛选条件
  const [filters, setFilters] = useState(() => {
    const end = new Date();
    const start = new Date();
    start.setDate(start.getDate() - 30);
    return {
      startDate: start.toISOString().split('T')[0],
      endDate: end.toISOString().split('T')[0],
      userId: '',
      action: '' as AuditAction | '',
      riskLevel: '' as RiskLevel | '',
      page: 1,
      limit: 20,
    };
  });

  const loadData = useCallback(async () => {
    try {
      setLoading(true);
      setError(null);

      const result = await getSensitiveLogs({
        startDate: `${filters.startDate}T00:00:00.000Z`,
        endDate: `${filters.endDate}T23:59:59.999Z`,
        userId: filters.userId || undefined,
        action: filters.action || undefined,
        riskLevel: filters.riskLevel || undefined,
        page: filters.page,
        limit: filters.limit,
      });

      setData(result);
    } catch (err) {
      console.error('Failed to load sensitive logs:', err);
      if (err instanceof ApiClientError) {
        setError(err.message);
      } else {
        setError('加载敏感操作日志失败');
      }
    } finally {
      setLoading(false);
    }
  }, [filters]);

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

  const updateFilter = (key: string, value: string | number | undefined) => {
    setFilters((prev) => ({
      ...prev,
      [key]: value,
      page: key === 'page' ? (value as number) : 1,
    }));
  };

  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',
    });
  };

  // 敏感操作类型
  const sensitiveActions = [
    AuditAction.PASSWORD_CHANGE,
    AuditAction.PASSWORD_RESET,
    AuditAction.EMAIL_CHANGE,
    AuditAction.PERMISSION_CHANGE,
    AuditAction.ROLE_CHANGE,
    AuditAction.DELETE,
    AuditAction.BULK_DELETE,
    AuditAction.CONFIG_CHANGE,
  ];

  // 获取风险级别图标
  const getRiskIcon = (level: RiskLevel) => {
    switch (level) {
      case RiskLevel.HIGH:
        return <ShieldAlert className="w-4 h-4" />;
      case RiskLevel.MEDIUM:
        return <AlertTriangle className="w-4 h-4" />;
      case RiskLevel.LOW:
        return <Shield className="w-4 h-4" />;
      default:
        return <Shield className="w-4 h-4" />;
    }
  };

  return (
    <div className="p-6 space-y-6">
      {/* 顶部操作栏 */}
      <div className="flex items-center justify-end space-x-3">
          <button
            onClick={() => setShowFilters(!showFilters)}
            className={`flex items-center px-4 py-2 rounded-lg border transition-colors ${
              showFilters
                ? 'bg-amber-50 border-amber-200 text-amber-600'
                : 'border-gray-200 text-gray-600 hover:bg-gray-50'
            }`}
          >
            <Filter className="w-4 h-4 mr-2" />
            {'筛选'}
          </button>
      </div>

      {/* 安全提示 */}
      <div className="bg-amber-50 border border-amber-100 rounded-xl p-4">
        <div className="flex items-center space-x-3">
          <div className="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center">
            <AlertTriangle className="w-5 h-5 text-amber-600" />
          </div>
          <div>
            <h3 className="text-sm font-semibold text-amber-900">{t.audit?.sensitive?.securityMonitoring}</h3>
            <p className="text-sm text-amber-700">
              {t.audit?.sensitive?.securityDesc}
            </p>
          </div>
        </div>
      </div>

      {/* 风险级别统计 */}
      {data?.summary && (
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
            <p className="text-sm text-gray-500">{t.audit?.sensitive?.totalSensitiveOps}</p>
            <p className="text-2xl font-bold text-gray-900 mt-1">
              {data.summary.total.toLocaleString()}
            </p>
          </div>
          {Object.entries(data.summary.byRiskLevel).map(([level, count]) => {
            const riskColor = getRiskLevelColor(level as RiskLevel);
            return (
              <div
                key={level}
                className={`rounded-xl shadow-sm border p-5 ${riskColor.bg} ${riskColor.border}`}
              >
                <div className="flex items-center space-x-2">
                  <span className={riskColor.text}>
                    {getRiskIcon(level as RiskLevel)}
                  </span>
                  <p className={`text-sm ${riskColor.text}`}>
                    {getRiskLevelLabel(level as RiskLevel, t)}
                  </p>
                </div>
                <p className={`text-2xl font-bold mt-1 ${riskColor.text}`}>
                  {count}
                </p>
              </div>
            );
          })}
        </div>
      )}

      {/* 时间范围和筛选 */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
        <div className="flex items-center justify-between flex-wrap gap-4">
          <div className="flex items-center space-x-2">
            <Calendar className="w-5 h-5 text-gray-400" />
            <span className="text-sm text-gray-500">{t.audit?.statistics?.timeRange}:</span>
            <input
              type="date"
              value={filters.startDate}
              onChange={(e) => updateFilter('startDate', e.target.value)}
              className="px-3 py-1.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-amber-500"
            />
            <span className="text-gray-400">{'至'}</span>
            <input
              type="date"
              value={filters.endDate}
              onChange={(e) => updateFilter('endDate', e.target.value)}
              className="px-3 py-1.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-amber-500"
            />
          </div>
          <div className="flex items-center space-x-2">
            <button
              onClick={() => {
                const end = new Date();
                const start = new Date();
                start.setDate(start.getDate() - 7);
                setFilters((prev) => ({
                  ...prev,
                  startDate: start.toISOString().split('T')[0],
                  endDate: end.toISOString().split('T')[0],
                  page: 1,
                }));
              }}
              className="px-3 py-1.5 text-sm border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
            >
              {t.audit?.sensitive?.last7Days}
            </button>
            <button
              onClick={() => {
                const end = new Date();
                const start = new Date();
                start.setMonth(start.getMonth() - 1);
                setFilters((prev) => ({
                  ...prev,
                  startDate: start.toISOString().split('T')[0],
                  endDate: end.toISOString().split('T')[0],
                  page: 1,
                }));
              }}
              className="px-3 py-1.5 text-sm border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
            >
              {t.audit?.sensitive?.last1Month}
            </button>
          </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">{t.audit?.sensitive?.advancedFilters}</h3>
            <button
              onClick={() => {
                setFilters((prev) => ({
                  ...prev,
                  userId: '',
                  action: '',
                  riskLevel: '',
                  page: 1,
                }));
              }}
              className="text-sm text-gray-500 hover:text-gray-700 flex items-center"
            >
              <X className="w-4 h-4 mr-1" />
              {t.audit?.sensitive?.clearFilters}
            </button>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 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)}
                className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"
              >
                <option value="">{'全部'}</option>
                {sensitiveActions.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.riskLevel}
                onChange={(e) => updateFilter('riskLevel', e.target.value)}
                className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-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">
                {'用户 ID'}
              </label>
              <input
                type="text"
                placeholder={t.audit?.sensitive?.enterUserId}
                value={filters.userId}
                onChange={(e) => updateFilter('userId', e.target.value)}
                className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"
              />
            </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?.sensitive?.totalSensitiveRecords?.replace('{count}', (data?.total || 0).toString())}
            </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"
              >
                <option value={10}>10</option>
                <option value={20}>20</option>
                <option value={50}>50</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-amber-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?.empty?.noLogs || 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 ${riskColor.bg}`}>
                        {getRiskIcon(log.riskLevel)}
                      </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 ${riskColor.bg} ${riskColor.text}`}>
                            {getRiskLevelLabel(log.riskLevel, t)}
                          </span>
                          <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>
                        </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>
                      {'mfaVerified' in log && log.mfaVerified && (
                        <span className="text-xs text-green-600 mt-1 flex items-center">
                          <Lock className="w-3 h-3 mr-1" />
                          MFA 已验证
                        </span>
                      )}
                      {'requiresApproval' in log && log.requiresApproval && (
                        <span className="text-xs text-amber-600 mt-1 flex items-center">
                          <Key className="w-3 h-3 mr-1" />
                          需要审批
                        </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>
  );
}