import React, { useState, useEffect } from 'react';
import { Card, Button, Table, Space, Modal, Form, Input, Select, InputNumber, Tag, Steps, message, Popconfirm, Drawer, List, Checkbox, Radio, Empty, Spin, Typography, Row, Col } from 'antd';
import { PlusOutlined, CopyOutlined, EditOutlined, DeleteOutlined, EyeOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
import apiClient from '../../utils/request';
import { useLanguageStore } from '../../store/languageStore';

const { Title, Text, Paragraph } = Typography;
const { Option } = Select;
const { TextArea } = Input;

interface PhaseItem {
  order: number;
  name: string;
  key?: string;
  type: 'serial' | 'parallel';
  depends: number[];
  sub_items: string[];
}

interface Template {
  id: number;
  name: string;
  description: string;
  phases: PhaseItem[];
  is_system: boolean;
  created_at: string;
}

const ProcessTemplates: React.FC = () => {
  const { t, currentLanguage } = useLanguageStore();
  const [templates, setTemplates] = useState<Template[]>([]);
  const [loading, setLoading] = useState(false);
  const [createModalVisible, setCreateModalVisible] = useState(false);
  const [viewDrawerVisible, setViewDrawerVisible] = useState(false);
  const [currentTemplate, setCurrentTemplate] = useState<Template | null>(null);
  const [currentStep, setCurrentStep] = useState(0);
  const [form] = Form.useForm();
  const [phases, setPhases] = useState<PhaseItem[]>([]);
  const [phaseDrawerVisible, setPhaseDrawerVisible] = useState(false);
  const [editingPhaseIndex, setEditingPhaseIndex] = useState<number>(-1);
  const [phaseForm] = Form.useForm();
  const [editingTemplateId, setEditingTemplateId] = useState<number | null>(null);

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

  const fetchTemplates = async () => {
    setLoading(true);
    try {
      const res = await apiClient.get('/process-templates');
      if (res.data.success) setTemplates(res.data.data);
    } catch (e) { message.error(t('processTemplate.getListFailed')); }
    finally { setLoading(false); }
  };

  const handleCreate = () => {
    form.resetFields();
    setPhases([]);
    setCurrentStep(0);
    setEditingTemplateId(null);
    setCreateModalVisible(true);
  };

  const handleEdit = (template: Template) => {
    form.setFieldsValue({ name: template.name, description: template.description });
    setPhases(template.phases || []);
    setCurrentStep(0);
    setEditingTemplateId(template.id);
    setCreateModalVisible(true);
  };

  const handleCopy = async (template: Template) => {
    try {
      await apiClient.post(`/process-templates/${template.id}/copy`, { name: `${template.name} (副本)` });
      message.success(t('processTemplate.copySuccess'));
      fetchTemplates();
    } catch (e) { message.error(t('processTemplate.copyFailed')); }
  };

  const handleDelete = async (id: number) => {
    try {
      await apiClient.delete(`/process-templates/${id}`);
      message.success(t('processTemplate.deleteSuccess'));
      fetchTemplates();
    } catch (e) { message.error(t('processTemplate.deleteFailed')); }
  };

  const handleView = (template: Template) => {
    setCurrentTemplate(template);
    setViewDrawerVisible(true);
  };

  const handleSaveTemplate = async () => {
    try {
      const name = form.getFieldValue('name');
      const description = form.getFieldValue('description');
      if (!name) { message.warning(t('processTemplate.nameRequired')); setCurrentStep(0); return; }
      if (phases.length === 0) { message.warning(t('processTemplate.phaseRequired')); setCurrentStep(1); return; }
      if (editingTemplateId) {
        await apiClient.put(`/process-templates/${editingTemplateId}`, { name, description, phases });
        message.success(t('processTemplate.updateSuccess'));
      } else {
        await apiClient.post('/process-templates', { name, description, phases });
        message.success(t('processTemplate.createSuccess'));
      }
      setCreateModalVisible(false);
      setEditingTemplateId(null);
      fetchTemplates();
    } catch (e) { message.error(t('common.saveFailed')); }
  };

  const addPhase = () => {
    setEditingPhaseIndex(-1);
    phaseForm.resetFields();
    phaseForm.setFieldsValue({ name: '', type: 'serial', sub_items_text: '', depends: [] });
    setPhaseDrawerVisible(true);
  };

  const editPhase = (index: number) => {
    setEditingPhaseIndex(index);
    const p = phases[index];
    phaseForm.setFieldsValue({
      name: p.name,
      type: p.type,
      sub_items_text: (p.sub_items || []).join('\n'),
      depends: p.depends.map(d => d),
    });
    setPhaseDrawerVisible(true);
  };

  const savePhase = () => {
    const values = phaseForm.getFieldsValue();
    const subItems = (values.sub_items_text || '').split('\n').map((s: string) => s.trim()).filter(Boolean);
    const phaseData: PhaseItem = {
      order: 0,
      name: values.name,
      type: values.type || 'serial',
      depends: values.depends || [],
      sub_items: subItems,
    };
    if (!phaseData.name) { message.warning(t('processTemplate.phaseNameEmpty')); return; }
    const newPhases = [...phases];
    if (editingPhaseIndex >= 0) {
      phaseData.order = newPhases[editingPhaseIndex].order;
      newPhases[editingPhaseIndex] = phaseData;
    } else {
      phaseData.order = newPhases.length + 1;
      newPhases.push(phaseData);
    }
    setPhases(newPhases);
    setPhaseDrawerVisible(false);
  };

  const removePhase = (index: number) => {
    const newPhases = phases.filter((_, i) => i !== index).map((p, i) => ({ ...p, order: i + 1 }));
    setPhases(newPhases);
  };

  const movePhase = (index: number, direction: 'up' | 'down') => {
    const newPhases = [...phases];
    const targetIndex = direction === 'up' ? index - 1 : index + 1;
    if (targetIndex < 0 || targetIndex >= newPhases.length) return;
    [newPhases[index], newPhases[targetIndex]] = [newPhases[targetIndex], newPhases[index]];
    newPhases.forEach((p, i) => p.order = i + 1);
    setPhases(newPhases);
  };

  const getTypeTag = (type: string) => type === 'parallel' ? <Tag color="blue">{t('processTemplate.parallelLabel')}</Tag> : <Tag color="green">{t('processTemplate.serialLabel')}</Tag>;

  const getDependsNames = (depends: number[]) => {
    return depends.map(d => {
      const p = phases.find(ph => ph.order === d);
      return p ? p.name : `阶段${d}`;
    }).join('、') || '无';
  };

  const columns = [
    { title: t('processTemplate.templateName'), dataIndex: 'name', key: 'name', render: (text: string, r: Template) => <Space>{text}{r.is_system && <Tag color="gold">{t('processTemplate.systemPreset')}</Tag>}</Space> },
    { title: t('processTemplate.phaseCount'), key: 'phases', render: (_: unknown, r: Template) => r.phases?.length || 0 },
    { title: t('processTemplate.desc'), dataIndex: 'description', key: 'description', ellipsis: true },
    { title: t('processTemplate.action'), key: 'action', render: (_: unknown, r: Template) => (
      <Space>
        <Button size="small" icon={<EyeOutlined />} onClick={() => handleView(r)}>{t('common.view')}</Button>
        <Button size="small" type="primary" icon={<EditOutlined />} onClick={() => handleEdit(r)}>{t('common.edit')}</Button>
        <Button size="small" icon={<CopyOutlined />} onClick={() => handleCopy(r)}>{t('processTemplate.copy')}</Button>
        {!r.is_system && <Popconfirm title={t('processTemplate.confirmDelete')} onConfirm={() => handleDelete(r.id)}><Button size="small" danger icon={<DeleteOutlined />}>{t('processTemplate.delete')}</Button></Popconfirm>}
      </Space>
    )},
  ];

  return (
    <div style={{ padding: 24 }}>
      <Card title={t('processTemplate.title')} extra={<Button type="primary" icon={<PlusOutlined />} onClick={handleCreate}>{t('processTemplate.newTemplate')}</Button>}>
        <Table columns={columns} dataSource={templates} rowKey="id" loading={loading} pagination={false} />
      </Card>

      <Modal title={editingTemplateId ? t('processTemplate.editTemplate') : t('processTemplate.newTemplate')} open={createModalVisible} onCancel={() => setCreateModalVisible(false)} width={800} footer={[
        <Button key="cancel" onClick={() => setCreateModalVisible(false)}>{t('processTemplate.cancel')}</Button>,
        currentStep > 0 && <Button key="prev" onClick={() => setCurrentStep(currentStep - 1)}>{t('processTemplate.prev')}</Button>,
        currentStep < 2 && <Button key="next" type="primary" onClick={() => {
          if (currentStep === 0 && !form.getFieldValue('name')) { message.warning(t('processTemplate.nameRequired')); return; }
          setCurrentStep(currentStep + 1);
        }}>{t('processTemplate.next')}</Button>,
        currentStep === 2 && <Button key="save" type="primary" onClick={handleSaveTemplate}>{editingTemplateId ? t('processTemplate.saveEdit') : t('processTemplate.confirmCreate')}</Button>,
      ]}>
        <Steps current={currentStep} size="small" style={{ marginBottom: 24 }}>
          <Steps.Step title={t('processTemplate.basicInfo')} />
          <Steps.Step title={t('processTemplate.designPhase')} />
          <Steps.Step title={t('processTemplate.preview')} />
        </Steps>

        {currentStep === 0 && (
          <Form form={form} layout="vertical">
            <Form.Item name="name" label={t('processTemplate.templateName')} rules={[{ required: true }]}>
              <Input placeholder={t('processTemplate.namePlaceholder')} />
            </Form.Item>
            <Form.Item name="description" label={t('processTemplate.templateDescription')}>
              <TextArea rows={3} placeholder={t('processTemplate.descPlaceholder')} />
            </Form.Item>
          </Form>
        )}

        {currentStep === 1 && (
          <div>
            {phases.length === 0 ? <Empty description={t('processTemplate.noPhase')} /> : (
              <List bordered dataSource={phases} renderItem={(phase, index) => (
                <List.Item actions={[
                  <Button size="small" icon={<EditOutlined />} onClick={() => editPhase(index)}>{t('common.edit')}</Button>,
                  <Button size="small" icon={<ArrowUpOutlined />} onClick={() => movePhase(index, 'up')} disabled={index === 0} />,
                  <Button size="small" icon={<ArrowDownOutlined />} onClick={() => movePhase(index, 'down')} disabled={index === phases.length - 1} />,
                  <Popconfirm title={t('processTemplate.confirmDelete')} onConfirm={() => removePhase(index)}><Button size="small" danger icon={<DeleteOutlined />} /></Popconfirm>,
                ]}>
                  <List.Item.Meta
                    title={<Space>{phase.order}. {phase.name} {getTypeTag(phase.type)} <Text type="secondary">{t('processTemplate.dependencyLabel')}{getDependsNames(phase.depends)}</Text></Space>}
                    description={phase.sub_items?.length > 0 ? `子项：${phase.sub_items.join('、')}` : t('processTemplate.emptySubItems')}
                  />
                </List.Item>
              )} />
            )}
            <Button type="dashed" block icon={<PlusOutlined />} style={{ marginTop: 16 }} onClick={addPhase}>{t('processTemplate.addPhase')}</Button>
          </div>
        )}

        {currentStep === 2 && (
          <div>
            <Title level={5}>{form.getFieldValue('name')}</Title>
            <Paragraph type="secondary">{form.getFieldValue('description')}</Paragraph>
            <List bordered dataSource={phases} renderItem={(phase) => (
              <List.Item>
                <List.Item.Meta
                  title={<Space>{phase.order}. {phase.name} {getTypeTag(phase.type)}</Space>}
                  description={<>
                    <Text type="secondary">{t('processTemplate.dependencyLabel')}{getDependsNames(phase.depends)}</Text><br />
                    {phase.sub_items?.length > 0 && <Text>子项：{phase.sub_items.join('、')}</Text>}
                  </>}
                />
              </List.Item>
            )} />
          </div>
        )}
      </Modal>

      <Drawer title={t('processTemplate.phaseEdit')} open={phaseDrawerVisible} onClose={() => setPhaseDrawerVisible(false)} width={400} extra={<Button type="primary" onClick={savePhase}>{t('processTemplate.save')}</Button>}>
        <Form form={phaseForm} layout="vertical">
          <Form.Item name="name" label={t('processTemplate.phaseName')} rules={[{ required: true }]}>
            <Input placeholder={t('processTemplate.phaseNamePlaceholder')} />
          </Form.Item>
          <Form.Item name="type" label={t('processTemplate.phaseType')}>
            <Radio.Group>
              <Radio value="serial">{t('processTemplate.serial')}</Radio>
              <Radio value="parallel">{t('processTemplate.parallel')}</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item name="depends" label={t('processTemplate.dependency')}>
            <Checkbox.Group>
              {phases.filter((_, i) => i !== editingPhaseIndex).map(p => (
                <Checkbox key={p.order} value={p.order} style={{ display: 'block' }}>{p.order}. {p.name}</Checkbox>
              ))}
            </Checkbox.Group>
          </Form.Item>
          <Form.Item name="sub_items_text" label={t('processTemplate.subItems')}>
            <TextArea rows={6} placeholder={t('processTemplate.subItemsPlaceholder')} />
          </Form.Item>
        </Form>
      </Drawer>

      <Drawer title={currentTemplate?.name} open={viewDrawerVisible} onClose={() => setViewDrawerVisible(false)} width={500}>
        {currentTemplate && (
          <div>
            <Paragraph type="secondary">{currentTemplate.description}</Paragraph>
            <List bordered dataSource={currentTemplate.phases || []} renderItem={(phase: PhaseItem) => (
              <List.Item>
                <List.Item.Meta
                  title={<Space>{phase.order}. {phase.name} {phase.type === 'parallel' ? <Tag color="blue">{t('processTemplate.parallelLabel')}</Tag> : <Tag color="green">{t('processTemplate.serialLabel')}</Tag>}</Space>}
                  description={<>
                    <Text type="secondary">{t('processTemplate.dependencyLabelShort')}{'阶段'}{phase.depends?.join('、') || '无'}</Text><br />
                    {phase.sub_items?.length > 0 && <Text>子项：{phase.sub_items.join('、')}</Text>}
                  </>}
                />
              </List.Item>
            )} />
          </div>
        )}
      </Drawer>
    </div>
  );
};

export default ProcessTemplates;