import { Link, useRouterState } from "@tanstack/react-router";
import { Menu, X } from "lucide-react";
import { useState, type ReactNode } from "react";
import { CflMark } from "@/components/cfl-mark";
import { RolePreviewBar } from "@/components/role-bar";
import { Button } from "@/components/ui/button";
import { ORG_ADDRESS_FULL, ORG_EIN, ORG_NAME, ZERO_EQUITY } from "@/lib/constants";
import { formatEin } from "@/lib/utils";
import { useRoleStore } from "@/lib/role-store";
import { cn } from "@/lib/utils";

const NAV: { to: string; label: string; exact?: boolean }[] = [
  { to: "/public", label: "Home", exact: true },
  { to: "/public/teams", label: "Teams" },
  { to: "/public/stadium", label: "Stadium" },
  { to: "/public/auction", label: "Auction" },
  { to: "/public/game-days", label: "Game days" },
  { to: "/market", label: "Market" },
];

export function PublicShell({ children, variant = "default" }: { children: ReactNode; variant?: "default" | "stadium" }) {
  const pathname = useRouterState({ select: (s) => s.location.pathname });
  const role = useRoleStore((s) => s.role);
  const signedIn = useRoleStore((s) => s.signedIn);
  const account = useRoleStore((s) => s.account());
  const signOut = useRoleStore((s) => s.signOut);
  const [open, setOpen] = useState(false);
  const onDesk = role !== "public";
  const publicMember = role === "public" && signedIn;
  const stadium = variant === "stadium";

  return (
    <div className={cn("min-h-dvh", stadium ? "bg-navy" : "bg-background")}>
      <RolePreviewBar />
      <header
        className={cn(
          "sticky top-11 z-20 border-b backdrop-blur-sm",
          stadium ? "border-sidebar-border bg-navy/95" : "border-border bg-card/95",
        )}
      >
        <div className="mx-auto flex h-20 max-w-6xl items-center gap-3 px-4 sm:px-6">
          <Link to="/public" className="flex min-w-0 shrink-0 items-center" aria-label="Capital Forge League home">
            <CflMark variant="public" />
          </Link>
          <nav className="ml-4 hidden items-center gap-1 md:flex">
            {NAV.map((item) => {
              const active = item.exact ? pathname === item.to : pathname === item.to || pathname.startsWith(item.to + "/");
              return (
                <Link
                  key={item.to}
                  to={item.to}
                  className={cn(
                    "inline-flex min-h-11 items-center rounded-md px-3 text-sm font-medium transition-colors",
                    active
                      ? "bg-primary/12 text-primary"
                      : stadium
                        ? "text-sidebar-muted hover:bg-sidebar-accent hover:text-sidebar-foreground"
                        : "text-muted-foreground hover:bg-muted hover:text-foreground",
                  )}
                >
                  {item.label}
                </Link>
              );
            })}
          </nav>
          <div className="ml-auto flex items-center gap-2">
            {publicMember ? (
              <div className="hidden items-center gap-2 rounded-full border border-border bg-card py-1 pr-3 pl-1 sm:flex">
                <span className="flex size-7 items-center justify-center rounded-full bg-primary font-display text-[11px] font-semibold text-primary-foreground">
                  {account.initials}
                </span>
                <span className="text-sm font-medium">{account.name}</span>
              </div>
            ) : null}
            {onDesk ? (
              <Button asChild variant="outline" size="sm" className="hidden sm:inline-flex">
                <Link to="/">Back to desk</Link>
              </Button>
            ) : publicMember ? (
              <Button
                variant="outline"
                size="sm"
                className="hidden sm:inline-flex"
                onClick={() => signOut()}
              >
                Sign out
              </Button>
            ) : (
              <Button asChild variant="outline" size="sm" className="hidden sm:inline-flex">
                <Link to="/login">Public login</Link>
              </Button>
            )}
            {role === "donor" ? (
              <Button asChild size="sm">
                <Link to="/">Donor desk</Link>
              </Button>
            ) : (
              <Button asChild size="sm">
                <Link to="/login">Donor login</Link>
              </Button>
            )}
            <Button
              variant="ghost"
              size="icon-sm"
              className="md:hidden"
              onClick={() => setOpen(true)}
              aria-label="Open menu"
            >
              <Menu className="size-5" />
            </Button>
          </div>
        </div>
      </header>

      {open ? (
        <div className="fixed inset-0 top-11 z-40 md:hidden">
          <button className="absolute inset-0 bg-background/70" aria-label="Close menu" onClick={() => setOpen(false)} />
          <aside className="absolute inset-y-0 right-0 w-[min(20rem,86vw)] border-l border-border bg-card p-4 shadow-xl">
            <button
              className="absolute top-4 right-4 rounded-md p-2 text-muted-foreground hover:text-foreground"
              onClick={() => setOpen(false)}
              aria-label="Close"
            >
              <X className="size-5" />
            </button>
            <p className="mb-4 text-[11px] font-medium tracking-[0.16em] text-primary uppercase">
              {publicMember ? "Public member" : "Public view"}
            </p>
            <ul className="flex flex-col gap-1">
              {NAV.map((item) => (
                <li key={item.to}>
                  <Link
                    to={item.to}
                    onClick={() => setOpen(false)}
                    className="flex min-h-11 items-center rounded-lg px-3 text-sm hover:bg-muted"
                  >
                    {item.label}
                  </Link>
                </li>
              ))}
              <li>
                <Link to="/login" onClick={() => setOpen(false)} className="flex min-h-11 items-center rounded-lg px-3 text-sm hover:bg-muted">
                  {publicMember ? "Switch account" : "Public login"}
                </Link>
              </li>
              <li>
                <Link to="/login" onClick={() => setOpen(false)} className="flex min-h-11 items-center rounded-lg px-3 text-sm hover:bg-muted">
                  Donor login
                </Link>
              </li>
              {onDesk ? (
                <li>
                  <Link to="/" onClick={() => setOpen(false)} className="flex min-h-11 items-center rounded-lg px-3 text-sm hover:bg-muted">
                    Back to desk
                  </Link>
                </li>
              ) : null}
            </ul>
          </aside>
        </div>
      ) : null}

      <main className={stadium ? "overflow-x-hidden" : "mx-auto max-w-6xl overflow-x-hidden px-4 py-8 sm:px-6"}>
        {children}
      </main>

      <footer className="mt-8 border-t border-border bg-navy text-sidebar-foreground">
        <div className="mx-auto grid max-w-6xl gap-6 px-4 py-10 sm:grid-cols-3 sm:px-6">
          <div>
            <CflMark variant="footer" />
            <p className="mt-3 font-display text-lg text-primary">Capital Forge League</p>
            <p className="mt-2 text-sm text-sidebar-muted">
              Florida 501(c)(3) educational accelerator. EIN {formatEin(ORG_EIN)}.
            </p>
          </div>
          <div>
            <p className="text-[11px] tracking-[0.16em] text-primary uppercase">Office</p>
            <p className="mt-2 text-sm text-sidebar-muted">
              {ORG_NAME}
              <br />
              {ORG_ADDRESS_FULL}
              <br />
              Registered agent: Mark Jones
            </p>
          </div>
          <div>
            <p className="text-[11px] tracking-[0.16em] text-primary uppercase">Notice</p>
            <p className="mt-2 text-sm text-sidebar-muted">{ZERO_EQUITY}</p>
            <Link to="/public/stadium" className="mt-3 inline-block text-sm font-semibold text-primary hover:underline">
              Enter the stadium
            </Link>
          </div>
        </div>
      </footer>
    </div>
  );
}

export function BioLink({
  slug,
  publicBio,
}: {
  slug: string | null;
  publicBio: boolean;
}) {
  if (!publicBio || !slug) {
    return <span className="text-xs text-muted-foreground">Private</span>;
  }
  return (
    <Link
      to="/public/bios/$slug"
      params={{ slug }}
      className="text-sm font-semibold text-primary underline-offset-4 hover:underline"
    >
      Bio
    </Link>
  );
}