import { useEffect, useState } from 'react';
import { Link, useNavigate, useSearchParams } from 'react-router-dom';
import PageHeader from '@dukang/shared-ui/PageHeader';
import AppImage from '@dukang/shared-ui/AppImage';
import OrderStatusTabs from '@dukang/shared-ui/OrderStatusTabs';
import { request } from '../lib/api';

const TABS = [
  { key: 'all', label: '全部' },
  { key: 'pending_pay', label: '待付款' },
  { key: 'pending_ship', label: '待发货' },
  { key: 'pending_receive', label: '待收货' },
  { key: 'completed', label: '已完成' },
];

const STATUS_LABEL: Record<string, string> = {
  PENDING_PAY: '待付款',
  PENDING_SHIP: '待发货',
  OUT_WAREHOUSE: '出库中',
  SHIPPING: '配送中',
  PENDING_RECEIVE: '待收货',
  COMPLETED: '已完成',
  RESHIP: '补发中',
};

export default function OrderListPage() {
  const [params, setParams] = useSearchParams();
  const tab = params.get('tab') || 'all';
  const [data, setData] = useState<{ list: Array<Record<string, unknown>> }>({ list: [] });
  const navigate = useNavigate();

  useEffect(() => {
    request<{ list: Array<Record<string, unknown>> }>('USER_H5', `/trade/orders?tab=${tab}`).then(setData);
  }, [tab]);

  return (
    <div className="page-no-tab">
      <PageHeader title="我的订单" onBack={() => navigate('/mine')} />
      <OrderStatusTabs tabs={TABS} active={tab} onChange={(key) => setParams({ tab: key })} />
      {data.list.length === 0 && <div className="empty">暂无订单</div>}
      {data.list.map((o, i) => {
        const items = (o.items as Array<Record<string, unknown>>) || [];
        const item = items[0];
        const isReshipDemo = i === 0 && tab === 'all';
        const isPendingPay = String(o.status) === 'PENDING_PAY';
        return (
          <div key={String(o.id)} className="card">
            <div className="card-row" style={{ marginBottom: 8 }}>
              <span className="label-md text-muted">订单号: {String(o.orderNo)}</span>
              <span className="status-tag">{STATUS_LABEL[String(o.status)] || String(o.status)}</span>
            </div>
            {isReshipDemo && <span className="tag-reship" style={{ marginBottom: 8, display: 'inline-block' }}>补发示例</span>}
            {item && (
              <div className="card-row">
                <AppImage
                  src={String(item.productImage)}
                  alt={String(item.productName || '')}
                  wrapperClassName="order-list-thumb"
                />
                <div style={{ flex: 1 }}>
                  <div className="headline-md">{String(item.productName)}</div>
                  <div className="text-muted body-md">{String(item.productSpec)} x{Number(item.quantity)}</div>
                </div>
                <div className="amount-lg">¥{Number(o.payAmount)}</div>
              </div>
            )}
            <div style={{ textAlign: 'right', marginTop: 12, display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
              {isPendingPay && (
                <button
                  type="button"
                  className="btn btn-primary btn-pill"
                  onClick={() => navigate(`/pay?orderId=${o.id}`)}
                >
                  去付款
                </button>
              )}
              <Link
                to={`/orders/${o.id}${isReshipDemo ? '?type=reship' : ''}`}
                className="btn btn-outline btn-pill"
              >
                {isReshipDemo ? '查看进度' : '查看详情'}
              </Link>
            </div>
          </div>
        );
      })}
    </div>
  );
}