import { useState, useEffect } from 'react';
import { Button, Modal, Form, Input, Select, message, Row, Col, Empty, Tabs, Divider, Typography, Space, InputNumber } from 'antd';
import { ThunderboltOutlined, UserOutlined, TeamOutlined, PlusOutlined } from '@ant-design/icons';
import { useStore } from '../store';
import { useCharacterSync } from '../store/hooks';
import { characterGridConfig } from '../components/CardStyles';
import { CharacterCard } from '../components/CharacterCard';
import { SSELoadingOverlay } from '../components/SSELoadingOverlay';
import type { Character, CharacterUpdate } from '../types';
import { characterApi } from '../services/api';
import { SSEPostClient } from '../utils/sseClient';

const { Title } = Typography;

const { TextArea } = Input;

export default function Characters() {
  const { currentProject, characters } = useStore();
  const [isGenerating, setIsGenerating] = useState(false);
  const [progress, setProgress] = useState(0);
  const [progressMessage, setProgressMessage] = useState('');
  const [activeTab, setActiveTab] = useState<'all' | 'character' | 'organization'>('all');
  const [generateForm] = Form.useForm();
  const [generateOrgForm] = Form.useForm();
  const [createForm] = Form.useForm();
  const [editForm] = Form.useForm();
  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
  const [createType, setCreateType] = useState<'character' | 'organization'>('character');
  const [editingCharacter, setEditingCharacter] = useState<Character | null>(null);

  const {
    refreshCharacters,
    deleteCharacter
  } = useCharacterSync();

  useEffect(() => {
    if (currentProject?.id) {
      refreshCharacters();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [currentProject?.id]);
  const [modal, contextHolder] = Modal.useModal();

  if (!currentProject) return null;

  const handleDeleteCharacter = async (id: string) => {
    try {
      await deleteCharacter(id);
      message.success('删除成功');
    } catch {
      message.error('删除失败');
    }
  };

  const handleGenerate = async (values: { name?: string; role_type: string; background?: string }) => {
    try {
      setIsGenerating(true);
      setProgress(0);
      setProgressMessage('准备生成角色...');

      const client = new SSEPostClient(
        '/api/characters/generate-stream',
        {
          project_id: currentProject.id,
          name: values.name,
          role_type: values.role_type,
          background: values.background,
        },
        {
          onProgress: (msg, prog) => {
            setProgress(prog);
            setProgressMessage(msg);
          },
          onResult: (data) => {
            console.log('角色生成完成:', data);
          },
          onError: (error) => {
            message.error(`生成失败: ${error}`);
          },
          onComplete: () => {
            setProgress(100);
            setProgressMessage('生成完成！');
          }
        }
      );

      await client.connect();
      message.success('AI生成角色成功');
      Modal.destroyAll();
      await refreshCharacters();
    } catch (error: any) {
      message.error(error.message || 'AI生成失败');
    } finally {
      setTimeout(() => {
        setIsGenerating(false);
        setProgress(0);
        setProgressMessage('');
      }, 500);
    }
  };

  const handleGenerateOrganization = async (values: {
    name?: string;
    organization_type?: string;
    background?: string;
    requirements?: string;
  }) => {
    try {
      setIsGenerating(true);
      setProgress(0);
      setProgressMessage('准备生成组织...');

      const client = new SSEPostClient(
        '/api/organizations/generate-stream',
        {
          project_id: currentProject.id,
          name: values.name,
          organization_type: values.organization_type,
          background: values.background,
          requirements: values.requirements,
        },
        {
          onProgress: (msg, prog) => {
            setProgress(prog);
            setProgressMessage(msg);
          },
          onResult: (data) => {
            console.log('组织生成完成:', data);
          },
          onError: (error) => {
            message.error(`生成失败: ${error}`);
          },
          onComplete: () => {
            setProgress(100);
            setProgressMessage('生成完成！');
          }
        }
      );

      await client.connect();
      message.success('AI生成组织成功');
      Modal.destroyAll();
      await refreshCharacters();
    } catch (error: any) {
      message.error(error.message || 'AI生成失败');
    } finally {
      setTimeout(() => {
        setIsGenerating(false);
        setProgress(0);
        setProgressMessage('');
      }, 500);
    }
  };

  const handleCreateCharacter = async (values: any) => {
    try {
      const createData: any = {
        project_id: currentProject.id,
        name: values.name,
        is_organization: createType === 'organization',
      };

      if (createType === 'character') {
        // 角色字段
        createData.age = values.age;
        createData.gender = values.gender;
        createData.role_type = values.role_type || 'supporting';
        createData.personality = values.personality;
        createData.appearance = values.appearance;
        createData.relationships = values.relationships;
        createData.background = values.background;
      } else {
        // 组织字段
        createData.organization_type = values.organization_type;
        createData.organization_purpose = values.organization_purpose;
        createData.organization_members = values.organization_members;
        createData.background = values.background;
        createData.power_level = values.power_level;
        createData.location = values.location;
        createData.motto = values.motto;
        createData.color = values.color;
        createData.role_type = 'supporting'; // 组织默认为配角
      }

      await characterApi.createCharacter(createData);
      message.success(`${createType === 'character' ? '角色' : '组织'}创建成功`);
      setIsCreateModalOpen(false);
      createForm.resetFields();
      await refreshCharacters();
    } catch {
      message.error('创建失败');
    }
  };

  const handleEditCharacter = (character: Character) => {
    setEditingCharacter(character);
    editForm.setFieldsValue(character);
    setIsEditModalOpen(true);
  };

  const handleUpdateCharacter = async (values: CharacterUpdate) => {
    if (!editingCharacter) return;

    try {
      await characterApi.updateCharacter(editingCharacter.id, values);
      message.success('更新成功');
      setIsEditModalOpen(false);
      editForm.resetFields();
      setEditingCharacter(null);
      await refreshCharacters();
    } catch {
      message.error('更新失败');
    }
  };

  const handleDeleteCharacterWrapper = (id: string) => {
    handleDeleteCharacter(id);
  };

  const showGenerateModal = () => {
    modal.confirm({
      title: 'AI生成角色',
      width: 600,
      centered: true,
      content: (
        <Form form={generateForm} layout="vertical" style={{ marginTop: 16 }}>
          <Form.Item
            label="角色名称"
            name="name"
          >
            <Input placeholder="如：张三、李四（可选，AI会自动生成）" />
          </Form.Item>
          <Form.Item
            label="角色定位"
            name="role_type"
            rules={[{ required: true, message: '请选择角色定位' }]}
          >
            <Select placeholder="选择角色定位">
              <Select.Option value="protagonist">主角</Select.Option>
              <Select.Option value="supporting">配角</Select.Option>
              <Select.Option value="antagonist">反派</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label="背景设定" name="background">
            <TextArea rows={3} placeholder="简要描述角色背景和故事环境..." />
          </Form.Item>
        </Form>
      ),
      okText: '生成',
      cancelText: '取消',
      onOk: async () => {
        const values = await generateForm.validateFields();
        await handleGenerate(values);
      },
    });
  };

  const showGenerateOrgModal = () => {
    modal.confirm({
      title: 'AI生成组织',
      width: 600,
      centered: true,
      content: (
        <Form form={generateOrgForm} layout="vertical" style={{ marginTop: 16 }}>
          <Form.Item
            label="组织名称"
            name="name"
          >
            <Input placeholder="如：天剑门、黑龙会（可选，AI会自动生成）" />
          </Form.Item>
          <Form.Item
            label="组织类型"
            name="organization_type"
          >
            <Input placeholder="如：门派、帮派、公司、学院（可选，AI会根据世界观生成）" />
          </Form.Item>
          <Form.Item label="背景设定" name="background">
            <TextArea rows={3} placeholder="简要描述组织的背景和环境..." />
          </Form.Item>
          <Form.Item label="其他要求" name="requirements">
            <TextArea rows={2} placeholder="其他特殊要求..." />
          </Form.Item>
        </Form>
      ),
      okText: '生成',
      cancelText: '取消',
      onOk: async () => {
        const values = await generateOrgForm.validateFields();
        await handleGenerateOrganization(values);
      },
    });
  };

  const characterList = characters.filter(c => !c.is_organization);
  const organizationList = characters.filter(c => c.is_organization);

  const getDisplayList = () => {
    if (activeTab === 'character') return characterList;
    if (activeTab === 'organization') return organizationList;
    return characters;
  };

  const displayList = getDisplayList();

  const isMobile = window.innerWidth <= 768;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      {contextHolder}
      <div style={{
        position: 'sticky',
        top: 0,
        zIndex: 10,
        backgroundColor: 'var(--color-bg-container)',
        padding: isMobile ? '12px 0' : '16px 0',
        marginBottom: isMobile ? 12 : 16,
        borderBottom: '1px solid var(--color-border-secondary)',
        display: 'flex',
        flexDirection: isMobile ? 'column' : 'row',
        gap: isMobile ? 12 : 0,
        justifyContent: 'space-between',
        alignItems: isMobile ? 'stretch' : 'center'
      }}>
        <h2 style={{ margin: 0, fontSize: isMobile ? 18 : 24 }}>角色与组织管理</h2>
        <Space wrap>
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={() => {
              setCreateType('character');
              setIsCreateModalOpen(true);
            }}
            size={isMobile ? 'small' : 'middle'}
          >
            创建角色
          </Button>
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={() => {
              setCreateType('organization');
              setIsCreateModalOpen(true);
            }}
            size={isMobile ? 'small' : 'middle'}
          >
            创建组织
          </Button>
          <Button
            type="dashed"
            icon={<ThunderboltOutlined />}
            onClick={showGenerateModal}
            loading={isGenerating}
            size={isMobile ? 'small' : 'middle'}
          >
            AI生成角色
          </Button>
          <Button
            type="dashed"
            icon={<ThunderboltOutlined />}
            onClick={showGenerateOrgModal}
            loading={isGenerating}
            size={isMobile ? 'small' : 'middle'}
          >
            AI生成组织
          </Button>
        </Space>
      </div>

      {characters.length > 0 && (
        <div style={{
          position: 'sticky',
          top: isMobile ? 60 : 72,
          zIndex: 9,
          backgroundColor: 'var(--color-bg-container)',
          paddingBottom: 8,
          borderBottom: '1px solid var(--color-border-secondary)',
        }}>
          <Tabs
            activeKey={activeTab}
            onChange={(key) => setActiveTab(key as 'all' | 'character' | 'organization')}
            items={[
              {
                key: 'all',
                label: `全部 (${characters.length})`,
              },
              {
                key: 'character',
                label: (
                  <span>
                    <UserOutlined /> 角色 ({characterList.length})
                  </span>
                ),
              },
              {
                key: 'organization',
                label: (
                  <span>
                    <TeamOutlined /> 组织 ({organizationList.length})
                  </span>
                ),
              },
            ]}
          />
        </div>
      )}

      <div style={{ flex: 1, overflowY: 'auto' }}>
        {characters.length === 0 ? (
          <Empty description="还没有角色或组织，开始创建吧！" />
        ) : (
          <>
            <Row gutter={isMobile ? [8, 8] : characterGridConfig.gutter}>
              {activeTab === 'all' && (
                <>
                  {characterList.length > 0 && (
                    <>
                      <Col span={24}>
                        <Divider orientation="left">
                          <Title level={5} style={{ margin: 0 }}>
                            <UserOutlined style={{ marginRight: 8 }} />
                            角色 ({characterList.length})
                          </Title>
                        </Divider>
                      </Col>
                      {characterList.map((character) => (
                        <Col
                          xs={24}
                          sm={characterGridConfig.sm}
                          md={characterGridConfig.md}
                          lg={characterGridConfig.lg}
                          xl={characterGridConfig.xl}
                          key={character.id}
                          style={{ padding: isMobile ? '4px' : '8px' }}
                        >
                          <CharacterCard
                            character={character}
                            onEdit={handleEditCharacter}
                            onDelete={handleDeleteCharacterWrapper}
                          />
                        </Col>
                      ))}
                    </>
                  )}

                  {organizationList.length > 0 && (
                    <>
                      <Col span={24}>
                        <Divider orientation="left">
                          <Title level={5} style={{ margin: 0 }}>
                            <TeamOutlined style={{ marginRight: 8 }} />
                            组织 ({organizationList.length})
                          </Title>
                        </Divider>
                      </Col>
                      {organizationList.map((org) => (
                        <Col
                          xs={24}
                          sm={characterGridConfig.sm}
                          md={characterGridConfig.md}
                          lg={characterGridConfig.lg}
                          xl={characterGridConfig.xl}
                          key={org.id}
                          style={{ padding: isMobile ? '4px' : '8px' }}
                        >
                          <CharacterCard
                            character={org}
                            onEdit={handleEditCharacter}
                            onDelete={handleDeleteCharacterWrapper}
                          />
                        </Col>
                      ))}
                    </>
                  )}
                </>
              )}

              {activeTab === 'character' && characterList.map((character) => (
                <Col
                  xs={24}
                  sm={characterGridConfig.sm}
                  md={characterGridConfig.md}
                  lg={characterGridConfig.lg}
                  xl={characterGridConfig.xl}
                  key={character.id}
                  style={{ padding: isMobile ? '4px' : '8px' }}
                >
                  <CharacterCard
                    character={character}
                    onEdit={handleEditCharacter}
                    onDelete={handleDeleteCharacterWrapper}
                  />
                </Col>
              ))}

              {activeTab === 'organization' && organizationList.map((org) => (
                <Col
                  xs={24}
                  sm={characterGridConfig.sm}
                  md={characterGridConfig.md}
                  lg={characterGridConfig.lg}
                  xl={characterGridConfig.xl}
                  key={org.id}
                  style={{ padding: isMobile ? '4px' : '8px' }}
                >
                  <CharacterCard
                    character={org}
                    onEdit={handleEditCharacter}
                    onDelete={handleDeleteCharacterWrapper}
                  />
                </Col>
              ))}
            </Row>

            {displayList.length === 0 && (
              <Empty
                description={
                  activeTab === 'character'
                    ? '暂无角色'
                    : activeTab === 'organization'
                      ? '暂无组织'
                      : '暂无数据'
                }
              />
            )}
          </>
        )}
      </div>

      <Modal
        title={editingCharacter?.is_organization ? '编辑组织' : '编辑角色'}
        open={isEditModalOpen}
        onCancel={() => {
          setIsEditModalOpen(false);
          editForm.resetFields();
          setEditingCharacter(null);
        }}
        footer={null}
        centered={!isMobile}
        width={isMobile ? '100%' : 600}
        style={isMobile ? { top: 0, paddingBottom: 0, maxWidth: '100vw' } : undefined}
        styles={isMobile ? { body: { maxHeight: 'calc(100vh - 110px)', overflowY: 'auto' } } : undefined}
      >
        <Form form={editForm} layout="vertical" onFinish={handleUpdateCharacter}>
          <Row gutter={16}>
            <Col span={editingCharacter?.is_organization ? 24 : 12}>
              <Form.Item
                label={editingCharacter?.is_organization ? '组织名称' : '角色名称'}
                name="name"
                rules={[{ required: true, message: `请输入${editingCharacter?.is_organization ? '组织' : '角色'}名称` }]}
              >
                <Input placeholder={`输入${editingCharacter?.is_organization ? '组织' : '角色'}名称`} />
              </Form.Item>
            </Col>

            {!editingCharacter?.is_organization && (
              <Col span={12}>
                <Form.Item label="角色定位" name="role_type">
                  <Select>
                    <Select.Option value="protagonist">主角</Select.Option>
                    <Select.Option value="supporting">配角</Select.Option>
                    <Select.Option value="antagonist">反派</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
            )}
          </Row>

          {!editingCharacter?.is_organization && (
            <>
              <Row gutter={16}>
                <Col span={12}>
                  <Form.Item label="年龄" name="age">
                    <Input placeholder="如：25、30岁" />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="性别" name="gender">
                    <Select placeholder="选择性别">
                      <Select.Option value="男">男</Select.Option>
                      <Select.Option value="女">女</Select.Option>
                      <Select.Option value="其他">其他</Select.Option>
                    </Select>
                  </Form.Item>
                </Col>
              </Row>

              <Form.Item label="性格特点" name="personality">
                <TextArea rows={2} placeholder="描述角色的性格特点..." />
              </Form.Item>

              <Form.Item label="外貌描写" name="appearance">
                <TextArea rows={2} placeholder="描述角色的外貌特征..." />
              </Form.Item>

              <Form.Item label="人际关系" name="relationships">
                <TextArea rows={2} placeholder="描述角色与其他角色的关系..." />
              </Form.Item>
            </>
          )}

          {editingCharacter?.is_organization && (
            <>
              <Row gutter={16}>
                <Col span={12}>
                  <Form.Item
                    label="组织类型"
                    name="organization_type"
                    rules={[{ required: true, message: '请输入组织类型' }]}
                  >
                    <Input placeholder="如：帮派、公司、门派、学院" />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="主要成员" name="organization_members">
                    <Input placeholder="如：张三、李四、王五" />
                  </Form.Item>
                </Col>
              </Row>

              <Form.Item
                label="组织目的"
                name="organization_purpose"
                rules={[{ required: true, message: '请输入组织目的' }]}
              >
                <TextArea rows={2} placeholder="描述组织的宗旨和目标..." />
              </Form.Item>

              <Row gutter={16}>
                <Col span={12}>
                  <Form.Item label="所在地" name="location">
                    <Input placeholder="组织的主要活动区域或总部位置" />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="代表颜色" name="color">
                    <Input placeholder="如：深红色、金色、黑色等" />
                  </Form.Item>
                </Col>
              </Row>

              <Form.Item label="格言/口号" name="motto">
                <Input placeholder="组织的宗旨、格言或口号" />
              </Form.Item>
            </>
          )}

          <Form.Item label={editingCharacter?.is_organization ? '组织背景' : '角色背景'} name="background">
            <TextArea rows={3} placeholder={`描述${editingCharacter?.is_organization ? '组织' : '角色'}的背景故事...`} />
          </Form.Item>

          <Form.Item>
            <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
              <Button onClick={() => {
                setIsEditModalOpen(false);
                editForm.resetFields();
                setEditingCharacter(null);
              }}>
                取消
              </Button>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>

      {/* 手动创建角色/组织模态框 */}
      <Modal
        title={createType === 'character' ? '创建角色' : '创建组织'}
        open={isCreateModalOpen}
        onCancel={() => {
          setIsCreateModalOpen(false);
          createForm.resetFields();
        }}
        footer={null}
        centered={!isMobile}
        width={isMobile ? '100%' : 600}
        style={isMobile ? { top: 0, paddingBottom: 0, maxWidth: '100vw' } : undefined}
        styles={isMobile ? { body: { maxHeight: 'calc(100vh - 110px)', overflowY: 'auto' } } : undefined}
      >
        <Form form={createForm} layout="vertical" onFinish={handleCreateCharacter}>
          <Row gutter={16}>
            <Col span={createType === 'organization' ? 24 : 12}>
              <Form.Item
                label={createType === 'character' ? '角色名称' : '组织名称'}
                name="name"
                rules={[{ required: true, message: `请输入${createType === 'character' ? '角色' : '组织'}名称` }]}
              >
                <Input placeholder={`输入${createType === 'character' ? '角色' : '组织'}名称`} />
              </Form.Item>
            </Col>

            {createType === 'character' && (
              <Col span={12}>
                <Form.Item label="角色定位" name="role_type" initialValue="supporting">
                  <Select>
                    <Select.Option value="protagonist">主角</Select.Option>
                    <Select.Option value="supporting">配角</Select.Option>
                    <Select.Option value="antagonist">反派</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
            )}
          </Row>

          {createType === 'character' ? (
            <>
              <Row gutter={16}>
                <Col span={12}>
                  <Form.Item label="年龄" name="age">
                    <Input placeholder="如：25、30岁" />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="性别" name="gender">
                    <Select placeholder="选择性别">
                      <Select.Option value="男">男</Select.Option>
                      <Select.Option value="女">女</Select.Option>
                      <Select.Option value="其他">其他</Select.Option>
                    </Select>
                  </Form.Item>
                </Col>
              </Row>

              <Form.Item label="性格特点" name="personality">
                <TextArea rows={2} placeholder="描述角色的性格特点..." />
              </Form.Item>

              <Form.Item label="外貌描写" name="appearance">
                <TextArea rows={2} placeholder="描述角色的外貌特征..." />
              </Form.Item>

              <Form.Item label="人际关系" name="relationships">
                <TextArea rows={2} placeholder="描述角色与其他角色的关系..." />
              </Form.Item>

              <Form.Item label="角色背景" name="background">
                <TextArea rows={3} placeholder="描述角色的背景故事..." />
              </Form.Item>
            </>
          ) : (
            <>
              <Row gutter={16}>
                <Col span={12}>
                  <Form.Item
                    label="组织类型"
                    name="organization_type"
                    rules={[{ required: true, message: '请输入组织类型' }]}
                  >
                    <Input placeholder="如：帮派、公司、门派、学院" />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    label="势力等级"
                    name="power_level"
                    initialValue={50}
                    tooltip="0-100的数值，表示组织的影响力"
                  >
                    <InputNumber min={0} max={100} style={{ width: '100%' }} />
                  </Form.Item>
                </Col>
              </Row>

              <Form.Item
                label="组织目的"
                name="organization_purpose"
                rules={[{ required: true, message: '请输入组织目的' }]}
              >
                <TextArea rows={2} placeholder="描述组织的宗旨和目标..." />
              </Form.Item>

              <Form.Item label="主要成员" name="organization_members">
                <Input placeholder="如：张三、李四、王五" />
              </Form.Item>

              <Row gutter={16}>
                <Col span={12}>
                  <Form.Item label="所在地" name="location">
                    <Input placeholder="组织的主要活动区域或总部位置" />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item label="代表颜色" name="color">
                    <Input placeholder="如：深红色、金色、黑色等" />
                  </Form.Item>
                </Col>
              </Row>

              <Form.Item label="格言/口号" name="motto">
                <Input placeholder="组织的宗旨、格言或口号" />
              </Form.Item>

              <Form.Item label="组织背景" name="background">
                <TextArea rows={3} placeholder="描述组织的背景故事..." />
              </Form.Item>
            </>
          )}

          <Form.Item>
            <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
              <Button onClick={() => {
                setIsCreateModalOpen(false);
                createForm.resetFields();
              }}>
                取消
              </Button>
              <Button type="primary" htmlType="submit">
                创建
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>

      {/* SSE进度显示 */}
      <SSELoadingOverlay
        loading={isGenerating}
        progress={progress}
        message={progressMessage}
      />
    </div>
  );
}