import { useEffect, useState } from 'react';
import {
  Button,
  Card,
  DatePicker,
  Descriptions,
  Drawer,
  Form,
  Select,
  Space,
  Statistic,
  Table,
  Tag,
  Typography,
  message,
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type { Dayjs } from 'dayjs';
import { request, type Paginated } from '../lib/api';
import { ADMIN_OPTIONS_PAGE_SIZE, fmtTime } from '../lib/constants';
import { downloadExcelCsv } from '../lib/exportExcel';
import { useAdminList } from '../lib/useAdminList';

type Row = {
  id: string;
  redeemAmount: number;
  payoutAmount: number;
  settlementRate: number;
  status: string;
  expectedPayAt: string;
  paidAt?: string;
  createdAt: string;
  store?: { id: string; name: string; cityName: string; phone?: string };
  redeemRecord?: { redeemNo: string; amount?: number; createdAt?: string };
};

type StoreOption = { id: string; name: string; phone: string };

const PAYOUT_STATUS_LABELS: Record<string, string> = {
  PENDING: '待打款',
  PAID: '已打款',
};

const PAYOUT_STATUS_COLORS: Record<string, string> = {
  PENDING: 'orange',
  PAID: 'green',
};

export default function StoreBillsPage() {
  const [form] = Form.useForm();
  const [filters, setFilters] = useState<Record<string, string>>({});
  const [stores, setStores] = useState<StoreOption[]>([]);
  const { data, loading, page, pageSize, setPage, setPageSize, reload } = useAdminList<Row>(
    '/admin/store-payouts',
    () => {
      const qs = new URLSearchParams();
      if (filters.status) qs.set('status', filters.status);
      if (filters.storeId) qs.set('storeId', filters.storeId);
      if (filters.dateFrom) qs.set('dateFrom', filters.dateFrom);
      if (filters.dateTo) qs.set('dateTo', filters.dateTo);
      return qs;
    },
    [filters],
  );
  const [detail, setDetail] = useState<Record<string, unknown> | null>(null);
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [exporting, setExporting] = useState(false);

  useEffect(() => {
    void request<Paginated<StoreOption>>(`/admin/stores?pageSize=${ADMIN_OPTIONS_PAGE_SIZE}`)
      .then((res) => setStores(res.items))
      .catch(() => {});
  }, []);

  async function confirmPayout(id: string) {
    await request(`/admin/store-payouts/${id}/confirm`, {
      method: 'POST',
      body: JSON.stringify({ remark: '财务确认打款' }),
    });
    message.success('已确认打款');
    reload();
  }

  async function exportExcel() {
    setExporting(true);
    try {
      const qs = new URLSearchParams();
      if (filters.status) qs.set('status', filters.status);
      if (filters.storeId) qs.set('storeId', filters.storeId);
      if (filters.dateFrom) qs.set('dateFrom', filters.dateFrom);
      if (filters.dateTo) qs.set('dateTo', filters.dateTo);
      const result = await request<{ csv: string; count: number }>(
        `/admin/store-payouts/export?${qs}`,
      );
      downloadExcelCsv(result.csv, `门店账单_${filters.dateFrom || 'all'}_${filters.dateTo || 'all'}.csv`);
      message.success(`已导出 ${result.count} 条`);
    } finally {
      setExporting(false);
    }
  }

  const summary = data?.summary;

  const columns: ColumnsType<Row> = [
    {
      title: '核销日期',
      width: 110,
      render: (_, r) =>
        (r.redeemRecord?.createdAt || r.createdAt || '').toString().slice(0, 10) || '—',
    },
    { title: '门店', dataIndex: ['store', 'name'], width: 140, ellipsis: true },
    { title: '登录手机', dataIndex: ['store', 'phone'], width: 120, render: (v) => v || '—' },
    { title: '城市', dataIndex: ['store', 'cityName'], width: 90 },
    {
      title: '核销单号',
      dataIndex: ['redeemRecord', 'redeemNo'],
      width: 160,
      ellipsis: true,
      render: (v) => v || '—',
    },
    { title: '核销面额', dataIndex: 'redeemAmount', width: 100, render: (v) => `¥${v}` },
    {
      title: '核销比例',
      dataIndex: 'settlementRate',
      width: 90,
      render: (v) => (v != null ? `${Math.round(Number(v) * 100)}%` : '—'),
    },
    {
      title: '应付门店',
      dataIndex: 'payoutAmount',
      width: 100,
      render: (v) => `¥${v}`,
    },
    {
      title: '打款状态',
      dataIndex: 'status',
      width: 100,
      render: (s) => <Tag color={PAYOUT_STATUS_COLORS[s] || 'default'}>{PAYOUT_STATUS_LABELS[s] || s}</Tag>,
    },
    { title: '预计打款(T+1)', dataIndex: 'expectedPayAt', width: 160, render: fmtTime },
    {
      title: '操作',
      width: 140,
      fixed: 'right',
      render: (_, row) => (
        <Space size={0}>
          <Button
            type="link"
            size="small"
            onClick={async () => {
              setDetail(await request(`/admin/store-payouts/${row.id}`));
              setDrawerOpen(true);
            }}
          >
            详情
          </Button>
          {row.status === 'PENDING' && (
            <Button type="link" size="small" onClick={() => void confirmPayout(row.id)}>
              确认打款
            </Button>
          )}
        </Space>
      ),
    },
  ];

  return (
    <div>
      <Space direction="vertical" size={0} style={{ marginBottom: 16 }}>
        <Typography.Title level={4} style={{ margin: 0 }}>
          门店账单
        </Typography.Title>
        <Typography.Text type="secondary">
          T+1 结算：按日列出门店核销订单，应付 = 核销面额 × 门店核销比例
        </Typography.Text>
      </Space>

      {summary && (
        <Card size="small" style={{ marginBottom: 16 }}>
          <Space size="large" wrap>
            <Statistic title="明细笔数" value={summary.count} />
            <Statistic title="核销面额合计" value={summary.redeemAmount ?? 0} prefix="¥" precision={2} />
            <Statistic title="应付门店合计" value={summary.payoutAmount ?? summary.totalAmount} prefix="¥" precision={2} />
          </Space>
        </Card>
      )}

      <Form
        form={form}
        layout="inline"
        style={{ marginBottom: 16 }}
        onFinish={(v: {
          storeId?: string;
          status?: string;
          dateRange?: [Dayjs, Dayjs];
        }) => {
          setFilters({
            storeId: v.storeId || '',
            status: v.status || '',
            dateFrom: v.dateRange?.[0]?.format('YYYY-MM-DD') || '',
            dateTo: v.dateRange?.[1]?.format('YYYY-MM-DD') || '',
          });
          setPage(1);
        }}
      >
        <Form.Item name="storeId" label="门店">
          <Select
            allowClear
            showSearch
            placeholder="全部门店"
            style={{ width: 200 }}
            optionFilterProp="label"
            options={stores.map((s) => ({
              value: s.id,
              label: `${s.name}（${s.phone}）`,
            }))}
          />
        </Form.Item>
        <Form.Item name="status" label="打款状态">
          <Select
            allowClear
            style={{ width: 120 }}
            placeholder="全部"
            options={Object.entries(PAYOUT_STATUS_LABELS).map(([value, label]) => ({ value, label }))}
          />
        </Form.Item>
        <Form.Item name="dateRange" label="核销日期">
          <DatePicker.RangePicker />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
        </Form.Item>
        <Form.Item>
          <Button
            onClick={() => {
              form.resetFields();
              setFilters({});
              setPage(1);
            }}
          >
            重置
          </Button>
        </Form.Item>
        <Form.Item>
          <Button loading={exporting} onClick={() => void exportExcel()}>
            导出 Excel
          </Button>
        </Form.Item>
      </Form>

      <Table
        rowKey="id"
        className="admin-table-nowrap"
        loading={loading}
        columns={columns}
        dataSource={data?.items ?? []}
        scroll={{ x: 1300 }}
        pagination={{
          current: page,
          pageSize,
          total: data?.total ?? 0,
          showSizeChanger: true,
          onChange: (p, ps) => {
            setPage(p);
            setPageSize(ps);
          },
        }}
      />

      <Drawer title="账单详情" width={520} open={drawerOpen} onClose={() => setDrawerOpen(false)}>
        {detail && (
          <Descriptions column={1} bordered size="small">
            <Descriptions.Item label="门店">
              {String((detail.store as { name?: string })?.name ?? '—')}
            </Descriptions.Item>
            <Descriptions.Item label="核销单号">
              {String((detail.redeemRecord as { redeemNo?: string })?.redeemNo ?? '—')}
            </Descriptions.Item>
            <Descriptions.Item label="核销面额">¥{String(detail.redeemAmount)}</Descriptions.Item>
            <Descriptions.Item label="应付金额">¥{String(detail.payoutAmount)}</Descriptions.Item>
            <Descriptions.Item label="结算比例">
              {detail.settlementRate ? `${Math.round(Number(detail.settlementRate) * 100)}%` : '—'}
            </Descriptions.Item>
            <Descriptions.Item label="状态">
              {PAYOUT_STATUS_LABELS[String(detail.status)] || String(detail.status)}
            </Descriptions.Item>
            <Descriptions.Item label="预计打款">{fmtTime(String(detail.expectedPayAt))}</Descriptions.Item>
            <Descriptions.Item label="实际打款">
              {detail.paidAt ? fmtTime(String(detail.paidAt)) : '—'}
            </Descriptions.Item>
          </Descriptions>
        )}
      </Drawer>
    </div>
  );
}