"use client";

import { useState } from "react";
import Link from "next/link";
import ThemedLayout from "@/components/layouts/ThemedLayout";
import { useAccount } from "@/contexts/AccountContext";
import { useWallet } from "@/contexts/WalletContext";

const MEMBERSHIP_TIERS = [
  { name: "Associate", minLux: 0, description: "Access to the channel digest and ring updates." },
  { name: "Operative", minLux: 500, description: "Priority listing visibility and vault drop previews." },
  { name: "Handler", minLux: 2000, description: "Early market access, barter priority lane, vendor fast-track." },
  { name: "Principal", minLux: 8000, description: "All tiers plus operator-level forum ring keys and direct relay contact." },
];

function getTier(lux: number) {
  let result = MEMBERSHIP_TIERS[0]!;
  for (const t of MEMBERSHIP_TIERS) {
    if (lux >= t.minLux) result = t;
  }
  return result;
}

const DIGEST = [
  { tag: "MARKET", text: "New entropy dongle batch listed — vendor @relay_op, verified PGP.", href: "/market" },
  { tag: "FORUM", text: "Thread on OPSEC hygiene for multi-site handles is trending in Ring IV.", href: "/forum" },
  { tag: "DROPS", text: "Next scheduled drop in ~18h. Add /drops to your watchlist.", href: "/drops" },
  { tag: "EXCHANGE", text: "WTB listing for XMR-to-credit bridge services posted 4h ago.", href: "/exchange" },
  { tag: "VAULT", text: "Your receipts and earned keys live in the Vault — check after checkout.", href: "/vault" },
];

export default function InnerCirclePage() {
  const { user, hydrated } = useAccount();
  const { luxCredits } = useWallet();
  const tier = getTier(luxCredits);
  const [tab, setTab] = useState<"digest" | "tiers" | "guide">("digest");

  if (!hydrated) {
    return (
      <ThemedLayout theme="brutalist" title="The Inner Circle">
        <div className="mx-auto max-w-md pt-20 text-center font-mono text-sm text-foreground/50">
          Loading…
        </div>
      </ThemedLayout>
    );
  }

  if (!user) {
    return (
      <ThemedLayout theme="brutalist" title="The Inner Circle">
        <div className="mx-auto max-w-md pt-20">
          <div className="border-[8px] border-[#e5e5e5] bg-[#161616] p-12 shadow-[16px_16px_0_rgba(0,0,0,0.8)] text-[#f0f0f0]">
            <h2 className="mb-4 text-4xl font-black uppercase italic">Members Only</h2>
            <p className="mb-8 text-sm text-[#aaa]">
              The Inner Circle is gated by your CyberLux handle. Sign in and earn LUX credits through purchases and
              forum activity to unlock higher tiers.
            </p>
            <div className="space-y-4">
              <Link
                href="/sign-in?next=/inner-circle"
                className="block w-full bg-[#f0f0f0] py-4 text-center font-black uppercase text-black transition-colors hover:bg-[#7cfc9a]"
              >
                Sign In
              </Link>
              <Link
                href="/sign-up?next=/inner-circle"
                className="block w-full border-4 border-[#e5e5e5] py-4 text-center font-black uppercase hover:border-[#7cfc9a]"
              >
                Create Handle
              </Link>
            </div>
            <div className="mt-10 border-t border-white/10 pt-6">
              <p className="text-[10px] uppercase text-[#666]">Tier access based on LUX balance — no paid gate</p>
            </div>
          </div>
        </div>
      </ThemedLayout>
    );
  }

  return (
    <ThemedLayout theme="brutalist" title="The Inner Circle">
      <div className="mx-auto max-w-3xl pt-12 pb-20 px-4">
        <div className="border-[8px] border-[#e5e5e5] bg-[#161616] shadow-[16px_16px_0_rgba(0,0,0,0.8)] text-[#f0f0f0]">
          {/* Header */}
          <div className="border-b-4 border-[#e5e5e5] bg-[#111] px-8 py-6">
            <div className="flex flex-wrap items-center justify-between gap-4">
              <div>
                <h2 className="text-3xl font-black uppercase italic">Welcome, @{user.username}</h2>
                <p className="mt-1 text-sm text-[#aaa]">
                  Tier:{" "}
                  <span className="font-black text-[#7cfc9a]">{tier.name}</span>
                  {" · "}
                  <span className="text-[#7cfc9a]">{luxCredits.toLocaleString()} LUX</span>
                </p>
              </div>
              <div className="text-right text-[10px] uppercase text-[#666]">
                <div className="text-2xl font-black text-[#7cfc9a]">{tier.name}</div>
                <div>{tier.description}</div>
              </div>
            </div>
          </div>

          {/* Tier progress */}
          <div className="border-b-4 border-[#3a3a3a] px-8 py-4">
            <div className="flex gap-2">
              {MEMBERSHIP_TIERS.map((t, i) => {
                const reached = luxCredits >= t.minLux;
                const active = t.name === tier.name;
                return (
                  <div
                    key={t.name}
                    className={`flex-1 border-2 py-2 text-center text-[10px] font-black uppercase transition-colors ${
                      active
                        ? "border-[#7cfc9a] bg-[#7cfc9a]/15 text-[#7cfc9a]"
                        : reached
                        ? "border-[#666] text-[#aaa]"
                        : "border-[#333] text-[#555]"
                    }`}
                  >
                    <div>{t.name}</div>
                    <div className="font-normal">{t.minLux.toLocaleString()} LUX</div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Tabs */}
          <div className="flex border-b-4 border-[#3a3a3a]">
            {(["digest", "tiers", "guide"] as const).map((t) => (
              <button
                key={t}
                type="button"
                onClick={() => setTab(t)}
                className={`flex-1 py-3 text-[11px] font-black uppercase transition-colors ${
                  tab === t ? "bg-[#7cfc9a]/15 text-[#7cfc9a]" : "text-[#888] hover:text-[#ccc]"
                }`}
              >
                {t === "digest" ? "Signal Digest" : t === "tiers" ? "Tier Benefits" : "Operations Guide"}
              </button>
            ))}
          </div>

          {/* Content */}
          <div className="p-8">
            {tab === "digest" && (
              <div className="space-y-4">
                <p className="text-[11px] uppercase text-[#666]">Current hub signals · real-time activity</p>
                {DIGEST.map((d) => (
                  <Link
                    key={d.tag}
                    href={d.href}
                    className="flex items-start gap-4 border-2 border-[#333] bg-[#0d0d0d] p-4 transition-all hover:border-[#7cfc9a]/40"
                  >
                    <span className="mt-0.5 shrink-0 rounded bg-[#7cfc9a]/15 px-2 py-0.5 text-[10px] font-black uppercase text-[#7cfc9a]">
                      {d.tag}
                    </span>
                    <p className="text-sm text-[#ddd]">{d.text}</p>
                  </Link>
                ))}
              </div>
            )}

            {tab === "tiers" && (
              <div className="space-y-4">
                <p className="text-[11px] uppercase text-[#666]">Earn LUX via purchases and activity</p>
                {MEMBERSHIP_TIERS.map((t) => {
                  const reached = luxCredits >= t.minLux;
                  return (
                    <div
                      key={t.name}
                      className={`border-2 p-6 ${reached ? "border-[#7cfc9a]/40 bg-[#0f1a0f]" : "border-[#333] bg-[#0d0d0d] opacity-60"}`}
                    >
                      <div className="flex items-center justify-between">
                        <div className="text-xl font-black">{t.name}</div>
                        <div className="text-sm font-bold text-[#7cfc9a]">{t.minLux.toLocaleString()} LUX</div>
                      </div>
                      <p className="mt-2 text-sm text-[#aaa]">{t.description}</p>
                      {!reached && (
                        <p className="mt-2 text-xs text-[#666]">
                          Need {(t.minLux - luxCredits).toLocaleString()} more LUX
                        </p>
                      )}
                    </div>
                  );
                })}
              </div>
            )}

            {tab === "guide" && (
              <div className="space-y-6 text-sm text-[#ccc]">
                <p className="text-[11px] uppercase text-[#666]">Operational guidelines</p>
                <div>
                  <h4 className="mb-2 font-black uppercase text-[#f0f0f0]">Earning LUX</h4>
                  <p className="text-[#aaa] leading-relaxed">
                    LUX credits are earned on every purchase at checkout. Spend at the Mixer (coin-blending theatre),
                    or hold to maintain tier status. LUX is stored per-handle in your browser — export your account
                    bundle to carry it across devices.
                  </p>
                </div>
                <div>
                  <h4 className="mb-2 font-black uppercase text-[#f0f0f0]">Adding Funds</h4>
                  <p className="text-[#aaa] leading-relaxed">
                    Fund your account via Bitcoin at{" "}
                    <Link href="/account/add-funds" className="text-[#7cfc9a] underline">
                      /account/add-funds
                    </Link>
                    . After one confirmation, paste the txid — USD credit is applied to your handle at current spot.
                  </p>
                </div>
                <div>
                  <h4 className="mb-2 font-black uppercase text-[#f0f0f0]">OPSEC basics</h4>
                  <p className="text-[#aaa] leading-relaxed">
                    Use Tor Browser on .onion deployments. Export your account bundle from{" "}
                    <Link href="/dashboard" className="text-[#7cfc9a] underline">
                      /dashboard
                    </Link>{" "}
                    before clearing site data. Verify mirror PGP each session — phishing clones exist.
                  </p>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </ThemedLayout>
  );
}