import { useState, useCallback, useMemo } from 'react';
import {
  Button, Form, Input, message, Modal, Popconfirm, Select, Space, Table, Tag,
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';

import {
  bleGatewayApi,
  type BleGateway,
  type CreateBleGatewayReq,
  type UpdateBleGatewayReq,
  GATEWAY_STATUS_OPTIONS,
  GATEWAY_STATUS_COLOR,
  GATEWAY_STATUS_LABEL,
} from '../../api/health/bleGateways';
import { PageContainer } from '../../components/PageContainer';
import { usePermission } from '../../hooks/usePermission';
import { useNavigate } from 'react-router-dom';

export default function BleGatewayList() {
  const { hasPermission } = usePermission('health.ble-gateways.manage');
  const navigate = useNavigate();

  const [data, setData] = useState<BleGateway[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);

  const [statusFilter, setStatusFilter] = useState<string | undefined>();

  const [modalOpen, setModalOpen] = useState(false);
  const [editRecord, setEditRecord] = useState<BleGateway | null>(null);
  const [submitting, setSubmitting] = useState(false);
  const [form] = Form.useForm();

  const pageSize = 20;

  const fetchData = useCallback(async (p: number, status?: string) => {
    setLoading(true);
    try {
      const resp = await bleGatewayApi.list({ page: p, page_size: pageSize, status });
      setData(resp.data);
      setTotal(resp.total);
      setPage(p);
    } catch {
      message.error('加载网关列表失败');
    } finally {
      setLoading(false);
    }
  }, []);

  const handleSearch = () => {
    fetchData(1, statusFilter);
  };

  const handleCreate = () => {
    setEditRecord(null);
    form.resetFields();
    setModalOpen(true);
  };

  const handleEdit = (record: BleGateway) => {
    setEditRecord(record);
    form.setFieldsValue({
      name: record.name,
      status: record.status,
      firmware_version: record.firmware_version,
    });
    setModalOpen(true);
  };

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      setSubmitting(true);

      if (editRecord) {
        const req: UpdateBleGatewayReq & { version: number } = {
          ...values,
          version: editRecord.version,
        };
        await bleGatewayApi.update(editRecord.gateway_id, req);
        message.success('网关已更新');
      } else {
        const req: CreateBleGatewayReq = values;
        const created = await bleGatewayApi.create(req);
        Modal.success({
          title: '网关创建成功',
          content: (
            <div>
              <p><strong>网关 ID：</strong>{created.gateway_id}</p>
              <p><strong>API Key：</strong></p>
              <Input.TextArea
                readOnly
                autoSize
                value={created.api_key ?? ''}
                style={{ fontFamily: 'monospace', fontSize: 12 }}
              />
              <p style={{ color: '#999', marginTop: 8 }}>请妥善保存 API Key，关闭后无法再次查看明文。</p>
            </div>
          ),
          width: 520,
        });
      }

      setModalOpen(false);
      fetchData(page, statusFilter);
    } catch {
      // validation
    } finally {
      setSubmitting(false);
    }
  };

  const handleDelete = async (record: BleGateway) => {
    try {
      await bleGatewayApi.delete(record.gateway_id, record.version);
      message.success('网关已删除');
      fetchData(page, statusFilter);
    } catch {
      message.error('删除失败');
    }
  };

  const handleRegenerateKey = async (record: BleGateway) => {
    try {
      const updated = await bleGatewayApi.regenerateKey(record.gateway_id);
      Modal.success({
        title: 'API Key 已重新生成',
        content: (
          <div>
            <p><strong>新 API Key：</strong></p>
            <Input.TextArea
              readOnly
              autoSize
              value={updated.api_key ?? ''}
              style={{ fontFamily: 'monospace', fontSize: 12 }}
            />
            <p style={{ color: '#999', marginTop: 8 }}>旧 Key 已失效，请更新网关配置。</p>
          </div>
        ),
        width: 520,
      });
      fetchData(page, statusFilter);
    } catch {
      message.error('重新生成密钥失败');
    }
  };

  const columns: ColumnsType<BleGateway> = useMemo(() => [
    {
      title: '网关名称',
      dataIndex: 'name',
      width: 180,
      render: (v: string, record) => (
        <a onClick={() => navigate(`/health/ble-gateways/${record.gateway_id}`)}>{v}</a>
      ),
    },
    {
      title: '网关 ID',
      dataIndex: 'gateway_id',
      width: 160,
      ellipsis: true,
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 100,
      render: (v: string) => (
        <Tag color={GATEWAY_STATUS_COLOR[v] ?? 'default'}>
          {GATEWAY_STATUS_LABEL[v] ?? v}
        </Tag>
      ),
    },
    {
      title: '固件版本',
      dataIndex: 'firmware_version',
      width: 110,
      render: (v: string) => v ?? '-',
    },
    {
      title: 'IP 地址',
      dataIndex: 'ip_address',
      width: 130,
      render: (v: string) => v ?? '-',
    },
    {
      title: '绑定患者',
      dataIndex: 'patient_count',
      width: 90,
      render: (v: number) => v ?? 0,
    },
    {
      title: '最后心跳',
      dataIndex: 'last_heartbeat_at',
      width: 170,
      render: (v: string) => v ? dayjs(v).format('YYYY-MM-DD HH:mm:ss') : '-',
    },
    {
      title: '操作',
      width: 220,
      render: (_, record) => (
        <Space>
          <Button size="small" onClick={() => navigate(`/health/ble-gateways/${record.gateway_id}`)}>详情</Button>
          <Button size="small" onClick={() => handleEdit(record)}>编辑</Button>
          <Popconfirm title="确定重新生成 API Key？旧 Key 将立即失效。" onConfirm={() => handleRegenerateKey(record)}>
            <Button size="small">刷新密钥</Button>
          </Popconfirm>
          <Popconfirm title="确定删除此网关？" onConfirm={() => handleDelete(record)}>
            <Button size="small" danger>删除</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ], [page, statusFilter, navigate]);

  if (!hasPermission) {
    return (
      <PageContainer title="BLE 网关管理">
        <div style={{ textAlign: 'center', padding: 80, color: '#999' }}>权限不足</div>
      </PageContainer>
    );
  }

  return (
    <PageContainer
      title="BLE 网关管理"
      actions={<Button type="primary" onClick={handleCreate}>添加网关</Button>}
    >
      <Space style={{ marginBottom: 16 }} wrap>
        <Select
          placeholder="状态筛选"
          options={GATEWAY_STATUS_OPTIONS}
          value={statusFilter}
          onChange={setStatusFilter}
          allowClear
          style={{ width: 150 }}
        />
        <Button type="primary" onClick={handleSearch}>查询</Button>
      </Space>

      <Table<BleGateway>
        rowKey="id"
        columns={columns}
        dataSource={data}
        loading={loading}
        pagination={{
          current: page,
          pageSize,
          total,
          showTotal: (t) => `共 ${t} 条`,
          onChange: (p) => fetchData(p, statusFilter),
        }}
      />

      <Modal
        title={editRecord ? '编辑网关' : '添加网关'}
        open={modalOpen}
        onOk={handleSubmit}
        onCancel={() => setModalOpen(false)}
        confirmLoading={submitting}
        width={520}
      >
        <Form form={form} layout="vertical">
          {!editRecord && (
            <Form.Item name="gateway_id" label="网关 ID" rules={[{ required: true, message: '请输入网关 ID' }]}>
              <Input placeholder="如：GW-001" />
            </Form.Item>
          )}
          <Form.Item name="name" label="网关名称" rules={[{ required: true, message: '请输入网关名称' }]}>
            <Input placeholder="如：透析室 1 号网关" />
          </Form.Item>
          {editRecord && (
            <Form.Item name="status" label="状态">
              <Select options={GATEWAY_STATUS_OPTIONS} placeholder="选择状态" />
            </Form.Item>
          )}
          <Form.Item name="firmware_version" label="固件版本">
            <Input placeholder="如：v2.1.0" />
          </Form.Item>
        </Form>
      </Modal>
    </PageContainer>
  );
}