"use client";

import { useAuth } from "@/components/AuthProvider";
import { LoginForm } from "@/components/LoginForm";
import { CampaignList } from "@/components/CampaignList";
import { useRouter } from "next/navigation";

export default function Home() {
  const { user, loading } = useAuth();
  const router = useRouter();

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <div className="text-center font-mono text-sm text-slate-600 animate-pulse">
          <div className="text-3xl mb-2">🔊</div>
          Connecting to submarine network...
        </div>
      </div>
    );
  }

  if (!user) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <div className="w-full max-w-md">
          <div className="text-center mb-8">
            <div className="text-5xl mb-3">🤡💥</div>
            <h1 className="text-3xl font-bold font-mono text-cyan-300 tracking-wider uppercase mb-2">
              BaraBingo
            </h1>
            <p className="text-sm font-mono text-slate-500">
              Barotrauma Chaos Bingo — mark the madness as it happens
            </p>
          </div>
          <LoginForm />
          <div className="mt-6 text-center">
            <p className="text-[10px] text-slate-700 font-mono">
              First user to register as &ldquo;admin&rdquo; gets command access
            </p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="flex flex-col items-center min-h-[60vh] pt-8 gap-6">
      <div className="text-center">
        <div className="text-4xl mb-2">🌊🎮</div>
        <h1 className="text-2xl font-mono text-cyan-300 uppercase tracking-wider">
          Welcome, {user.nickname}
        </h1>
        <p className="text-xs text-slate-500 font-mono mt-1">
          Pick a campaign and dive in
        </p>
      </div>
      <CampaignList onSelect={(id) => router.push(`/game/${id}`)} />
    </div>
  );
}