"use client";

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

export default function MembershipPage() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [user, setUser] = useState("");
  const [pass, setPass] = useState("");

  const handleLogin = (e: React.FormEvent) => {
    e.preventDefault();
    if (user === "admin" && pass === "shadow") {
      setIsLoggedIn(true);
    } else {
      alert("Invalid credentials. Access denied.");
    }
  };

  const panel = "border-[10px] border-[#e5e5e5] bg-[#161616] p-12 shadow-[20px_20px_0_rgba(0,0,0,0.8)] text-[#f0f0f0]";

  return (
    <ThemedLayout theme="brutalist" title="The Inner Circle">
      <div className="mx-auto max-w-md pt-20">
        {!isLoggedIn ? (
          <div className={panel}>
            <h2 className="mb-8 text-4xl font-black uppercase italic text-[#fafafa]">Members Only</h2>
            <p className="mb-8 text-xs font-bold text-[#b0b0b0]">
              Access to the premium signal requires an active subscription. Pay 0.01 BTC to{" "}
              <span className="bg-[#262626] px-1 text-[#7cfc9a]">0x594f1Cf2A72b3f785fcB6ABdFa73B6D76FcC22b8</span> to
              receive your key.
            </p>
            <form onSubmit={handleLogin} className="space-y-6">
              <div>
                <label className="mb-2 block text-xs font-black uppercase text-[#a0a0a0]">Username</label>
                <input
                  type="text"
                  value={user}
                  onChange={(e) => setUser(e.target.value)}
                  className="w-full border-4 border-[#404040] bg-[#0a0a0a] p-3 font-bold text-[#f0f0f0] focus:border-[#7cfc9a] focus:outline-none"
                />
              </div>
              <div>
                <label className="mb-2 block text-xs font-black uppercase text-[#a0a0a0]">Access Key</label>
                <input
                  type="password"
                  value={pass}
                  onChange={(e) => setPass(e.target.value)}
                  className="w-full border-4 border-[#404040] bg-[#0a0a0a] p-3 font-bold text-[#f0f0f0] focus:border-[#7cfc9a] focus:outline-none"
                />
              </div>
              <button className="w-full bg-[#f0f0f0] py-4 font-black uppercase text-black transition-colors hover:bg-[#7cfc9a]">
                Enter the Circle
              </button>
            </form>
          </div>
        ) : (
          <div className={panel}>
            <h2 className="mb-8 text-4xl font-black uppercase text-[#fafafa]">Welcome, Initiate</h2>
            <div className="space-y-6">
              <div className="border-4 border-[#854d0e] bg-[#1c1410] p-4">
                <h3 className="font-black uppercase text-[#fbbf24]">Today&apos;s Signal</h3>
                <p className="mt-2 text-sm text-[#d6cbb8]">Buy $BTC at 64,200. Target 68,000. Stop loss 63,500.</p>
              </div>
              <div className="border-4 border-[#14532d] bg-[#0f1612] p-4">
                <h3 className="font-black uppercase text-[#4ade80]">Private Leak</h3>
                <p className="mt-2 text-sm text-[#d6cbb8]">
                  New database from &quot;GlobalCorp&quot; available in the vault.
                </p>
              </div>
              <button onClick={() => setIsLoggedIn(false)} className="text-xs font-black uppercase text-[#a0a0a0] underline">
                Logout
              </button>
            </div>
          </div>
        )}

        <div className="mt-12 flex items-center justify-center gap-4 opacity-60">
          <div className="flex h-12 w-12 items-center justify-center border-4 border-[#e5e5e5] font-black text-[#fafafa]">E</div>
          <div className="text-[10px] font-black uppercase leading-tight text-[#888]">
            Escrow Assured
            <br />
            by ShadowGuard™
          </div>
        </div>
      </div>
    </ThemedLayout>
  );
}