import React, { useEffect, useState } from 'react';
import {
  Button, Card, Space, Table, Tag, Typography, message, Modal, Form, Input, InputNumber, Upload,
} from 'antd';
import {
  HistoryOutlined, ReloadOutlined, PlusOutlined, UploadOutlined, EyeOutlined, EditOutlined, DeleteOutlined,
} from '@ant-design/icons';
import { getOpenTypeList, getOpenType, createOpenType, updateOpenType, deleteOpenType, uploadImage } from '../api';
import { formatDate } from '../utils/formatDate';

interface OpenType {
  id: string;
  openType: number;
  typeName: string;
  description: string;
  thumb?: string;
  createdAt: string;
  updatedAt: string;
}

const normalizeUploadError = (e: unknown): Error => {
  if (e instanceof Error) {
    return e;
  }

  if (typeof e === 'string') {
    return new Error(e);
  }

  return new Error('上传失败');
};

const assertUploadFile = (file: unknown): File => {
  if (file instanceof File) {
    return file;
  }

  throw new Error('请选择有效图片文件');
};

const AdminPlatform: React.FC = () => {
  const [openTypes, setOpenTypes] = useState<OpenType[]>([]);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(20);

  const [createModalVisible, setCreateModalVisible] = useState(false);
  const [detailModalVisible, setDetailModalVisible] = useState(false);
  const [updateModalVisible, setUpdateModalVisible] = useState(false);
  const [currentOpenType, setCurrentOpenType] = useState<OpenType | null>(null);
  const [createThumbUrl, setCreateThumbUrl] = useState('');
  const [updateThumbUrl, setUpdateThumbUrl] = useState('');

  const [createForm] = Form.useForm();
  const [updateForm] = Form.useForm();

  const load = async (p?: number, ps?: number) => {
    setLoading(true);
    try {
      const res = await getOpenTypeList({
        page: p || page,
        page_size: ps || pageSize,
      });
      setOpenTypes(res.data || []);
      setTotal(res.pagination.total || 0);
    } catch {
      message.error('加载开户方式列表失败');
    } finally {
      setLoading(false);
    }
  };

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

  const handleCreate = async () => {
    try {
      const values = await createForm.validateFields();
      const thumbUrl = createThumbUrl;
      const thumbPath = thumbUrl.startsWith('http') ? thumbUrl.replace(/^https?:\/\/[^/]+/, '') : thumbUrl;
      await createOpenType({
        open_type: values.open_type,
        type_name: values.type_name,
        description: values.description,
        thumb: thumbPath,
      });
      message.success('创建成功');
      setCreateModalVisible(false);
      createForm.resetFields();
      setCreateThumbUrl('');
      load();
    } catch (e: any) {
      message.error(e?.message || '创建失败');
    }
  };

  const handleDetail = async (id: string) => {
    try {
      const openType = await getOpenType(id);
      setCurrentOpenType(openType.data || {});
      setDetailModalVisible(true);
    } catch (e: any) {
      message.error(e?.message || '获取详情失败');
    }
  };

  const handleUpdate = async (id: string) => {
    try {
      const openType = await getOpenType(id);
      const thumb = openType.data?.thumb || '';
      const baseUrl = import.meta.env.VITE_API_BASE || 'http://localhost:8000';
      const fullThumbUrl = thumb.startsWith('http') ? thumb : `${baseUrl}${thumb}`;
      setCurrentOpenType(openType.data || {});
      setUpdateThumbUrl(fullThumbUrl);
      setUpdateModalVisible(true);
    } catch (e: any) {
      message.error(e?.message || '获取详情失败');
    }
  };
  
  const handleSaveUpdate = async () => {
    if (!currentOpenType) return;
    try {
      const values = await updateForm.validateFields();
      const thumbUrl = updateThumbUrl;
      const thumbPath = thumbUrl.startsWith('http') ? thumbUrl.replace(/^https?:\/\/[^/]+/, '') : thumbUrl;
      await updateOpenType(currentOpenType.id, {
        open_type: values.open_type,
        type_name: values.type_name,
        description: values.description,
        thumb: thumbPath,
      });
      message.success('更新成功');
      setUpdateModalVisible(false);
      updateForm.resetFields();
      setCurrentOpenType(null);
      setUpdateThumbUrl('');
      load();
    } catch (e: any) {
      message.error(e?.message || '更新失败');
    }
  };

  const handleDelete = (id: string) => {
    Modal.confirm({
      title: '确认删除',
      content: '确定要删除这个开户方式吗？',
      okText: '删除',
      okType: 'danger',
      cancelText: '取消',
      onOk: async () => {
        try {
          await deleteOpenType(id);
          message.success('删除成功');
          load();
        } catch (e: any) {
          message.error(e?.message || '删除失败');
        }
      },
    });
  };

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      width: 100,
      render: (v: string) => <Typography.Text>{v}</Typography.Text>,
    },
    {
      title: '开户类型',
      dataIndex: 'openType',
      width: 100,
      render: (v: number) => <Typography.Text>{v}</Typography.Text>,
    },
    {
      title: '类型名称',
      dataIndex: 'typeName',
      width: 150,
      render: (v: string) => <Typography.Text strong>{v}</Typography.Text>,
    },
    {
      title: '描述',
      dataIndex: 'description',
      width: 250,
      ellipsis: true,
      render: (v: string) => (
        <Typography.Text type="secondary" style={{ fontSize: 12 }}>
          {v}
        </Typography.Text>
      ),
    },
    {
      title: '缩略图',
      dataIndex: 'thumb',
      width: 120,
      render: (v: string) => {
        if (!v) return '-';
        const baseUrl = import.meta.env.VITE_API_BASE || 'http://localhost:8000';
        const fullUrl = v.startsWith('http') ? v : `${baseUrl}${v}`;
        return <img src={fullUrl} alt="thumb" style={{ width: 80, height: 60, objectFit: 'cover' }} />;
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      width: 160,
      render: (v: string) => (
        <Typography.Text type="secondary" style={{ fontSize: 12 }}>
          {formatDate(v)}
        </Typography.Text>
      ),
    },
    {
      title: '更新时间',
      dataIndex: 'updatedAt',
      width: 160,
      render: (v: string) => (
        <Typography.Text type="secondary" style={{ fontSize: 12 }}>
          {formatDate(v)}
        </Typography.Text>
      ),
    },
    {
      title: '操作',
      width: 240,
      render: (_: any, record: OpenType) => (
        <Space>
          <Button
            icon={<EyeOutlined />}
            size="small"
            onClick={() => handleDetail(record.id)}
          >
            详情
          </Button>
          <Button
            icon={<EditOutlined />}
            size="small"
            onClick={() => handleUpdate(record.id)}
          >
            更新
          </Button>
          <Button
            icon={<DeleteOutlined />}
            size="small"
            danger
            onClick={() => handleDelete(record.id)}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <Card variant="outlined" style={{ borderRadius: 12, border: '1px solid #f0f0f5' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
          <Space>
            <HistoryOutlined style={{ fontSize: 18, color: '#6366f1' }} />
            <Typography.Text strong style={{ fontSize: 16 }}>平台开户方式管理</Typography.Text>
          </Space>
          <Space>
            <Button type="primary" icon={<PlusOutlined />} onClick={() => setCreateModalVisible(true)}>
              新增
            </Button>
            <Button icon={<ReloadOutlined />} onClick={() => load()}>
              刷新
            </Button>
          </Space>
        </div>
        <Table
          columns={columns}
          dataSource={openTypes}
          rowKey="id"
          loading={loading}
          pagination={{
            current: page,
            pageSize,
            total,
            showTotal: (t) => `共 ${t} 条记录`,
            onChange: (p, ps) => {
              setPage(p);
              setPageSize(ps);
              load(p, ps);
            },
          }}
          scroll={{ x: 1000 }}
        />
      </Card>

      <Modal
        title="新增开户方式"
        open={createModalVisible}
        onOk={handleCreate}
        onCancel={() => {
          setCreateModalVisible(false);
          createForm.resetFields();
          setCreateThumbUrl('');
        }}
        mask={{ closable: false }}
        okText="创建"
        cancelText="取消"
        width={600}
      >
        <Form form={createForm} layout="vertical">
          <div style={{ display: 'flex', gap: 16 }}>
            <Form.Item
              name="open_type"
              label="开户方式Id"
              style={{ flex: 1 }}
              rules={[{ required: true, message: '请输入开户方式Id' }]}
            >
              <InputNumber style={{ width: '100%' }} min={1} placeholder="请输入开户方式Id" />
            </Form.Item>
            <Form.Item
              name="type_name"
              label="类型名称"
              style={{ flex: 1 }}
              rules={[
                { required: true, message: '请输入类型名称' },
                { max: 100, message: '类型名称不能超过100个字符' },
              ]}
            >
              <Input style={{ width: '100%' }} placeholder="请输入类型名称" />
            </Form.Item>
          </div>

          <Form.Item
            name="description"
            label="描述"
            rules={[{ required: true, message: '请输入描述' }]}
          >
            <Input.TextArea placeholder="请输入描述" rows={4} />
          </Form.Item>
          <Form.Item label="缩略图">
            <Upload
              listType="picture-card"
              fileList={createThumbUrl ? [{ uid: '1', name: 'thumb', status: 'done', url: createThumbUrl }] : []}
              customRequest={async ({ file, onSuccess, onError }) => {
                try {
                  const uploadFile = assertUploadFile(file);
                  const res = await uploadImage(uploadFile);
                  const baseUrl = import.meta.env.VITE_API_BASE || 'http://localhost:8000';
                  const fullUrl = res.url.startsWith('http') ? res.url : `${baseUrl}${res.url}`;
                  setCreateThumbUrl(fullUrl);
                  onSuccess?.({ url: fullUrl });
                } catch (e) {
                  onError?.(normalizeUploadError(e));
                }
              }}
              onRemove={() => setCreateThumbUrl('')}
            >
              {!createThumbUrl && (
                <div>
                  <UploadOutlined style={{ fontSize: 24, color: '#999' }} />
                  <div style={{ marginTop: 8 }}>上传图片</div>
                </div>
              )}
            </Upload>
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="开户方式详情"
        open={detailModalVisible}
        onOk={() => setDetailModalVisible(false)}
        onCancel={() => {
          setDetailModalVisible(false);
          setCurrentOpenType(null);
        }}
        mask={{ closable: false }}
        okText="关闭"
        cancelText="取消"
        width={520}
      >
        {currentOpenType && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 16, background: '#f8fafc', borderRadius: 8 }}>
              <div style={{
                width: 80, height: 60, borderRadius: 6, overflow: 'hidden',
                background: currentOpenType.thumb ? 'transparent' : '#e2e8f0',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                {currentOpenType.thumb ? (
                  <img
                    src={currentOpenType.thumb.startsWith('http') ? currentOpenType.thumb : `${import.meta.env.VITE_API_BASE || 'http://localhost:8000'}${currentOpenType.thumb}`}
                    alt="thumb"
                    style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                  />
                ) : (
                  <Typography.Text type="secondary" style={{ fontSize: 12 }}>暂无图片</Typography.Text>
                )}
              </div>
              <div>
                <div style={{ fontSize: 16, fontWeight: 600 }}>{currentOpenType.typeName}</div>
                <div style={{ fontSize: 12, color: '#64748b', marginTop: 4 }}>开户类型: {currentOpenType.openType}</div>
              </div>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ display: 'flex', gap: 12 }}>
                <Typography.Text type="secondary" style={{ width: 80, flexShrink: 0 }}>ID</Typography.Text>
                <Typography.Text>{currentOpenType.id}</Typography.Text>
              </div>
              <div style={{ display: 'flex', gap: 12 }}>
                <Typography.Text type="secondary" style={{ width: 80, flexShrink: 0 }}>开户类型</Typography.Text>
                <Typography.Text>{currentOpenType.openType}</Typography.Text>
              </div>
              <div style={{ display: 'flex', gap: 12 }}>
                <Typography.Text type="secondary" style={{ width: 80, flexShrink: 0 }}>类型名称</Typography.Text>
                <Typography.Text>{currentOpenType.typeName}</Typography.Text>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                <Typography.Text type="secondary" style={{ width: 80 }}>描述</Typography.Text>
                <div style={{ padding: 12, background: '#f8fafc', borderRadius: 6, fontSize: 13, lineHeight: 1.6 }}>
                  {currentOpenType.description || '-'}
                </div>
              </div>
              <div style={{ display: 'flex', gap: 12 }}>
                <Typography.Text type="secondary" style={{ width: 80, flexShrink: 0 }}>创建时间</Typography.Text>
                <Typography.Text>{formatDate(currentOpenType.createdAt)}</Typography.Text>
              </div>
              <div style={{ display: 'flex', gap: 12 }}>
                <Typography.Text type="secondary" style={{ width: 80, flexShrink: 0 }}>更新时间</Typography.Text>
                <Typography.Text>{formatDate(currentOpenType.updatedAt)}</Typography.Text>
              </div>
            </div>
          </div>
        )}
      </Modal>

      <Modal
        title="更新开户方式"
        open={updateModalVisible}
        onOk={handleSaveUpdate}
        onCancel={() => {
          setUpdateModalVisible(false);
          updateForm.resetFields();
          setCurrentOpenType(null);
        }}
        afterOpenChange={(open) => {
          if (open && currentOpenType) {
            updateForm.setFieldsValue({
              open_type: currentOpenType.openType,
              type_name: currentOpenType.typeName,
              description: currentOpenType.description,
            });
          }
        }}
        mask={{ closable: false }}
        okText="更新"
        cancelText="取消"
        width={600}
      >
        <Form form={updateForm} layout="vertical">
          <Form.Item
            name="open_type"
            label="开户类型"
            rules={[{ required: true, message: '请输入开户类型' }]}
          >
            <InputNumber min={1} placeholder="请输入开户类型编号" />
          </Form.Item>
          <Form.Item
            name="type_name"
            label="类型名称"
            rules={[
              { required: true, message: '请输入类型名称' },
              { max: 100, message: '类型名称不能超过100个字符' },
            ]}
          >
            <Input placeholder="请输入类型名称" />
          </Form.Item>
          <Form.Item
            name="description"
            label="描述"
            rules={[{ required: true, message: '请输入描述' }]}
          >
            <Input.TextArea placeholder="请输入描述" rows={4} />
          </Form.Item>
          <Form.Item label="缩略图">
            <Upload
              listType="picture-card"
              fileList={updateThumbUrl ? [{ uid: '1', name: 'thumb', status: 'done', url: updateThumbUrl }] : []}
              customRequest={async ({ file, onSuccess, onError }) => {
                try {
                  const uploadFile = assertUploadFile(file);
                  const res = await uploadImage(uploadFile);
                  const baseUrl = import.meta.env.VITE_API_BASE || 'http://localhost:8000';
                  const fullUrl = res.url.startsWith('http') ? res.url : `${baseUrl}${res.url}`;
                  setUpdateThumbUrl(fullUrl);
                  onSuccess?.({ url: fullUrl });
                } catch (e) {
                  onError?.(normalizeUploadError(e));
                }
              }}
              onRemove={() => setUpdateThumbUrl('')}
            >
              {!updateThumbUrl && (
                <div>
                  <UploadOutlined style={{ fontSize: 24, color: '#999' }} />
                  <div style={{ marginTop: 8 }}>上传图片</div>
                </div>
              )}
            </Upload>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default AdminPlatform;