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

import {
  medicationRecordApi,
  type MedicationRecord,
  type CreateMedicationRecordReq,
  type UpdateMedicationRecordReq,
  FREQUENCY_OPTIONS,
  ROUTE_OPTIONS,
} from '../../api/health/medicationRecords';
import { PageContainer } from '../../components/PageContainer';
import { usePermission } from '../../hooks/usePermission';

export default function MedicationRecordList() {
  const { hasPermission } = usePermission('health.medication-records.manage');

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

  const [patientId, setPatientId] = useState('');
  const [searchInput, setSearchInput] = useState('');

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

  const pageSize = 20;

  const fetchData = useCallback(async (pid: string, p: number) => {
    if (!pid) return;
    setLoading(true);
    try {
      const resp = await medicationRecordApi.list(pid, { page: p, page_size: pageSize });
      setData(resp.data);
      setTotal(resp.total);
      setPage(p);
    } catch {
      message.error('加载药物记录失败');
    } finally {
      setLoading(false);
    }
  }, []);

  const handleSearch = () => {
    const pid = searchInput.trim();
    if (!pid) {
      message.warning('请输入患者 ID');
      return;
    }
    setPatientId(pid);
    fetchData(pid, 1);
  };

  const handleCreate = () => {
    setEditRecord(null);
    form.resetFields();
    form.setFieldsValue({ patient_id: patientId, is_current: true });
    setModalOpen(true);
  };

  const handleEdit = (record: MedicationRecord) => {
    setEditRecord(record);
    form.setFieldsValue({
      medication_name: record.medication_name,
      generic_name: record.generic_name,
      dosage: record.dosage,
      unit: record.unit,
      frequency: record.frequency,
      route: record.route,
      start_date: record.start_date ? dayjs(record.start_date) : undefined,
      end_date: record.end_date ? dayjs(record.end_date) : undefined,
      is_current: record.is_current,
      prescribed_by: record.prescribed_by,
      notes: record.notes,
    });
    setModalOpen(true);
  };

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      const req = {
        ...values,
        start_date: values.start_date?.format('YYYY-MM-DD'),
        end_date: values.end_date?.format('YYYY-MM-DD'),
      };

      setSubmitting(true);
      if (editRecord) {
        await medicationRecordApi.update(editRecord.id, {
          ...req,
          version: editRecord.version,
        } as UpdateMedicationRecordReq & { version: number });
        message.success('药物记录已更新');
      } else {
        await medicationRecordApi.create(req as CreateMedicationRecordReq);
        message.success('药物记录已创建');
      }
      setModalOpen(false);
      fetchData(patientId, page);
    } catch {
      // validation
    } finally {
      setSubmitting(false);
    }
  };

  const handleDelete = async (record: MedicationRecord) => {
    try {
      await medicationRecordApi.delete(record.id, record.version);
      message.success('药物记录已删除');
      fetchData(patientId, page);
    } catch {
      message.error('删除失败');
    }
  };

  const columns: ColumnsType<MedicationRecord> = useMemo(() => [
    {
      title: '药品名称',
      dataIndex: 'medication_name',
      width: 160,
      render: (v: string, record) => (
        <span>
          <strong>{v}</strong>
          {record.generic_name && <span style={{ color: '#999', marginLeft: 8 }}>({record.generic_name})</span>}
        </span>
      ),
    },
    {
      title: '剂量',
      width: 120,
      render: (_, record) => {
        if (!record.dosage) return '-';
        return `${record.dosage}${record.unit ? ' ' + record.unit : ''}`;
      },
    },
    {
      title: '频次',
      dataIndex: 'frequency',
      width: 100,
      render: (v: string) => {
        const label = FREQUENCY_OPTIONS.find((o) => o.value === v)?.label;
        return label ?? v ?? '-';
      },
    },
    {
      title: '给药途径',
      dataIndex: 'route',
      width: 100,
      render: (v: string) => {
        const label = ROUTE_OPTIONS.find((o) => o.value === v)?.label;
        return label ?? v ?? '-';
      },
    },
    {
      title: '开始日期',
      dataIndex: 'start_date',
      width: 110,
      render: (v: string) => v ? dayjs(v).format('YYYY-MM-DD') : '-',
    },
    {
      title: '结束日期',
      dataIndex: 'end_date',
      width: 110,
      render: (v: string) => v ? dayjs(v).format('YYYY-MM-DD') : '-',
    },
    {
      title: '状态',
      dataIndex: 'is_current',
      width: 80,
      render: (v: boolean) => <Tag color={v ? 'green' : 'default'}>{v ? '在用' : '停用'}</Tag>,
    },
    {
      title: '备注',
      dataIndex: 'notes',
      width: 160,
      ellipsis: true,
      render: (v: string) => v ?? '-',
    },
    {
      title: '操作',
      width: 140,
      render: (_, record) => (
        <Space>
          <Button size="small" onClick={() => handleEdit(record)}>编辑</Button>
          <Popconfirm title="确定删除此药物记录？" onConfirm={() => handleDelete(record)}>
            <Button size="small" danger>删除</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ], [patientId, page]);

  if (!hasPermission) {
    return <Result status="403" title="权限不足" subTitle="您没有管理药物记录的权限" />;
  }

  return (
    <PageContainer
      title="药物记录"
      actions={patientId ? <Button type="primary" onClick={handleCreate}>添加药物</Button> : undefined}
    >
      <Space style={{ marginBottom: 16 }} wrap>
        <Input.Search
          placeholder="输入患者 ID 搜索"
          value={searchInput}
          onChange={(e) => setSearchInput(e.target.value)}
          onSearch={handleSearch}
          style={{ width: 360 }}
          enterButton="查询"
        />
        {patientId && (
          <Tag color="blue">当前患者: {patientId}</Tag>
        )}
      </Space>

      {!patientId ? (
        <Result title="请输入患者 ID 查询药物记录" />
      ) : (
        <Table<MedicationRecord>
          rowKey="id"
          columns={columns}
          dataSource={data}
          loading={loading}
          pagination={{
            current: page,
            pageSize,
            total,
            showTotal: (t) => `共 ${t} 条`,
            onChange: (p) => fetchData(patientId, p),
          }}
        />
      )}

      <Modal
        title={editRecord ? '编辑药物' : '添加药物'}
        open={modalOpen}
        onOk={handleSubmit}
        onCancel={() => setModalOpen(false)}
        confirmLoading={submitting}
        width={600}
      >
        <Form form={form} layout="vertical">
          {!editRecord && (
            <Form.Item name="patient_id" label="患者 ID" rules={[{ required: true }]}>
              <Input disabled />
            </Form.Item>
          )}
          <Space style={{ width: '100%' }} size="middle">
            <Form.Item name="medication_name" label="药品名称" rules={[{ required: true, message: '请输入药品名' }]} style={{ width: 260 }}>
              <Input placeholder="如：碳酸钙" />
            </Form.Item>
            <Form.Item name="generic_name" label="通用名" style={{ width: 260 }}>
              <Input placeholder="如：碳酸钙片" />
            </Form.Item>
          </Space>
          <Space style={{ width: '100%' }} size="middle">
            <Form.Item name="dosage" label="剂量" style={{ width: 170 }}>
              <Input placeholder="如：600" />
            </Form.Item>
            <Form.Item name="unit" label="单位" style={{ width: 120 }}>
              <Input placeholder="如：mg" />
            </Form.Item>
            <Form.Item name="frequency" label="频次" style={{ width: 200 }}>
              <Select options={FREQUENCY_OPTIONS} placeholder="选择频次" allowClear />
            </Form.Item>
          </Space>
          <Space style={{ width: '100%' }} size="middle">
            <Form.Item name="route" label="给药途径" style={{ width: 200 }}>
              <Select options={ROUTE_OPTIONS} placeholder="选择途径" allowClear />
            </Form.Item>
            <Form.Item name="prescribed_by" label="处方医生" style={{ width: 260 }}>
              <Input placeholder="医生姓名或 ID" />
            </Form.Item>
          </Space>
          <Space style={{ width: '100%' }} size="middle">
            <Form.Item name="start_date" label="开始日期">
              <DatePicker style={{ width: 220 }} />
            </Form.Item>
            <Form.Item name="end_date" label="结束日期">
              <DatePicker style={{ width: 220 }} />
            </Form.Item>
          </Space>
          <Form.Item name="is_current" label="当前在用" valuePropName="checked">
            <Switch />
          </Form.Item>
          <Form.Item name="notes" label="备注">
            <Input.TextArea rows={2} />
          </Form.Item>
        </Form>
      </Modal>
    </PageContainer>
  );
}
