import React, { useState, useMemo, useEffect, useRef } from 'react';
import { useTheme } from '../contexts/ThemeContext';
import {
  Search,
  Clock,
  ChevronRight,
  Download,
  Send,
  Trash2,
  FileText,
  User,
  MessageSquare,
  Network,
  Target,
  BookOpen,
  History,
  Filter,
  Calendar,
  AlertTriangle,
  CheckCircle2,
  Eye,
} from 'lucide-react';
import { LightAppType } from './LightAppSquare';
import { requestCrudService } from '@/service/request-axios-service';
import { DateRangePicker, DateRangePickerProps, DateRangeValue, Pagination, Select } from 'tdesign-react';
import dayjs from 'dayjs';

// 运行记录类型
interface RunRecord {
  id: string;
  appId: LightAppType;
  appName: string;
  appIcon: React.ElementType;
  iconColor: string;
  input: string;
  runTime: string;
  resultSummary: string;
  status: number;
  riskLevel?: 'low' | 'medium' | 'high';
  sentiment?: string;
  inputObject?: string;
}

interface stateData {
  startTime: string;
  endTime: string;
  pageNum: number;
  pageSize: number;
  status: string | number;
}

// 应用信息映射
const appInfoMap: Record<LightAppType, { name: string; icon: React.ElementType; iconColor: string }> = {
  'info-ty': { name: '信息TY', icon: FileText, iconColor: 'text-blue-500' },
  'info-pg': { name: '信息PG', icon: User, iconColor: 'text-cyan-500' },
  'info-spread': { name: '信息传播分析', icon: Network, iconColor: 'text-teal-500' },
  'account-pg': { name: '账号PG', icon: User, iconColor: 'text-purple-500' },
  'sentiment': { name: '三情分析', icon: MessageSquare, iconColor: 'text-orange-500' },
  'event': { name: '事件分析', icon: Target, iconColor: 'text-red-500' },
  'topic': { name: '专题分析', icon: BookOpen, iconColor: 'text-green-500' },
};

interface LightAppRecordsProps {
  onNavigate: (page: string, appId?: string) => void;
}

const appIconList = [
  {
    appIcon: MessageSquare,
    iconColor: 'text-orange-500',
  },
  {
    appIcon: Target,
    iconColor: 'text-red-500',
  },
  {
    appIcon: User,
    iconColor: 'text-purple-500',
  },
  {
    appIcon: Network,
    iconColor: 'text-teal-500',
  },
  {
    appIcon: BookOpen,
    iconColor: 'text-green-500',
  },
  {
    appIcon: FileText,
    iconColor: 'text-blue-500',
  },
]

const service = requestCrudService;
const zncmUrl = import.meta.env.VITE_API_BASE_URL || '';
const LightAppRecords: React.FC<LightAppRecordsProps> = ({ onNavigate }) => {
  const { theme } = useTheme();
  const isDark = theme === 'dark';
  const [searchQuery, setSearchQuery] = useState('');
  const [appFilter, setAppFilter] = useState<LightAppType | 'all'>('all');
  const [timeFilter, setTimeFilter] = useState<string>('all');
  const [records, setRecords] = useState<RunRecord[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [pageNum, setPageNum] = useState<number>(1);
  const [pageSize, setPageSize] = useState<number>(10); // 每页显示 10 条
  const [total, setTotal] = useState<number>(0);
  const [presets] = useState<DateRangePickerProps['presets']>({
    最近7天: [dayjs().subtract(6, 'day').toDate(), dayjs().toDate()],
    最近3天: [dayjs().subtract(2, 'day').toDate(), dayjs().toDate()],
    今天: [dayjs().toDate(), dayjs().toDate()],
  });
  const [range, setRange] = useState<DateRangeValue>([]);
  const state = useRef<stateData>({
    startTime: '',
    endTime: '',
    pageNum: 1,
    pageSize: 10,
    status: ''
  })
  const [statusValue, setStatusValue] = useState<number | string>('');
  // 执行状态,0=执行中, 1=成功, 2=失败, 3=部分成功
  const [statusList] = useState([
    { value: '', label: '全部' },
    { value: 0, label: '执行中' },
    { value: 1, label: '成功' },
    { value: 2, label: '失败' },
    { value: 3, label: '部分成功' },
  ])

  const statusChange = async (val) => {
    state.current.status = val;
    setStatusValue(val);
    await historyPageSearch();
  }

  // 时间日期选择器查询
  const setRangeChange = async (val) => {
    setRange(val);
    console.log('时间日期', val);
    state.current.startTime = '';
    state.current.endTime = '';
    if (val.length > 0) {
      state.current.startTime = val[0];
      state.current.endTime = val[1];
    }
    await historyPageSearch();
  }

  // 过滤记录
  // const filteredRecords = useMemo(() => {
  //   return records.filter(record => {
  //     // 搜索过滤
  //     const matchesSearch = searchQuery === '' ||
  //       record.input.toLowerCase().includes(searchQuery.toLowerCase()) ||
  //       record.appName.toLowerCase().includes(searchQuery.toLowerCase()) ||
  //       record.resultSummary.toLowerCase().includes(searchQuery.toLowerCase());

  //     // 应用类型过滤
  //     const matchesApp = appFilter === 'all' || record.appId === appFilter;

  //     // 时间过滤
  //     let matchesTime = true;
  //     if (timeFilter !== 'all') {
  //       const recordDate = new Date(record.runTime);
  //       const now = new Date();
  //       if (timeFilter === '7d') {
  //         const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
  //         matchesTime = recordDate >= weekAgo;
  //       } else if (timeFilter === '30d') {
  //         const monthAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
  //         matchesTime = recordDate >= monthAgo;
  //       }
  //     }

  //     return matchesSearch && matchesApp && matchesTime;
  //   });
  // }, [records, searchQuery, appFilter, timeFilter]);

  // 查看详情
  const handleView = (record: RunRecord) => {
    console.log('查看详情:', record);

    onNavigate('light-app-run', record.appId);
  };

  // 导出
  const handleExport = (record: RunRecord) => {
    const data = JSON.stringify(record, null, 2);
    const blob = new Blob([data], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `${record.appName}_${record.runTime.replace(/[: ]/g, '-')}.json`;
    a.click();
  };

  // 转正式任务
  const handleConvert = (record: RunRecord) => {
    onNavigate('task-create');
  };

  // 获取状态颜色
  const getStatusColor = (status: number) => {
    switch (status) {
      case 1:
        return { bg: 'bg-green-500/10', text: 'text-green-500', border: 'border-green-500/30' };
      case 2:
        return { bg: 'bg-red-500/10', text: 'text-red-500', border: 'border-red-500/30' };
      case 3:
        return { bg: 'bg-yellow-500/10', text: 'text-yellow-500', border: 'border-yellow-500/30' };
      default:
        return { bg: 'bg-gray-500/10', text: 'text-gray-500', border: 'border-gray-500/30' };
    }
  };

  // 获取状态标签
  const getStatusLabel = (status: number) => {
    switch (status) {
      case 0: return '执行中';
      case 1: return '成功';
      case 2: return '失败';
      case 3: return '部分';
      default: return status;
    }
  };


  // 回车处理
  const handleKeyDown = async (e) => {
    if ((e.metaKey || e.ctrlKey || e.shiftKey) && e.key === "Enter") {
      e.preventDefault();
    } else if (e.keyCode === 13) {
      e.preventDefault();
      await historyPageSearch();
    } else if (e.key === "/") {
      e.preventDefault();
    }
  };

  const historyPageSearch = async () => {
    const parmy = {
      appName: searchQuery,
      keyword: '',
      pageNum: state.current.pageNum,
      pageSize: state.current.pageSize,
      startTime: state.current.startTime,
      endTime: state.current.endTime,
      status: state.current.status
    }
    setLoading(true);
    const res = await service.post(`${zncmUrl}/app/history/page`, parmy);
    console.log('res', res);
    setLoading(false);
    const result = res.data;
    result.records.forEach((item: RunRecord, index: number) => {
      const realIndex = index % appIconList.length;
      item.appIcon = appIconList[realIndex].appIcon;
      item.iconColor = appIconList[realIndex].iconColor;
    })
    setTotal(result.total);
    setRecords(result.records || '');
  }

  const pageIndexChange = async (value: number) => {
    state.current.pageNum = value;
    setPageNum(value);
    await historyPageSearch();
  }

  const pageSizeChange = async (value: number) => {
    state.current.pageSize = value;
    setPageSize(value);
    await historyPageSearch();
  }

  useEffect(() => {
    fetch('https://ch1.b.uat.4.cn/zncmweb/templates/index.json') // 注意：不需要 public 前缀
      .then(response => {
        if (!response.ok) {
          throw new Error('网络请求失败');
        }
        return response.json();
      })
      .then(jsonData => {
        console.log('jsonData', jsonData);
      })
      .catch(err => {
        console.log(err);
      });
    historyPageSearch();
  }, []);

  return (
    <div className="space-y-6">
      {/* 顶部工具栏 */}
      <div className={`rounded-xl border p-4 ${isDark ? 'bg-slate-800/50 border-slate-700' : 'bg-white border-gray-200'
        }`}>
        <div className="flex flex-col lg:flex-row lg:items-center gap-4">
          {/* 面包屑和标题 */}
          <div className="flex items-center gap-2 flex-1">
            <History className={`w-5 h-5 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
            <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>轻应用中心 /</span>
            <span className={`text-sm font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>运行记录</span>
          </div>

          {/* 搜索框 */}
          <div className="flex-1 max-w-md">
            <div className="relative">
              <Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${isDark ? 'text-slate-500' : 'text-gray-400'}`} />
              <input
                type="text"
                value={searchQuery}
                onKeyDown={(e) => handleKeyDown(e)}
                onChange={(e) => setSearchQuery(e.target.value)}
                placeholder="搜索记录..."
                className={`w-full pl-10 pr-4 py-2 rounded-lg border transition-colors focus:outline-none focus:ring-2 ${isDark
                  ? 'bg-slate-900 border-slate-600 text-slate-200 placeholder-slate-500 focus:border-blue-500 focus:ring-blue-500/20'
                  : 'bg-gray-50 border-gray-300 text-gray-900 placeholder-gray-400 focus:border-red-500 focus:ring-red-500/20'
                  }`}
              />
            </div>
          </div>

          {/* 筛选 */}
          <div className="flex items-center gap-3">
            {/* <select
              value={appFilter}
              onChange={(e) => setAppFilter(e.target.value as LightAppType | 'all')}
              className={`px-3 py-2 rounded-lg border text-sm transition-colors focus:outline-none focus:ring-2 ${isDark
                ? 'bg-slate-900 border-slate-600 text-slate-200 focus:border-blue-500'
                : 'bg-gray-50 border-gray-300 text-gray-700 focus:border-red-500'
                }`}
            >
              <option value="all">全部应用</option>
              <option value="info-ty">信息TY</option>
              <option value="info-pg">信息PG</option>
              <option value="info-spread">信息传播分析</option>
              <option value="account-pg">账号PG</option>
              <option value="sentiment">三情分析</option>
              <option value="event">事件分析</option>
              <option value="topic">专题分析</option>
            </select> */}
            <Select
              value={statusValue}
              onChange={statusChange}
              style={{ width: '135px' }}
              clearable
              options={statusList} />
            <DateRangePicker value={range} presets={presets} onChange={(val) => setRangeChange(val)} enableTimePicker={true} clearable />
          </div>
        </div>
      </div>

      {/* 记录列表 */}
      <div className={`rounded-xl border overflow-hidden ${isDark ? 'bg-slate-800/50 border-slate-700' : 'bg-white border-gray-200'
        }`}>
        {/* 表头 */}
        <div className={`grid grid-cols-12 gap-4 px-4 py-3 border-b ${isDark ? 'border-slate-700 bg-slate-800/30' : 'border-gray-200 bg-gray-50'
          }`}>
          <div className={`col-span-3 text-xs font-medium ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
            应用名称
          </div>
          <div className={`col-span-2 text-xs font-medium ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
            输入对象
          </div>
          <div className={`col-span-2 text-xs font-medium ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
            运行时间
          </div>
          <div className={`col-span-2 text-xs font-medium ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
            结果摘要
          </div>
          <div className={`col-span-1 text-xs font-medium ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
            状态
          </div>
          <div className={`col-span-2 text-xs font-medium ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
            操作
          </div>
        </div>

        {/* 记录行 */}
        {records.length > 0 ? (
          records.map((record) => {
            const Icon = record.appIcon;
            const statusColor = getStatusColor(record.status);

            return (
              <div
                key={record.id}
                className={`grid grid-cols-12 gap-4 px-4 py-4 border-b items-center ${isDark ? 'border-slate-700/50 hover:bg-slate-700/30' : 'border-gray-100 hover:bg-gray-50'
                  } transition-colors`}
              >
                {/* 应用名称 */}
                <div className="col-span-3 flex items-center gap-3">
                  <div className={`p-2 rounded-lg ${isDark ? 'bg-slate-700/50' : 'bg-gray-100'}`}>
                    <Icon className={`w-4 h-4 ${record.iconColor}`} />
                  </div>
                  <div>
                    <span className={`text-sm font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>
                      {record.appName}
                    </span>
                    {/* {record.sentiment && (
                      <span className={`ml-2 px-1.5 py-0.5 rounded text-xs ${record.sentiment === '偏正' ? 'bg-green-500/10 text-green-500' :
                        record.sentiment === '偏负' ? 'bg-red-500/10 text-red-500' :
                          'bg-gray-500/10 text-gray-500'
                        }`}>
                        {record.sentiment}
                      </span>
                    )} */}
                    {/* {record.riskLevel && (
                      <span className={`ml-2 px-1.5 py-0.5 rounded text-xs ${record.riskLevel === 'high' ? 'bg-red-500/10 text-red-500' :
                        record.riskLevel === 'medium' ? 'bg-yellow-500/10 text-yellow-500' :
                          'bg-green-500/10 text-green-500'
                        }`}>
                        {record.riskLevel === 'high' ? '高风险' :
                          record.riskLevel === 'medium' ? '中风险' : '低风险'}
                      </span>
                    )} */}
                  </div>
                </div>

                {/* 输入对象 */}
                <div className="col-span-2">
                  <span className={`text-sm truncate block ${isDark ? 'text-slate-400' : 'text-gray-600'}`} title={record.input}>
                    {record.inputObject || '-'}
                  </span>
                </div>

                {/* 运行时间 */}
                <div className="col-span-2">
                  <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-600'}`}>
                    {record.runTime}
                  </span>
                </div>

                {/* 结果摘要 */}
                <div className="col-span-2">
                  <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                    {record.resultSummary || '-'}
                  </span>
                </div>

                {/* 状态 */}
                <div className="col-span-1">
                  <span className={`px-2 py-1 rounded text-xs font-medium ${statusColor.bg} ${statusColor.text}`}>
                    {getStatusLabel(record.status)}
                  </span>
                </div>

                {/* 操作 */}
                <div className="col-span-2 flex items-center gap-1">
                  <button
                    onClick={() => handleView(record)}
                    className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-600 text-slate-400' : 'hover:bg-gray-200 text-gray-500'
                      }`}
                    title="查看"
                  >
                    <Eye className="w-4 h-4" />
                  </button>
                  <button
                    onClick={() => handleExport(record)}
                    className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-600 text-slate-400' : 'hover:bg-gray-200 text-gray-500'
                      }`}
                    title="导出"
                  >
                    <Download className="w-4 h-4" />
                  </button>
                  <button
                    onClick={() => handleConvert(record)}
                    className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-600 text-slate-400' : 'hover:bg-gray-200 text-gray-500'
                      }`}
                    title="转正式任务"
                  >
                    <Send className="w-4 h-4" />
                  </button>
                  <button
                    className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-600 text-slate-400' : 'hover:bg-gray-200 text-gray-500'
                      }`}
                    title="删除"
                  >
                    <Trash2 className="w-4 h-4" />
                  </button>
                </div>
              </div>
            );
          })
        ) : (
          <div className="text-center py-12">
            <History className={`w-12 h-12 mx-auto mb-4 ${isDark ? 'text-slate-600' : 'text-gray-300'}`} />
            <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
              暂无运行记录
            </p>
          </div>
        )}
      </div>

      {/* 统计信息 */}
      {/* <div className={`rounded-xl border p-4 ${isDark ? 'bg-slate-800/50 border-slate-700' : 'bg-white border-gray-200'
        }`}>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-6">
            <div className="flex items-center gap-2">
              <CheckCircle2 className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
              <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                成功: <span className={`font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>{filteredRecords.filter(r => r.status === 'success').length}</span>
              </span>
            </div>
            <div className="flex items-center gap-2">
              <AlertTriangle className={`w-4 h-4 ${isDark ? 'text-yellow-400' : 'text-yellow-500'}`} />
              <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                部分: <span className={`font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>{filteredRecords.filter(r => r.status === 'partial').length}</span>
              </span>
            </div>
            <div className="flex items-center gap-2">
              <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                共 <span className={`font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>{filteredRecords.length}</span> 条记录
              </span>
            </div>
          </div>
          <button
            onClick={() => onNavigate('light-app-square')}
            className={`px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 transition-colors ${isDark
              ? 'bg-blue-500/20 text-blue-400 hover:bg-blue-500/30'
              : 'bg-red-50 text-red-600 hover:bg-red-100'
              }`}
          >
            <FileText className="w-4 h-4" />
            新建分析
          </button>
        </div>
      </div> */}
      {/* 分页 */}
      <div className="p-4 text-center">
        <Pagination
          total={total}
          current={pageNum}
          pageSize={pageSize}
          onCurrentChange={(page) => pageIndexChange(Number(page))}
          onPageSizeChange={(size) => pageSizeChange(Number(size))}
        />
      </div>
    </div>
  );
};

export default LightAppRecords;