const mockHistory = [
  { id: "BET001", event: "Arsenal vs Man City", selection: "Arsenal Win", odds: 2.80, stake: 100, status: "won", date: "2026-02-18" },
  { id: "BET002", event: "Bayern vs Dortmund", selection: "Over 2.5 Goals", odds: 1.65, stake: 50, status: "lost", date: "2026-02-17" },
  { id: "BET003", event: "NBA: Lakers vs Celtics", selection: "Lakers ML", odds: 1.85, stake: 200, status: "pending", date: "2026-02-19" },
  { id: "BET004", event: "St. George vs Dire Dawa", selection: "St. George Win", odds: 1.65, stake: 500, status: "won", date: "2026-02-16" },
]

const statusStyles: Record<string, string> = {
  won: "text-primary bg-primary/20",
  lost: "text-destructive bg-destructive/20",
  pending: "text-yellow-500 bg-yellow-500/20",
}

export default function HistoryPage() {
  return (
    <div className="space-y-4">
      <div className="border-b border-border pb-2 flex items-center justify-between">
        <h1 className="text-sm font-black uppercase tracking-wide text-foreground">Bet History</h1>
        <span className="text-[11px] text-muted-foreground">Please login to see full history</span>
      </div>

      {/* Filter */}
      <div className="flex gap-2">
        {["All", "Won", "Lost", "Pending"].map((f) => (
          <button key={f} className="px-3 py-1 text-[11px] font-semibold rounded border border-border text-muted-foreground hover:border-primary hover:text-primary transition-colors">
            {f}
          </button>
        ))}
      </div>

      <div className="bg-card border border-border rounded overflow-hidden">
        <table className="w-full text-[11px]">
          <thead>
            <tr className="bg-secondary border-b border-border text-muted-foreground uppercase text-[10px]">
              <th className="px-3 py-2 text-left font-semibold">Bet ID</th>
              <th className="px-3 py-2 text-left font-semibold">Event</th>
              <th className="px-3 py-2 text-left font-semibold">Selection</th>
              <th className="px-3 py-2 text-right font-semibold">Odds</th>
              <th className="px-3 py-2 text-right font-semibold">Stake</th>
              <th className="px-3 py-2 text-center font-semibold">Status</th>
              <th className="px-3 py-2 text-left font-semibold">Date</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-border">
            {mockHistory.map((bet) => (
              <tr key={bet.id} className="hover:bg-muted/30 transition-colors">
                <td className="px-3 py-2 font-mono text-muted-foreground">{bet.id}</td>
                <td className="px-3 py-2 font-medium text-foreground">{bet.event}</td>
                <td className="px-3 py-2 text-muted-foreground">{bet.selection}</td>
                <td className="px-3 py-2 text-right font-bold text-primary">{bet.odds.toFixed(2)}</td>
                <td className="px-3 py-2 text-right">{bet.stake} ETB</td>
                <td className="px-3 py-2 text-center">
                  <span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase ${statusStyles[bet.status]}`}>
                    {bet.status}
                  </span>
                </td>
                <td className="px-3 py-2 text-muted-foreground">{bet.date}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}