import React, { useState, useEffect } from 'react';
import { 
  Layout, List, Button, Space, Typography, Card, 
  Input, Switch, App, Modal, Form, Badge, Tooltip, Divider, Checkbox, Empty, Select, Tag
} from 'antd';
import { 
  PlusOutlined, 
  LeftOutlined, 
  RightOutlined, 
  DeleteOutlined, 
  BookOutlined, 
  FileTextOutlined, 
  StarFilled, 
  StarOutlined,
  SaveOutlined, 
  CheckOutlined, 
  EditOutlined, 
  CloseOutlined, 
  MessageOutlined, 
  DatabaseOutlined
} from '@ant-design/icons';
import apiClient from '../../utils/apiClient';
import { buildApiUrl, API_ENDPOINTS } from '../../config/api';
import ActionButton from '../../components/ActionButton';
import MarkdownEditor from '../../components/MarkdownEditor';
import StatusTag from '../../components/StatusTag';

const { Sider, Content } = Layout;
const { Title, Text, Paragraph } = Typography;
const { TextArea } = Input;

const TASK_TYPES = {
  MEETING_TASK: { label: '总结模版', icon: <MessageOutlined /> },
  KNOWLEDGE_TASK: { label: '知识库模版', icon: <DatabaseOutlined /> }
};

const PromptManagement = () => {
  const { message, modal } = App.useApp();
  const [form] = Form.useForm();
  
  const [prompts, setPrompts] = useState([]);
  const [selectedPrompt, setSelectedPrompt] = useState(null);
  const [editingPrompt, setEditingPrompt] = useState(null);
  const [editingTitle, setEditingTitle] = useState(false);
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
  const [loading, setLoading] = useState(true);
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [isSaving, setIsSaving] = useState(false);

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

  const fetchPrompts = async () => {
    setLoading(true);
    try {
      const response = await apiClient.get(buildApiUrl(API_ENDPOINTS.PROMPTS.LIST));
      const list = response.data.prompts || [];
      setPrompts(list);
      if (list.length > 0 && !selectedPrompt) {
        setSelectedPrompt(list[0]);
        setEditingPrompt({ ...list[0] });
      }
    } finally {
      setLoading(false);
    }
  };

  const handlePromptSelect = (prompt) => {
    setSelectedPrompt(prompt);
    setEditingPrompt({ ...prompt });
    setEditingTitle(false);
  };

  const handleEditChange = (field, value) => {
    setEditingPrompt(prev => ({ ...prev, [field]: value }));
  };

  const handleSave = async () => {
    if (!editingPrompt) return;
    setIsSaving(true);
    try {
      const payload = {
        ...editingPrompt,
        is_default: editingPrompt.is_default ? 1 : 0,
        is_active: editingPrompt.is_active ? 1 : 0
      };
      await apiClient.put(buildApiUrl(API_ENDPOINTS.PROMPTS.UPDATE(editingPrompt.id)), payload);
      message.success('保存成功');
      fetchPrompts();
    } catch (e) {
      message.error('保存失败');
    } finally {
      setIsSaving(false);
    }
  };

  const handleDelete = (item) => {
    if (item.is_default) {
      message.warning('默认模版不允许删除');
      return;
    }
    modal.confirm({
      title: '删除模版',
      content: `确定要删除模版 "${item.name}" 吗？`,
      okText: '删除',
      okType: 'danger',
      onOk: async () => {
        await apiClient.delete(buildApiUrl(API_ENDPOINTS.PROMPTS.DELETE(item.id)));
        message.success('删除成功');
        setSelectedPrompt(null);
        fetchPrompts();
      }
    });
  };

  const groupedPrompts = {
    MEETING_TASK: prompts.filter(p => p.task_type === 'MEETING_TASK'),
    KNOWLEDGE_TASK: prompts.filter(p => p.task_type === 'KNOWLEDGE_TASK')
  };

  return (
    <Layout style={{ background: '#fff', borderRadius: 12, overflow: 'hidden', minHeight: 'calc(100vh - 120px)' }}>
      <Sider 
        width={280} 
        theme="light" 
        collapsed={sidebarCollapsed}
        collapsible 
        onCollapse={setSidebarCollapsed}
        style={{ borderRight: '1px solid #f0f0f0' }}
      >
        <div style={{ padding: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          {!sidebarCollapsed && <Title level={5} style={{ margin: 0 }}>提示词模版</Title>}
          <Button type="primary" shape="circle" icon={<PlusOutlined />} onClick={() => setShowCreateModal(true)} />
        </div>

        <div style={{ overflowY: 'auto', height: 'calc(100vh - 200px)' }}>
          {['MEETING_TASK', 'KNOWLEDGE_TASK'].map(type => (
            <div key={type} style={{ marginBottom: 16 }}>
              {!sidebarCollapsed && (
                <div style={{ padding: '0 16px 8px', fontSize: 12, color: '#8c8c8c' }}>
                  {TASK_TYPES[type].icon} <span style={{ marginLeft: 8 }}>{TASK_TYPES[type].label}</span>
                </div>
              )}
              <List
                dataSource={groupedPrompts[type]}
                renderItem={item => (
                  <div 
                    onClick={() => handlePromptSelect(item)}
                    style={{ 
                      padding: '10px 16px', 
                      cursor: 'pointer',
                      background: selectedPrompt?.id === item.id ? '#e6f4ff' : 'transparent',
                      borderLeft: selectedPrompt?.id === item.id ? '4px solid #1677ff' : '4px solid transparent',
                      transition: 'all 0.3s'
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                      <Text strong ellipsis style={{ width: '80%' }}>{item.name}</Text>
                      {item.is_default === 1 && <StarFilled style={{ color: '#faad14', fontSize: 12 }} />}
                    </div>
                    {!item.is_active && <StatusTag active={false} compact />}
                  </div>
                )}
              />
            </div>
          ))}
        </div>
      </Sider>

      <Content style={{ padding: '24px', background: '#fff' }}>
        {selectedPrompt && editingPrompt ? (
          <Space direction="vertical" size="large" style={{ width: '100%' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
                  <Title level={3} style={{ margin: 0 }}>{selectedPrompt.name}</Title>
                  <ActionButton tone="edit" variant="iconSm" tooltip="编辑" icon={<EditOutlined />} onClick={() => {}} />
                </div>
                <Paragraph type="secondary">{selectedPrompt.desc || '暂无描述'}</Paragraph>
              </div>
              <Space>
                <Button icon={<DeleteOutlined />} className="btn-soft-red" onClick={() => handleDelete(selectedPrompt)}>删除</Button>
                <Button icon={<SaveOutlined />} type="primary" loading={isSaving} onClick={handleSave}>保存更改</Button>
              </Space>
            </div>

            <Card size="small" style={{ background: '#f9f9f9' }}>
              <Space split={<Divider type="vertical" />}>
                <Space><Text type="secondary">分类:</Text> <Tag color="blue">{TASK_TYPES[selectedPrompt.task_type].label}</Tag></Space>
                <Space>
                  <Text type="secondary">默认:</Text> 
                  <Checkbox checked={editingPrompt.is_default === 1} onChange={e => handleEditChange('is_default', e.target.checked ? 1 : 0)}>
                    设为默认
                  </Checkbox>
                </Space>
                <Space>
                  <Text type="secondary">状态:</Text> 
                  <Switch checked={editingPrompt.is_active === 1} onChange={v => handleEditChange('is_active', v ? 1 : 0)} />
                </Space>
              </Space>
            </Card>

            <MarkdownEditor 
              value={editingPrompt.content} 
              onChange={v => handleEditChange('content', v)} 
              height={600}
              showImageUpload={false}
            />
          </Space>
        ) : (
          <Empty style={{ marginTop: 100 }} description="请从左侧选择一个模版进行编辑" />
        )}
      </Content>

      <Modal
        title="创建新模版"
        open={showCreateModal}
        onCancel={() => setShowCreateModal(false)}
        onOk={() => form.submit()}
      >
        <Form form={form} layout="vertical" onFinish={async (v) => {
          await apiClient.post(buildApiUrl(API_ENDPOINTS.PROMPTS.CREATE), v);
          message.success('创建成功');
          setShowCreateModal(false);
          fetchPrompts();
        }}>
          <Form.Item name="name" label="模版名称" rules={[{ required: true }]}>
            <Input placeholder="例如：精简纪要" />
          </Form.Item>
          <Form.Item name="task_type" label="任务类型" rules={[{ required: true }]} initialValue="MEETING_TASK">
            <Select>
              <Select.Option value="MEETING_TASK">总结模版</Select.Option>
              <Select.Option value="KNOWLEDGE_TASK">知识库模版</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item name="desc" label="模版描述">
            <TextArea rows={2} />
          </Form.Item>
        </Form>
      </Modal>
    </Layout>
  );
};

export default PromptManagement;