import { useEffect, useState } from 'react';
import { View, Text, ScrollView } from '@tarojs/components';
import Taro, { useDidShow } from '@tarojs/taro';
import HqHeader from '../../components/HqHeader';
import { request, type Paginated } from '../../lib/api';
import { useHqSession } from '../../lib/session';
import { ORDER_STATUS_LABELS, badgeClass, fmtMoney, fmtTime } from '../../lib/constants';

type OrderRow = {
  id: string;
  orderNo: string;
  status: string;
  deliveryType?: string;
  payAmount: number | string;
  receiverName?: string;
  receiverPhone?: string;
  createdAt: string;
};

const TABS = [
  { key: '', label: '全部' },
  { key: 'PENDING_PAY', label: '待付款' },
  { key: 'PENDING_SHIP', label: '待发货' },
  { key: 'SHIPPING', label: '配送中' },
  { key: 'COMPLETED', label: '已完成' },
  { key: 'REFUNDING', label: '退款中' },
];

export default function OrdersPage() {
  useHqSession();
  const [status, setStatus] = useState('');
  const [rows, setRows] = useState<OrderRow[]>([]);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(true);

  function load() {
    setLoading(true);
    const qs = new URLSearchParams({ pageSize: '50' });
    if (status) qs.set('status', status);
    request<Paginated<OrderRow>>(`/admin/orders?${qs.toString()}`)
      .then((d) => {
        setRows(d.items);
        setTotal(d.total);
      })
      .catch(() => setRows([]))
      .finally(() => setLoading(false));
  }

  useEffect(load, [status]);
  useDidShow(load);

  return (
    <View className="hq-page">
      <HqHeader title="订单中心" back />

      <ScrollView scrollX enhanced showScrollbar={false} className="hq-tabs">
        {TABS.map((t) => (
          <View
            key={t.key}
            className={`hq-tab${status === t.key ? ' hq-tab--active' : ''}`}
            onClick={() => setStatus(t.key)}
          >
            <Text>{t.label}</Text>
          </View>
        ))}
      </ScrollView>

      <Text className="hq-section-title">
        <Text>订单列表</Text>
        <Text className="hq-muted" style="font-size:12px;font-weight:400">共 {total} 单</Text>
      </Text>

      {loading && <View className="hq-empty">加载中…</View>}
      {!loading && rows.length === 0 && <View className="hq-empty">暂无订单</View>}

      {rows.map((o) => (
        <View
          key={o.id}
          className="hq-card"
          style="margin-top:8px;margin-bottom:0"
          onClick={() => Taro.navigateTo({ url: `/pages/orders/detail?id=${o.id}` })}
        >
          <View className="hq-row">
            <Text style="font-size:13px;color:var(--hq-muted)">{o.orderNo}</Text>
            <Text className={`hq-badge ${badgeClass(o.status)}`}>{ORDER_STATUS_LABELS[o.status] || o.status}</Text>
          </View>
          <View className="hq-row" style="margin-top:10px">
            <Text style="font-size:14px">{o.receiverName || '—'} · {o.receiverPhone || ''}</Text>
            <Text style="font-size:16px;font-weight:700;color:var(--hq-red)">¥{fmtMoney(o.payAmount)}</Text>
          </View>
          <Text className="hq-muted" style="font-size:11px;display:block;margin-top:6px">{fmtTime(o.createdAt)}</Text>
        </View>
      ))}
    </View>
  );
}