'use client';

import { useState, useEffect } from 'react';
import { useTranslation } from '@/hooks/useTranslation';
import { usePermissions } from '@/hooks/usePermissions';
import { PageState } from '@/components/common/feedback/PageState';
import {
  Settings,
  RefreshCw,
  AlertCircle,
  Save,
  Trash2,
  CheckCircle,
} from 'lucide-react';
import {
  getLogConfig,
  updateLogConfig,
  cleanupLogs,
  LogConfig,
  LogLevel,
  UpdateLogConfigParams,
  CleanupLogParams,
  CleanupResult,
} from '@/services/api/logs';

/**
 * 日志配置页面
 * 管理日志系统配置
 */
export default function LogConfigPage() {
  const { t } = useTranslation();
  const { hasPermission, isAdmin } = usePermissions();
  
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);
  const [isCleaning, setIsCleaning] = useState(false);
  const [config, setConfig] = useState<LogConfig | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [saveSuccess, setSaveSuccess] = useState(false);
  const [cleanupResult, setCleanupResult] = useState<CleanupResult | null>(null);

  // 清理参数
  const [cleanupParams, setCleanupParams] = useState<CleanupLogParams>({
    type: 'all',
    olderThanDays: 14,
    dryRun: true,
  });

  const canAccess = isAdmin || hasPermission('log:read');
  const canConfig = isAdmin || hasPermission('log:config');
  const canCleanup = isAdmin || hasPermission('log:cleanup');

  // 加载配置
  const loadConfig = async () => {
    if (!canAccess) return;
    
    setIsLoading(true);
    setError(null);
    
    try {
      const response = await getLogConfig();
      setConfig(response);
    } catch (err) {
      console.error('Failed to load config:', err);
      setError(t.logs.error.loadFailed);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    loadConfig();
  }, [canAccess]);

  // 保存配置
  const handleSave = async () => {
    if (!config || !canConfig) return;
    
    setIsSaving(true);
    setError(null);
    setSaveSuccess(false);
    
    try {
      const params: UpdateLogConfigParams = {
        level: config.level,
        sampling: config.sampling,
        alerts: config.alerts,
      };
      
      const response = await updateLogConfig(params);
      setConfig(response);
      setSaveSuccess(true);
      setTimeout(() => setSaveSuccess(false), 3000);
    } catch (err) {
      console.error('Failed to save config:', err);
      setError(t.logs.error.saveFailed);
    } finally {
      setIsSaving(false);
    }
  };

  // 执行清理
  const handleCleanup = async () => {
    if (!canCleanup) return;
    
    setIsCleaning(true);
    setCleanupResult(null);
    setError(null);
    
    try {
      const result = await cleanupLogs(cleanupParams);
      setCleanupResult(result);
    } catch (err) {
      console.error('Failed to cleanup logs:', err);
      setError(t.logs.error.cleanupFailed);
    } finally {
      setIsCleaning(false);
    }
  };

  // 无权限提示
  if (!canAccess) {
    return (
      <div className="p-6 flex items-center justify-center">
        <PageState
          variant="error"
          title={t.common.permissionDenied}
          description={t.common.permissionDeniedDetail}
          layout="center"
          className="mx-auto w-full max-w-2xl border-0 bg-transparent"
        />
      </div>
    );
  }

  // 加载中
  if (isLoading) {
    return (
      <div className="h-full flex items-center justify-center bg-[#f7f8fa]">
        <RefreshCw className="w-8 h-8 text-[#8f959e] animate-spin" />
      </div>
    );
  }

  return (
    <div className="h-full flex flex-col bg-[#f7f8fa]">
      {/* 主内容区域 - 可滚动 */}
      <div className="flex-1 overflow-y-auto p-6">
        <div className="max-w-[1400px] mx-auto space-y-4">
          {/* 错误提示 */}
          {error && (
            <div className="bg-[#fff3f2] border border-[#ffccc7] rounded-lg p-3">
              <div className="flex items-center gap-2">
                <AlertCircle className="w-4 h-4 text-[#f54a45] flex-shrink-0" />
                <span className="text-sm text-[#f54a45]">{error}</span>
              </div>
            </div>
          )}

          {/* 无配置权限提示 */}
          {!canConfig && (
            <div className="bg-[#fff7e8] border border-[#ffcf8b] rounded-lg p-3">
              <div className="flex items-center gap-2">
                <AlertCircle className="w-4 h-4 text-[#ff7d00] flex-shrink-0" />
                <span className="text-sm text-[#ff7d00]">
                  {t.logs.permission.noConfigAccess}
                </span>
              </div>
            </div>
          )}

          {config && (
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
              {/* 基本配置 */}
              <div className="bg-white rounded-lg border border-[#e5e6eb] p-4 shadow-sm">
                <div className="flex items-center gap-2 mb-4">
                  <Settings className="w-4 h-4 text-[#3370ff]" />
                  <h3 className="text-sm font-medium text-[#1f2329]">
                    {t.logs.config.general.title}
                  </h3>
                </div>
                
                <div>
                  <label className="block text-xs font-medium text-[#646a73] mb-1.5">
                    {t.logs.config.general.level}
                  </label>
                  <select
                    value={config.level}
                    onChange={(e) => setConfig(prev => prev ? { ...prev, level: e.target.value as LogLevel } : null)}
                    disabled={!canConfig}
                    className="w-full h-8 px-3 text-sm border border-[#e5e6eb] rounded-md focus:ring-1 focus:ring-[#3370ff] focus:border-[#3370ff] disabled:bg-[#f2f3f5] disabled:cursor-not-allowed transition-all"
                  >
                    <option value={LogLevel.ERROR}>{t.logs.level.error}</option>
                    <option value={LogLevel.WARN}>{t.logs.level.warn}</option>
                    <option value={LogLevel.INFO}>{t.logs.level.info}</option>
                    <option value={LogLevel.DEBUG}>{t.logs.level.debug}</option>
                  </select>
                  <p className="text-xs text-[#8f959e] mt-1">
                    {t.logs.config.general.levelDesc}
                  </p>
                </div>
              </div>

              {/* 保留策略 */}
              <div className="bg-white rounded-lg border border-[#e5e6eb] p-4 shadow-sm">
                <h3 className="text-sm font-medium text-[#1f2329] mb-4">
                  {t.logs.config.retention.title}
                </h3>
                
                <div className="grid grid-cols-3 gap-3">
                  <div>
                    <label className="block text-xs font-medium text-[#646a73] mb-1.5">
                      {'HTTP'}
                    </label>
                    <div className="flex items-center gap-1">
                      <input
                        type="number"
                        value={config.retention.http}
                        onChange={(e) => setConfig(prev => prev ? {
                          ...prev,
                          retention: { ...prev.retention, http: parseInt(e.target.value) || 14 }
                        } : null)}
                        disabled={!canConfig}
                        min={1}
                        max={365}
                        className="w-full h-8 px-2 text-sm border border-[#e5e6eb] rounded-md focus:ring-1 focus:ring-[#3370ff] focus:border-[#3370ff] disabled:bg-[#f2f3f5] disabled:cursor-not-allowed transition-all"
                      />
                      <span className="text-xs text-[#8f959e] whitespace-nowrap">
                        {t.logs.config.retention.days}
                      </span>
                    </div>
                  </div>
                  <div>
                    <label className="block text-xs font-medium text-[#646a73] mb-1.5">
                      {t.logs.config.retention.application}
                    </label>
                    <div className="flex items-center gap-1">
                      <input
                        type="number"
                        value={config.retention.application}
                        onChange={(e) => setConfig(prev => prev ? {
                          ...prev,
                          retention: { ...prev.retention, application: parseInt(e.target.value) || 30 }
                        } : null)}
                        disabled={!canConfig}
                        min={1}
                        max={365}
                        className="w-full h-8 px-2 text-sm border border-[#e5e6eb] rounded-md focus:ring-1 focus:ring-[#3370ff] focus:border-[#3370ff] disabled:bg-[#f2f3f5] disabled:cursor-not-allowed transition-all"
                      />
                      <span className="text-xs text-[#8f959e] whitespace-nowrap">
                        {t.logs.config.retention.days}
                      </span>
                    </div>
                  </div>
                  <div>
                    <label className="block text-xs font-medium text-[#646a73] mb-1.5">
                      {t.logs.config.retention.error}
                    </label>
                    <div className="flex items-center gap-1">
                      <input
                        type="number"
                        value={config.retention.error}
                        onChange={(e) => setConfig(prev => prev ? {
                          ...prev,
                          retention: { ...prev.retention, error: parseInt(e.target.value) || 30 }
                        } : null)}
                        disabled={!canConfig}
                        min={1}
                        max={365}
                        className="w-full h-8 px-2 text-sm border border-[#e5e6eb] rounded-md focus:ring-1 focus:ring-[#3370ff] focus:border-[#3370ff] disabled:bg-[#f2f3f5] disabled:cursor-not-allowed transition-all"
                      />
                      <span className="text-xs text-[#8f959e] whitespace-nowrap">
                        {t.logs.config.retention.days}
                      </span>
                    </div>
                  </div>
                </div>
              </div>

              {/* 采样配置 */}
              <div className="bg-white rounded-lg border border-[#e5e6eb] p-4 shadow-sm">
                <h3 className="text-sm font-medium text-[#1f2329] mb-4">
                  {t.logs.config.sampling.title}
                </h3>
                
                <div className="space-y-3">
                  {/* 启用采样 */}
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm text-[#1f2329]">
                        {t.logs.config.sampling.enabled}
                      </p>
                      <p className="text-xs text-[#8f959e]">
                        {t.logs.config.sampling.enabledDesc}
                      </p>
                    </div>
                    <label className="relative inline-flex items-center cursor-pointer">
                      <input
                        type="checkbox"
                        checked={config.sampling.enabled}
                        onChange={(e) => setConfig(prev => prev ? {
                          ...prev,
                          sampling: { ...prev.sampling, enabled: e.target.checked }
                        } : null)}
                        disabled={!canConfig}
                        className="sr-only peer"
                      />
                      <div className="w-9 h-5 bg-[#e5e6eb] peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-[#3370ff]/20 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-[#3370ff] peer-disabled:opacity-50 peer-disabled:cursor-not-allowed"></div>
                    </label>
                  </div>

                  {config.sampling.enabled && (
                    <>
                      {/* QPS 阈值 */}
                      <div>
                        <label className="block text-xs font-medium text-[#646a73] mb-1.5">
                          {t.logs.config.sampling.qpsThreshold}
                        </label>
                        <input
                          type="number"
                          value={config.sampling.rules.dynamic.qpsThreshold}
                          onChange={(e) => setConfig(prev => prev ? {
                            ...prev,
                            sampling: {
                              ...prev.sampling,
                              rules: {
                                ...prev.sampling.rules,
                                dynamic: {
                                  ...prev.sampling.rules.dynamic,
                                  qpsThreshold: parseInt(e.target.value) || 1000
                                }
                              }
                            }
                          } : null)}
                          disabled={!canConfig}
                          min={100}
                          className="w-full h-8 px-3 text-sm border border-[#e5e6eb] rounded-md focus:ring-1 focus:ring-[#3370ff] focus:border-[#3370ff] disabled:bg-[#f2f3f5] disabled:cursor-not-allowed transition-all"
                        />
                        <p className="text-xs text-[#8f959e] mt-1">
                          {t.logs.config.sampling.qpsThresholdDesc}
                        </p>
                      </div>

                      {/* 采样率范围 */}
                      <div className="grid grid-cols-2 gap-3">
                        <div>
                          <label className="block text-xs font-medium text-[#646a73] mb-1.5">
                            {t.logs.config.sampling.minSampleRate}
                          </label>
                          <input
                            type="number"
                            value={config.sampling.rules.dynamic.minSampleRate}
                            onChange={(e) => setConfig(prev => prev ? {
                              ...prev,
                              sampling: {
                                ...prev.sampling,
                                rules: {
                                  ...prev.sampling.rules,
                                  dynamic: {
                                    ...prev.sampling.rules.dynamic,
                                    minSampleRate: parseFloat(e.target.value) || 0.1
                                  }
                                }
                              }
                            } : null)}
                            disabled={!canConfig}
                            min={0.01}
                            max={1}
                            step={0.01}
                            className="w-full h-8 px-3 text-sm border border-[#e5e6eb] rounded-md focus:ring-1 focus:ring-[#3370ff] focus:border-[#3370ff] disabled:bg-[#f2f3f5] disabled:cursor-not-allowed transition-all"
                          />
                        </div>
                        <div>
                          <label className="block text-xs font-medium text-[#646a73] mb-1.5">
                            {t.logs.config.sampling.maxSampleRate}
                          </label>
                          <input
                            type="number"
                            value={config.sampling.rules.dynamic.maxSampleRate}
                            onChange={(e) => setConfig(prev => prev ? {
                              ...prev,
                              sampling: {
                                ...prev.sampling,
                                rules: {
                                  ...prev.sampling.rules,
                                  dynamic: {
                                    ...prev.sampling.rules.dynamic,
                                    maxSampleRate: parseFloat(e.target.value) || 1.0
                                  }
                                }
                              }
                            } : null)}
                            disabled={!canConfig}
                            min={0.01}
                            max={1}
                            step={0.01}
                            className="w-full h-8 px-3 text-sm border border-[#e5e6eb] rounded-md focus:ring-1 focus:ring-[#3370ff] focus:border-[#3370ff] disabled:bg-[#f2f3f5] disabled:cursor-not-allowed transition-all"
                          />
                        </div>
                      </div>
                    </>
                  )}
                </div>
              </div>

              {/* 日志清理 */}
              <div className="bg-white rounded-lg border border-[#e5e6eb] p-4 shadow-sm">
                <div className="flex items-center gap-2 mb-4">
                  <Trash2 className="w-4 h-4 text-[#f54a45]" />
                  <h3 className="text-sm font-medium text-[#1f2329]">
                    {t.logs.config.cleanup.title}
                  </h3>
                </div>
                
                {!canCleanup ? (
                  <div className="bg-[#fff7e8] border border-[#ffcf8b] rounded-lg p-3">
                    <div className="flex items-center gap-2">
                      <AlertCircle className="w-4 h-4 text-[#ff7d00] flex-shrink-0" />
                      <span className="text-xs text-[#ff7d00]">
                        {t.logs.permission.noCleanupAccess}
                      </span>
                    </div>
                  </div>
                ) : (
                  <div className="space-y-3">
                    <p className="text-xs text-[#8f959e]">
                      {t.logs.config.cleanup.description}
                    </p>

                    <div className="grid grid-cols-2 gap-3">
                      {/* 日志类型 */}
                      <div>
                        <label className="block text-xs font-medium text-[#646a73] mb-1.5">
                          {t.logs.config.cleanup.type}
                        </label>
                        <select
                          value={cleanupParams.type || 'all'}
                          onChange={(e) => setCleanupParams(prev => ({ ...prev, type: e.target.value as CleanupLogParams['type'] }))}
                          className="w-full h-8 px-3 text-sm border border-[#e5e6eb] rounded-md focus:ring-1 focus:ring-[#f54a45] focus:border-[#f54a45] transition-all"
                        >
                          <option value="all">{t.logs.config.cleanup.typeAll}</option>
                          <option value="http">HTTP</option>
                          <option value="application">Application</option>
                          <option value="error">Error</option>
                        </select>
                      </div>

                      {/* 清理天数 */}
                      <div>
                        <label className="block text-xs font-medium text-[#646a73] mb-1.5">
                          {t.logs.config.cleanup.olderThanDays}
                        </label>
                        <input
                          type="number"
                          value={cleanupParams.olderThanDays || 14}
                          onChange={(e) => setCleanupParams(prev => ({ ...prev, olderThanDays: parseInt(e.target.value) || 14 }))}
                          min={1}
                          className="w-full h-8 px-3 text-sm border border-[#e5e6eb] rounded-md focus:ring-1 focus:ring-[#f54a45] focus:border-[#f54a45] transition-all"
                        />
                      </div>
                    </div>

                    {/* 试运行 */}
                    <label className="flex items-center cursor-pointer">
                      <input
                        type="checkbox"
                        checked={cleanupParams.dryRun}
                        onChange={(e) => setCleanupParams(prev => ({ ...prev, dryRun: e.target.checked }))}
                        className="w-4 h-4 text-[#f54a45] border-[#e5e6eb] rounded focus:ring-[#f54a45]"
                      />
                      <span className="ml-2 text-xs text-[#1f2329]">
                        {t.logs.config.cleanup.dryRun}
                        <span className="ml-1 text-[#8f959e]">
                          ({t.logs.config.cleanup.dryRunHint})
                        </span>
                      </span>
                    </label>

                    {/* 执行清理按钮 */}
                    <button
                      onClick={handleCleanup}
                      disabled={isCleaning}
                      className="flex items-center gap-1.5 h-8 px-4 bg-[#f54a45] text-white text-sm font-medium rounded-md hover:bg-[#e63946] active:bg-[#d62828] disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                    >
                      {isCleaning ? (
                        <RefreshCw className="w-3.5 h-3.5 animate-spin" />
                      ) : (
                        <Trash2 className="w-3.5 h-3.5" />
                      )}
                      <span>{t.logs.config.cleanup.execute}</span>
                    </button>

                    {/* 清理结果 */}
                    {cleanupResult && (
                      <div className={`p-3 rounded-md ${cleanupResult.dryRun ? 'bg-[#fff7e8] border border-[#ffcf8b]' : 'bg-[#e8ffea] border border-[#9fdb1d]'}`}>
                        <h4 className="text-sm font-medium text-[#1f2329] mb-2">
                          {t.logs?.config?.cleanup?.result?.title || '清理结果'}
                          {cleanupResult.dryRun && (
                            <span className="ml-2 text-xs text-[#ff7d00]">
                              {t.logs?.config?.cleanup?.result?.dryRunNote || '（试运行）'}
                            </span>
                          )}
                        </h4>
                        <div className="grid grid-cols-2 gap-3 text-xs">
                          <div>
                            <span className="text-[#646a73]">
                              {t.logs?.config?.cleanup?.result?.deletedFiles || '删除文件数'}:
                            </span>
                            <span className="ml-2 font-medium text-[#1f2329]">{cleanupResult.deletedFiles}</span>
                          </div>
                          <div>
                            <span className="text-[#646a73]">
                              {t.logs?.config?.cleanup?.result?.freedSpace || '释放空间'}:
                            </span>
                            <span className="ml-2 font-medium text-[#1f2329]">{cleanupResult.freedSpace}</span>
                          </div>
                        </div>
                      </div>
                    )}
                  </div>
                )}
              </div>
            </div>
          )}

          {/* 更新信息 */}
          {config && (
            <div className="text-xs text-[#8f959e] text-right">
              {t.logs.config.updatedAt}: {new Date(config.updatedAt).toLocaleString()}
              {' • '}
              {t.logs.config.updatedBy}: {config.updatedBy}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}