import { useState, useCallback, useMemo } from 'react';
import {
  Table,
  Button,
  Space,
  Modal,
  Form,
  Input,
  InputNumber,
  Select,
  Tag,
  Badge,
  message,
  Switch,
} from 'antd';
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
} from '@ant-design/icons';
import {
  pointsApi,
  type PointsRule,
  type CreatePointsRuleReq,
} from '../../api/health/points';
import { AuthButton } from '../../components/AuthButton';
import { PageContainer } from '../../components/PageContainer';
import { formatDateTime } from '../../utils/format';

/** 事件类型映射 */
const EVENT_TYPES: Record<string, string> = {
  checkin: '每日打卡',
  data_report: '数据上报',
  lab_upload: '化验上传',
  event_checkin: '活动签到',
  consultation_complete: '咨询完成',
  followup_complete: '随访完成',
};

/** 事件类型选项 */
const EVENT_TYPE_OPTIONS = Object.entries(EVENT_TYPES).map(([value, label]) => ({
  value,
  label,
}));

interface RuleFilters {
  event_type: string | undefined;
  is_active: string | undefined;
}

export default function PointsRuleList() {
  const [data, setData] = useState<PointsRule[]>([]);
  const [loading, setLoading] = useState(false);
  const [modalOpen, setModalOpen] = useState(false);
  const [editing, setEditing] = useState<PointsRule | null>(null);
  const [filters, setFilters] = useState<RuleFilters>({
    event_type: undefined,
    is_active: undefined,
  });
  const [form] = Form.useForm();

  // ---- 数据获取 ----
  const fetchData = useCallback(async () => {
    setLoading(true);
    try {
      const result = await pointsApi.listRules();
      let filtered = result;
      if (filters.event_type) {
        filtered = filtered.filter((r) => r.event_type === filters.event_type);
      }
      if (filters.is_active !== undefined) {
        const isActive = filters.is_active === 'true';
        filtered = filtered.filter((r) => r.is_active === isActive);
      }
      setData(filtered);
    } catch {
      message.error('加载积分规则失败');
    } finally {
      setLoading(false);
    }
  }, [filters]);

  // Initial fetch
  const [hasFetched, setHasFetched] = useState(false);
  if (!hasFetched) {
    setHasFetched(true);
    fetchData();
  }

  // ---- 新建 / 编辑 ----
  const openCreate = () => {
    setEditing(null);
    form.resetFields();
    setModalOpen(true);
  };

  const openEdit = (record: PointsRule) => {
    setEditing(record);
    form.setFieldsValue({
      event_type: record.event_type,
      name: record.name,
      description: record.description,
      points_value: record.points_value,
      daily_cap: record.daily_cap,
      streak_7d_bonus: record.streak_7d_bonus,
      streak_14d_bonus: record.streak_14d_bonus,
      streak_30d_bonus: record.streak_30d_bonus,
    });
    setModalOpen(true);
  };

  const handleSubmit = async (values: {
    event_type: string;
    name: string;
    description?: string;
    points_value: number;
    daily_cap?: number;
    streak_7d_bonus?: number;
    streak_14d_bonus?: number;
    streak_30d_bonus?: number;
  }) => {
    try {
      if (editing) {
        await pointsApi.updateRule(editing.id, {
          ...values,
          version: editing.version,
        });
      } else {
        const req: CreatePointsRuleReq = {
          event_type: values.event_type,
          name: values.name,
          description: values.description,
          points_value: values.points_value,
          daily_cap: values.daily_cap,
          streak_7d_bonus: values.streak_7d_bonus,
          streak_14d_bonus: values.streak_14d_bonus,
          streak_30d_bonus: values.streak_30d_bonus,
        };
        await pointsApi.createRule(req);
      }
      message.success(editing ? '更新成功' : '创建成功');
      setModalOpen(false);
      form.resetFields();
      fetchData();
    } catch {
      message.error(editing ? '更新失败' : '创建失败');
    }
  };

  // ---- 切换启用状态 ----
  const handleToggleActive = async (record: PointsRule) => {
    try {
      await pointsApi.updateRule(record.id, {
        is_active: !record.is_active,
        version: record.version,
      });
      message.success(record.is_active ? '已停用' : '已启用');
      fetchData();
    } catch {
      message.error('操作失败');
    }
  };

  // ---- 删除 ----
  const handleDelete = (record: PointsRule) => {
    Modal.confirm({
      title: '确认删除',
      content: `确定要删除规则「${record.name}」吗？`,
      okType: 'danger',
      onOk: async () => {
        try {
          await pointsApi.deleteRule(record.id, record.version);
          message.success('删除成功');
          fetchData();
        } catch {
          message.error('删除失败');
        }
      },
    });
  };

  const resetFilters = () => {
    setFilters({ event_type: undefined, is_active: undefined });
  };

  // ---- 列定义 ----
  const columns = useMemo(() => [
    {
      title: '规则名称',
      dataIndex: 'name',
      key: 'name',
      width: 140,
    },
    {
      title: '事件类型',
      dataIndex: 'event_type',
      key: 'event_type',
      width: 120,
      render: (val: string) => (
        <Tag color="blue">{EVENT_TYPES[val] || val}</Tag>
      ),
    },
    {
      title: '积分值',
      dataIndex: 'points_value',
      key: 'points_value',
      width: 80,
      render: (val: number) => <span style={{ fontWeight: 600, color: '#d97706' }}>+{val}</span>,
    },
    {
      title: '每日上限',
      dataIndex: 'daily_cap',
      key: 'daily_cap',
      width: 90,
      render: (val: number) => (val === -1 ? '无限' : val),
    },
    {
      title: '7日奖励',
      dataIndex: 'streak_7d_bonus',
      key: 'streak_7d_bonus',
      width: 90,
      render: (val: number) => (val > 0 ? <Tag color="green">+{val}</Tag> : '-'),
    },
    {
      title: '14日奖励',
      dataIndex: 'streak_14d_bonus',
      key: 'streak_14d_bonus',
      width: 90,
      render: (val: number) => (val > 0 ? <Tag color="green">+{val}</Tag> : '-'),
    },
    {
      title: '30日奖励',
      dataIndex: 'streak_30d_bonus',
      key: 'streak_30d_bonus',
      width: 90,
      render: (val: number) => (val > 0 ? <Tag color="green">+{val}</Tag> : '-'),
    },
    {
      title: '状态',
      dataIndex: 'is_active',
      key: 'is_active',
      width: 80,
      render: (val: boolean) => (
        <Badge status={val ? 'success' : 'default'} text={val ? '启用' : '停用'} />
      ),
    },
    {
      title: '更新时间',
      dataIndex: 'updated_at',
      key: 'updated_at',
      width: 170,
      render: (val: string) => formatDateTime(val),
    },
    {
      title: '操作',
      key: 'action',
      width: 200,
      render: (_: unknown, record: PointsRule) => (
        <AuthButton code="health.points.manage">
          <Space size="small">
            <Button
              type="link"
              size="small"
              icon={<EditOutlined />}
              onClick={() => openEdit(record)}
            >
              编辑
            </Button>
            <Switch
              size="small"
              checked={record.is_active}
              checkedChildren="启用"
              unCheckedChildren="停用"
              onChange={() => handleToggleActive(record)}
            />
            <Button
              type="link"
              size="small"
              danger
              icon={<DeleteOutlined />}
              onClick={() => handleDelete(record)}
            >
              删除
            </Button>
          </Space>
        </AuthButton>
      ),
    },
  ], [openEdit, handleToggleActive, handleDelete]);

  return (
    <PageContainer
      title="积分规则"
      subtitle="积分规则定义各类健康行为对应的积分奖励，含连续打卡额外奖励"
      filters={
        <>
          <Select
            placeholder="筛选类型"
            value={filters.event_type}
            onChange={(val) => setFilters((f) => ({ ...f, event_type: val }))}
            options={EVENT_TYPE_OPTIONS}
            allowClear
            style={{ width: 140 }}
          />
          <Select
            placeholder="筛选状态"
            value={filters.is_active}
            onChange={(val) => setFilters((f) => ({ ...f, is_active: val }))}
            options={[
              { value: 'true', label: '启用' },
              { value: 'false', label: '停用' },
            ]}
            allowClear
            style={{ width: 120 }}
          />
        </>
      }
      onResetFilters={resetFilters}
      actions={
        <AuthButton code="health.points.manage">
          <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
            新建规则
          </Button>
        </AuthButton>
      }
    >
      <Table
        rowKey="id"
        columns={columns}
        dataSource={data}
        loading={loading}
        scroll={{ x: 1100 }}
        pagination={false}
      />

      {/* 新建 / 编辑弹窗 */}
      <Modal
        title={editing ? '编辑积分规则' : '新建积分规则'}
        open={modalOpen}
        onCancel={() => {
          setModalOpen(false);
          form.resetFields();
        }}
        onOk={() => form.submit()}
        destroyOnHidden
        width={560}
      >
        <Form form={form} layout="vertical" onFinish={handleSubmit}>
          <Form.Item
            name="name"
            label="规则名称"
            rules={[{ required: true, message: '请输入规则名称' }]}
          >
            <Input placeholder="如：每日打卡" />
          </Form.Item>
          <Form.Item
            name="event_type"
            label="事件类型"
            rules={[{ required: true, message: '请选择事件类型' }]}
          >
            <Select placeholder="选择事件类型" options={EVENT_TYPE_OPTIONS} />
          </Form.Item>
          <Form.Item
            name="points_value"
            label="积分值"
            rules={[{ required: true, message: '请输入积分值' }]}
          >
            <InputNumber min={1} max={10000} style={{ width: '100%' }} placeholder="如：10" />
          </Form.Item>
          <Form.Item name="daily_cap" label="每日上限" initialValue={1}>
            <InputNumber min={-1} max={10000} style={{ width: '100%' }} placeholder="-1 表示无限" />
          </Form.Item>
          <div style={{ display: 'flex', gap: 16 }}>
            <Form.Item name="streak_7d_bonus" label="7日连续奖励" initialValue={0} style={{ flex: 1 }}>
              <InputNumber min={0} max={10000} style={{ width: '100%' }} />
            </Form.Item>
            <Form.Item name="streak_14d_bonus" label="14日连续奖励" initialValue={0} style={{ flex: 1 }}>
              <InputNumber min={0} max={10000} style={{ width: '100%' }} />
            </Form.Item>
            <Form.Item name="streak_30d_bonus" label="30日连续奖励" initialValue={0} style={{ flex: 1 }}>
              <InputNumber min={0} max={10000} style={{ width: '100%' }} />
            </Form.Item>
          </div>
          <Form.Item name="description" label="描述">
            <Input.TextArea rows={2} placeholder="规则说明" />
          </Form.Item>
        </Form>
      </Modal>
    </PageContainer>
  );
}