import Link from "next/link";
import { logoutAction } from "@/app/actions/auth";
import { Portrait } from "@/components/cards";
import { PortalNav } from "@/components/nav";
import { prisma } from "@/lib/prisma";
import { PORTAL_NAV } from "@/lib/nav";
import type { SessionUser } from "@/lib/roles";
import { isAdmin, isWholesale, roleLabel } from "@/lib/roles";

function IconSearch() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <circle cx="11" cy="11" r="6.5" stroke="currentColor" strokeWidth="1.6" />
      <path d="M16.2 16.2L21 21" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
    </svg>
  );
}

export async function Header({ user }: { user: SessionUser | null }) {
  const profile = user
    ? await prisma.profile.findUnique({
        where: { userId: user.id },
        select: { photoUrl: true },
      })
    : null;

  return (
    <header className={`eg-header${user ? " eg-header--in" : ""}`}>
      <div className="eg-header__bar">
        <Link href="/" className="eg-brand">
          ELBEEGEMS
          <small>Gems · Community · Trust</small>
        </Link>
        <PortalNav />
        <div className="eg-header__actions">
          <Link href="/search" className="eg-icon-btn" aria-label="Search inventory">
            <IconSearch />
          </Link>
          {user ? (
            <>
              <div className="eg-header__tools">
                <Link href="/messages">Rooms</Link>
                {isWholesale(user) ? <Link href="/trade/desk">Wholesale</Link> : null}
                {isAdmin(user) ? <Link href="/admin">Admin</Link> : null}
              </div>
              <Link href="/settings" className="eg-account" aria-label="Your account">
                <span className="eg-account__photo">
                  <Portrait name={user.name} src={profile?.photoUrl} size="sm" />
                  <span className="eg-status-dot" aria-hidden="true" />
                </span>
                <span className="eg-account__who">
                  <strong>{user.name}</strong>
                  <small>{roleLabel(user.role)}</small>
                </span>
              </Link>
              <form action={logoutAction}>
                <button type="submit" className="eg-text-btn">
                  Sign out
                </button>
              </form>
            </>
          ) : (
            <>
              <Link href="/login" className="eg-btn eg-btn-outline">
                Login
              </Link>
              <Link href="/register" className="eg-btn eg-btn-solid">
                Join the floor
              </Link>
            </>
          )}
        </div>
      </div>
      <div className={`portal-banner${user ? " portal-banner--in" : ""}`}>
        {user ? (
          <>
            <span>
              <span className="eg-status-dot" aria-hidden="true" />
              Signed in as <b>{user.name}</b>
            </span>
            <span>
              {roleLabel(user.role)}
              {user.verificationStatus === "approved" || user.role !== "member" ? " · Verified on the floor" : " · Guest access until verified"}
            </span>
          </>
        ) : (
          <>
            <span>
              You are visiting our community portal: <b>community.elbeegems.com</b>
            </span>
            <span>Private community for gem industry professionals.</span>
          </>
        )}
      </div>
    </header>
  );
}

const FOOTER_LINKS = [
  ...PORTAL_NAV,
  { href: "/showcase", label: "On view" },
];

export function Footer({ user }: { user?: SessionUser | null }) {
  return (
    <footer className="eg-footer">
      <div className="eg-footer__top">
        <div>
          <p className="eg-brand">
            ELBEEGEMS
            <small>Community portal</small>
          </p>
          <p className="eg-footer__lede">
            A private floor for dealers, cutters, miners, labs, and collectors.
          </p>
        </div>
        <nav className="eg-footer__links" aria-label="Footer">
          {FOOTER_LINKS.map((link) => (
            <Link key={link.href} href={link.href}>
              {link.label}
            </Link>
          ))}
          {user ? <Link href="/settings">Account</Link> : <Link href="/login">Login</Link>}
        </nav>
      </div>
      <div className="eg-footer__stats">
        <div className="eg-footer__stat">
          <strong>1,248+</strong>
          Members
        </div>
        <div className="eg-footer__stat">
          <strong>386+</strong>
          Verified businesses
        </div>
        <div className="eg-footer__stat">
          <strong>42</strong>
          Countries
        </div>
        <div className="eg-footer__stat">
          <strong>8,542+</strong>
          Stones listed
        </div>
        <div className="eg-footer__stat">
          <strong>2,156+</strong>
          Floor posts
        </div>
        <div className="eg-footer__stat">
          <strong>156</strong>
          Online now
        </div>
      </div>
      <div className="eg-footer__bottom">
        <p>
          {user ? (
            <>
              Signed in as <b>{user.name}</b> · {roleLabel(user.role)}
            </>
          ) : (
            "ElbeeGems community portal mockup. Not connected to the boutique shop."
          )}
        </p>
        <p>Gems · Community · Trust</p>
      </div>
    </footer>
  );
}

export function Badge({ children }: { children: React.ReactNode }) {
  return <span className="eg-badge">{children}</span>;
}