"use client";

import Link from "next/link";
import { useAccount } from "@/contexts/AccountContext";

export default function AccountHubPage() {
  const { user, hydrated } = useAccount();

  return (
    <div className="min-h-screen bg-[#0a0a0a] px-4 py-14 text-zinc-200">
      <div className="mx-auto max-w-lg">
        <p className="font-mono text-[10px] uppercase tracking-[0.35em] text-emerald-500/80">account</p>
        <h1 className="mt-3 font-orbitron text-2xl font-bold text-zinc-100">Session & mirrors</h1>
        <p className="mt-4 text-sm leading-relaxed text-zinc-500">
          This host stores handles, balances, and forum keys in your browser. Use the same links on any CyberLux
          .onion — import a bundle on each hostname if you want one identity everywhere.
        </p>

        <ul className="mt-8 space-y-2 text-sm text-zinc-300">
          <li>
            <Link href="/dashboard" className="text-emerald-400 hover:underline">
              Dashboard
            </Link>{" "}
            — activity, profile, vendor queue
          </li>
          <li>
            <Link href="/account/add-funds" className="text-emerald-400 hover:underline">
              Add funds
            </Link>{" "}
            — Bitcoin → USD store credit
          </li>
          <li>
            <Link href="/account/hidden-services" className="text-emerald-400 hover:underline">
              Onion mirror map
            </Link>{" "}
            — export / import identity bundle
          </li>
          <li>
            <Link href="/sign-in" className="text-emerald-400 hover:underline">
              Sign in
            </Link>{" "}
            ·{" "}
            <Link href="/sign-up" className="text-emerald-400 hover:underline">
              Sign up
            </Link>
          </li>
        </ul>

        {hydrated && user ? (
          <p className="mt-8 font-mono text-xs text-zinc-500">
            Signed in as <span className="text-emerald-200/90">@{user.username}</span>
          </p>
        ) : hydrated ? (
          <p className="mt-8 text-xs text-zinc-600">Not signed in on this hostname.</p>
        ) : null}
      </div>
    </div>
  );
}