import { Card, Divider, Row, Col, Tag, Typography, Table } from 'antd';
import { useTranslation } from 'react-i18next';

const { Text } = Typography;

const StateFlowPage: React.FC = () => {
  const { t } = useTranslation('mdm/coding-system-state-flow');

  const flows = (t('flows', { returnObjects: true }) as unknown as Array<{
    action: string;
    lc: string;
    rt: string;
    note: string;
  }>) || [];

  const columns = [
    { title: t('flowAction'), dataIndex: 'action', key: 'action', width: 200 },
    { title: t('lcChange'), dataIndex: 'lc', key: 'lc' },
    { title: t('rtChange'), dataIndex: 'rt', key: 'rt' },
    { title: t('note'), dataIndex: 'note', key: 'note' },
  ];

  return (
    <Card title={t('title')}>
      <div style={{ marginBottom: 16 }}>
        <Text type="secondary">{t('stateModelDesc')}</Text>
      </div>

      <Row gutter={24} style={{ marginBottom: 24 }}>
        <Col span={12}>
          <Card title={t('runtimeStatus')} size="small">
            <div style={{ textAlign: 'center' }}>
              <Tag color="blue" style={{ fontSize: 16, padding: '8px 20px' }}>
                草稿/新建
              </Tag>
              <div style={{ margin: '12px 0', color: '#8c8c8c' }}>↓ 审批通过</div>
              <Tag color="success" style={{ fontSize: 16, padding: '8px 20px' }}>
                启用
              </Tag>
              <div style={{ margin: '12px 0', color: '#8c8c8c' }}>↕ 冻结/解冻</div>
              <Tag color="default" style={{ fontSize: 16, padding: '8px 20px' }}>
                冻结
              </Tag>
              <div style={{ margin: '12px 0', color: '#8c8c8c' }}>↓ 注销审批通过</div>
              <Tag color="error" style={{ fontSize: 16, padding: '8px 20px' }}>
                已注销 <Text type="danger" style={{ fontSize: 12 }}>（不可恢复）</Text>
              </Tag>
            </div>
          </Card>
        </Col>
        <Col span={12}>
          <Card title={t('governanceStatus')} size="small">
            <div style={{ textAlign: 'center' }}>
              <Tag color="blue" style={{ fontSize: 16, padding: '8px 20px' }}>
                草稿
              </Tag>
              <div style={{ margin: '12px 0', color: '#8c8c8c' }}>↓ 提交审批</div>
              <Tag color="warning" style={{ fontSize: 16, padding: '8px 20px' }}>
                待审批
              </Tag>
              <div
                style={{
                  margin: '8px 0',
                  display: 'flex',
                  justifyContent: 'center',
                  gap: 40,
                  fontSize: 12,
                  color: '#8c8c8c',
                }}
              >
                <span>← 拒绝</span>
                <span>通过 ↓</span>
              </div>
              <Tag color="success" style={{ fontSize: 16, padding: '8px 20px' }}>
                启用
              </Tag>
              <div style={{ margin: '12px 0', color: '#8c8c8c' }}>↓ 注销审批通过</div>
              <Tag color="error" style={{ fontSize: 16, padding: '8px 20px' }}>
                已撤销 <Text type="danger" style={{ fontSize: 12 }}>（不可恢复）</Text>
              </Tag>
            </div>
          </Card>
        </Col>
      </Row>

      <Divider orientation="left">{t('dualStateRelation')}</Divider>
      <Table
        columns={columns}
        dataSource={flows.map((item, i) => ({ ...item, key: i }))}
        size="small"
        pagination={false}
      />

      <div style={{ marginTop: 24 }}>
        <Text type="secondary">{t('stateModelDesc')}</Text>
      </div>
    </Card>
  );
};

export default StateFlowPage;