import Link from "next/link";
import Image from "next/image";
import { AccountNav } from "./AccountNav";
import { Container } from "@/components/Container";

type Props = {
  children: React.ReactNode;
  memberName: string;
  memberEmail: string;
  avatarPath: string | null;
  isAdmin: boolean;
};

function initials(name: string): string {
  return name
    .trim()
    .split(/\s+/)
    .map((p) => p[0]?.toUpperCase() ?? "")
    .slice(0, 2)
    .join("");
}

/**
 * Member-facing sidebar + main column layout. Mounted once in
 * src/app/account/layout.tsx so every /account/* page inherits the nav and
 * identity footer without duplicating chrome.
 */
export function AccountShell({
  children,
  memberName,
  memberEmail,
  avatarPath,
  isAdmin,
}: Props) {
  return (
    <div className="bg-[var(--color-line)]/25 min-h-[calc(100vh-140px)]">
      <Container className="py-6 md:py-8">
        <div className="grid gap-6 lg:grid-cols-[240px_minmax(0,1fr)]">
          <aside className="lg:sticky lg:top-6 lg:self-start">
            <div className="rounded-2xl border border-[var(--color-line)] bg-white p-3 shadow-[0_1px_0_rgba(10,15,46,0.02)]">
              <Link
                href="/account"
                className="mb-4 flex items-center gap-2 rounded-lg px-2 pt-1 transition-colors hover:bg-[var(--color-mist)]"
              >
                <div className="flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[var(--color-blue)] text-white">
                  {avatarPath ? (
                    <Image
                      src={avatarPath}
                      alt=""
                      width={36}
                      height={36}
                      className="h-full w-full object-cover"
                    />
                  ) : (
                    <span className="font-display text-[14px] font-extrabold">
                      {initials(memberName) || "M"}
                    </span>
                  )}
                </div>
                <div className="min-w-0">
                  <div className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-slate)]">
                    Member
                  </div>
                  <div className="truncate font-display text-[14px] font-extrabold text-[var(--color-ink)]">
                    {memberName || "Your account"}
                  </div>
                </div>
              </Link>
              <AccountNav isAdmin={isAdmin} />
              <div className="mt-5 border-t border-[var(--color-line)] px-2 pt-3 text-[11px] text-[var(--color-slate)]">
                <div className="font-bold uppercase tracking-wider">
                  Signed in as
                </div>
                <div className="mt-0.5 truncate text-[12px] text-[var(--color-ink)]">
                  {memberEmail}
                </div>
              </div>
            </div>
          </aside>

          <div className="min-w-0">{children}</div>
        </div>
      </Container>
    </div>
  );
}
