"use client";

/**
 * /u/me shared layout — auth gate + Instagram-style profile shell.
 *
 *   • Anonymous visitors trigger the global AuthModal and are bounced
 *     home if they dismiss it (unchanged from before).
 *   • Renders the ProfileHeader + ProfileTabs above every /u/me/* page.
 *     Tabs: Posts / Collections / Bookmarks / Mentions.
 *
 * The old left ProfileSidebar is gone. The "Edit profile" affordance
 * moved onto the header as a button that toggles edit mode on /u/me
 * via a query param (kept simple — no new route for the form).
 */

import { Suspense, useEffect } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import {
  AtSign,
  Bookmark,
  FolderClosed,
  LayoutGrid,
} from "lucide-react";
import { useAuth } from "@/components/auth/auth-provider";
import { useAuthGate } from "@/components/auth/auth-gate";
import { ProfileHeader } from "@/components/profile/profile-header";
import { ProfileTabs, type ProfileTab } from "@/components/profile/profile-tabs";

export default function MeLayout({ children }: { children: React.ReactNode }) {
  const { user, loading } = useAuth();
  const { requireAuth } = useAuthGate();
  const router = useRouter();

  useEffect(() => {
    if (loading || user) return;
    let cancelled = false;
    (async () => {
      const ok = await requireAuth();
      if (!ok && !cancelled) router.replace("/");
    })();
    return () => {
      cancelled = true;
    };
  }, [loading, user, requireAuth, router]);

  if (loading || !user) {
    return (
      <main className="flex-1 flex items-center justify-center px-4 py-12">
        <p className="text-sm text-muted-foreground">
          {loading ? "Loading…" : "Sign in to view your library."}
        </p>
      </main>
    );
  }

  const tabs: ProfileTab[] = [
    {
      href: "/u/me",
      label: "Posts",
      icon: <LayoutGrid className="size-5" />,
      activeFor: ["/u/me/posts"],
    },
    {
      href: "/u/me/collections",
      label: "Collections",
      icon: <FolderClosed className="size-5" />,
    },
    {
      href: "/u/me/bookmarks",
      label: "Bookmarks",
      icon: <Bookmark className="size-5" />,
    },
    {
      href: "/u/me/mentions",
      label: "Mentions",
      icon: <AtSign className="size-5" />,
    },
  ];

  return (
    <main className="flex-1 max-w-3xl w-full mx-auto px-4 sm:px-6">
      <ProfileHeader
        avatarURL={user.avatar_url}
        name={user.name}
        handle={user.handle}
        joinedAt={user.created_at}
        editHref="/u/me?edit=1"
      />
      {/* Tab strip hides on /u/me?edit=1 (see ConditionalTabs). The
          Suspense boundary is required by Next.js because useSearchParams
          forces a CSR bailout during prerender. Without it, every
          /u/me/* route fails to build. Fallback renders the tabs as-is
          so the visual default (tabs visible) is what users see while
          the search params resolve. */}
      <Suspense fallback={<ProfileTabs tabs={tabs} />}>
        <ConditionalTabs tabs={tabs} />
      </Suspense>
      <div className="py-6">{children}</div>
    </main>
  );
}

function ConditionalTabs({ tabs }: { tabs: ProfileTab[] }) {
  const searchParams = useSearchParams();
  // /u/me?edit=1 swaps the Posts grid for the inline edit form (see
  // app/u/me/page.tsx). The tab strip would just be in the way while the
  // user is editing — hide it for that one URL state.
  const editMode = searchParams.get("edit") === "1";
  return editMode ? null : <ProfileTabs tabs={tabs} />;
}