"use client"

import { useState } from "react"

export default function CheckTicketPage() {
  const [ticketId, setTicketId] = useState("")
  const [result, setResult] = useState<null | object>(null)

  const handleCheck = () => {
    if (!ticketId.trim()) return
    setResult({
      id: ticketId,
      event: "Arsenal vs Manchester City",
      selection: "Arsenal Win",
      odds: "2.80",
      stake: "100 ETB",
      potentialWin: "280 ETB",
      status: "pending",
      date: "2026-02-19 17:30",
    })
  }

  return (
    <div className="max-w-md mx-auto mt-8 space-y-4">
      <div className="border-b border-border pb-2">
        <h1 className="text-sm font-black uppercase tracking-wide text-foreground">Check Ticket</h1>
      </div>

      <div className="bg-card border border-border rounded-lg p-6 space-y-4">
        <div>
          <label className="text-[11px] font-semibold text-muted-foreground uppercase block mb-2">Ticket ID / Bet Code</label>
          <div className="flex gap-2">
            <input
              type="text"
              value={ticketId}
              onChange={(e) => setTicketId(e.target.value)}
              placeholder="Enter ticket ID or bet code"
              className="flex-1 bg-input border border-border rounded px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary"
              onKeyDown={(e) => e.key === "Enter" && handleCheck()}
            />
            <button
              onClick={handleCheck}
              className="bg-primary text-primary-foreground font-bold px-4 py-2 rounded uppercase text-sm hover:opacity-90 transition-opacity"
            >
              Check
            </button>
          </div>
        </div>

        {result && (
          <div className="border border-border rounded overflow-hidden">
            <div className="bg-secondary px-3 py-2 flex justify-between">
              <span className="text-[11px] font-bold uppercase text-foreground">Ticket Details</span>
              <span className="text-[10px] text-yellow-500 font-bold uppercase bg-yellow-500/20 px-2 py-0.5 rounded">Pending</span>
            </div>
            <div className="p-3 space-y-1.5 text-[11px]">
              {Object.entries(result as Record<string, string>).filter(([k]) => k !== "status").map(([key, val]) => (
                <div key={key} className="flex justify-between">
                  <span className="text-muted-foreground capitalize">{key.replace(/([A-Z])/g, ' $1')}:</span>
                  <span className="text-foreground font-medium">{val}</span>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  )
}