import { useState } from "preact/hooks";

export default function GuestHome() {
  const [spinDirection, setSpinDirection] = useState<"cw" | "ccw">("cw");

  const handleLogoMouseEnter = () => {
    setSpinDirection(Math.random() < 0.5 ? "cw" : "ccw");
  };

  const startOnboarding = (role: "landlord" | "tenant") => {
    try {
      localStorage.setItem("login-purpose", role);
      localStorage.removeItem("lock-route");
    } catch (_error) {
      void _error;
    }
    globalThis.location.href = "/auth/login";
  };

  return (
    <div class="min-h-screen bg-black flex items-start justify-center relative overflow-hidden w-full pt-4">
      {/* Animated background grid */}
      <div class="absolute inset-0 opacity-20">
        <div
          class="absolute inset-0"
          style={{
            backgroundImage:
              `linear-gradient(rgba(107, 206, 220, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(107, 206, 220, 0.1) 1px, transparent 1px)`,
            backgroundSize: "50px 50px",
          }}
        >
        </div>
      </div>

      {/* Three colored orbs matching text highlights */}
      <div class="absolute w-48 h-48 bg-cyan-400 rounded-full filter blur-3xl opacity-20 animate-float-cyan">
      </div>
      <div class="absolute w-56 h-56 bg-purple-400 rounded-full filter blur-3xl opacity-20 animate-float-purple">
      </div>
      <div class="absolute w-52 h-52 bg-pink-400 rounded-full filter blur-3xl opacity-20 animate-float-pink">
      </div>

      <div class="relative z-10 flex flex-col items-center text-center px-6 w-full max-w-none mt-4">
        {/* Large Logo */}
        <div class="mb-4 transform hover:scale-105 transition-transform duration-300">
          <img
            src="/logo.svg"
            alt="Cyber Hybrid Hub Logo"
            width="150"
            height="150"
            class={`drop-shadow-2xl filter drop-shadow-[0_0_20px_rgba(107,206,220,0.5)] spin-on-hover ${
              spinDirection === "cw"
                ? "spin-direction-cw"
                : "spin-direction-ccw"
            }`}
            onMouseEnter={handleLogoMouseEnter}
          />
        </div>

        {/* Cyberpunk Message */}
        <div class="max-w-none w-full px-4">
          <p class="text-lg md:text-xl text-gray-300 mb-6 leading-relaxed">
            However you found <span class="text-pink-400">us</span>, you are
            {" "}
            <span class="text-cyan-400 font-bold">lucky</span>.
            <br class="hidden md:block" />
            <span class="text-purple-400">Click</span> to start your journey.
          </p>

          {/* Enter button form */}
          <div class="mt-10 flex justify-center">
            <form method="get" action="/auth/login">
              <button
                type="submit"
                class="
    group relative isolate overflow-hidden
    w-36 h-36 md:w-44 md:h-44 rounded-full border-2 border-red-500/20
    bg-linear-to-br from-red-300/10 via-red-500/5 to-red-800/15
    shadow-[0_8px_32px_8px_rgba(220,38,38,0.25),0_20px_60px_rgba(127,29,29,0.45),inset_0_2px_4px_rgba(255,255,255,0.1)]
    flex items-center justify-center
    text-xl md:text-2xl font-bold uppercase tracking-widest text-white
    transition-all duration-300 ease-out
    hover:shadow-[0_12px_48px_12px_rgba(239,68,68,0.6),0_24px_80px_rgba(185,28,28,0.7),inset_0_2px_8px_rgba(255,255,255,0.3)]
    hover:scale-105 hover:border-red-400/90
    active:shadow-[0_4px_16px_4px_rgba(185,28,28,0.8),0_8px_24px_rgba(127,29,29,0.9),inset_0_1px_2px_rgba(0,0,0,0.3)]
    active:scale-95
    focus:ring-4 focus:ring-red-400/50 focus:outline-none focus:ring-offset-2 focus:ring-offset-black/50
    backdrop-blur-md
    before:absolute before:inset-0 before:rounded-full before:bg-linear-to-t from-transparent via-white/10 to-white/20 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300
    after:absolute after:inset-0 after:rounded-full after:bg-linear-to-br from-transparent via-red-600/20 to-red-900/40 after:opacity-50
  "
              >
                <span
                  aria-hidden="true"
                  class="absolute inset-0 rounded-full bg-linear-to-b from-transparent via-red-400/8 to-black/25 opacity-40 pointer-events-none group-hover:opacity-70 transition-opacity duration-300"
                >
                </span>
                <span
                  aria-hidden="true"
                  class="absolute inset-[12px] rounded-full border border-red-300/20 bg-linear-to-b from-red-200/20 via-transparent to-red-800/30 shadow-inner shadow-black/40 pointer-events-none"
                >
                </span>
                <span
                  aria-hidden="true"
                  class="absolute top-[18px] left-10 right-10 h-12 rounded-full bg-linear-to-r from-red-400/12 via-red-500/10 to-red-400/12 blur-[2px] opacity-40 group-hover:opacity-80 transition-all duration-300 group-hover:blur-[3px] pointer-events-none"
                >
                </span>
                <span class="relative z-10 drop-shadow-[0_4px_12px_rgba(0,0,0,0.85)] group-hover:drop-shadow-[0_6px_16px_rgba(0,0,0,0.95)] transition-all duration-300 tracking-[0.15em]">
                  ENTER
                </span>
              </button>
            </form>
          </div>

          <div class="mb-8 flex flex-col items-center gap-3">
            <p class="text-xs uppercase tracking-[0.35em] text-gray-400">
              Start Real Estate Onboarding
            </p>
            <div class="flex flex-col sm:flex-row gap-3">
              <button
                type="button"
                onClick={() => startOnboarding("landlord")}
                class="rounded-full border border-cyan-400/40 px-6 py-2 text-sm font-semibold text-cyan-200 hover:border-cyan-300/80 hover:text-white transition"
              >
                Landlord Setup
              </button>
              <button
                type="button"
                onClick={() => startOnboarding("tenant")}
                class="rounded-full border border-pink-400/40 px-6 py-2 text-sm font-semibold text-pink-200 hover:border-pink-300/80 hover:text-white transition"
              >
                Tenant Setup
              </button>
            </div>
          </div>

          {/* Glitch effect container */}
          <div class="relative inline-block">
            <div class="absolute inset-0 bg-cyan-400 opacity-20 blur-xl animate-pulse">
            </div>
            <div class="relative bg-linear-to-r from-cyan-500/20 to-purple-500/20 border border-cyan-500/50 rounded-lg px-8 py-4 backdrop-blur-sm">
              <p class="text-cyan-300 text-sm font-mono">
                &gt; System ready for authentication...
              </p>
            </div>
          </div>
        </div>

        {/* Animated scanlines */}
        <div class="absolute inset-0 pointer-events-none">
          <div
            class="absolute inset-0 bg-linear-to-b from-transparent via-cyan-500/5 to-transparent animate-pulse"
            style={{
              animation: "scan 3s linear infinite",
              backgroundSize: "100% 3px",
            }}
          >
          </div>
        </div>
      </div>

      <style jsx>
        {`
        @keyframes scan {
          0% { transform: translateY(-100%); }
          100% { transform: translateY(100vh); }
        }
        
        @keyframes spiral-cyan {
          0% { 
            transform: translate(-300px, -300px) rotate(0deg) scale(0.4);
            opacity: 0;
          }
          25% { 
            transform: translate(-150px, -150px) rotate(90deg) scale(0.7);
            opacity: 0.3;
          }
          50% { 
            transform: translate(0px, 0px) rotate(180deg) scale(1.1);
            opacity: 0.5;
          }
          75% { 
            transform: translate(150px, 150px) rotate(270deg) scale(0.7);
            opacity: 0.3;
          }
          100% { 
            transform: translate(300px, 300px) rotate(360deg) scale(0.4);
            opacity: 0;
          }
        }
        
        @keyframes spiral-purple {
          0% { 
            transform: translate(300px, -300px) rotate(0deg) scale(0.4);
            opacity: 0;
          }
          25% { 
            transform: translate(150px, -150px) rotate(-90deg) scale(0.7);
            opacity: 0.3;
          }
          50% { 
            transform: translate(0px, 0px) rotate(-180deg) scale(1.1);
            opacity: 0.5;
          }
          75% { 
            transform: translate(-150px, 150px) rotate(-270deg) scale(0.7);
            opacity: 0.3;
          }
          100% { 
            transform: translate(-300px, 300px) rotate(-360deg) scale(0.4);
            opacity: 0;
          }
        }
        
        @keyframes spiral-pink {
          0% { 
            transform: translate(0px, 300px) rotate(0deg) scale(0.4);
            opacity: 0;
          }
          25% { 
            transform: translate(0px, 150px) rotate(180deg) scale(0.7);
            opacity: 0.3;
          }
          50% { 
            transform: translate(0px, 0px) rotate(360deg) scale(1.1);
            opacity: 0.5;
          }
          75% { 
            transform: translate(0px, -150px) rotate(540deg) scale(0.7);
            opacity: 0.3;
          }
          100% { 
            transform: translate(0px, -300px) rotate(720deg) scale(0.4);
            opacity: 0;
          }
        }
        
        .animate-float-cyan {
          animation: spiral-cyan 12s ease-in-out infinite;
          top: 50%;
          left: 50%;
          margin-top: -24px;
          margin-left: -24px;
        }
        
        .animate-float-purple {
          animation: spiral-purple 15s ease-in-out infinite;
          top: 50%;
          left: 50%;
          margin-top: -28px;
          margin-left: -28px;
        }
        
        .animate-float-pink {
          animation: spiral-pink 18s ease-in-out infinite;
          top: 50%;
          left: 50%;
          margin-top: -26px;
          margin-left: -26px;
        }
        
        .spin-on-hover {
          transition: transform 0.3s ease;
          animation-play-state: paused;
        }
        
        .spin-direction-cw:hover {
          animation: spin-cw 4s linear infinite;
        }

        .spin-direction-ccw:hover {
          animation: spin-ccw 4s linear infinite;
        }
        
        @keyframes spin-cw {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }

        @keyframes spin-ccw {
          from { transform: rotate(0deg); }
          to { transform: rotate(-360deg); }
        }
      `}
      </style>
    </div>
  );
}