import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import {
  Button,
  DatePicker,
  Form,
  Input,
  Modal,
  Select,
  AutoComplete,
  Tag,
  Dropdown,
  Space,
} from "antd";
import { useCallback, useEffect, useState, useRef } from "react";
import _ from "lodash";
import { useMainContext } from "../layout/MainProvider";
import DeviceTable from "./devicetable/page";
import DeviceModal from "./devicemodal/page";
import React from "react";
import {
  SearchOutlined,
  ReloadOutlined,
  PlusOutlined,
  ImportOutlined,
  ExportOutlined,
  UpOutlined,
  DownOutlined,
  HistoryOutlined,
  CloseOutlined,
} from "@ant-design/icons";
import DepartmentSelect from "@web/src/components/models/department/department-select";
import SystemTypeSelect from "@web/src/app/main/devicepage/select/System-select";
import DeviceTypeSelect from "@web/src/app/main/devicepage/select/Device-select";
import dayjs from "dayjs";
import FixTypeSelect from "./select/Fix-select";
import { api } from "@nice/client";

const { RangePicker } = DatePicker;

// 添加筛选条件类型
type SearchCondition = {
  deletedAt: null;
  systemType?: string;
  deviceType?: string;
  deptId?: string;
  responsiblePerson?: { contains: string };
  createdAt?: {
    gte: string;
    lte: string;
  };
};

// 搜索历史类型
type SearchHistory = {
  id: string;
  keyword: string;
  conditions: SearchCondition;
  timestamp: number;
  label: string; // 用于显示的标签
};

export default function DeviceMessage() {
  const {
    form,
    formValue,
    setFormValue,
    setVisible,
    setSearchValue,
    editingRecord,
  } = useMainContext();

  // 控制展开/收起状态
  const [expanded, setExpanded] = useState(false);

  // 添加所有筛选条件的状态
  const [selectedSystem, setSelectedSystem] = useState<string | null>(null);
  const [selectedDeviceType, setSelectedDeviceType] = useState<string | null>(
    null
  );
  const [selectedDept, setSelectedDept] = useState<string | null>(null);
  // 修改为日期范围
  const [dateRange, setDateRange] = useState<
    [dayjs.Dayjs | null, dayjs.Dayjs | null] | null
  >(null);
  const [ipAddress, setIpAddress] = useState<string>("");
  const [macAddress, setMacAddress] = useState<string>("");
  const [serialNumber, setSerialNumber] = useState<string>("");
  const [assetNumber, setAssetNumber] = useState<string>("");
  const [manufacturer, setManufacturer] = useState<string>("");
  const [model, setModel] = useState<string>("");
  const [location, setLocation] = useState<string>("");
  const [status, setStatus] = useState<string | null>(null);
  const [selectedSystemTypeId, setSelectedSystemTypeId] = useState<string>("");
  const [selectedFixType, setSelectedFixType] = useState<string | null>(null);

  // 搜索历史相关状态
  const [searchHistory, setSearchHistory] = useState<SearchHistory[]>([]);
  const [searchKeyword, setSearchKeyword] = useState<string>("");
  const [showHistory, setShowHistory] = useState(false);

  // 创建ref以访问DeviceTable内部方法
  const tableRef = useRef(null);
  // 存储选中行的状态
  const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
  const [selectedData, setSelectedData] = useState<any[]>([]);

  // 添加数据查询以获取名称信息
  const { data: systemTypeTerms } = api.term.findMany.useQuery({
    where: { taxonomy: { slug: "system_type" }, deletedAt: null },
    orderBy: { order: "asc" },
  });

  const { data: deviceTypeTerms } = api.term.findMany.useQuery({
    where: { taxonomy: { slug: "device_type" }, deletedAt: null },
    orderBy: { order: "asc" },
  });

  const { data: departments } = api.department.findMany.useQuery({
    where: { deletedAt: null },
  });

  // 根据ID获取名称的辅助函数
  const getSystemTypeName = (id: string) => {
    const term = systemTypeTerms?.find((t) => t.id === id);
    return term?.name || id;
  };

  const getDeviceTypeName = (id: string) => {
    const term = deviceTypeTerms?.find((t) => t.id === id);
    return term?.name || id;
  };

  const getDepartmentName = (id: string) => {
    const dept = departments?.find((d) => d.id === id);
    return dept?.name || id;
  };

  // 初始化时加载搜索历史
  useEffect(() => {
    const savedHistory = localStorage.getItem("device-search-history");
    if (savedHistory) {
      try {
        setSearchHistory(JSON.parse(savedHistory));
      } catch (error) {
        console.error("加载搜索历史失败:", error);
      }
    }
  }, []);

  // 保存搜索历史到localStorage
  const saveSearchHistory = (history: SearchHistory[]) => {
    localStorage.setItem("device-search-history", JSON.stringify(history));
    setSearchHistory(history);
  };

  // 生成搜索标签 - 修改为显示名称而不是ID，并支持日期范围
  const generateSearchLabel = (
    conditions: SearchCondition,
    keyword: string
  ) => {
    const parts = [];
    if (keyword) parts.push(`关键词: ${keyword}`);
    if (conditions.systemType)
      parts.push(`网系: ${getSystemTypeName(conditions.systemType)}`);
    if (conditions.deviceType)
      parts.push(`故障类型: ${getDeviceTypeName(conditions.deviceType)}`);
    if (conditions.deptId)
      parts.push(`单位: ${getDepartmentName(conditions.deptId)}`);
    if (conditions.createdAt) {
      const startDate = dayjs(conditions.createdAt.gte).format("YYYY-MM-DD");
      const endDate = dayjs(conditions.createdAt.lte).format("YYYY-MM-DD");
      if (startDate === endDate) {
        parts.push(`日期: ${startDate}`);
      } else {
        parts.push(`日期: ${startDate} ~ ${endDate}`);
      }
    }

    return parts.length > 0 ? parts.join(" | ") : "全部故障";
  };

  // 添加搜索历史
  const addSearchHistory = (
    conditions: SearchCondition,
    keyword: string = ""
  ) => {
    const newHistory: SearchHistory = {
      id: Date.now().toString(),
      keyword,
      conditions,
      timestamp: Date.now(),
      label: generateSearchLabel(conditions, keyword),
    };

    const updatedHistory = [
      newHistory,
      ...searchHistory.filter((h) => h.label !== newHistory.label),
    ].slice(0, 10); // 只保留最近10条

    saveSearchHistory(updatedHistory);
  };

  // 应用历史搜索 - 修改为支持日期范围
  const applyHistorySearch = (history: SearchHistory) => {
    const { conditions, keyword } = history;

    // 恢复搜索条件
    setSelectedSystem(conditions.systemType || null);
    setSelectedDeviceType(conditions.deviceType || null);
    setSelectedDept(conditions.deptId || null);
    setSelectedFixType(conditions.responsiblePerson?.contains || null);
    setSearchKeyword(keyword);

    if (conditions.createdAt) {
      const startDate = dayjs(conditions.createdAt.gte);
      const endDate = dayjs(conditions.createdAt.lte);
      setDateRange([startDate, endDate]);
    } else {
      setDateRange(null);
    }

    // 应用搜索条件
    setSearchValue(conditions as any);
    setShowHistory(false);
  };

  // 删除搜索历史
  const removeSearchHistory = (historyId: string, event: React.MouseEvent) => {
    event.stopPropagation();
    const updatedHistory = searchHistory.filter((h) => h.id !== historyId);
    saveSearchHistory(updatedHistory);
  };

  // 清空所有搜索历史
  const clearAllHistory = () => {
    saveSearchHistory([]);
  };

  const handleNew = () => {
    form.setFieldsValue(formValue);
    console.log(editingRecord);
    setVisible(true);
  };

  // 查询按钮点击处理 - 修改为支持日期范围
  const handleSearch = () => {
    // 构建查询条件
    const whereCondition: SearchCondition = {
      deletedAt: null,
      ...(selectedSystem && { systemType: selectedSystem }),
      ...(selectedDeviceType && { deviceType: selectedDeviceType }),
      ...(selectedFixType && { deviceStatus: selectedFixType }),
      ...(selectedDept && { deptId: selectedDept }),
      ...(dateRange &&
        dateRange[0] &&
        dateRange[1] && {
          createdAt: {
            gte: dateRange[0].startOf("day").toISOString(),
            lte: dateRange[1].endOf("day").toISOString(),
          },
        }),
      ...(searchKeyword && {
        OR: [
          { description: { contains: searchKeyword } },
          { location: { contains: searchKeyword } },
          { responsiblePerson: { contains: searchKeyword } },
        ],
      }),
    };

    // 添加到搜索历史
    addSearchHistory(whereCondition, searchKeyword);

    // 更新查询条件到全局上下文
    setSearchValue(whereCondition as any);
  };

  // 重置按钮处理 - 修改为重置日期范围
  const handleReset = () => {
    setSelectedSystem(null);
    setSelectedDeviceType(null);
    setSelectedDept(null);
    setDateRange(null); // 重置日期范围
    setSearchKeyword("");
    setIpAddress("");
    setMacAddress("");
    setSerialNumber("");
    setAssetNumber("");
    setManufacturer("");
    setModel("");
    setLocation("");
    saveSearchHistory([]);

    // 重置为只查询未删除的记录
    setSearchValue({ deletedAt: null } as any);
  };

  // 修复DepartmentSelect的onChange类型
  const handleDeptChange = (value: string | string[]) => {
    setSelectedDept(value as string);
  };

  // 处理选择变更的回调
  const handleSelectedChange = (keys: React.Key[], data: any[]) => {
    console.log("选中状态变化:", keys.length);
    setSelectedKeys(keys);
    setSelectedData(data);
  };

  // 处理导出按钮点击
  const handleExport = () => {
    if (tableRef.current) {
      tableRef.current.handleExportSelected();
    }
  };

  // 系统类别变化处理
  const handleSystemTypeChange = (value: string) => {
    setSelectedSystemTypeId(value);
    form.setFieldValue("deviceType", undefined); // 清空已选故障类型
  };

  // 搜索历史下拉菜单
  const historyMenuItems = [
    {
      key: "header",
      label: (
        <div className="flex justify-between items-center p-2 border-b">
          <span className="font-medium">搜索历史</span>
          {searchHistory.length > 0 && (
            <Button
              type="link"
              size="small"
              onClick={clearAllHistory}
              className="text-red-500"
            >
              清空全部
            </Button>
          )}
        </div>
      ),
      disabled: true,
    },
    ...searchHistory.map((history) => ({
      key: history.id,
      label: (
        <div
          className="flex justify-between items-center p-2 hover:bg-gray-50 cursor-pointer"
          onClick={() => applyHistorySearch(history)}
        >
          <div className="flex-1">
            <div className="text-sm font-medium truncate">{history.label}</div>
            <div className="text-xs text-gray-500">
              {dayjs(history.timestamp).format("MM-DD HH:mm")}
            </div>
          </div>
          <Button
            type="text"
            size="small"
            icon={<CloseOutlined />}
            onClick={(e) => removeSearchHistory(history.id, e)}
            className="ml-2 opacity-60 hover:opacity-100"
          />
        </div>
      ),
    })),
    ...(searchHistory.length === 0
      ? [
          {
            key: "empty",
            label: (
              <div className="text-center text-gray-500 p-4">暂无搜索历史</div>
            ),
            disabled: true,
          },
        ]
      : []),
  ];

  return (
    <div className="p-2 min-h-screen bg-white">
      <div className="flex justify-between items-center mb-4">
        <h1 className="text-xl font-normal">故障收录检索</h1>
        <div className="flex items-center gap-2 justify-end">
          <Dropdown
            menu={{ items: historyMenuItems }}
            trigger={["click"]}
            open={showHistory}
            onOpenChange={setShowHistory}
            placement="bottomRight"
          >
            <Button icon={<HistoryOutlined />} title="搜索历史">
              历史
            </Button>
          </Dropdown>
          <Button type="primary" icon={<PlusOutlined />} onClick={handleNew}>
            新建
          </Button>
        </div>
      </div>

      <div className="flex flex-wrap items-center gap-2 mb-4">
        <div className="flex-1 min-w-[200px]">
          <SystemTypeSelect
            value={selectedSystem}
            onChange={setSelectedSystem}
            placeholder="选择网系类别"
            className="w-full"
          />
        </div>
        <div className="flex-1 min-w-[200px]">
          <DeviceTypeSelect
            value={selectedDeviceType}
            onChange={setSelectedDeviceType}
            placeholder="选择故障类型"
            className="w-full"
            systemTypeId={selectedSystemTypeId}
          />
        </div>
        <div className="flex-1 min-w-[200px]">
          <FixTypeSelect
            value={selectedFixType}
            onChange={setSelectedFixType}
            placeholder="选择故障状态"
            className="w-full"
          />
        </div>
        <div className="flex-1 min-w-[200px]">
          <DepartmentSelect
            placeholder="单位"
            className="w-full"
            value={selectedDept}
            onChange={handleDeptChange}
          />
        </div>
        <div className="flex-1 min-w-[250px]">
          <RangePicker
            placeholder={["开始日期", "结束日期"]}
            className="w-full"
            value={dateRange}
            onChange={(dates) => setDateRange(dates)}
            format="YYYY-MM-DD"
            allowClear
          />
        </div>
        <Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>
          查询
        </Button>
        <Button icon={<ReloadOutlined />} onClick={handleReset}>
          重置
        </Button>
      </div>

      {/* 显示当前搜索历史标签 */}
      {searchHistory.length > 0 && (
        <div className="mb-4 flex items-center gap-3 p-3 bg-gray-50 rounded-lg border border-gray-200">
          <div className="text-sm font-medium text-gray-700 whitespace-nowrap">
            最近搜索:
          </div>
          <div className="flex flex-wrap gap-2 flex-1 min-w-0">
            {searchHistory.slice(0, 5).map((history) => (
              <Tag
                key={history.id}
                className="cursor-pointer hover:bg-blue-50 transition-colors duration-200 border-blue-200 text-blue-700"
                onClick={() => applyHistorySearch(history)}
                closable
                onClose={(e) => {
                  e.preventDefault();
                  removeSearchHistory(history.id, e as any);
                }}
              >
                <span className="text-xs">
                  {history.label.length > 25
                    ? `${history.label.substring(0, 25)}...`
                    : history.label}
                </span>
              </Tag>
            ))}
          </div>
        </div>
      )}

      <div>
        <DeviceTable ref={tableRef} onSelectedChange={handleSelectedChange} />
        <DeviceModal />
      </div>
    </div>
  );
}