"use client";

import { useState, useEffect } from "react";

export default function LotteryPage() {
  const [numbers, setNumbers] = useState<number[]>([]);
  const [isDrawing, setIsDrawing] = useState(false);
  const [lastWinner, setLastWinner] = useState<string>("0x7a...f2e1");
  const [jackpot, setJackpot] = useState("1.24 BTC");

  const drawNumbers = () => {
    setIsDrawing(true);
    setNumbers([]);
    
    let count = 0;
    const interval = setInterval(() => {
      setNumbers(prev => [...prev, Math.floor(Math.random() * 99) + 1]);
      count++;
      if (count >= 6) {
        clearInterval(interval);
        setIsDrawing(false);
      }
    }, 500);
  };

  return (
    <div className="min-h-screen bg-[#050505] text-[#ff00ff] font-mono p-8 flex flex-col items-center justify-center">
      <div className="max-w-2xl w-full border-2 border-[#ff00ff]/30 bg-[#111] p-12 shadow-[0_0_50px_rgba(255,0,255,0.1)]">
        <h1 className="text-5xl font-black text-center mb-4 tracking-widest uppercase italic">Shadow Lotto</h1>
        <p className="text-center text-[#ff00ff]/60 mb-12">Provably fair. Completely anonymous. High stakes.</p>

        <div className="grid grid-cols-2 gap-8 mb-12">
          <div className="text-center border border-[#ff00ff]/20 p-4">
            <div className="text-xs uppercase opacity-50 mb-1">Current Jackpot</div>
            <div className="text-3xl font-bold text-white">{jackpot}</div>
          </div>
          <div className="text-center border border-[#ff00ff]/20 p-4">
            <div className="text-xs uppercase opacity-50 mb-1">Last Winner</div>
            <div className="text-sm font-bold text-white">{lastWinner}</div>
          </div>
        </div>

        <div className="flex justify-center gap-4 mb-12 h-16">
          {numbers.map((n, i) => (
            <div key={i} className="w-16 h-16 border-2 border-[#ff00ff] flex items-center justify-center text-2xl font-bold bg-[#ff00ff]/10 animate-pulse">
              {n}
            </div>
          ))}
          {Array.from({ length: 6 - numbers.length }).map((_, i) => (
            <div key={i} className="w-16 h-16 border-2 border-[#ff00ff]/20 flex items-center justify-center text-2xl font-bold opacity-20">
              ?
            </div>
          ))}
        </div>

        <button 
          onClick={drawNumbers}
          disabled={isDrawing}
          className={`w-full py-4 text-xl font-bold uppercase tracking-widest transition-all
            ${isDrawing ? "bg-[#333] text-[#666] cursor-not-allowed" : "bg-[#ff00ff] text-black hover:bg-[#cc00cc] hover:shadow-[0_0_30px_#ff00ff]/40"}
          `}
        >
          {isDrawing ? "Drawing..." : "Buy Ticket (0.0001 BTC)"}
        </button>

        <div className="mt-12 text-[10px] text-[#ff00ff]/40 leading-relaxed">
          * All draws are finalized via the Shadow Protocol. Tickets are non-refundable. 
          Winners are paid out within 3 confirmations. Good luck, traveler.
        </div>
      </div>
    </div>
  );
}