import React, { useEffect, useState } from "react";
import { fetchReceipts, ApiReceipt } from "../lib/api";

export function ReceiptPage() {
  const [receipts, setReceipts] = useState<ApiReceipt[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchReceipts().then(data => { setReceipts(data); setLoading(false); }).catch(() => setLoading(false));
  }, []);

  return <div><h1 className="page-title">📝 回执记录</h1>
    {loading && <p style={{color:"#999"}}>加载中...</p>}
    {!loading && receipts.length === 0 && <p style={{color:"#999"}}>暂无回执记录</p>}
    {receipts.map(rc => <div className="card" key={rc.id}>
      <div className="card-header">
        <div><div className="card-title">{rc.id}</div><div className="card-subtitle">{rc.operation}</div></div>
        <span className={`badge ${rc.result==="success"?"badge-success":"badge-warning"}`}>{rc.result==="success"?"✅":"⚠️"}</span>
      </div>
      <table><tbody>
        <tr><th style={{width:"100px"}}>执行者</th><td>{rc.operator}</td></tr>
        <tr><th>时间</th><td>{rc.timestamp}</td></tr>
      </tbody></table>
    </div>)}
    <div style={{marginTop:"1rem",fontSize:"0.8rem",color:"#999"}}>
      数据源：guanghutansuohe.com/code/bingshuo/yeye/receipts/
    </div>
  </div>;
}