import { useEffect, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import {
  Badge,
  Button,
  Descriptions,
  Drawer,
  Image,
  Input,
  Modal,
  Space,
  Table,
  Tabs,
  Tag,
  Typography,
  message,
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type {
  StoreInfoChangeFieldDiff,
  StoreInfoChangeRequestDto,
  StoreInfoChangeStatus,
  StorePackageAuditSummaryDto,
  StorePackageChangeRequestDto,
  StorePackageChangeStatus,
} from '@dukang/shared-types';
import {
  STORE_INFO_CHANGE_STATUS_LABELS,
  STORE_INFO_CHANGEABLE_FIELD_LABELS,
} from '@dukang/shared-types';
import { request, type Paginated } from '../lib/api';
import { notifyPackageAuditChanged } from '../lib/admin-events';
import { fmtTime } from '../lib/constants';
import StorePackageAuditPanel from '../components/StorePackageAuditPanel';

const HQ_PACKAGE_STATUS_LABELS: Record<StorePackageChangeStatus, string> = {
  PENDING: '待审核',
  APPROVED: '已通过',
  REJECTED: '已驳回',
};

function fmtFieldValue(field: string, v: unknown): string {
  if (v == null || String(v).trim() === '') return '（空）';
  if (field === 'avgPrice' || field === 'latitude' || field === 'longitude') {
    return String(v);
  }
  if (field === 'envPhotoUrls' && Array.isArray(v)) {
    return `${v.length} 张`;
  }
  if (field === 'coverUrl') return '见对比图';
  return String(v);
}

function InfoChangeImageDiff({
  field,
  live,
  proposed,
  imageSize = 72,
}: {
  field: string;
  live: unknown;
  proposed: unknown;
  imageSize?: number;
}) {
  const liveUrls =
    field === 'coverUrl'
      ? [String(live || '').trim()].filter(Boolean)
      : Array.isArray(live)
        ? live.map((u) => String(u || '').trim()).filter(Boolean)
        : [];
  const proposedUrls =
    field === 'coverUrl'
      ? [String(proposed || '').trim()].filter(Boolean)
      : Array.isArray(proposed)
        ? proposed.map((u) => String(u || '').trim()).filter(Boolean)
        : [];

  return (
    <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
      <div>
        <Typography.Text type="secondary" style={{ display: 'block', marginBottom: 6 }}>
          变更前
        </Typography.Text>
        {liveUrls.length ? (
          <Image.PreviewGroup>
            <Space wrap size={8}>
              {liveUrls.map((url) => (
                <Image key={`live-${url}`} src={url} width={imageSize} height={imageSize} style={{ objectFit: 'cover', borderRadius: 4 }} />
              ))}
            </Space>
          </Image.PreviewGroup>
        ) : (
          <Typography.Text type="secondary">（空）</Typography.Text>
        )}
      </div>
      <div>
        <Typography.Text type="secondary" style={{ display: 'block', marginBottom: 6 }}>
          变更后
        </Typography.Text>
        {proposedUrls.length ? (
          <Image.PreviewGroup>
            <Space wrap size={8}>
              {proposedUrls.map((url) => (
                <Image key={`new-${url}`} src={url} width={imageSize} height={imageSize} style={{ objectFit: 'cover', borderRadius: 4 }} />
              ))}
            </Space>
          </Image.PreviewGroup>
        ) : (
          <Typography.Text type="secondary">（空）</Typography.Text>
        )}
      </div>
    </div>
  );
}

function InfoChangeAuditPanel({
  initialRequestId,
}: {
  initialRequestId?: string | null;
}) {
  const [loading, setLoading] = useState(false);
  const [items, setItems] = useState<StoreInfoChangeRequestDto[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [status, setStatus] = useState<string>('PENDING');
  const [pendingCount, setPendingCount] = useState(0);
  const [detailOpen, setDetailOpen] = useState(false);
  const [detailLoading, setDetailLoading] = useState(false);
  const [detail, setDetail] = useState<(StoreInfoChangeRequestDto & { diffs?: StoreInfoChangeFieldDiff[] }) | null>(null);
  const [rejectOpen, setRejectOpen] = useState(false);
  const [rejectReason, setRejectReason] = useState('');
  const [activeId, setActiveId] = useState<string | null>(null);
  const [infoFullscreen, setInfoFullscreen] = useState(false);

  async function reload(nextPage = page, nextStatus = status) {
    setLoading(true);
    try {
      const qs = new URLSearchParams({ page: String(nextPage), pageSize: '20' });
      if (nextStatus) qs.set('status', nextStatus);
      const [data, summary] = await Promise.all([
        request<{ items: StoreInfoChangeRequestDto[]; total: number; page?: number }>(
          `/admin/store-info-change-requests?${qs}`,
        ),
        request<{ pendingCount: number }>('/admin/store-info-change-requests/summary'),
      ]);
      setItems(data.items);
      setTotal(data.total);
      setPage(data.page ?? nextPage);
      setPendingCount(summary.pendingCount ?? 0);
    } catch (e) {
      message.error(e instanceof Error ? e.message : '加载失败');
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    void reload(1, status);
  }, [status]);

  useEffect(() => {
    if (initialRequestId) void openDetail(initialRequestId);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  async function openDetail(id: string) {
    setDetailOpen(true);
    setDetailLoading(true);
    setDetail(null);
    try {
      const data = await request<StoreInfoChangeRequestDto & { diffs?: StoreInfoChangeFieldDiff[] }>(
        `/admin/store-info-change-requests/${id}`,
      );
      setDetail(data);
    } catch (e) {
      message.error(e instanceof Error ? e.message : '加载详情失败');
      setDetailOpen(false);
    } finally {
      setDetailLoading(false);
    }
  }

  async function audit(id: string, action: 'APPROVE' | 'REJECT', reason?: string) {
    try {
      await request(`/admin/store-info-change-requests/${id}/audit`, {
        method: 'PUT',
        body: JSON.stringify(
          action === 'REJECT' ? { action, rejectReason: reason } : { action },
        ),
      });
      message.success(action === 'APPROVE' ? '已通过' : '已驳回');
      setDetailOpen(false);
      notifyPackageAuditChanged();
      void reload(page, status);
    } catch (e) {
      message.error(e instanceof Error ? e.message : '操作失败');
    }
  }

  const columns: ColumnsType<StoreInfoChangeRequestDto> = [
    { title: '门店', dataIndex: 'storeName', render: (_, row) => row.storeName || row.storeId },
    {
      title: '状态',
      dataIndex: 'status',
      render: (v: StoreInfoChangeStatus) => (
        <Tag>{STORE_INFO_CHANGE_STATUS_LABELS[v] ?? v}</Tag>
      ),
    },
    {
      title: '变更字段',
      render: (_, row) =>
        row.changedFields?.length
          ? row.changedFields.map((f) => (
              <Tag key={f}>{STORE_INFO_CHANGEABLE_FIELD_LABELS[f as keyof typeof STORE_INFO_CHANGEABLE_FIELD_LABELS] ?? f}</Tag>
            ))
          : '—',
    },
    {
      title: '提交方',
      render: (_, row) =>
        row.submitterType === 'PARTNER' ? '合伙人' : row.submitterType === 'SHOP' ? '门店' : '总部',
    },
    { title: '提交时间', dataIndex: 'createdAt', render: (v) => fmtTime(String(v)) },
    {
      title: '操作',
      render: (_, row) => (
        <Space>
          <Button type="link" onClick={() => void openDetail(row.id)}>
            查看
          </Button>
          {row.status === 'PENDING' ? (
            <>
              <Button type="link" onClick={() => void audit(row.id, 'APPROVE')}>
                通过
              </Button>
              <Button
                type="link"
                danger
                onClick={() => {
                  setActiveId(row.id);
                  setRejectReason('');
                  setRejectOpen(true);
                }}
              >
                驳回
              </Button>
            </>
          ) : (
            row.rejectReason || null
          )}
        </Space>
      ),
    },
  ];

  return (
    <div>
      <Space style={{ marginBottom: 16 }}>
        {(['PENDING', 'APPROVED', 'REJECTED', ''] as const).map((s) => (
          <Button
            key={s || 'all'}
            type={status === s ? 'primary' : 'default'}
            onClick={() => setStatus(s)}
          >
            {s === 'PENDING' ? (
              <Badge count={pendingCount} size="small" offset={[8, -2]}>
                {STORE_INFO_CHANGE_STATUS_LABELS.PENDING}
              </Badge>
            ) : s ? (
              STORE_INFO_CHANGE_STATUS_LABELS[s]
            ) : (
              '全部'
            )}
          </Button>
        ))}
      </Space>
      <Table
        rowKey="id"
        loading={loading}
        columns={columns}
        dataSource={items}
        pagination={{
          current: page,
          total,
          pageSize: 20,
          onChange: (p) => void reload(p, status),
        }}
      />

      <Drawer
        title={detail ? `${detail.storeName || detail.storeId} · 信息变更` : '信息变更详情'}
        width={infoFullscreen ? '100%' : 680}
        open={detailOpen}
        onClose={() => {
          setDetailOpen(false);
          setInfoFullscreen(false);
        }}
        extra={
          <Space>
            <Button onClick={() => setInfoFullscreen((v) => !v)}>
              {infoFullscreen ? '退出全屏' : '全屏查看'}
            </Button>
            {detail?.status === 'PENDING' ? (
              <>
                <Button onClick={() => void audit(detail.id, 'APPROVE')}>通过</Button>
                <Button
                  danger
                  onClick={() => {
                    setActiveId(detail.id);
                    setRejectReason('');
                    setRejectOpen(true);
                  }}
                >
                  驳回
                </Button>
              </>
            ) : null}
          </Space>
        }
      >
        {detailLoading ? (
          <Typography.Text type="secondary">加载中…</Typography.Text>
        ) : detail ? (
          <>
            <Space style={{ marginBottom: 16 }} wrap>
              <Tag>{STORE_INFO_CHANGE_STATUS_LABELS[detail.status]}</Tag>
              <Typography.Text type="secondary">
                提交方：{detail.submitterType === 'PARTNER' ? '合伙人' : detail.submitterType === 'SHOP' ? '门店' : '总部'} · {fmtTime(detail.createdAt)}
              </Typography.Text>
            </Space>
            {detail.rejectReason ? (
              <Typography.Paragraph type="danger">驳回原因：{detail.rejectReason}</Typography.Paragraph>
            ) : null}
            {detail.diffs && detail.diffs.length ? (
              <Descriptions column={1} bordered size="small">
                {detail.diffs.map((d) => (
                  <Descriptions.Item
                    key={d.field}
                    label={STORE_INFO_CHANGEABLE_FIELD_LABELS[d.field] ?? d.field}
                  >
                    {d.field === 'coverUrl' || d.field === 'envPhotoUrls' ? (
                      <InfoChangeImageDiff
                        field={d.field}
                        live={d.live}
                        proposed={d.proposed}
                        imageSize={infoFullscreen ? 160 : 72}
                      />
                    ) : (
                      <span>
                        <Typography.Text delete type="secondary">
                          {fmtFieldValue(d.field, d.live)}
                        </Typography.Text>
                        <Typography.Text type="secondary"> → </Typography.Text>
                        <Typography.Text strong>
                          {fmtFieldValue(d.field, d.proposed)}
                        </Typography.Text>
                      </span>
                    )}
                  </Descriptions.Item>
                ))}
              </Descriptions>
            ) : (
              <Typography.Text type="secondary">无变更字段明细</Typography.Text>
            )}
          </>
        ) : null}
      </Drawer>

      <Modal
        title="驳回信息变更"
        open={rejectOpen}
        onCancel={() => setRejectOpen(false)}
        onOk={() => {
          if (!activeId) return;
          if (!rejectReason.trim()) {
            message.warning('请填写驳回原因');
            return;
          }
          void audit(activeId, 'REJECT', rejectReason.trim());
          setRejectOpen(false);
        }}
      >
        <Input.TextArea
          rows={3}
          value={rejectReason}
          placeholder="驳回原因"
          onChange={(e) => setRejectReason(e.target.value)}
        />
      </Modal>
    </div>
  );
}

export default function StorePackageAuditsPage() {
  const [loading, setLoading] = useState(false);
  const [items, setItems] = useState<StorePackageChangeRequestDto[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [status, setStatus] = useState<string>('PENDING');
  const [pendingCount, setPendingCount] = useState(0);
  const [rejectOpen, setRejectOpen] = useState(false);
  const [rejectReason, setRejectReason] = useState('');
  const [activeId, setActiveId] = useState<string | null>(null);
  const [detailOpen, setDetailOpen] = useState(false);
  const [activeRequestId, setActiveRequestId] = useState<string | null>(null);
  const [drawerTitle, setDrawerTitle] = useState('套餐变更详情');
  const [packageFullscreen, setPackageFullscreen] = useState(false);

  async function reload(nextPage = page, nextStatus = status) {
    setLoading(true);
    try {
      const qs = new URLSearchParams({
        page: String(nextPage),
        pageSize: '20',
      });
      if (nextStatus) qs.set('status', nextStatus);
      const [data, summary] = await Promise.all([
        request<Paginated<StorePackageChangeRequestDto>>(`/admin/store-package-audits?${qs}`),
        request<StorePackageAuditSummaryDto>('/admin/store-package-audits/summary'),
      ]);
      setItems(data.items);
      setTotal(data.total);
      setPage(data.page);
      setPendingCount(summary.pendingCount ?? 0);
    } catch (e) {
      message.error(e instanceof Error ? e.message : '加载失败');
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    void reload(1, status);
  }, [status]);

  const [searchParams] = useSearchParams();
  const initialTab = searchParams.get('tab') === 'info' ? 'info' : 'package';
  const [activeTab, setActiveTab] = useState<string>(initialTab);
  const infoRequestId = searchParams.get('infoRequestId');
  useEffect(() => {
    const rid = searchParams.get('requestId');
    if (rid) {
      setActiveRequestId(rid);
      setDetailOpen(true);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  function openDetail(id: string) {
    setActiveRequestId(id);
    setDrawerTitle('套餐变更详情');
    setDetailOpen(true);
  }

  async function audit(id: string, action: 'APPROVE' | 'REJECT', reason?: string) {
    try {
      await request(`/admin/store-package-audits/${id}/audit`, {
        method: 'PUT',
        body: JSON.stringify(
          action === 'REJECT' ? { action, rejectReason: reason } : { action },
        ),
      });
      message.success(action === 'APPROVE' ? '已通过' : '已驳回');
      setDetailOpen(false);
      notifyPackageAuditChanged();
      void reload(page, status);
    } catch (e) {
      message.error(e instanceof Error ? e.message : '操作失败');
    }
  }

  const columns: ColumnsType<StorePackageChangeRequestDto> = [
    { title: '门店', dataIndex: 'storeName', render: (_, row) => row.storeName || row.storeId },
    {
      title: '状态',
      dataIndex: 'status',
      render: (v: StorePackageChangeRequestDto['status']) => (
        <Tag>{HQ_PACKAGE_STATUS_LABELS[v] ?? v}</Tag>
      ),
    },
    {
      title: '套餐数',
      render: (_, row) => row.packages?.length ?? 0,
    },
    {
      title: '提交方',
      render: (_, row) => (row.submitterType === 'PARTNER' ? '合伙人' : '门店'),
    },
    { title: '提交时间', dataIndex: 'createdAt', render: (v) => fmtTime(String(v)) },
    {
      title: '操作',
      render: (_, row) => (
        <Space>
          <Button type="link" onClick={() => openDetail(row.id)}>
            查看变更
          </Button>
          {row.status === 'PENDING' ? (
            <>
              <Button type="link" onClick={() => void audit(row.id, 'APPROVE')}>
                通过
              </Button>
              <Button
                type="link"
                danger
                onClick={() => {
                  setActiveId(row.id);
                  setRejectReason('');
                  setRejectOpen(true);
                }}
              >
                驳回
              </Button>
            </>
          ) : (
            row.rejectReason || null
          )}
        </Space>
      ),
    },
  ];

  return (
    <div>
      <Typography.Title level={4}>审核通知</Typography.Title>
      <Tabs
        activeKey={activeTab}
        onChange={setActiveTab}
        items={[
          {
            key: 'package',
            label: '套餐审核',
            children: (
              <>
                <Space style={{ marginBottom: 16 }}>
                  {(['PENDING', 'APPROVED', 'REJECTED', ''] as const).map((s) => (
                    <Button key={s || 'all'} type={status === s ? 'primary' : 'default'} onClick={() => setStatus(s)}>
                      {s === 'PENDING' ? (
                        <Badge count={pendingCount} size="small" offset={[8, -2]}>
                          {HQ_PACKAGE_STATUS_LABELS.PENDING}
                        </Badge>
                      ) : s ? (
                        HQ_PACKAGE_STATUS_LABELS[s]
                      ) : (
                        '全部'
                      )}
                    </Button>
                  ))}
                </Space>
                <Table
                  rowKey="id"
                  loading={loading}
                  columns={columns}
                  dataSource={items}
                  pagination={{
                    current: page,
                    total,
                    pageSize: 20,
                    onChange: (p) => void reload(p, status),
                  }}
                />
              </>
            ),
          },
          {
            key: 'info',
            label: '信息变更',
            children: <InfoChangeAuditPanel initialRequestId={infoRequestId} />,
          },
        ]}
      />

      <Drawer
        title={drawerTitle}
        width={packageFullscreen ? '100%' : 880}
        open={detailOpen}
        onClose={() => {
          setDetailOpen(false);
          setPackageFullscreen(false);
        }}
        destroyOnClose
        extra={
          <Button onClick={() => setPackageFullscreen((v) => !v)}>
            {packageFullscreen ? '退出全屏' : '全屏查看'}
          </Button>
        }
      >
        {activeRequestId ? (
          <StorePackageAuditPanel
            requestId={activeRequestId}
            fullscreen={packageFullscreen}
            onAudited={() => {
              setDetailOpen(false);
              void reload(page, status);
            }}
            onDetailLoaded={(d) => {
              if (d) setDrawerTitle(`${d.storeName || d.storeId} · 套餐变更`);
            }}
          />
        ) : null}
      </Drawer>

      <Modal
        title="驳回套餐变更"
        open={rejectOpen}
        onCancel={() => setRejectOpen(false)}
        onOk={() => {
          if (!activeId) return;
          if (!rejectReason.trim()) {
            message.warning('请填写驳回原因');
            return;
          }
          void audit(activeId, 'REJECT', rejectReason.trim());
          setRejectOpen(false);
        }}
      >
        <Input.TextArea
          rows={3}
          value={rejectReason}
          placeholder="驳回原因"
          onChange={(e) => setRejectReason(e.target.value)}
        />
      </Modal>
    </div>
  );
}