import { useEffect, useState, useCallback, useMemo } from 'react';
import {
  Table,
  Button,
  Space,
  Modal,
  Form,
  Input,
  InputNumber,
  Select,
  Badge,
  Popconfirm,
  message,
  Card,
  Row,
  Col,
  DatePicker,
  TimePicker,
} from 'antd';
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  CheckCircleOutlined,
} from '@ant-design/icons';
import { dayjs } from '../../utils/dayjs';
import type { Dayjs } from 'dayjs';
import {
  pointsApi,
  type OfflineEvent,
  type CreateOfflineEventReq,
} from '../../api/health/points';
import { AuthButton } from '../../components/AuthButton';
import { usePermission } from '../../hooks/usePermission';
import { Result } from 'antd';

/** 活动状态映射 */
const STATUS_MAP: Record<string, { text: string; color: string }> = {
  draft: { text: '草稿', color: 'default' },
  published: { text: '已发布', color: 'processing' },
  ongoing: { text: '进行中', color: 'success' },
  completed: { text: '已结束', color: 'default' },
  cancelled: { text: '已取消', color: 'error' },
};

/** 活动状态选项 */
const STATUS_OPTIONS = Object.entries(STATUS_MAP).map(([value, { text }]) => ({
  value,
  label: text,
}));

export default function OfflineEventList() {
  const { hasPermission } = usePermission('health.points.list');
  const [data, setData] = useState<OfflineEvent[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(20);
  const [loading, setLoading] = useState(false);
  const [statusFilter, setStatusFilter] = useState<string | undefined>(undefined);
  const [modalOpen, setModalOpen] = useState(false);
  const [editing, setEditing] = useState<OfflineEvent | null>(null);
  const [form] = Form.useForm();

  if (!hasPermission) {
    return <Result status="403" title="权限不足" subTitle="您没有访问线下活动管理的权限" />;
  }

  // ---- 数据获取 ----
  const fetchData = useCallback(async (p = page, ps = pageSize) => {
    setLoading(true);
    try {
      const result = await pointsApi.listOfflineEvents({
        page: p,
        page_size: ps,
        status: statusFilter || undefined,
      });
      setData(result.data);
      setTotal(result.total);
    } catch {
      message.error('加载活动列表失败');
    } finally {
      setLoading(false);
    }
  }, [page, pageSize, statusFilter]);

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

  // ---- 新建 / 编辑 ----
  const openCreate = () => {
    setEditing(null);
    form.resetFields();
    form.setFieldsValue({
      points_reward: 0,
      max_participants: 0,
      status: 'draft',
    });
    setModalOpen(true);
  };

  const openEdit = (record: OfflineEvent) => {
    setEditing(record);
    form.setFieldsValue({
      title: record.title,
      description: record.description,
      event_date: record.event_date ? dayjs(record.event_date) : undefined,
      start_time: record.start_time ? dayjs(record.start_time, 'HH:mm') : undefined,
      end_time: record.end_time ? dayjs(record.end_time, 'HH:mm') : undefined,
      location: record.location,
      points_reward: record.points_reward,
      max_participants: record.max_participants,
      status: record.status,
      image_url: record.image_url,
    });
    setModalOpen(true);
  };

  const handleSubmit = async (values: {
    title: string;
    description?: string;
    event_date: Dayjs;
    start_time?: Dayjs;
    end_time?: Dayjs;
    location?: string;
    points_reward: number;
    max_participants: number;
    status: string;
    image_url?: string;
  }) => {
    try {
      const req: CreateOfflineEventReq = {
        title: values.title,
        description: values.description,
        event_date: values.event_date.format('YYYY-MM-DD'),
        start_time: values.start_time ? values.start_time.format('HH:mm') : undefined,
        end_time: values.end_time ? values.end_time.format('HH:mm') : undefined,
        location: values.location,
        points_reward: values.points_reward,
        max_participants: values.max_participants,
        status: values.status,
        image_url: values.image_url,
      };
      if (editing) {
        await pointsApi.updateOfflineEvent(editing.id, { ...req, version: editing.version });
        message.success('更新成功');
      } else {
        await pointsApi.createOfflineEvent(req);
        message.success('创建成功');
      }
      setModalOpen(false);
      form.resetFields();
      fetchData(page, pageSize);
    } catch {
      message.error(editing ? '更新失败' : '创建失败');
    }
  };

  // ---- 删除 ----
  const handleDelete = async (record: OfflineEvent) => {
    try {
      await pointsApi.deleteOfflineEvent(record.id, record.version);
      message.success('删除成功');
      fetchData(page, pageSize);
    } catch {
      message.error('删除失败');
    }
  };

  // ---- 签到 ----
  const handleCheckin = async (_record: OfflineEvent) => {
    message.info('签到功能需配合患者选择，将在后续版本完善');
  };

  // ---- 列定义 ----
  const columns = useMemo(() => [
    {
      title: '活动名称',
      dataIndex: 'title',
      key: 'title',
      width: 180,
      ellipsis: true,
    },
    {
      title: '活动日期',
      dataIndex: 'event_date',
      key: 'event_date',
      width: 120,
      render: (val: string) => (val ? dayjs(val).format('YYYY-MM-DD') : '-'),
    },
    {
      title: '时间段',
      key: 'time_range',
      width: 140,
      render: (_: unknown, record: OfflineEvent) => {
        if (!record.start_time && !record.end_time) return '-';
        return `${record.start_time || '--'} ~ ${record.end_time || '--'}`;
      },
    },
    {
      title: '地点',
      dataIndex: 'location',
      key: 'location',
      width: 140,
      ellipsis: true,
      render: (val: string | null) => val || '-',
    },
    {
      title: '积分奖励',
      dataIndex: 'points_reward',
      key: 'points_reward',
      width: 90,
      render: (val: number) => <span style={{ fontWeight: 600, color: '#d97706' }}>{val}</span>,
    },
    {
      title: '参与人数',
      key: 'participants',
      width: 110,
      render: (_: unknown, record: OfflineEvent) => {
        const max = record.max_participants;
        const current = record.current_participants;
        const isFull = max > 0 && current >= max;
        return (
          <span>
            <span style={{ color: isFull ? '#dc2626' : undefined, fontWeight: isFull ? 600 : undefined }}>
              {current}
            </span>
            {' / '}
            {max === 0 ? '不限' : max}
          </span>
        );
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 90,
      render: (val: string) => {
        const info = STATUS_MAP[val] || { text: val, color: 'default' as const };
        return <Badge status={info.color as 'default' | 'processing' | 'success' | 'error'} text={info.text} />;
      },
    },
    {
      title: '更新时间',
      dataIndex: 'updated_at',
      key: 'updated_at',
      width: 160,
      render: (val: string) => (val ? dayjs(val).format('YYYY-MM-DD HH:mm') : '-'),
    },
    {
      title: '操作',
      key: 'action',
      width: 200,
      render: (_: unknown, record: OfflineEvent) => (
        <AuthButton code="health.points.manage">
          <Space size="small">
            <Button
              type="link"
              size="small"
              icon={<EditOutlined />}
              onClick={() => openEdit(record)}
            >
              编辑
            </Button>
            <Button
              type="link"
              size="small"
              icon={<CheckCircleOutlined />}
              onClick={() => handleCheckin(record)}
              disabled={record.status === 'draft' || record.status === 'cancelled'}
            >
              签到
            </Button>
            <Popconfirm
              title="确定删除该活动？"
              onConfirm={() => handleDelete(record)}
              okText="确定"
              cancelText="取消"
            >
              <Button type="link" size="small" danger icon={<DeleteOutlined />}>
                删除
              </Button>
            </Popconfirm>
          </Space>
        </AuthButton>
      ),
    },
  ], [openEdit, handleCheckin, handleDelete]);

  return (
    <Card>
      {/* 筛选栏 */}
      <Row gutter={16} style={{ marginBottom: 16 }} align="middle">
        <Col flex="auto">
          <Space>
            <Select
              placeholder="筛选状态"
              value={statusFilter}
              onChange={(val) => {
                setStatusFilter(val);
                setPage(1);
              }}
              options={STATUS_OPTIONS}
              allowClear
              style={{ width: 140 }}
            />
          </Space>
        </Col>
        <Col>
          <AuthButton code="health.points.manage">
            <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
              新建活动
            </Button>
          </AuthButton>
        </Col>
      </Row>

      {/* 数据表格 */}
      <Table
        rowKey="id"
        columns={columns}
        dataSource={data}
        loading={loading}
        scroll={{ x: 1200 }}
        pagination={{
          current: page,
          pageSize,
          total,
          showSizeChanger: true,
          showTotal: (t) => `共 ${t} 条`,
          onChange: (p, ps) => {
            setPage(p);
            setPageSize(ps);
          },
        }}
      />

      {/* 新建 / 编辑弹窗 */}
      <Modal
        title={editing ? '编辑活动' : '新建活动'}
        open={modalOpen}
        onCancel={() => {
          setModalOpen(false);
          form.resetFields();
        }}
        onOk={() => form.submit()}
        destroyOnHidden
        width={620}
      >
        <Form form={form} layout="vertical" onFinish={handleSubmit}>
          <Form.Item
            name="title"
            label="活动名称"
            rules={[{ required: true, message: '请输入活动名称' }]}
          >
            <Input placeholder="如：社区义诊活动" />
          </Form.Item>
          <Form.Item name="description" label="活动描述">
            <Input.TextArea rows={3} placeholder="活动说明" />
          </Form.Item>
          <Row gutter={16}>
            <Col span={8}>
              <Form.Item
                name="event_date"
                label="活动日期"
                rules={[{ required: true, message: '请选择活动日期' }]}
              >
                <DatePicker style={{ width: '100%' }} placeholder="选择日期" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item name="start_time" label="开始时间">
                <TimePicker style={{ width: '100%' }} format="HH:mm" placeholder="开始" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item name="end_time" label="结束时间">
                <TimePicker style={{ width: '100%' }} format="HH:mm" placeholder="结束" />
              </Form.Item>
            </Col>
          </Row>
          <Form.Item name="location" label="活动地点">
            <Input placeholder="如：社区活动中心" />
          </Form.Item>
          <Row gutter={16}>
            <Col span={8}>
              <Form.Item name="points_reward" label="积分奖励" initialValue={0}>
                <InputNumber min={0} max={999999} style={{ width: '100%' }} placeholder="0" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item name="max_participants" label="最大人数" initialValue={0}>
                <InputNumber min={0} max={99999} style={{ width: '100%' }} placeholder="0 表示不限" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item name="status" label="状态" initialValue="draft">
                <Select options={STATUS_OPTIONS} />
              </Form.Item>
            </Col>
          </Row>
          <Form.Item name="image_url" label="封面图片链接">
            <Input placeholder="活动封面图片 URL" />
          </Form.Item>
        </Form>
      </Modal>
    </Card>
  );
}
