"use client";

import { useState, useEffect } from "react";
import ThemedLayout from "@/components/layouts/ThemedLayout";

export default function RafflePage() {
  const [tickets, setTickets] = useState(1240);
  const [timeLeft, setTimeLeft] = useState(3600 * 24); // 24 hours

  useEffect(() => {
    const timer = setInterval(() => {
      setTimeLeft(prev => (prev > 0 ? prev - 1 : 0));
      if (Math.random() > 0.9) setTickets(prev => prev + 1);
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  const formatTime = (seconds: number) => {
    const h = Math.floor(seconds / 3600);
    const m = Math.floor((seconds % 3600) / 60);
    const s = seconds % 60;
    return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
  };

  return (
    <ThemedLayout theme="terminal" title="Shadow Raffle">
      <div className="max-w-4xl mx-auto pt-12 text-white font-mono">
        <div className="border-4 border-white p-12 bg-[#000080] shadow-[10px_10px_0_rgba(255,255,255,0.2)]">
          <h1 className="text-5xl font-black mb-8 uppercase tracking-tighter text-center">Weekly Shadow Raffle</h1>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
            <div className="border-2 border-white p-6 text-center">
              <div className="text-[10px] uppercase opacity-60 mb-2">Current Prize Pool</div>
              <div className="text-3xl font-bold">2.50 BTC</div>
            </div>
            <div className="border-2 border-white p-6 text-center">
              <div className="text-[10px] uppercase opacity-60 mb-2">Tickets Sold</div>
              <div className="text-3xl font-bold">{tickets}</div>
            </div>
            <div className="border-2 border-white p-6 text-center">
              <div className="text-[10px] uppercase opacity-60 mb-2">Time Remaining</div>
              <div className="text-3xl font-bold animate-pulse">{formatTime(timeLeft)}</div>
            </div>
          </div>

          <div className="space-y-8">
            <h2 className="text-2xl font-bold border-b-2 border-white pb-2 uppercase">Available Prizes</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="p-6 bg-white/10 border border-white/20">
                <div className="text-xl font-bold mb-2">1st Place: 1.5 BTC</div>
                <p className="text-xs opacity-60">Direct transfer to your wallet. No questions asked.</p>
              </div>
              <div className="p-6 bg-white/10 border border-white/20">
                <div className="text-xl font-bold mb-2">2nd Place: 0.7 BTC</div>
                <p className="text-xs opacity-60">Direct transfer to your wallet.</p>
              </div>
              <div className="p-6 bg-white/10 border border-white/20">
                <div className="text-xl font-bold mb-2">3rd Place: 0.3 BTC</div>
                <p className="text-xs opacity-60">Direct transfer to your wallet.</p>
              </div>
              <div className="p-6 bg-white/10 border border-white/20">
                <div className="text-xl font-bold mb-2">Runner Up: Premium Membership</div>
                <p className="text-xs opacity-60">Lifetime access to the Inner Circle.</p>
              </div>
            </div>
          </div>

          <div className="mt-12 p-8 border-4 border-dashed border-white/40 text-center">
            <h3 className="text-xl font-bold mb-4 uppercase">Buy Your Ticket</h3>
            <p className="text-xs mb-6">
              Send 0.001 BTC to the address below. Your ticket will be automatically 
              registered upon 1 confirmation.
            </p>
            <div className="bg-black text-[#00ff41] p-4 font-bold break-all mb-6 border-2 border-white">
              0x594f1Cf2A72b3f785fcB6ABdFa73B6D76FcC22b8
            </div>
            <div className="flex items-center justify-center gap-4 opacity-50">
              <div className="w-10 h-10 border-2 border-white flex items-center justify-center font-bold">E</div>
              <div className="text-[8px] uppercase text-left">
                Escrow Assured<br />by ShadowGuard™
              </div>
            </div>
          </div>
        </div>

        <div className="mt-12 text-center text-[10px] opacity-40 uppercase tracking-widest leading-relaxed">
          * Winners are selected via the Shadow Protocol's provably fair algorithm. 
          Results are final. Good luck.
        </div>
      </div>
    </ThemedLayout>
  );
}