'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { useTranslation } from '@/hooks/useTranslation';
import {
  getEntityHistory,
  getUserHistory,
  getTraceLogs,
  EntityHistoryResponse,
  UserHistoryResponse,
  TraceLogsResponse,
  getActionLabel,
  getActionColor,
  getStatusLabel,
  getStatusColor,
  formatModuleName,
} from '@/services/api/audit';
import { ApiClientError } from '@/lib/api-client';
import {
  Search,
  User,
  FileText,
  Link,
  RefreshCw,
  XCircle,
  Clock,
  AlertTriangle,
  DollarSign,
} from 'lucide-react';

type SearchType = 'entity' | 'user' | 'trace';

/**
 * 高级搜索页面
 */
export default function AuditSearchPage() {
  const router = useRouter();
  const { t } = useTranslation();

  const [searchType, setSearchType] = useState<SearchType>('entity');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // 实体搜索
  const [entityType, setEntityType] = useState('');
  const [entityId, setEntityId] = useState('');
  const [entityResult, setEntityResult] = useState<EntityHistoryResponse | null>(null);

  // 用户搜索
  const [userId, setUserId] = useState('');
  const [userResult, setUserResult] = useState<UserHistoryResponse | null>(null);

  // 追踪搜索
  const [traceId, setTraceId] = useState('');
  const [traceResult, setTraceResult] = useState<TraceLogsResponse | null>(null);

  // UUID 格式验证函数
  const isValidUUID = (uuid: string): boolean => {
    if (!uuid) return false;
    const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
    return uuidRegex.test(uuid.trim());
  };

  const handleSearch = async () => {
    setLoading(true);
    setError(null);
    setEntityResult(null);
    setUserResult(null);
    setTraceResult(null);

    try {
      switch (searchType) {
        case 'entity':
          if (!entityType || !entityId) {
            setError('请输入实体类型和实体 ID');
            return;
          }
          if (!isValidUUID(entityId)) {
            setError(('实体 ID') + ' ' + ('必须是有效的 UUID 格式'));
            return;
          }
          const entityData = await getEntityHistory(entityType, entityId, { includeDiff: true });
          setEntityResult(entityData);
          break;

        case 'user':
          if (!userId) {
            setError('请输入用户 ID');
            return;
          }
          if (!isValidUUID(userId)) {
            setError(('用户 ID') + ' ' + ('必须是有效的 UUID 格式'));
            return;
          }
          const userData = await getUserHistory(userId);
          setUserResult(userData);
          break;

        case 'trace':
          if (!traceId) {
            setError('请输入追踪 ID');
            return;
          }
          if (!isValidUUID(traceId)) {
            setError(('追踪 ID') + ' ' + ('必须是有效的 UUID 格式'));
            return;
          }
          const traceData = await getTraceLogs(traceId);
          setTraceResult(traceData);
          break;
      }
    } catch (err) {
      console.error('Search failed:', err);
      if (err instanceof ApiClientError) {
        setError(err.message);
      } else {
        setError('搜索失败');
      }
    } finally {
      setLoading(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',
    });
  };

  return (
    <div className="p-6 space-y-6">
      {/* 搜索类型选择 */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <div className="flex space-x-4 mb-6">
          <button
            onClick={() => setSearchType('entity')}
            className={`flex items-center px-4 py-2 rounded-lg transition-colors ${
              searchType === 'entity'
                ? 'bg-indigo-50 text-indigo-600 border border-indigo-200'
                : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100'
            }`}
          >
            <FileText className="w-4 h-4 mr-2" />
            {'实体历史'}
          </button>
          <button
            onClick={() => setSearchType('user')}
            className={`flex items-center px-4 py-2 rounded-lg transition-colors ${
              searchType === 'user'
                ? 'bg-indigo-50 text-indigo-600 border border-indigo-200'
                : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100'
            }`}
          >
            <User className="w-4 h-4 mr-2" />
            {'用户操作'}
          </button>
          <button
            onClick={() => setSearchType('trace')}
            className={`flex items-center px-4 py-2 rounded-lg transition-colors ${
              searchType === 'trace'
                ? 'bg-indigo-50 text-indigo-600 border border-indigo-200'
                : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100'
            }`}
          >
            <Link className="w-4 h-4 mr-2" />
            {'请求链路'}
          </button>
        </div>

        {/* 实体搜索表单 */}
        {searchType === 'entity' && (
          <div className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  {t.audit?.search?.entityType} <span className="text-red-500">{t.audit?.search?.required}</span>
                </label>
                <input
                  type="text"
                  placeholder={t.audit?.search?.entityTypePlaceholder}
                  value={entityType}
                  onChange={(e) => setEntityType(e.target.value)}
                  className="w-full px-4 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">
                  {t.audit?.search?.entityId} <span className="text-red-500">{t.audit?.search?.required}</span>
                </label>
                <div className="relative">
                  <input
                    type="text"
                    placeholder={t.audit?.search?.entityIdPlaceholder}
                    value={entityId}
                    onChange={(e) => setEntityId(e.target.value)}
                    className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 font-mono text-sm ${
                      entityId && !isValidUUID(entityId)
                        ? 'border-red-300 focus:ring-red-500'
                        : 'border-gray-200 focus:ring-indigo-500'
                    }`}
                  />
                  {entityId && !isValidUUID(entityId) && (
                    <p className="text-xs text-red-500 mt-1">
                      {t.audit?.search?.invalidUUID}
                    </p>
                  )}
                  {entityId && isValidUUID(entityId) && (
                    <p className="text-xs text-green-600 mt-1">
                      {t.audit?.search?.validFormat}
                    </p>
                  )}
                  {!entityId && (
                    <p className="text-xs text-gray-400 mt-1">
                      {t.audit?.search?.uuidHint}
                    </p>
                  )}
                </div>
              </div>
            </div>
            <p className="text-sm text-gray-500">
              {t.audit?.search?.entityHistoryDesc}
            </p>
          </div>
        )}

        {/* 用户搜索表单 */}
        {searchType === 'user' && (
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                {t.audit?.search?.userId} <span className="text-red-500">{t.audit?.search?.required}</span>
              </label>
              <div className="relative">
                <input
                  type="text"
                  placeholder={t.audit?.search?.entityIdPlaceholder}
                  value={userId}
                  onChange={(e) => setUserId(e.target.value)}
                  className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 font-mono text-sm ${
                    userId && !isValidUUID(userId)
                      ? 'border-red-300 focus:ring-red-500'
                      : 'border-gray-200 focus:ring-indigo-500'
                  }`}
                />
                {userId && !isValidUUID(userId) && (
                  <p className="text-xs text-red-500 mt-1">
                    {t.audit?.search?.invalidUUID}
                  </p>
                )}
                {userId && isValidUUID(userId) && (
                  <p className="text-xs text-green-600 mt-1">
                    {t.audit?.search?.validFormat}
                  </p>
                )}
                {!userId && (
                  <p className="text-xs text-gray-400 mt-1">
                    {t.audit?.search?.uuidHint}
                  </p>
                )}
              </div>
            </div>
            <p className="text-sm text-gray-500">
              {t.audit?.search?.userOperationsDesc}
            </p>
          </div>
        )}

        {/* 追踪搜索表单 */}
        {searchType === 'trace' && (
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                {t.audit?.search?.traceId} <span className="text-red-500">{t.audit?.search?.required}</span>
              </label>
              <div className="relative">
                <input
                  type="text"
                  placeholder={t.audit?.search?.entityIdPlaceholder}
                  value={traceId}
                  onChange={(e) => setTraceId(e.target.value)}
                  className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 font-mono text-sm ${
                    traceId && !isValidUUID(traceId)
                      ? 'border-red-300 focus:ring-red-500'
                      : 'border-gray-200 focus:ring-indigo-500'
                  }`}
                />
                {traceId && !isValidUUID(traceId) && (
                  <p className="text-xs text-red-500 mt-1">
                    {t.audit?.search?.invalidUUID}
                  </p>
                )}
                {traceId && isValidUUID(traceId) && (
                  <p className="text-xs text-green-600 mt-1">
                    {t.audit?.search?.validFormat}
                  </p>
                )}
                {!traceId && (
                  <p className="text-xs text-gray-400 mt-1">
                    {t.audit?.search?.uuidHint}
                  </p>
                )}
              </div>
            </div>
            <p className="text-sm text-gray-500">
              {t.audit?.search?.traceChainDesc}
            </p>
          </div>
        )}

        <button
          onClick={handleSearch}
          disabled={loading}
          className="mt-6 w-full flex items-center justify-center px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
        >
          {loading ? (
            <>
              <RefreshCw className="w-5 h-5 mr-2 animate-spin" />
              {t.audit?.search?.searching}
            </>
          ) : (
            <>
              <Search className="w-5 h-5 mr-2" />
              {t.audit?.search?.search}
            </>
          )}
        </button>
      </div>

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

      {/* 实体历史结果 */}
      {entityResult && (
        <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
          <div className="p-6 border-b border-gray-100">
            <div className="flex items-center justify-between">
              <div>
                <h3 className="text-lg font-semibold text-gray-900">{t.audit?.search?.entityHistoryTitle}</h3>
                <p className="text-sm text-gray-500 mt-1">
                  {entityResult.entityType} #{entityResult.entityId}
                </p>
              </div>
              <span className="text-sm text-gray-500">
                {t.audit?.search?.totalRecords?.replace('{count}', entityResult.total.toString())}
              </span>
            </div>
          </div>
          <div className="divide-y divide-gray-100">
            {entityResult.history.map((item) => {
              const actionColor = getActionColor(item.action);
              const statusColor = getStatusColor(item.status);

              return (
                <div
                  key={item.id}
                  onClick={() => router.push(`/audit/logs/${item.id}`)}
                  className="p-4 hover:bg-gray-50 cursor-pointer transition-colors"
                >
                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-3">
                      <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${actionColor.bg} ${actionColor.text}`}>
                        {getActionLabel(item.action, t)}
                      </span>
                      <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${statusColor.bg} ${statusColor.text}`}>
                        {getStatusLabel(item.status, t)}
                      </span>
                      <span className="text-sm text-gray-600">{item.who}</span>
                    </div>
                    <span className="text-sm text-gray-500 flex items-center">
                      <Clock className="w-4 h-4 mr-1" />
                      {formatDateTime(item.when)}
                    </span>
                  </div>
                  {item.changes && (
                    <div className="mt-2 text-sm text-gray-500">
                      {t.audit?.search?.changedFields}: {Object.keys(item.changes).join(', ')}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      )}

      {/* 用户操作结果 */}
      {userResult && (
        <div className="space-y-6">
          {/* 用户摘要 */}
          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <div className="flex items-center space-x-4 mb-6">
              <div className="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center">
                <User className="w-6 h-6 text-indigo-600" />
              </div>
              <div>
                <h3 className="text-lg font-semibold text-gray-900">
                  {userResult.displayName || userResult.username || userResult.userId}
                </h3>
                <p className="text-sm text-gray-500">{t.audit?.search?.userId}: {userResult.userId}</p>
              </div>
            </div>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div className="bg-gray-50 rounded-lg p-4">
                <p className="text-sm text-gray-500">{t.audit?.search?.totalOperations}</p>
                <p className="text-2xl font-bold text-gray-900">{userResult.summary.total}</p>
              </div>
              <div className="bg-amber-50 rounded-lg p-4">
                <p className="text-sm text-amber-600">{t.audit?.search?.sensitiveOperations}</p>
                <p className="text-2xl font-bold text-amber-700">{userResult.summary.sensitiveCount}</p>
              </div>
              <div className="bg-emerald-50 rounded-lg p-4">
                <p className="text-sm text-emerald-600">{t.audit?.search?.financialOperations}</p>
                <p className="text-2xl font-bold text-emerald-700">{userResult.summary.financialCount}</p>
              </div>
              <div className="bg-red-50 rounded-lg p-4">
                <p className="text-sm text-red-600">{t.audit?.search?.failedOperations}</p>
                <p className="text-2xl font-bold text-red-700">{userResult.summary.failedCount}</p>
              </div>
            </div>
          </div>

          {/* 操作列表 */}
          <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div className="p-6 border-b border-gray-100">
              <h3 className="text-lg font-semibold text-gray-900">{t.audit?.search?.operationRecords}</h3>
            </div>
            <div className="divide-y divide-gray-100">
              {userResult.operations.map((op) => {
                const actionColor = getActionColor(op.action);
                const statusColor = getStatusColor(op.status);

                return (
                  <div
                    key={op.id}
                    onClick={() => router.push(`/audit/logs/${op.id}`)}
                    className="p-4 hover:bg-gray-50 cursor-pointer transition-colors"
                  >
                    <div className="flex items-start justify-between">
                      <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(op.action, t)}
                          </span>
                          <span className="text-gray-900 font-medium">
                            {formatModuleName(op.module, t)}
                          </span>
                          <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${statusColor.bg} ${statusColor.text}`}>
                            {getStatusLabel(op.status, t)}
                          </span>
                          {op.isFinancial && (
                            <DollarSign className="w-4 h-4 text-emerald-500" />
                          )}
                          {op.isSensitive && (
                            <AlertTriangle className="w-4 h-4 text-amber-500" />
                          )}
                        </div>
                        <p className="text-sm text-gray-600 mt-1">{op.what}</p>
                      </div>
                      <span className="text-sm text-gray-500 flex items-center">
                        <Clock className="w-4 h-4 mr-1" />
                        {formatDateTime(op.when)}
                      </span>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      )}

      {/* 追踪链路结果 */}
      {traceResult && (
        <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
          <div className="p-6 border-b border-gray-100">
            <div className="flex items-center justify-between">
              <div>
                <h3 className="text-lg font-semibold text-gray-900">{t.audit?.search?.traceChainTitle}</h3>
                <p className="text-sm text-gray-500 mt-1 font-mono">
                  Trace ID: {traceResult.traceId}
                </p>
              </div>
              {traceResult.totalDuration && (
                <div className="text-right">
                  <p className="text-sm text-gray-500">{t.audit?.search?.totalDuration}</p>
                  <p className="text-lg font-semibold text-gray-900">
                    {traceResult.totalDuration} ms
                  </p>
                </div>
              )}
            </div>
          </div>
          <div className="p-6">
            <div className="relative">
              {/* 时间线 */}
              <div className="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-200" />
              
              <div className="space-y-6">
                {traceResult.logs.map((log, index) => {
                  const actionColor = getActionColor(log.action);
                  const statusColor = getStatusColor(log.status);

                  return (
                    <div key={log.id} className="relative pl-10">
                      {/* 时间线节点 */}
                      <div className={`absolute left-2 w-5 h-5 rounded-full border-2 border-white ${
                        log.status === 'SUCCESS' ? 'bg-green-500' : 'bg-red-500'
                      }`} />
                      
                      <div
                        onClick={() => router.push(`/audit/logs/${log.id}`)}
                        className="bg-gray-50 rounded-lg p-4 hover:bg-gray-100 cursor-pointer transition-colors"
                      >
                        <div className="flex items-center justify-between mb-2">
                          <div className="flex items-center space-x-2">
                            <span className="text-sm font-medium text-gray-500">
                              #{index + 1}
                            </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>
                          </div>
                          <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>
                        <div className="flex items-center justify-between text-sm text-gray-500">
                          <span>{formatDateTime(log.when)}</span>
                          {log.duration && (
                            <span>{log.duration} ms</span>
                          )}
                        </div>
                        {log.errorMessage && (
                          <div className="mt-2 text-sm text-red-600">
                            {log.errorMessage}
                          </div>
                        )}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}