import React, { useState, useEffect } from 'react';
import { App, Button, Card, Tag, Space, Form, Input, InputNumber, Switch, Select, Modal, Tooltip, Divider } from 'antd';
import { 
  PlusOutlined, 
  EditOutlined, 
  DeleteOutlined, 
  FileTextOutlined, 
  SearchOutlined, 
  SaveOutlined,
  SettingOutlined,
  EyeOutlined,
  EyeInvisibleOutlined
} from '@ant-design/icons';
import { api } from '../api';
import DetailDrawer from '../components/DetailDrawer/DetailDrawer';
import ListTable from '../components/ListTable/ListTable';

const { Option } = Select;

const PromptManage: React.FC = () => {
  const { message, modal } = App.useApp();
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<any[]>([]);
  const [categories, setCategories] = useState<any[]>([]);
  const [isDrawerVisible, setIsDrawerVisible] = useState(false);
  const [editingItem, setEditingItem] = useState<any>(null);
  const [searchKeyword, setSearchKeyword] = useState('');
  const [currentUser, setCurrentUser] = useState<any>(null);
  const [form] = Form.useForm();

  const fetchPrompts = async (keyword?: string) => {
    setLoading(true);
    try {
      // 默认使用 personal 作用域
      const res = await api.listPrompts({ keyword, scope: 'personal' });
      setData(res);
    } catch (error: any) {
      message.error('加载提示词失败');
    } finally {
      setLoading(false);
    }
  };

  const initData = async () => {
    const [userRes, dictRes] = await Promise.all([api.me(), api.listDictItems('PROMPT_TYPE')]);
    setCurrentUser(userRes);
    setCategories(dictRes);
    fetchPrompts();
  };

  useEffect(() => { initData(); }, []);

  const handleAdd = () => {
    setEditingItem(null);
    form.resetFields();
    form.setFieldsValue({ status: 1, sort_order: 0, is_system: false });
    setIsDrawerVisible(true);
  };

  const handleEdit = (record: any) => {
    setEditingItem(record);
    form.setFieldsValue(record);
    setIsDrawerVisible(true);
  };

  const handleDelete = (id: number) => {
    modal.confirm({
      title: '确认删除',
      content: '确定要删除此个人模板吗？',
      onOk: async () => {
        await api.deletePrompt(id);
        message.success('已删除');
        fetchPrompts(searchKeyword);
      },
    });
  };

  const handleTogglePersonalActive = async (checked: boolean, record: any) => {
    await api.updatePromptConfig(record.id, { is_active: checked });
    message.success(checked ? '已启用' : '已停用');
    fetchPrompts(searchKeyword);
  };

  const handleSaveSort = async (id: number, val: number) => {
    await api.updatePromptConfig(id, { user_sort_order: val });
    fetchPrompts(searchKeyword);
  };

  const handleSave = async () => {
    const values = await form.validateFields();
    try {
      if (editingItem) {
        await api.updatePrompt(editingItem.id, values);
      } else {
        await api.createPrompt({ ...values, is_system: false });
      }
      setIsDrawerVisible(false);
      fetchPrompts(searchKeyword);
      message.success('保存成功');
    } catch (e: any) {
      message.error('保存失败');
    }
  };

  const columns = [
    {
      title: '模板信息',
      dataIndex: 'name',
      key: 'name',
      render: (text: string, record: any) => (
        <Space direction="vertical" size={0}>
          <Space>
            <span style={{ fontWeight: 600 }}>{text}</span>
            {record.is_system ? <Tag color="blue" bordered={false}>公共库</Tag> : <Tag color="orange" bordered={false}>个人</Tag>}
          </Space>
          <div style={{ fontSize: '12px', color: '#999' }}>{record.description}</div>
        </Space>
      ),
    },
    {
      title: '分类',
      dataIndex: 'category',
      key: 'category',
      width: 120,
      render: (cat: string) => {
        const item = categories.find(c => c.item_value === cat);
        return <Tag>{item?.item_label || cat}</Tag>;
      }
    },
    {
      title: '是否启用',
      dataIndex: 'is_active',
      key: 'is_active',
      width: 100,
      render: (active: boolean, record: any) => (
        <Switch 
          checked={!!active} 
          size="small"
          onChange={(checked) => handleTogglePersonalActive(checked, record)}
          onClick={(_, e) => e.stopPropagation()} 
        />
      ),
    },
    {
      title: '个人排序',
      dataIndex: 'user_sort_order',
      key: 'user_sort_order',
      width: 100,
      render: (val: number, record: any) => (
        <InputNumber 
          size="small" 
          min={0} 
          value={val} 
          onClick={(e) => e.stopPropagation()}
          onBlur={(e) => handleSaveSort(record.id, parseInt(e.target.value))}
        />
      ),
    },
    {
      title: '操作',
      key: 'action',
      width: 100,
      render: (_: any, record: any) => (
        <Space size="small">
          <Button 
            type="link" 
            size="small"
            icon={<SettingOutlined />} 
            onClick={(e) => { e.stopPropagation(); handleEdit(record); }}
            disabled={record.is_system} // 个人页面不能编辑系统模板内容
          />
          {!record.is_system && (
            <Button 
              type="link" 
              size="small"
              danger 
              icon={<DeleteOutlined />} 
              onClick={(e) => { e.stopPropagation(); handleDelete(record.id); }}
            />
          )}
        </Space>
      ),
    },
  ];

  return (
    <div className="page-wrapper" style={{ padding: '24px' }}>
      <Card 
        variant="borderless"
        title={
          <Space size="large">
            <Space><FileTextOutlined style={{ color: '#1890ff' }} /><strong>我的提示词库</strong></Space>
            <Input 
              placeholder="搜索模板..." 
              prefix={<SearchOutlined />}
              style={{ width: 300 }}
              allowClear
              onChange={(e) => setSearchKeyword(e.target.value)}
            />
          </Space>
        }
        extra={<Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>新建个人模板</Button>}
      >
        <ListTable columns={columns} dataSource={data} rowKey="id" loading={loading} />
      </Card>

      <DetailDrawer
        visible={isDrawerVisible}
        onClose={() => setIsDrawerVisible(false)}
        title={{ text: editingItem ? '编辑模板' : '新建个人模板' }}
        headerActions={[{ key: 'save', label: '保存模板', type: 'primary', onClick: handleSave }]}
      >
        <div style={{ padding: '24px' }}>
          <Form form={form} layout="vertical">
            <Form.Item name="name" label="模板名称" rules={[{ required: true }]}><Input /></Form.Item>
            <Form.Item name="category" label="分类" rules={[{ required: true }]}>
              <Select>{categories.map(c => <Option key={c.item_value} value={c.item_value}>{c.item_label}</Option>)}</Select>
            </Form.Item>
            <Form.Item name="content" label="Prompt 内容" rules={[{ required: true }]}><Input.TextArea rows={12} /></Form.Item>
            <Form.Item name="description" label="详细描述"><Input.TextArea rows={3} /></Form.Item>
            <Divider />
            <Form.Item name="status" label="是否可用" valuePropName="checked">
              <Switch checkedChildren="上线" unCheckedChildren="下线" />
            </Form.Item>
          </Form>
        </div>
      </DetailDrawer>
    </div>
  );
};

export default PromptManage;