/**
 * 知识库配置管理组件
 *
 * 提供地区-知识库绑定管理功能，包括增删改查
 *
 * @author 开发团队
 * @version 1.0.0
 */

import { useState, useEffect } from 'react';
import {
  Card,
  Table,
  Button,
  Tag,
  Space,
  Modal,
  Form,
  Input,
  Select,
  Switch,
  InputNumber,
  message,
  Flex,
  Typography,
  Popconfirm,
  Spin,
  Tooltip,
} from 'antd';
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  InfoCircleOutlined,
  CheckCircleOutlined,
} from '@ant-design/icons';
import { useAreaDatasetConfig } from '~/hooks/use-area-dataset-config';
import { fetchDatasets } from '~/api/dify-dataset/api/datasetApi';
import type { Dataset as DifyDataset } from '~/api/dify-dataset/type';
import type { AreaDataset } from '~/api/v3/dify/area-datasets';

const { Title, Text } = Typography;

// 颜色常量
const colors = {
  bgLayout: '#f5f5f5',
  border: '#e8e8e8',
  text: '#262626',
  textSecondary: '#8c8c8c',
  primary: '#00684a',
};

/**
 * 知识库配置管理组件
 */
export default function AreaDatasetConfig() {
  // 使用自定义hook获取数据和操作方法
  const {
    // 数据
    datasets,
    loading,
    total,
    userArea,
    userRole,
    areas,
    // areasLoading, // 地区列表已加载hook中

    // 筛选 - 多选
    filterAreas,
    setFilterAreas,
    page,
    setPage,
    pageSize,

    // 表单状态
    modalVisible,
    setModalVisible,
    editingId,
    setEditingId,
    submitLoading,

    // 操作方法
    loadDatasets,
    loadAreas,
    handleCreate,
    handleUpdate,
    handleDelete,

    // 权限
    canManageDataset,
  } = useAreaDatasetConfig();

  // 内部状态
  const [form] = Form.useForm();
  const [difyDatasets, setDifyDatasets] = useState<DifyDataset[]>([]);
  const [difyDatasetsLoading, setDifyDatasetsLoading] = useState<boolean>(false);
  const [difyDatasetsTotal, setDifyDatasetsTotal] = useState<number>(0);
  const [difyDatasetsPage, setDifyDatasetsPage] = useState<number>(1);
  const [isLoadingDifyDatasets, setIsLoadingDifyDatasets] = useState<boolean>(false);

  // ==================== Effects ====================

  // 当编辑的ID变化时，加载表单数据
  useEffect(() => {
    if (editingId && modalVisible) {
      const record = datasets.find((item) => item.id === editingId);
      if (record) {
        form.setFieldsValue({
          area: record.area,
          dataset_id: record.dataset_id,
          dataset_name: record.dataset_name,
          dataset_description: record.dataset_description,
          is_public: record.is_public,
          is_default: record.is_default,
          sort_order: record.sort_order,
        });
      }
    } else if (!editingId && modalVisible) {
      // 新增时重置表单
      form.resetFields();
      loadDifyDatasets(); // 加载Dify知识库列表
    }
  }, [editingId, modalVisible, datasets, form]);

  // ==================== Dify Datasets Loading ====================

  /**
   * 从Dify API加载知识库列表
   */
  const loadDifyDatasets = async (pageNum: number = 1) => {
    if (isLoadingDifyDatasets) return;

    setIsLoadingDifyDatasets(true);
    try {
      const response = await fetchDatasets(pageNum, 20);
      setDifyDatasets(response.data);
      setDifyDatasetsTotal(response.total);
      setDifyDatasetsPage(pageNum);
      setDifyDatasetsLoading(false);
    } catch (error: any) {
      console.error('加载Dify知识库列表失败:', error);
      message.error('加载Dify知识库列表失败');
      setDifyDatasetsLoading(false);
    } finally {
      setIsLoadingDifyDatasets(false);
    }
  };

  /**
   * Dify数据集选择器滚动加载
   */
  const handleDatasetSelectScroll = (e: React.UIEvent<HTMLDivElement>) => {
    const { target } = e;
    const { scrollTop, scrollHeight, clientHeight } = target as HTMLDivElement;

    // 滚动到底部且还有更多数据时加载下一页
    if (scrollHeight - scrollTop === clientHeight &&
        difyDatasets.length < difyDatasetsTotal &&
        !difyDatasetsLoading) {
      loadDifyDatasets(difyDatasetsPage + 1);
    }
  };

  // ==================== Event Handlers ====================

  /**
   * 处理新建按钮点击
   */
  const handleCreateClick = () => {
    if (!canManageDataset) {
      message.error('您没有创建知识库绑定的权限');
      return;
    }
    setEditingId(null);
    setModalVisible(true);
    form.resetFields();
    loadDifyDatasets();
  };

  /**
   * 处理编辑按钮点击
   */
  const handleEditClick = (record: AreaDataset) => {
    if (!canManageDataset) {
      message.error('您没有编辑知识库绑定的权限');
      return;
    }
    setEditingId(record.id);
    setModalVisible(true);
  };

  /**
   * 处理删除按钮点击
   */
  const handleDeleteClick = async (id: number) => {
    if (!canManageDataset) {
      message.error('您没有删除知识库绑定的权限');
      return;
    }

    const success = await handleDelete(id);
    if (success) {
      message.success('删除成功');
    }
  };

  /**
   * 处理表单提交
   */
  const handleFormSubmit = async (values: any) => {
    let success = false;

    if (editingId) {
      success = await handleUpdate(editingId, values);
    } else {
      success = await handleCreate(values);
    }

    if (success) {
      setModalVisible(false);
      form.resetFields();
      setEditingId(null);
    }
  };

  /**
   * 处理表单取消
   */
  const handleFormCancel = () => {
    setModalVisible(false);
    form.resetFields();
    setEditingId(null);
  };

  /**
   * 处理地区筛选变化 - 支持多选
   */
  const handleAreaFilterChange = (values: string[]) => {
    setFilterAreas(values);
    setPage(1); // 重置到第一页
  };

  // ==================== Render ====================

  // 用户角色已经在 hook 中处理好了，直接使用 userRole
  const userRoleLabel = userRole || '未知角色';

  // 表格列定义
  const columns = [
    {
      title: '序号',
      key: 'index',
      width: 60,
      render: (_: any, __: any, index: number) =>
        (page - 1) * pageSize + index + 1,
    },
    {
      title: '地区',
      dataIndex: 'area',
      key: 'area',
      width: 100,
      render: (area: string) => (
        <Tag color={area === '省级' ? 'gold' : 'blue'}>{area}</Tag>
      ),
    },
    {
      title: '知识库名称',
      dataIndex: 'dataset_name',
      key: 'dataset_name',
      width: 200,
      ellipsis: true,
      render: (text: string) => (
        <Tooltip title={text}>
          <Text style={{ color: colors.text }} strong>
            {text}
          </Text>
        </Tooltip>
      ),
    },
    {
      title: '知识库ID',
      dataIndex: 'dataset_id',
      key: 'dataset_id',
      width: 200,
      ellipsis: true,
      render: (text: string) => (
        <Tooltip title={text}>
          <Text type="secondary" style={{ fontSize: '12px' }}>
            {text.substring(0, 8)}...{text.substring(text.length - 4)}
          </Text>
        </Tooltip>
      ),
    },
    {
      title: '描述',
      dataIndex: 'dataset_description',
      key: 'dataset_description',
      ellipsis: true,
      render: (text: string) =>
        text ? (
          <Tooltip title={text}>
            <Text style={{ color: colors.text }}>
              {text.length > 30 ? text.substring(0, 30) + '...' : text}
            </Text>
          </Tooltip>
        ) : (
          <Text type="secondary">-</Text>
        ),
    },
    {
      title: '标签',
      key: 'tags',
      width: 120,
      render: (_: any, record: AreaDataset) => (
        <Space size="small">
          {record.is_public && (
            <Tag color="success" icon={<CheckCircleOutlined />}>
              公共
            </Tag>
          )}
          {record.is_default && (
            <Tag color={colors.primary} style={{ color: '#fff' }}>
              默认
            </Tag>
          )}
        </Space>
      ),
    },
    {
      title: '排序',
      dataIndex: 'sort_order',
      key: 'sort_order',
      width: 70,
      align: 'center' as const,
      sorter: (a: AreaDataset, b: AreaDataset) => a.sort_order - b.sort_order,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 80,
      render: (status: number) => (
        <Tag color={status === 1 ? 'success' : 'default'}>
          {status === 1 ? '启用' : '禁用'}
        </Tag>
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      key: 'created_at',
      width: 150,
      render: (text: string) => (
        <Text style={{ color: colors.textSecondary, fontSize: '12px' }}>
          {new Date(text).toLocaleString('zh-CN')}
        </Text>
      ),
    },
    // 操作列（仅管理员可见）
    ...(canManageDataset
      ? [
          {
            title: '操作',
            key: 'actions',
            width: 120,
            fixed: 'right' as const,
            render: (_: any, record: AreaDataset) => (
              <Space size="small">
                <Button
                  type="link"
                  size="small"
                  icon={<EditOutlined />}
                  onClick={() => handleEditClick(record)}
                >
                  编辑
                </Button>
                <Popconfirm
                  title="确定删除?"
                  description="删除后该地区的用户将无法访问此知识库"
                  onConfirm={() => handleDeleteClick(record.id)}
                  okText="确定"
                  cancelText="取消"
                >
                  <Button type="link" danger size="small" icon={<DeleteOutlined />}>
                    删除
                  </Button>
                </Popconfirm>
              </Space>
            ),
          },
        ]
      : []),
  ];

  return (
    <div
      style={{
        height: '100%',
        background: colors.bgLayout,
        padding: '16px',
      }}
    >
      {/* 页面头部 */}
      <Card
        style={{
          marginBottom: '16px',
          borderRadius: '8px',
        }}
      >
        <Flex justify="space-between" align="center">
          <div>
            <Title level={4} style={{ margin: 0, marginBottom: '8px', color: colors.text }}>
              知识库配置管理
            </Title>
            <Flex gap="16px" align="center">
              <Text type="secondary">
                地区: <Text strong>{userArea || '-'}</Text>
              </Text>
              <Text type="secondary">
                角色: <Text strong>{userRoleLabel}</Text>
              </Text>
              <Text type="secondary">
                总数: <Text strong>{total}</Text>
              </Text>
            </Flex>
          </div>

          {/* 仅管理员显示新增按钮 */}
          {canManageDataset && (
            <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={handleCreateClick}
            >
              新增绑定
            </Button>
          )}
        </Flex>
      </Card>

      {/* 筛选区域（仅管理员可见） */}
      {canManageDataset && (
        <Card
          style={{
            marginBottom: '16px',
            borderRadius: '8px',
          }}
        >
          <Flex gap="16px" align="center">
            <Text style={{ color: colors.text }}>地区筛选:</Text>
            <Select
              mode="multiple"
              style={{ minWidth: '200px', maxWidth: '400px' }}
              placeholder="请选择地区（可多选）"
              allowClear
              value={filterAreas}
              onChange={handleAreaFilterChange}
              maxTagCount={3}
              maxTagPlaceholder={(omittedValues) => `+${omittedValues.length}个`}
              options={Array.isArray(areas) ? areas.map((area) => ({ label: area, value: area })) : []}
            />
          </Flex>
        </Card>
      )}

      {/* 数据表格 */}
      <Card
        style={{
          borderRadius: '8px',
        }}
      >
        <Table
          columns={columns}
          dataSource={datasets}
          loading={loading}
          rowKey="id"
          pagination={
            canManageDataset
              ? {
                  current: page,
                  pageSize: pageSize,
                  total: total,
                  onChange: (newPage) => setPage(newPage),
                  showSizeChanger: false,
                  showQuickJumper: true,
                  showTotal: (total) => `共 ${total} 条`,
                }
              : false
          }
          scroll={{ x: 'max-content' }}
          locale={{
            emptyText: (
              <Flex vertical align="center" justify="center" style={{ padding: '48px' }}>
                <InfoCircleOutlined style={{ fontSize: '48px', color: colors.textSecondary }} />
                <Text style={{ marginTop: '16px', color: colors.textSecondary }}>
                  暂无知识库数据
                </Text>
              </Flex>
            ),
          }}
        />
      </Card>

      {/* 新增/编辑对话框 */}
      <Modal
        title={editingId ? '编辑知识库绑定' : '新增知识库绑定'}
        open={modalVisible}
        onOk={() => form.submit()}
        onCancel={handleFormCancel}
        confirmLoading={submitLoading}
        width={600}
        destroyOnHidden
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={handleFormSubmit}
          initialValues={{
            is_public: false,
            is_default: false,
            sort_order: 0,
          }}
        >
          {/* 地区选择（仅新增时可选） */}
          <Form.Item
            name="area"
            label="地区"
            rules={[{ required: true, message: '请选择地区' }]}
          >
            <Select
              placeholder="请选择地区"
              disabled={!!editingId} // 编辑时禁用
              options={Array.isArray(areas) ? areas.map((area) => ({
                label: area,
                value: area,
              })) : []}
            />
          </Form.Item>

          {/* Dify知识库选择（仅新增时可选） */}
          <Form.Item
            name="dataset_id"
            label="Dify知识库"
            rules={[{ required: true, message: '请选择Dify知识库' }]}
          >
            <Select
              placeholder="请选择或输入知识库ID"
              disabled={!!editingId}
              loading={difyDatasetsLoading}
              onPopupScroll={handleDatasetSelectScroll}
              dropdownRender={(menu) => (
                <div>
                  {menu}
                  {difyDatasets.length < difyDatasetsTotal && (
                    <div style={{ textAlign: 'center', padding: '8px' }}>
                      <Spin size="small" />
                      <Text style={{ marginLeft: '8px' }} type="secondary">
                        加载中...
                      </Text>
                    </div>
                  )}
                </div>
              )}
              onDropdownVisibleChange={(open) => {
                if (open && !editingId) {
                  loadDifyDatasets();
                }
              }}
              options={difyDatasets.map((ds) => ({
                label: (
                  <Flex vertical>
                    <Text strong>{ds.name}</Text>
                    <Text type="secondary" style={{ fontSize: '12px' }}>
                      ID: {ds.id}
                    </Text>
                  </Flex>
                ),
                value: ds.id,
              }))}
              styles={{ popup: { root: { maxHeight: '300px' } } }}
            />
          </Form.Item>

          {/* 知识库名称 */}
          <Form.Item
            name="dataset_name"
            label="知识库名称"
            rules={[
              { required: true, message: '请输入知识库名称' },
              { max: 255, message: '最多255个字符' },
            ]}
          >
            <Input placeholder="请输入知识库名称" />
          </Form.Item>

          {/* 知识库描述 */}
          {/* <Form.Item
            name="dataset_description"
            label="知识库描述"
          >
            <Input.TextArea
              placeholder="请输入知识库描述（可选）"
              rows={3}
              maxLength={500}
            />
          </Form.Item> */}

          {/* 高级设置折叠面板 */}
          <div style={{ marginTop: '24px' }}>
            <Text strong style={{ color: colors.text, display: 'block', marginBottom: '16px' }}>
              高级设置
            </Text>

            <Flex gap="24px">
              {/* 是否公开 */}
              <Form.Item
                name="is_public"
                label="公开知识库"
                valuePropName="checked"
                tooltip="公开后所有地区的用户都可以访问此知识库"
              >
                <Switch />
              </Form.Item>

              {/* 是否默认 */}
              <Form.Item
                name="is_default"
                label="默认知识库"
                valuePropName="checked"
                tooltip="设置为该地区的默认知识库，用户优先使用"
              >
                <Switch />
              </Form.Item>

              {/* 排序顺序 */}
              <Form.Item
                name="sort_order"
                label="排序顺序"
                tooltip="数值越小越靠前，范围0-100"
              >
                <InputNumber
                  min={0}
                  max={100}
                  style={{ width: '100%' }}
                  placeholder="0"
                />
              </Form.Item>
            </Flex>
          </div>
        </Form>
      </Modal>
    </div>
  );
}