"use client";

import { useState } from "react";
import Link from "next/link";
import PayWithUsdBalanceButton from "@/components/PayWithUsdBalanceButton";
import ThemedLayout from "@/components/layouts/ThemedLayout";
import { useCart } from "@/contexts/CartContext";
import type { ShopProduct } from "@/lib/shopCatalog";

type Pass = {
  id: string;
  name: string;
  description: string;
  features: string[];
  price: number;
  currency: "USD";
  tier: "standard" | "elevated" | "handler" | "principal";
  luxReward: number;
};

const PASSES: Pass[] = [
  {
    id: "pass_standard",
    name: "Standard Pass",
    description: "Base access — unlocks buyer profile, order vault, and forum post quota.",
    features: ["Buyer account", "Full market access", "Order vault receipts", "Forum posting"],
    price: 9.99,
    currency: "USD",
    tier: "standard",
    luxReward: 100,
  },
  {
    id: "pass_elevated",
    name: "Elevated Pass",
    description: "Enhanced access — priority queue on drops, barter board priority lane, and expanded vault quota.",
    features: ["Everything in Standard", "Drop queue priority", "Barter priority lane", "2× LUX on orders", "Expanded vault keys"],
    price: 29.99,
    currency: "USD",
    tier: "elevated",
    luxReward: 350,
  },
  {
    id: "pass_handler",
    name: "Handler Pass",
    description: "Vendor-level access — stall listing, exchange board elevated visibility, direct forum ring IV key.",
    features: ["Everything in Elevated", "Vendor stall listing", "Exchange elevated visibility", "Ring IV forum key", "Inner Circle Handler tier"],
    price: 74.99,
    currency: "USD",
    tier: "handler",
    luxReward: 1000,
  },
  {
    id: "pass_principal",
    name: "Principal Pass",
    description: "Maximum tier — all access surfaces unlocked, relay contact, and lore archive key.",
    features: ["All access surfaces", "Operator relay contact", "Full lore archive key", "Inner Circle Principal", "Priority dispute resolution"],
    price: 199.99,
    currency: "USD",
    tier: "principal",
    luxReward: 3000,
  },
];

const TIER_COLORS: Record<Pass["tier"], string> = {
  standard: "from-gray-600 to-gray-500",
  elevated: "from-cyan-700 to-blue-600",
  handler: "from-purple-700 to-purple-500",
  principal: "from-amber-600 to-yellow-500",
};

const TIER_BORDER: Record<Pass["tier"], string> = {
  standard: "border-gray-600/40",
  elevated: "border-cyan-600/40",
  handler: "border-purple-600/40",
  principal: "border-amber-500/40",
};

export default function DigitalPassesPage() {
  const { addToCart } = useCart();
  const [added, setAdded] = useState<string | null>(null);

  const handleAdd = (pass: Pass) => {
    const product: ShopProduct = {
      id: pass.id,
      name: pass.name,
      description: pass.description,
      price: pass.price,
      currency: pass.currency,
      category: "Access Pass",
      sellerId: "cyberlux",
    };
    addToCart(product, 1);
    setAdded(pass.id);
    setTimeout(() => setAdded(null), 1800);
  };

  return (
    <ThemedLayout theme="retro" title="Digital Access Passes">
      <div className="mx-auto max-w-5xl px-4 pt-12 pb-20 font-mono">
        <header className="border-b-4 border-[#0f0] pb-8 mb-12">
          <div className="text-[10px] uppercase tracking-widest text-[#0f0]/60 mb-2">CyberLux Store</div>
          <h1 className="text-4xl font-black uppercase tracking-tighter text-[#0f0]">Digital Access Passes</h1>
          <p className="mt-4 text-sm text-[#0f0]/70 max-w-2xl">
            One-time purchases that expand your CyberLux access tier and award permanent LUX credits. Passes are
            virtual — payment via USD balance (funded by Bitcoin verify) or checkout. No physical delivery.
          </p>
          <div className="mt-4 flex flex-wrap gap-3">
            <Link
              href="/account/add-funds"
              className="border border-[#0f0] px-4 py-2 text-xs font-bold uppercase text-[#0f0] hover:bg-[#0f0]/10 transition-all"
            >
              ₿ Add Funds First
            </Link>
            <Link
              href="/inner-circle"
              className="border border-[#0f0]/40 px-4 py-2 text-xs font-bold uppercase text-[#0f0]/60 hover:border-[#0f0] hover:text-[#0f0] transition-all"
            >
              Inner Circle →
            </Link>
          </div>
        </header>

        <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
          {PASSES.map((pass) => {
            const isAdded = added === pass.id;
            return (
              <div
                key={pass.id}
                className={`border-2 bg-black/40 p-8 transition-all hover:bg-[#0f0]/5 ${TIER_BORDER[pass.tier]}`}
              >
                <div className="mb-5 flex items-start justify-between gap-3">
                  <div>
                    <div
                      className={`mb-2 inline-block rounded bg-gradient-to-r ${TIER_COLORS[pass.tier]} px-3 py-1 text-[10px] font-black uppercase text-white`}
                    >
                      {pass.tier}
                    </div>
                    <h3 className="text-xl font-black uppercase text-[#0f0]">{pass.name}</h3>
                  </div>
                  <div className="text-right">
                    <div className="text-2xl font-black text-[#0f0]">${pass.price}</div>
                    <div className="text-[10px] text-[#0f0]/50">+{pass.luxReward} LUX</div>
                  </div>
                </div>

                <p className="mb-5 text-sm text-[#0f0]/70 leading-relaxed">{pass.description}</p>

                <ul className="mb-6 space-y-1.5">
                  {pass.features.map((f) => (
                    <li key={f} className="flex items-center gap-2 text-xs text-[#0f0]/80">
                      <span className="text-[#0f0]">{">"}</span>
                      {f}
                    </li>
                  ))}
                </ul>

                <button
                  type="button"
                  onClick={() => handleAdd(pass)}
                  className={`w-full py-3 font-black uppercase text-sm transition-all ${
                    isAdded
                      ? "bg-[#0f0] text-black"
                      : "border-2 border-[#0f0] text-[#0f0] hover:bg-[#0f0] hover:text-black"
                  }`}
                >
                  {isAdded ? "✓ Added to Cart" : `Add to Cart — $${pass.price}`}
                </button>
                <div className="mt-3 border border-[#0f0]/25 bg-black/60 p-3">
                  <p className="mb-2 text-[10px] font-bold uppercase text-[#0f0]/70">Or pay instantly (BTC-funded USD)</p>
                  <PayWithUsdBalanceButton
                    amountUsd={pass.price}
                    title={`Pass: ${pass.name}`}
                    description={`Tier ${pass.tier} · +${pass.luxReward} LUX`}
                    luxBonus={pass.luxReward}
                    size="sm"
                    className="w-full border-[#0f0]/40 !text-[#0f0]"
                  />
                </div>
              </div>
            );
          })}
        </div>

        <div className="mt-12 border-4 border-[#0f0]/20 bg-[#001200] p-8 text-sm">
          <h3 className="mb-4 font-black uppercase text-[#0f0]">How Passes Work</h3>
          <ul className="space-y-2 text-[#0f0]/70 text-xs">
            <li>{">"} Passes are digital items — checkout with USD balance (Bitcoin-funded) or other accepted payment.</li>
            <li>{">"} On purchase, LUX credits are applied to your handle and tier is updated in the Inner Circle.</li>
            <li>{">"} All state is client-side. Export your account bundle from /dashboard to back it up.</li>
            <li>{">"} No refunds on digital passes once LUX has been applied to your account.</li>
          </ul>
          <div className="mt-6 flex gap-4">
            <Link href="/checkout" className="text-xs text-[#0f0] hover:underline">Go to Checkout →</Link>
            <Link href="/dashboard" className="text-xs text-[#0f0]/60 hover:text-[#0f0]">Your Dashboard</Link>
          </div>
        </div>

        <div className="mt-8 text-center text-[10px] text-[#0f0]/30 uppercase tracking-widest">
          CyberLux Digital Passes · Client-side entitlement system · Est. 2024
        </div>
      </div>
    </ThemedLayout>
  );
}