/**
 * KRA - Version Management Page
 * 版本管理页面 - 创建发版、导入版本、下载发版包
 */
import React, { useState, useRef, useEffect } from 'react';
import {
  Card,
  Table,
  Button,
  Space,
  Form,
  Input,
  DatePicker,
  Modal,
  Drawer,
  Descriptions,
  Tree,
  Upload,
  message,
  Tooltip,
  Popconfirm,
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type { DataNode } from 'antd/es/tree';
import {
  SearchOutlined,
  ReloadOutlined,
  DeleteOutlined,
  DownloadOutlined,
  UploadOutlined,
  InfoCircleOutlined,
  QuestionCircleOutlined,
  DownOutlined,
  UpOutlined,
  InboxOutlined,
} from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import {
  getSysVersionList,
  deleteSysVersion,
  deleteSysVersionByIds,
  findSysVersion,
  exportVersion,
  importVersion,
  downloadVersionJson,
} from '@/services/kratos/version';
import { getMenuList } from '@/services/kratos/menu';
import { getApiList } from '@/services/kratos/api';
import { getDictionaryList } from '@/services/kratos/dictionary';
import { formatDate } from '@/utils/date';
import styles from './index.less';

const { RangePicker } = DatePicker;
const { Dragger } = Upload;

interface SysVersion {
  ID: number;
  CreatedAt: string;
  versionName: string;
  versionCode: string;
  description?: string;
}

interface ExportForm {
  versionName: string;
  versionCode: string;
  description: string;
  menuIds: number[];
  apiIds: number[];
  dictIds: number[];
}

const VersionPage: React.FC = () => {
  const [form] = Form.useForm();
  const [exportForm] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [dataSource, setDataSource] = useState<SysVersion[]>([]);
  const [total, setTotal] = useState(0);
  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [showAllQuery, setShowAllQuery] = useState(false);
  
  // Detail drawer
  const [detailVisible, setDetailVisible] = useState(false);
  const [detailData, setDetailData] = useState<SysVersion | null>(null);
  
  // Export drawer
  const [exportVisible, setExportVisible] = useState(false);
  const [exportLoading, setExportLoading] = useState(false);
  const [menuTreeData, setMenuTreeData] = useState<DataNode[]>([]);
  const [apiTreeData, setApiTreeData] = useState<DataNode[]>([]);
  const [dictTreeData, setDictTreeData] = useState<DataNode[]>([]);
  const [checkedMenuKeys, setCheckedMenuKeys] = useState<React.Key[]>([]);
  const [checkedApiKeys, setCheckedApiKeys] = useState<React.Key[]>([]);
  const [checkedDictKeys, setCheckedDictKeys] = useState<React.Key[]>([]);
  const [menuFilterText, setMenuFilterText] = useState('');
  const [apiFilterText, setApiFilterText] = useState('');
  const [dictFilterText, setDictFilterText] = useState('');
  
  // Import drawer
  const [importVisible, setImportVisible] = useState(false);
  const [importLoading, setImportLoading] = useState(false);
  const [importJsonContent, setImportJsonContent] = useState('');
  const [importPreviewData, setImportPreviewData] = useState<any>(null);

  // Fetch table data
  const fetchData = async () => {
    setLoading(true);
    try {
      const values = form.getFieldsValue();
      const params: any = {
        page: current,
        pageSize,
        ...values,
      };
      if (values.createdAtRange) {
        params.startCreatedAt = values.createdAtRange[0]?.format('YYYY-MM-DD HH:mm:ss');
        params.endCreatedAt = values.createdAtRange[1]?.format('YYYY-MM-DD HH:mm:ss');
        delete params.createdAtRange;
      }
      const res = await getSysVersionList(params);
      if (res.code === 0) {
        setDataSource(res.data?.list || []);
        setTotal(res.data?.total || 0);
      }
    } catch (error) {
      console.error('获取版本列表失败:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, [current, pageSize]);

  // Search
  const handleSearch = () => {
    setCurrent(1);
    fetchData();
  };

  // Reset
  const handleReset = () => {
    form.resetFields();
    setCurrent(1);
    fetchData();
  };

  // Delete single row
  const handleDelete = async (record: SysVersion) => {
    try {
      const res = await deleteSysVersion({ ID: record.ID });
      if (res.code === 0) {
        message.success('删除成功');
        fetchData();
      }
    } catch (error) {
      message.error('删除失败');
    }
  };

  // Batch delete
  const handleBatchDelete = async () => {
    if (selectedRowKeys.length === 0) {
      message.warning('请选择要删除的数据');
      return;
    }
    try {
      const res = await deleteSysVersionByIds({ IDs: selectedRowKeys as number[] });
      if (res.code === 0) {
        message.success('删除成功');
        setSelectedRowKeys([]);
        fetchData();
      }
    } catch (error) {
      message.error('删除失败');
    }
  };

  // View details
  const handleViewDetail = async (record: SysVersion) => {
    try {
      const res = await findSysVersion({ ID: record.ID });
      if (res.code === 0) {
        setDetailData(res.data);
        setDetailVisible(true);
      }
    } catch (error) {
      message.error('获取详情失败');
    }
  };

  // Download version JSON
  const handleDownload = async (record: SysVersion) => {
    try {
      const res = await downloadVersionJson({ ID: record.ID });
      const blob = res instanceof Blob ? res : new Blob([res]);
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = `${record.versionName}_${record.versionCode}.json`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
      message.success('下载成功');
    } catch (error) {
      message.error('下载失败');
    }
  };


  // Build menu tree data
  const buildMenuTree = (menus: any[]): DataNode[] => {
    return menus.map((menu) => ({
      key: menu.ID,
      title: menu.meta?.title || menu.title || menu.name,
      children: menu.children ? buildMenuTree(menu.children) : undefined,
    }));
  };

  // Build API tree data (grouped by apiGroup)
  const buildApiTree = (apis: any[]): DataNode[] => {
    const groups: Record<string, any[]> = {};
    apis.forEach((api) => {
      const group = api.apiGroup || '未分组';
      if (!groups[group]) {
        groups[group] = [];
      }
      groups[group].push(api);
    });
    return Object.entries(groups).map(([group, items]) => ({
      key: `group_${group}`,
      title: `${group}组`,
      children: items.map((item) => ({
        key: `p:${item.path}m:${item.method}`,
        title: (
          <div className={styles.apiTreeItem}>
            <span>{item.description}</span>
            <Tooltip title={item.path}>
              <span className={styles.apiPath}>{item.path}</span>
            </Tooltip>
          </div>
        ),
        data: item,
      })),
    }));
  };

  // Build dictionary tree data
  const buildDictTree = (dicts: any[]): DataNode[] => {
    return dicts.map((dict) => ({
      key: dict.ID,
      title: (
        <div className={styles.dictTreeItem}>
          <span>{dict.name}</span>
          <span className={styles.dictType}>{dict.type}</span>
        </div>
      ),
      children: dict.sysDictionaryDetails?.map((detail: any) => ({
        key: `detail_${detail.ID}`,
        title: (
          <div className={styles.dictTreeItem}>
            <span>{detail.label}</span>
            <span className={styles.dictValue}>值: {detail.value}</span>
          </div>
        ),
      })),
    }));
  };

  // Open export drawer
  const handleOpenExport = async () => {
    setExportVisible(true);
    try {
      // Fetch menu list
      const menuRes = await getMenuList();
      if (menuRes.code === 0) {
        setMenuTreeData(buildMenuTree(menuRes.data?.list || menuRes.data || []));
      }
      // Fetch API list
      const apiRes = await getApiList({ page: 1, pageSize: 9999 });
      if (apiRes.code === 0) {
        setApiTreeData(buildApiTree(apiRes.data?.list || []));
      }
      // Fetch dictionary list
      const dictRes = await getDictionaryList({ page: 1, pageSize: 9999 });
      if (dictRes.code === 0) {
        setDictTreeData(buildDictTree(dictRes.data?.list || []));
      }
    } catch (error) {
      message.error('获取数据失败');
    }
  };

  // Close export drawer
  const handleCloseExport = () => {
    setExportVisible(false);
    exportForm.resetFields();
    setCheckedMenuKeys([]);
    setCheckedApiKeys([]);
    setCheckedDictKeys([]);
    setMenuFilterText('');
    setApiFilterText('');
    setDictFilterText('');
  };

  // Handle export
  const handleExport = async () => {
    try {
      const values = await exportForm.validateFields();
      if (!values.versionName || !values.versionCode) {
        message.warning('请填写版本名称和版本号');
        return;
      }
      setExportLoading(true);
      const menuIds = checkedMenuKeys.filter((k) => typeof k === 'number') as number[];
      const apiIds = checkedApiKeys
        .filter((k) => typeof k === 'string' && k.startsWith('p:'))
        .map((k) => k);
      const dictIds = checkedDictKeys.filter((k) => typeof k === 'number') as number[];
      
      const res = await exportVersion({
        ...values,
        menuIds,
        apiIds,
        dictIds,
      });
      if (res.code === 0) {
        message.success('创建发版成功');
        handleCloseExport();
        fetchData();
      } else {
        message.error(res.msg || '创建发版失败');
      }
    } catch (error) {
      message.error('创建发版失败');
    } finally {
      setExportLoading(false);
    }
  };

  // Open import drawer
  const handleOpenImport = () => {
    setImportVisible(true);
  };

  // Close import drawer
  const handleCloseImport = () => {
    setImportVisible(false);
    setImportJsonContent('');
    setImportPreviewData(null);
  };

  // Handle JSON content change
  const handleJsonContentChange = (content: string) => {
    setImportJsonContent(content);
    if (!content.trim()) {
      setImportPreviewData(null);
      return;
    }
    try {
      const data = JSON.parse(content);
      setImportPreviewData({
        menus: data.menus || [],
        apis: data.apis || [],
        dictionaries: data.dictionaries || [],
      });
    } catch (error) {
      setImportPreviewData(null);
    }
  };

  // Handle file upload
  const handleFileUpload = (file: File) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      try {
        const content = e.target?.result as string;
        JSON.parse(content); // Validate JSON
        handleJsonContentChange(content);
        message.success('文件上传成功');
      } catch (error) {
        message.error('JSON文件格式错误');
      }
    };
    reader.readAsText(file);
    return false; // Prevent auto upload
  };

  // Handle import
  const handleImport = async () => {
    if (!importJsonContent.trim()) {
      message.warning('请输入版本JSON');
      return;
    }
    try {
      JSON.parse(importJsonContent);
    } catch (error) {
      message.error('JSON格式错误，请检查输入内容');
      return;
    }
    setImportLoading(true);
    try {
      const data = JSON.parse(importJsonContent);
      const res = await importVersion(data);
      if (res.code === 0) {
        message.success('导入成功');
        handleCloseImport();
        fetchData();
      } else {
        message.error(res.msg || '导入失败');
      }
    } catch (error) {
      message.error('导入失败');
    } finally {
      setImportLoading(false);
    }
  };

  // Count total menus recursively
  const countMenus = (menus: any[]): number => {
    let count = 0;
    menus.forEach((menu) => {
      count += 1;
      if (menu.children?.length) {
        count += countMenus(menu.children);
      }
    });
    return count;
  };

  // Filter tree nodes
  const filterTreeNode = (searchValue: string, node: DataNode): boolean => {
    const title = typeof node.title === 'string' ? node.title : '';
    return title.toLowerCase().includes(searchValue.toLowerCase());
  };


  const columns: ColumnsType<SysVersion> = [
    {
      title: '日期',
      dataIndex: 'CreatedAt',
      key: 'CreatedAt',
      width: 180,
      sorter: true,
      render: (text) => formatDate(text),
    },
    {
      title: '版本名称',
      dataIndex: 'versionName',
      key: 'versionName',
      width: 120,
    },
    {
      title: '版本号',
      dataIndex: 'versionCode',
      key: 'versionCode',
      width: 120,
    },
    {
      title: '操作',
      key: 'action',
      fixed: 'right',
      width: 320,
      render: (_, record) => (
        <Space>
          <Button
            type="link"
            icon={<InfoCircleOutlined />}
            onClick={() => handleViewDetail(record)}
          >
            查看
          </Button>
          <Button
            type="link"
            icon={<DownloadOutlined />}
            onClick={() => handleDownload(record)}
          >
            下载发版包
          </Button>
          <Popconfirm
            title="确定要删除吗?"
            onConfirm={() => handleDelete(record)}
            okText="确定"
            cancelText="取消"
          >
            <Button type="link" danger icon={<DeleteOutlined />}>
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (
    <PageContainer>
      {/* Search Form */}
      <Card className={styles.searchCard}>
        <Form form={form} layout="inline" onFinish={handleSearch}>
          <Form.Item
            name="createdAtRange"
            label={
              <span>
                创建日期
                <Tooltip title="搜索范围是开始日期（包含）至结束日期（不包含）">
                  <QuestionCircleOutlined style={{ marginLeft: 4 }} />
                </Tooltip>
              </span>
            }
          >
            <RangePicker showTime style={{ width: 380 }} />
          </Form.Item>
          <Form.Item name="versionName" label="版本名称">
            <Input placeholder="搜索条件" />
          </Form.Item>
          <Form.Item name="versionCode" label="版本号">
            <Input placeholder="搜索条件" />
          </Form.Item>
          {showAllQuery && (
            <>
              {/* Additional query fields can be added here */}
            </>
          )}
          <Form.Item>
            <Space>
              <Button type="primary" icon={<SearchOutlined />} htmlType="submit">
                查询
              </Button>
              <Button icon={<ReloadOutlined />} onClick={handleReset}>
                重置
              </Button>
              <Button
                type="link"
                icon={showAllQuery ? <UpOutlined /> : <DownOutlined />}
                onClick={() => setShowAllQuery(!showAllQuery)}
              >
                {showAllQuery ? '收起' : '展开'}
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>

      {/* Table */}
      <Card>
        <div className={styles.toolbar}>
          <Space>
            <Button
              type="primary"
              icon={<DownloadOutlined />}
              onClick={handleOpenExport}
            >
              创建发版
            </Button>
            <Button icon={<UploadOutlined />} onClick={handleOpenImport}>
              导入版本
            </Button>
            <Popconfirm
              title="确定要删除选中的数据吗?"
              onConfirm={handleBatchDelete}
              okText="确定"
              cancelText="取消"
              disabled={selectedRowKeys.length === 0}
            >
              <Button
                icon={<DeleteOutlined />}
                disabled={selectedRowKeys.length === 0}
              >
                删除
              </Button>
            </Popconfirm>
          </Space>
        </div>
        <Table
          rowKey="ID"
          columns={columns}
          dataSource={dataSource}
          loading={loading}
          rowSelection={{
            selectedRowKeys,
            onChange: setSelectedRowKeys,
          }}
          pagination={{
            current,
            pageSize,
            total,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (t) => `共 ${t} 条`,
            onChange: (page, size) => {
              setCurrent(page);
              setPageSize(size);
            },
          }}
          scroll={{ x: 800 }}
        />
      </Card>

      {/* Detail Drawer */}
      <Drawer
        title="查看"
        open={detailVisible}
        onClose={() => setDetailVisible(false)}
        width={500}
        destroyOnClose
      >
        {detailData && (
          <Descriptions column={1} bordered>
            <Descriptions.Item label="版本名称">
              {detailData.versionName}
            </Descriptions.Item>
            <Descriptions.Item label="版本号">
              {detailData.versionCode}
            </Descriptions.Item>
            <Descriptions.Item label="版本描述">
              {detailData.description}
            </Descriptions.Item>
          </Descriptions>
        )}
      </Drawer>


      {/* Export Drawer */}
      <Drawer
        title="创建发版"
        open={exportVisible}
        onClose={handleCloseExport}
        width="80%"
        destroyOnClose
        extra={
          <Space>
            <Button onClick={handleCloseExport}>取消</Button>
            <Button type="primary" loading={exportLoading} onClick={handleExport}>
              创建发版
            </Button>
          </Space>
        }
      >
        <Form form={exportForm} layout="vertical">
          <Form.Item
            name="versionName"
            label="版本名称"
            rules={[{ required: true, message: '请输入版本名称' }]}
          >
            <Input placeholder="请输入版本名称" />
          </Form.Item>
          <Form.Item
            name="versionCode"
            label="版本号"
            rules={[{ required: true, message: '请输入版本号' }]}
          >
            <Input placeholder="请输入版本号" />
          </Form.Item>
          <Form.Item name="description" label="版本描述">
            <Input.TextArea placeholder="请输入版本描述" rows={3} />
          </Form.Item>
          <Form.Item label="发版信息">
            <div className={styles.treeContainer}>
              {/* Menu Tree */}
              <div className={styles.treeCard}>
                <div className={styles.treeHeader}>
                  <span className={styles.treeTitle}>选择菜单</span>
                </div>
                <div className={styles.treeFilter}>
                  <Input
                    placeholder="输入关键字进行过滤"
                    value={menuFilterText}
                    onChange={(e) => setMenuFilterText(e.target.value)}
                    allowClear
                  />
                </div>
                <div className={styles.treeBody}>
                  <Tree
                    checkable
                    defaultExpandAll
                    checkedKeys={checkedMenuKeys}
                    onCheck={(keys) => setCheckedMenuKeys(keys as React.Key[])}
                    treeData={menuTreeData}
                    filterTreeNode={(node) => filterTreeNode(menuFilterText, node)}
                  />
                </div>
              </div>

              {/* API Tree */}
              <div className={styles.treeCard}>
                <div className={styles.treeHeader}>
                  <span className={styles.treeTitle}>选择API</span>
                </div>
                <div className={styles.treeFilter}>
                  <Input
                    placeholder="输入关键字进行过滤"
                    value={apiFilterText}
                    onChange={(e) => setApiFilterText(e.target.value)}
                    allowClear
                  />
                </div>
                <div className={styles.treeBody}>
                  <Tree
                    checkable
                    defaultExpandAll
                    checkedKeys={checkedApiKeys}
                    onCheck={(keys) => setCheckedApiKeys(keys as React.Key[])}
                    treeData={apiTreeData}
                    filterTreeNode={(node) => filterTreeNode(apiFilterText, node)}
                  />
                </div>
              </div>

              {/* Dictionary Tree */}
              <div className={styles.treeCard}>
                <div className={styles.treeHeader}>
                  <span className={styles.treeTitle}>选择字典</span>
                </div>
                <div className={styles.treeFilter}>
                  <Input
                    placeholder="输入关键字进行过滤"
                    value={dictFilterText}
                    onChange={(e) => setDictFilterText(e.target.value)}
                    allowClear
                  />
                </div>
                <div className={styles.treeBody}>
                  <Tree
                    checkable
                    defaultExpandAll
                    checkedKeys={checkedDictKeys}
                    onCheck={(keys) => setCheckedDictKeys(keys as React.Key[])}
                    treeData={dictTreeData}
                    filterTreeNode={(node) => filterTreeNode(dictFilterText, node)}
                  />
                </div>
              </div>
            </div>
          </Form.Item>
        </Form>
      </Drawer>

      {/* Import Drawer */}
      <Drawer
        title="导入版本"
        open={importVisible}
        onClose={handleCloseImport}
        width="80%"
        destroyOnClose
        extra={
          <Space>
            <Button onClick={handleCloseImport}>取消</Button>
            <Button
              type="primary"
              loading={importLoading}
              onClick={handleImport}
              disabled={!importJsonContent.trim()}
            >
              导入
            </Button>
          </Space>
        }
      >
        <Form layout="vertical">
          <Form.Item label="上传文件">
            <Dragger
              accept=".json"
              beforeUpload={handleFileUpload}
              showUploadList={true}
              maxCount={1}
            >
              <p className="ant-upload-drag-icon">
                <InboxOutlined />
              </p>
              <p className="ant-upload-text">将JSON文件拖到此处，或点击上传</p>
              <p className="ant-upload-hint">只能上传JSON文件</p>
            </Dragger>
          </Form.Item>
          <Form.Item label="版本JSON">
            <Input.TextArea
              value={importJsonContent}
              onChange={(e) => handleJsonContentChange(e.target.value)}
              rows={10}
              placeholder="请粘贴版本JSON"
            />
          </Form.Item>
          {importPreviewData && (
            <Form.Item label="预览内容">
              <div className={styles.previewContainer}>
                <div className={styles.previewCard}>
                  <div className={styles.previewHeader}>
                    菜单 ({countMenus(importPreviewData.menus)}项)
                  </div>
                  <div className={styles.previewBody}>
                    <Tree
                      treeData={buildMenuTree(importPreviewData.menus)}
                      defaultExpandAll
                    />
                  </div>
                </div>
                <div className={styles.previewCard}>
                  <div className={styles.previewHeader}>
                    API ({importPreviewData.apis?.length || 0}项)
                  </div>
                  <div className={styles.previewBody}>
                    <Tree
                      treeData={buildApiTree(importPreviewData.apis)}
                      defaultExpandAll
                    />
                  </div>
                </div>
                <div className={styles.previewCard}>
                  <div className={styles.previewHeader}>
                    字典 ({importPreviewData.dictionaries?.length || 0}项)
                  </div>
                  <div className={styles.previewBody}>
                    <Tree
                      treeData={buildDictTree(importPreviewData.dictionaries)}
                      defaultExpandAll
                    />
                  </div>
                </div>
              </div>
            </Form.Item>
          )}
        </Form>
      </Drawer>
    </PageContainer>
  );
};

export default VersionPage;