import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import PageHeader from '@dukang/shared-ui/PageHeader';

type ReshipStatus = 'ALL' | 'PENDING' | 'SHIPPING' | 'DONE';

const MOCK_ITEMS = [
  { id: '1', orderNo: 'DK20260301001', status: 'PENDING' as const, productName: '杜康窖藏', originalOrderNo: 'DK20260228088', address: '郑州市金水区花园路 88 号' },
  { id: '2', orderNo: 'DK20260302002', status: 'SHIPPING' as const, productName: '杜康特曲', originalOrderNo: 'DK20260215012', address: '郑州市二七区大学路 12 号' },
];

const STATUS_LABEL: Record<string, string> = {
  PENDING: '待配送',
  SHIPPING: '配送中',
  DONE: '已完成',
};

const FILTERS: { key: ReshipStatus; label: string }[] = [
  { key: 'ALL', label: '全部' },
  { key: 'PENDING', label: '待配送' },
  { key: 'SHIPPING', label: '配送中' },
  { key: 'DONE', label: '已完成' },
];

/** BUWR-23：补发处理 */
export default function ReshipPage() {
  const navigate = useNavigate();
  const [filter, setFilter] = useState<ReshipStatus>('ALL');

  const list = MOCK_ITEMS.filter((item) => filter === 'ALL' || item.status === filter);

  return (
    <div className="page-no-tab partner-orders-page">
      <PageHeader title="补发处理" onBack={() => navigate('/')} />

      <p className="label-md text-muted" style={{ padding: '0 20px 8px' }}>
        总部下达的补发工单，确认后可推进配送
      </p>

      <div className="partner-filter-row" style={{ padding: '0 20px 12px' }}>
        {FILTERS.map((f) => (
          <button
            key={f.key}
            type="button"
            className={`partner-chip${filter === f.key ? ' active' : ''}`}
            onClick={() => setFilter(f.key)}
          >
            {f.label}
          </button>
        ))}
      </div>

      {list.length === 0 && <div className="empty">暂无补发工单</div>}

      {list.map((item) => (
        <div key={item.id} className="partner-order-card" style={{ margin: '0 20px 12px' }}>
          <div className="partner-order-card-top">
            <span className="label-md text-muted">原单 {item.originalOrderNo}</span>
            <span className="label-md text-primary" style={{ fontWeight: 600 }}>{STATUS_LABEL[item.status]}</span>
          </div>
          <h3 className="headline-md" style={{ marginTop: 8 }}>{item.productName}</h3>
          <p className="label-md text-muted" style={{ marginTop: 4 }}>补发单号 {item.orderNo}</p>
          <div className="partner-order-address" style={{ marginTop: 12 }}>
            <span className="material-symbols-outlined" style={{ fontSize: 18 }}>location_on</span>
            <p className="line-2-clamp">{item.address}</p>
          </div>
          {item.status === 'PENDING' && (
            <button type="button" className="partner-btn-primary" style={{ marginTop: 16, width: '100%' }}>
              开始配送
            </button>
          )}
        </div>
      ))}
    </div>
  );
}