import { useState, useEffect, useMemo, useCallback } from 'react';
import {
  Table,
  Button,
  Space,
  Input,
  Select,
  Tag,
  Popconfirm,
  message,
  Modal,
  Form,
  InputNumber,
  DatePicker,
  Image,
  Switch,
} from 'antd';
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
} from '@ant-design/icons';
import {
  bannerApi,
  type BannerItem,
  type CreateBannerReq,
  type UpdateBannerReq,
} from '../../api/health/banners';
import { mediaApi, type MediaItem } from '../../api/health/media';
import { AuthButton } from '../../components/AuthButton';
import { PageContainer } from '../../components/PageContainer';
import { formatDateTime } from '../../utils/format';
import { resolveMediaUrl } from '../../utils/media';
import { dayjs } from '../../utils/dayjs';

// --- 常量 ---

const STATUS_OPTIONS = [
  { value: 'active', label: '启用', color: 'success' },
  { value: 'inactive', label: '停用', color: 'default' },
] as const;

const LINK_TYPE_OPTIONS = [
  { value: 'none', label: '无链接' },
  { value: 'article', label: '文章' },
  { value: 'external', label: '外部链接' },
] as const;

// --- 状态配置 ---

function getStatusConfig(status: string) {
  return STATUS_OPTIONS.find((s) => s.value === status) ?? { value: status, label: status, color: 'default' };
}

function getLinkTypeLabel(type?: string) {
  if (!type || type === 'none') return '-';
  return LINK_TYPE_OPTIONS.find((o) => o.value === type)?.label ?? type;
}

// --- 表单值类型 ---

interface FormValues {
  media_item_id: string;
  title?: string;
  subtitle?: string;
  link_type?: string;
  link_target?: string;
  sort_order?: number;
  status?: string;
  time_range?: [dayjs.Dayjs, dayjs.Dayjs];
}

export default function BannerManage() {
  const [data, setData] = useState<BannerItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [statusFilter, setStatusFilter] = useState<string>('');

  // 弹窗状态
  const [modalOpen, setModalOpen] = useState(false);
  const [editingRecord, setEditingRecord] = useState<BannerItem | null>(null);
  const [form] = Form.useForm<FormValues>();
  const [submitting, setSubmitting] = useState(false);

  // 媒体选择器
  const [mediaItems, setMediaItems] = useState<MediaItem[]>([]);
  const [mediaLoading, setMediaLoading] = useState(false);

  // ---- 加载数据 ----

  const fetchData = useCallback(async () => {
    setLoading(true);
    try {
      const result = await bannerApi.list(statusFilter || undefined);
      setData(result);
    } catch {
      message.error('加载轮播图列表失败');
    } finally {
      setLoading(false);
    }
  }, [statusFilter]);

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

  // ---- 媒体文件搜索 ----

  const searchMedia = useCallback(async (keyword: string) => {
    setMediaLoading(true);
    try {
      const result = await mediaApi.list({
        page: 1,
        page_size: 20,
        keyword: keyword || undefined,
        content_type: 'image/',
      });
      setMediaItems(result.data);
    } catch {
      // 静默处理
    } finally {
      setMediaLoading(false);
    }
  }, []);

  // 初次打开弹窗时加载媒体
  useEffect(() => {
    if (modalOpen) {
      searchMedia('');
    }
  }, [modalOpen, searchMedia]);

  // ---- 操作 ----

  const openCreateModal = () => {
    setEditingRecord(null);
    form.resetFields();
    form.setFieldsValue({
      link_type: 'none',
      status: 'active',
      sort_order: 0,
    });
    setModalOpen(true);
  };

  const openEditModal = useCallback((record: BannerItem) => {
    setEditingRecord(record);
    form.resetFields();
    form.setFieldsValue({
      media_item_id: record.media_item_id,
      title: record.title,
      subtitle: record.subtitle,
      link_type: record.link_type || 'none',
      link_target: record.link_target,
      sort_order: record.sort_order,
      status: record.status,
      time_range:
        record.start_time && record.end_time
          ? [dayjs(record.start_time), dayjs(record.end_time)]
          : undefined,
    });
    setModalOpen(true);
  }, [form]);

  const handleSubmit = async (values: FormValues) => {
    setSubmitting(true);
    try {
      const payload: CreateBannerReq | UpdateBannerReq = {
        media_item_id: values.media_item_id,
        title: values.title,
        subtitle: values.subtitle,
        link_type: values.link_type === 'none' ? undefined : values.link_type,
        link_target: values.link_target,
        sort_order: values.sort_order,
        status: values.status,
        start_time: values.time_range?.[0]?.toISOString(),
        end_time: values.time_range?.[1]?.toISOString(),
      };

      if (editingRecord) {
        await bannerApi.update(editingRecord.id, {
          ...payload,
          version: editingRecord.version,
        } as UpdateBannerReq);
        message.success('轮播图已更新');
      } else {
        await bannerApi.create(payload as CreateBannerReq);
        message.success('轮播图已创建');
      }

      setModalOpen(false);
      fetchData();
    } catch {
      message.error(editingRecord ? '更新失败' : '创建失败');
    } finally {
      setSubmitting(false);
    }
  };

  const handleDelete = useCallback(async (record: BannerItem) => {
    try {
      await bannerApi.delete(record.id, record.version);
      message.success('轮播图已删除');
      fetchData();
    } catch {
      message.error('删除失败');
    }
  }, [fetchData]);

  const handleToggleStatus = useCallback(async (record: BannerItem) => {
    try {
      const newStatus = record.status === 'active' ? 'inactive' : 'active';
      const latest = await bannerApi.get(record.id);
      await bannerApi.update(record.id, {
        status: newStatus,
        version: latest.version,
      });
      message.success(newStatus === 'active' ? '已启用' : '已停用');
      fetchData();
    } catch {
      message.error('状态切换失败');
    }
  }, [fetchData]);

  // ---- 列定义 ----

  const columns = useMemo(
    () => [
      {
        title: '排序',
        dataIndex: 'sort_order',
        key: 'sort_order',
        width: 80,
        sorter: (a: BannerItem, b: BannerItem) => a.sort_order - b.sort_order,
      },
      {
        title: '图片',
        dataIndex: 'image_url',
        key: 'image_url',
        width: 100,
        render: (url: string | undefined, record: BannerItem) => {
          if (record.media_deleted) {
            return (
              <div
                style={{
                  width: 60,
                  height: 40,
                  borderRadius: 4,
                  background: '#f0f0f0',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontSize: 11,
                  color: '#999',
                }}
              >
                已删除
              </div>
            );
          }
          const src = record.thumbnail_url || url;
          if (!src) return '-';
          return (
            <Image
              src={resolveMediaUrl(src.replace(/\\/g, '/'))}
              width={60}
              height={40}
              style={{ borderRadius: 4, objectFit: 'cover' }}
              preview={{ mask: null }}
              fallback="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjYwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjZjBmMGYwIi8+PC9zdmc+"
            />
          );
        },
      },
      {
        title: '标题 / 副标题',
        key: 'title_info',
        render: (_: unknown, record: BannerItem) => (
          <div>
            <div style={{ fontWeight: 500 }}>
              {record.title || <span style={{ color: 'var(--ant-color-text-quaternary, #cbd5e1)' }}>无标题</span>}
            </div>
            {record.subtitle && (
              <div
                style={{
                  fontSize: 12,
                  color: 'var(--ant-color-text-secondary, #94a3b8)',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap',
                  maxWidth: 260,
                }}
              >
                {record.subtitle}
              </div>
            )}
          </div>
        ),
      },
      {
        title: '链接',
        key: 'link_info',
        width: 160,
        render: (_: unknown, record: BannerItem) => {
          if (!record.link_type || record.link_type === 'none') return '-';
          return (
            <div>
              <Tag>{getLinkTypeLabel(record.link_type)}</Tag>
              {record.link_target && (
                <div
                  style={{
                    fontSize: 12,
                    color: 'var(--ant-color-text-secondary, #94a3b8)',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap',
                    maxWidth: 120,
                  }}
                >
                  {record.link_target}
                </div>
              )}
            </div>
          );
        },
      },
      {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 100,
        render: (status: string) => {
          const config = getStatusConfig(status);
          return <Tag color={config.color}>{config.label}</Tag>;
        },
      },
      {
        title: '时间范围',
        key: 'time_range',
        width: 200,
        render: (_: unknown, record: BannerItem) => {
          if (!record.start_time && !record.end_time) {
            return <span style={{ color: 'var(--ant-color-text-quaternary, #cbd5e1)' }}>永久</span>;
          }
          const start = record.start_time ? formatDateTime(record.start_time) : '--';
          const end = record.end_time ? formatDateTime(record.end_time) : '--';
          return (
            <div style={{ fontSize: 13 }}>
              {start} ~ {end}
            </div>
          );
        },
      },
      {
        title: '更新时间',
        dataIndex: 'updated_at',
        key: 'updated_at',
        width: 170,
        render: (v: string) => formatDateTime(v),
      },
      {
        title: '操作',
        key: 'actions',
        width: 200,
        render: (_: unknown, record: BannerItem) => (
          <Space size={4} wrap>
            <AuthButton code="health.banners.manage">
              <Button
                size="small"
                type="text"
                icon={<EditOutlined />}
                onClick={() => openEditModal(record)}
              >
                编辑
              </Button>
            </AuthButton>
            <AuthButton code="health.banners.manage">
              <Switch
                size="small"
                checked={record.status === 'active'}
                onChange={() => handleToggleStatus(record)}
              />
            </AuthButton>
            <AuthButton code="health.banners.manage">
              <Popconfirm
                title="确定删除此轮播图？"
                onConfirm={() => handleDelete(record)}
              >
                <Button size="small" type="text" icon={<DeleteOutlined />} danger />
              </Popconfirm>
            </AuthButton>
          </Space>
        ),
      },
    ],
    [handleDelete, handleToggleStatus, openEditModal],
  );

  return (
    <PageContainer
      title="轮播图管理"
      subtitle="管理小程序首页轮播图"
      filters={
        <Select
          value={statusFilter || undefined}
          onChange={(v) => {
            setStatusFilter(v ?? '');
          }}
          placeholder="全部状态"
          allowClear
          style={{ width: 140 }}
          options={STATUS_OPTIONS.map((s) => ({ label: s.label, value: s.value }))}
        />
      }
      onResetFilters={() => setStatusFilter('')}
      actions={
        <AuthButton code="health.banners.manage">
          <Button type="primary" icon={<PlusOutlined />} onClick={openCreateModal}>
            新建轮播图
          </Button>
        </AuthButton>
      }
      loading={loading}
    >
      <Table
        rowKey="id"
        columns={columns}
        dataSource={data}
        loading={loading}
        pagination={false}
        rowClassName={(record) =>
          record.status === 'inactive'
            ? 'ant-table-row-inactive'
            : ''
        }
      />

      {/* 新建/编辑弹窗 */}
      <Modal
        title={editingRecord ? '编辑轮播图' : '新建轮播图'}
        open={modalOpen}
        onCancel={() => setModalOpen(false)}
        onOk={() => form.submit()}
        confirmLoading={submitting}
        okText={editingRecord ? '保存' : '创建'}
        width={600}
        destroyOnHidden
      >
        <Form
          form={form}
          onFinish={handleSubmit}
          layout="vertical"
          style={{ marginTop: 16 }}
        >
          <Form.Item
            name="media_item_id"
            label="媒体文件"
            rules={[{ required: true, message: '请选择媒体文件' }]}
          >
            <Select
              showSearch
              filterOption={false}
              loading={mediaLoading}
              onSearch={searchMedia}
              placeholder="搜索媒体文件..."
              notFoundContent={mediaLoading ? '搜索中...' : '无结果'}
              options={mediaItems.map((item) => ({
                label: item.filename,
                value: item.id,
              }))}
            />
          </Form.Item>

          <Form.Item name="title" label="标题">
            <Input placeholder="轮播图标题" maxLength={100} />
          </Form.Item>

          <Form.Item name="subtitle" label="副标题">
            <Input placeholder="轮播图副标题" maxLength={200} />
          </Form.Item>

          <Form.Item name="link_type" label="链接类型">
            <Select
              options={LINK_TYPE_OPTIONS.map((o) => ({ label: o.label, value: o.value }))}
            />
          </Form.Item>

          <Form.Item
            noStyle
            shouldUpdate={(prev, cur) => prev.link_type !== cur.link_type}
          >
            {({ getFieldValue }) =>
              getFieldValue('link_type') && getFieldValue('link_type') !== 'none' ? (
                <Form.Item
                  name="link_target"
                  label="链接目标"
                  rules={[{ required: true, message: '请输入链接目标' }]}
                >
                  <Input placeholder="输入链接地址或文章ID" />
                </Form.Item>
              ) : null
            }
          </Form.Item>

          <Form.Item name="sort_order" label="排序权重">
            <InputNumber min={0} max={9999} style={{ width: '100%' }} placeholder="数值越小越靠前" />
          </Form.Item>

          <Form.Item name="status" label="状态">
            <Select
              options={STATUS_OPTIONS.map((s) => ({ label: s.label, value: s.value }))}
            />
          </Form.Item>

          <Form.Item name="time_range" label="展示时间范围">
            <DatePicker.RangePicker
              showTime
              style={{ width: '100%' }}
              placeholder={['开始时间', '结束时间']}
              format="YYYY-MM-DD HH:mm"
            />
          </Form.Item>
        </Form>
      </Modal>
    </PageContainer>
  );
}
