"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 { useEffect } from "react";
import { useRouter } 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"
      />
      <ProfileTabs tabs={tabs} />
      <div className="py-6">{children}</div>
    </main>
  );
}