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

export default function BenefitDetailPage() {
  const { id } = useParams();
  usePageView('benefit_detail_view', { couponId: id });
  const navigate = useNavigate();
  const [data, setData] = useState<{ coupon: Record<string, unknown>; ledgers: Array<Record<string, unknown>> } | null>(null);
  useEffect(() => {
    if (id) request('USER_H5', `/benefit/coupons/${id}`).then(setData);
  }, [id]);
  if (!data) return <div className="empty">加载中...</div>;
  return (
    <div className="page-no-tab">
      <PageHeader title="好客权益明细" onBack={() => navigate(-1)} />
      <div className="card">
        <p className="body-md">可用余额：<span className="amount-lg">¥{Number(data.coupon.balance)}</span></p>
        <p className="text-variant body-md">总额：¥{Number(data.coupon.totalAmount)}</p>
      </div>
      {data.ledgers.map((l) => (
        <div key={String(l.id)} className="card">
          <div className="card-row">
            <span className="body-md">{String(l.type)}</span>
            <span className={Number(l.amount) < 0 ? 'text-primary amount-lg' : 'body-md'}>{Number(l.amount) > 0 ? '+' : ''}{Number(l.amount)}</span>
          </div>
          <div className="label-md text-muted">{String(l.remark || '')}</div>
        </div>
      ))}
    </div>
  );
}