import { useEffect, useState } from 'react';
import { Card, Table, Input, Button, Space, message, Modal, Tag, Spin, Form, Radio, InputNumber, DatePicker, ColorPicker, Pagination } from 'antd';
import { TeamOutlined, DeleteOutlined, EyeOutlined, StopOutlined, PlusOutlined } from '@ant-design/icons';
import QRCode from 'qrcode';
import { useNavigate } from 'react-router-dom';
import type { Color } from 'antd/es/color-picker';

interface CompanyData {
  companyName: string;
  serialCount: number;
  firstCreated: string;
  lastCreated: string;
  activeCount: number;
  status: 'active' | 'disabled';
}

function ManagePage() {
  const [companies, setCompanies] = useState<CompanyData[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedCompany, setSelectedCompany] = useState<any>(null);
  const [detailModalVisible, setDetailModalVisible] = useState(false);
  const [detailLoading, setDetailLoading] = useState(false);
  const [companyDetail, setCompanyDetail] = useState<any>(null);
  const [qrCodeModalVisible, setQrCodeModalVisible] = useState(false);
  const [qrCodeDataUrl, setQrCodeDataUrl] = useState<string>('');
  const [selectedSerial, setSelectedSerial] = useState<string>('');
  const [generateModalVisible, setGenerateModalVisible] = useState(false);
  const [generateLoading, setGenerateLoading] = useState(false);
  const [generateForm] = Form.useForm();
  const [qrColor, setQrColor] = useState<string>('#000000');
  const [generatedData, setGeneratedData] = useState<any>(null);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [total, setTotal] = useState(0);
  const navigate = useNavigate();

  useEffect(() => {
    loadCompanies();
  }, [searchTerm, page, pageSize]);

  const loadCompanies = async () => {
    setLoading(true);
    try {
      const token = localStorage.getItem('authToken');
      const headers: any = {
        'Content-Type': 'application/json',
      };
      if (token) {
        headers.Authorization = `Bearer ${token}`;
      }

      let url = '/api/companies';
      const params = new URLSearchParams();
      if (page > 1) params.append('page', String(page));
      if (pageSize !== 10) params.append('limit', String(pageSize));
      if (searchTerm) params.append('search', searchTerm);
      if (params.toString()) url += `?${params.toString()}`;

      const response = await fetch(url, { headers });
      
      if (!response.ok) {
        throw new Error(`请求失败: ${response.status}`);
      }
      
      const data = await response.json();

      if (data.data) {
        setCompanies(data.data);
        setTotal(data.pagination?.total || data.data.length);
      } else if (data.message) {
        setCompanies([]);
        setTotal(0);
      } else {
        throw new Error(data.error || '获取企业列表失败');
      }
    } catch (error: any) {
      console.error('Load companies error:', error);
      message.error(error.message || '加载企业列表失败');
      setCompanies([]);
      setTotal(0);
    } finally {
      setLoading(false);
    }
  };

  const handleViewDetail = async (company: CompanyData) => {
    setSelectedCompany(company);
    setDetailModalVisible(true);
    setDetailLoading(true);
    
    try {
      const token = localStorage.getItem('authToken');
      const headers: any = {
        'Content-Type': 'application/json',
      };
      if (token) {
        headers.Authorization = `Bearer ${token}`;
      }

      const response = await fetch(`/api/companies/${encodeURIComponent(company.companyName)}`, { headers });
      const data = await response.json();

      if (data.data) {
        setCompanyDetail(data.data);
      } else {
        throw new Error(data.error || '获取企业详情失败');
      }
    } catch (error: any) {
      message.error(error.message || '获取企业详情失败');
    } finally {
      setDetailLoading(false);
    }
  };

  const handleDelete = async (company: CompanyData) => {
    Modal.confirm({
      title: '确认删除',
      content: `确定要删除企业 "${company.companyName}" 吗？这将删除该企业的所有序列号！`,
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk: async () => {
        try {
          const token = localStorage.getItem('authToken');
          const headers: any = {
            'Content-Type': 'application/json',
          };
          if (token) {
            headers.Authorization = `Bearer ${token}`;
          }

          const response = await fetch(`/api/companies/${encodeURIComponent(company.companyName)}`, {
            method: 'DELETE',
            headers,
          });
          const data = await response.json();

          if (data.message) {
            message.success('删除成功');
            loadCompanies();
          } else {
            throw new Error(data.error || '删除失败');
          }
        } catch (error: any) {
          message.error(error.message || '删除失败');
        }
      },
    });
  };

  const handleRevoke = async (company: CompanyData) => {
    Modal.confirm({
      title: '确认吊销',
      content: `确定要吊销企业 "${company.companyName}" 吗？这将使该企业的所有序列号失效！`,
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk: async () => {
        try {
          const token = localStorage.getItem('authToken');
          const headers: any = {
            'Content-Type': 'application/json',
          };
          if (token) {
            headers.Authorization = `Bearer ${token}`;
          }

          const response = await fetch(`/api/companies/${encodeURIComponent(company.companyName)}/revoke`, {
            method: 'POST',
            headers,
          });
          const data = await response.json();

          if (data.message) {
            message.success('吊销成功');
            loadCompanies();
          } else {
            throw new Error(data.error || '吊销失败');
          }
        } catch (error: any) {
          message.error(error.message || '吊销失败');
        }
      },
    });
  };

  const handleViewQRCode = async (serialNumber: string) => {
    try {
      const baseUrl = window.location.origin;
      const queryUrl = `${baseUrl}/query?serial=${serialNumber}`;
      const qrCode = await QRCode.toDataURL(queryUrl);
      setQrCodeDataUrl(qrCode);
      setSelectedSerial(serialNumber);
      setQrCodeModalVisible(true);
    } catch (error) {
      message.error('生成二维码失败');
    }
  };

  const handleQuerySerial = (serialNumber: string) => {
    setQrCodeModalVisible(false);
    navigate(`/query?serial=${serialNumber}`);
  };

  const handleRevokeSerial = async (serialNumber: string) => {
    Modal.confirm({
      title: '确认吊销',
      content: `确定要吊销序列号 "${serialNumber}" 吗？`,
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk: async () => {
        try {
          const token = localStorage.getItem('authToken');
          const headers: any = {
            'Content-Type': 'application/json',
          };
          if (token) {
            headers.Authorization = `Bearer ${token}`;
          }

          const response = await fetch(`/api/serials/${encodeURIComponent(serialNumber)}/revoke`, {
            method: 'POST',
            headers,
          });
          const data = await response.json();

          if (data.message) {
            message.success('吊销成功');
            if (selectedCompany) {
              handleViewDetail(selectedCompany);
            }
          } else {
            throw new Error(data.error || '吊销失败');
          }
        } catch (error: any) {
          message.error(error.message || '吊销失败');
        }
      },
    });
  };

  const handleGenerate = async (values: any) => {
    setGenerateLoading(true);
    try {
      const token = localStorage.getItem('authToken');
      const headers: any = {
        'Content-Type': 'application/json',
      };
      if (token) {
        headers.Authorization = `Bearer ${token}`;
      }

      const payload = {
        companyName: values.companyName,
        quantity: values.quantity,
        validDays: values.validOption === 'days' ? values.validDays : undefined,
        serialPrefix: values.serialOption === 'custom' ? values.serialPrefix : undefined,
      };

      const response = await fetch('/api/serials/generate', {
        method: 'POST',
        headers,
        body: JSON.stringify(payload),
      });

      const data = await response.json();

      if (data.serials) {
        setGeneratedData(data);
        
        if (data.serials && data.serials.length > 0) {
          const baseUrl = window.location.origin;
          const queryUrl = `${baseUrl}/query?serial=${data.serials[0].serialNumber}`;
          const qrCode = await QRCode.toDataURL(queryUrl, {
            color: {
              dark: qrColor,
              light: '#ffffff',
            },
          });
          setQrCodeDataUrl(qrCode);
        }

        message.success('生成成功！');
        setGenerateSuccessModalVisible(true);
        loadCompanies();
      } else {
        throw new Error(data.error || '生成失败');
      }
    } catch (error: any) {
      message.error(error.message || '生成失败');
    } finally {
      setGenerateLoading(false);
    }
  };

  const handleDownloadQR = () => {
    const link = document.createElement('a');
    link.download = `qrcode-${generatedData?.serials?.[0]?.serialNumber}.png`;
    link.href = qrCodeDataUrl;
    link.click();
  };

  const handleViewQuery = () => {
    if (generatedData?.serials?.[0]?.serialNumber) {
      navigate(`/query?serial=${generatedData.serials[0].serialNumber}`);
      setGenerateSuccessModalVisible(false);
      generateForm.resetFields();
    }
  };

  const [generateSuccessModalVisible, setGenerateSuccessModalVisible] = useState(false);

  const colorPresets = [
    '#000000',
    '#165DFF',
    '#52C41A',
    '#FAAD14',
    '#FF4D4F',
    '#722ED1',
    '#EB2F96',
  ];

  const handlePageChange = (newPage: number, newPageSize: number) => {
    setPage(newPage);
    setPageSize(newPageSize);
  };

  const columns = [
    {
      title: '企业名称',
      dataIndex: 'companyName',
      key: 'companyName',
    },
    {
      title: '序列号数量',
      dataIndex: 'serialCount',
      key: 'serialCount',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => (
        <Tag color={status === 'active' ? 'green' : 'red'}>
          {status === 'active' ? '正常' : '已吊销'}
        </Tag>
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'firstCreated',
      key: 'firstCreated',
      render: (date: string) => new Date(date).toLocaleString('zh-CN'),
    },
    {
      title: '最后更新',
      dataIndex: 'lastCreated',
      key: 'lastCreated',
      render: (date: string) => new Date(date).toLocaleString('zh-CN'),
    },
    {
      title: '操作',
      key: 'actions',
      render: (_: any, record: CompanyData) => (
        <Space>
          <Button
            type="link"
            icon={<EyeOutlined />}
            onClick={() => handleViewDetail(record)}
          >
            查看
          </Button>
          <Button
            type="link"
            danger
            icon={<StopOutlined />}
            onClick={() => handleRevoke(record)}
          >
            吊销
          </Button>
          <Button
            type="link"
            danger
            icon={<DeleteOutlined />}
            onClick={() => handleDelete(record)}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <Card
        title={
          <Space>
            <TeamOutlined />
            <span>企业管理</span>
          </Space>
        }
        extra={
          <Space>
            <Input.Search
              placeholder="搜索企业"
              allowClear
              style={{ width: 200 }}
              onSearch={setSearchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              value={searchTerm}
            />
            <Button type="primary" icon={<PlusOutlined />} onClick={() => setGenerateModalVisible(true)}>
              生成序列号
            </Button>
          </Space>
        }
      >
        <Table
          columns={columns}
          dataSource={companies}
          rowKey="companyName"
          loading={loading}
          pagination={false}
        />
        <div style={{ marginTop: 16 }}>
          <Pagination
            current={page}
            pageSize={pageSize}
            total={total}
            onChange={handlePageChange}
            showSizeChanger={true}
            showTotal={() => `共计 ${total} 条记录`}
          />
        </div>
      </Card>

      <Modal
        title="企业详情"
        open={detailModalVisible}
        onCancel={() => setDetailModalVisible(false)}
        footer={null}
        width={800}
      >
        {detailLoading ? (
          <div style={{ textAlign: 'center', padding: '40px' }}>
            <Spin size="large" />
          </div>
        ) : companyDetail ? (
          <div>
            <p><strong>企业名称:</strong> {companyDetail.companyName}</p>
            <p><strong>序列号总数:</strong> {companyDetail.serialCount}</p>
            <p><strong>活跃序列号:</strong> {companyDetail.activeCount}</p>
            <p><strong>已吊销序列号:</strong> {companyDetail.disabledCount || 0}</p>
            <p><strong>已过期序列号:</strong> {companyDetail.expiredCount || 0}</p>
            
            {companyDetail.serials && companyDetail.serials.length > 0 && (
              <div style={{ marginTop: '16px' }}>
                <h4>序列号列表</h4>
                <Table
                  columns={[
                    { title: '序列号', dataIndex: 'serialNumber', key: 'serialNumber' },
                    {
                      title: '状态',
                      dataIndex: 'isActive',
                      key: 'isActive',
                      render: (isActive: boolean) => (
                        <Tag color={isActive ? 'green' : 'red'}>
                          {isActive ? '有效' : '已吊销'}
                        </Tag>
                                           ),
                    },
                    {
                      title: '有效期至',
                      dataIndex: 'validUntil',
                      key: 'validUntil',
                      render: (date: string) => new Date(date).toLocaleString('zh-CN'),
                    },
                    {
                      title: '操作',
                      key: 'actions',
                      render: (_: any, record: any) => (
                        <Space>
                          <Button
                            type="link"
                            size="small"
                            icon={<EyeOutlined />}
                            onClick={() => handleViewQRCode(record.serialNumber)}
                          >
                            查看二维码
                          </Button>
                          {record.isActive && (
                            <Button
                              type="link"
                              size="small"
                              danger
                              icon={<StopOutlined />}
                              onClick={() => handleRevokeSerial(record.serialNumber)}
                            >
                              吊销
                            </Button>
                          )}
                        </Space>
                      ),
                    },
                  ]}
                  dataSource={companyDetail.serials}
                  rowKey="serialNumber"
                  pagination={false}
                  size="small"
                />
              </div>
            )}
          </div>
        ) : null}
      </Modal>

      <Modal
        title="序列号二维码"
        open={qrCodeModalVisible}
        onCancel={() => setQrCodeModalVisible(false)}
        footer={null}
        width={400}
      >
        <div style={{ textAlign: 'center' }}>
          {qrCodeDataUrl && (
            <>
              <img src={qrCodeDataUrl} alt="QR Code" style={{ width: '200px', height: '200px', cursor: 'pointer' }} onClick={() => handleQuerySerial(selectedSerial)} />
              <p style={{ marginTop: '12px', fontFamily: 'monospace', fontSize: '16px', fontWeight: 'bold', color: '#165DFF' }}>{selectedSerial}</p>
              <p style={{ marginTop: '8px', fontSize: '12px', color: '#999' }}>点击二维码可查询序列号</p>
            </>
          )}
        </div>
      </Modal>

      <Modal
        title="生成企业序列号"
        open={generateModalVisible}
        onCancel={() => {
          setGenerateModalVisible(false);
          generateForm.resetFields();
        }}
        footer={null}
        width={600}
      >
        <Form
          form={generateForm}
          layout="vertical"
          onFinish={handleGenerate}
          initialValues={{
            serialOption: 'auto',
            quantity: 1,
            validOption: 'days',
            validDays: 365,
          }}
        >
          <Form.Item
            label="企业名称"
            name="companyName"
            rules={[{ required: true, message: '请输入企业名称' }]}
          >
            <Input placeholder="输入企业名称（如：浙江贝凡）" />
          </Form.Item>

          <Form.Item label="序列号设置" name="serialOption">
            <Radio.Group>
              <Radio value="auto">自动生成</Radio>
              <Radio value="custom">自定义前缀</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item
            noStyle
            shouldUpdate={(prevValues, currentValues) => prevValues.serialOption !== currentValues.serialOption}
          >
            {({ getFieldValue }) =>
              getFieldValue('serialOption') === 'custom' ? (
                <Form.Item
                  label="自定义前缀"
                  name="serialPrefix"
                  rules={[{ max: 10, message: '前缀不能超过10个字符' }]}
                >
                  <Input placeholder="输入自定义前缀（如：MYCOMPANY）" maxLength={10} />
                </Form.Item>
              ) : null
            }
          </Form.Item>

          <Form.Item label="有效期设置" name="validOption">
            <Radio.Group>
              <Radio value="days">按天数</Radio>
              <Radio value="date">按日期</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item
            noStyle
            shouldUpdate={(prevValues, currentValues) => prevValues.validOption !== currentValues.validOption}
          >
            {({ getFieldValue }) =>
              getFieldValue('validOption') === 'days' ? (
                <Form.Item
                  label="有效天数"
                  name="validDays"
                  rules={[{ required: true, message: '请输入有效天数' }]}
                >
                  <InputNumber min={1} max={3650} style={{ width: '100%' }} />
                </Form.Item>
              ) : (
                <Form.Item
                  label="有效期至"
                  name="validUntil"
                  rules={[{ required: true, message: '请选择有效期' }]}
                >
                  <DatePicker showTime style={{ width: '100%' }} />
                </Form.Item>
              )
            }
          </Form.Item>

          <Form.Item
            label="生成数量"
            name="quantity"
            rules={[{ required: true, message: '请输入生成数量' }]}
          >
            <InputNumber min={1} max={100} style={{ width: '100%' }} />
          </Form.Item>

          <Form.Item
            label="二维码颜色"
            name="qrColor"
            initialValue="#000000"
          >
            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
                {colorPresets.map((color) => (
                  <div
                    key={color}
                    onClick={() => setQrColor(color)}
                    style={{
                      width: '28px',
                      height: '28px',
                      backgroundColor: color,
                      border: qrColor === color ? '2px solid #165DFF' : '2px solid #d9d9d9',
                      borderRadius: '4px',
                      cursor: 'pointer',
                      transition: 'all 0.2s',
                    }}
                  />
                ))}
              </div>
              <ColorPicker
                value={qrColor}
                onChange={(color: Color) => {
                  const hexColor = color.toHexString();
                  setQrColor(hexColor);
                }}
              />
            </div>
          </Form.Item>

          <Form.Item>
            <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
              <Button onClick={() => setGenerateModalVisible(false)}>取消</Button>
              <Button type="primary" htmlType="submit" loading={generateLoading}>
                生成
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="生成成功"
        open={generateSuccessModalVisible}
        onCancel={() => setGenerateSuccessModalVisible(false)}
        footer={null}
        width={600}
      >
        {generatedData && (
          <div>
            <Space direction="vertical" style={{ width: '100%' }} size="middle">
              <div>
                <p><strong>企业名称:</strong> {generatedData.companyName || generatedData.serials?.[0]?.companyName}</p>
                <p><strong>生成数量:</strong> {generatedData.serials?.length || 0}</p>
                {generatedData.serials && generatedData.serials.length > 0 && (
                  <p><strong>有效期至:</strong> {new Date(generatedData.serials[0].validUntil).toLocaleString('zh-CN')}</p>
                )}
              </div>

              {qrCodeDataUrl && (
                <div style={{ textAlign: 'center' }}>
                  <img src={qrCodeDataUrl} alt="QR Code" style={{ width: '200px', height: '200px' }} />
                  {generatedData.serials && generatedData.serials.length > 0 && (
                    <p style={{ marginTop: '12px', fontFamily: 'monospace', fontSize: '16px', fontWeight: 'bold', color: '#165DFF' }}>{generatedData.serials[0].serialNumber}</p>
                  )}
                </div>
              )}

              <Space>
                <Button type="primary" onClick={handleViewQuery}>查询序列号</Button>
                <Button onClick={handleDownloadQR}>下载二维码</Button>
                <Button onClick={() => {
                  setGenerateSuccessModalVisible(false);
                  generateForm.resetFields();
                }}>生成新的序列号</Button>
              </Space>
            </Space>
          </div>
        )}
      </Modal>
    </div>
  );
}

export default ManagePage;