import { NavLink, Outlet } from "react-router-dom";
import { useTranslation } from "react-i18next";
import {
  FiHome,
  FiMessageCircle,
  FiUsers,
  FiUser,
  FiBookmark,
  FiLogOut,
} from "react-icons/fi";
import { useAuth } from "@/context/AuthContext";
import Avatar from "@/components/ui/Avatar";

interface NavItem {
  to: string;
  icon: React.ReactNode;
  labelKey: string;
}

function buildItems(username?: string): NavItem[] {
  return [
    { to: "/social/feed", icon: <FiHome size={22} />, labelKey: "nav.feed" },
    { to: "/social/chats", icon: <FiMessageCircle size={22} />, labelKey: "nav.chats" },
    { to: "/social/hubs", icon: <FiUsers size={22} />, labelKey: "nav.hubs" },
    { to: "/social/saved", icon: <FiBookmark size={22} />, labelKey: "nav.saved" },
    {
      to: username ? `/social/profile/${username}` : "/social/feed",
      icon: <FiUser size={22} />,
      labelKey: "nav.profile",
    },
  ];
}

export default function SocialLayout() {
  const { t } = useTranslation("social");
  const { user } = useAuth();
  const items = buildItems(user?.username);

  return (
    <div className="min-h-screen w-full">
      <div className="mx-auto flex max-w-[1280px] gap-6 px-3 sm:px-6">
        {/* Left rail */}
        <aside className="sticky top-0 hidden h-screen w-[72px] flex-shrink-0 flex-col items-center justify-between py-6 md:flex md:w-[220px] md:items-start">
          <div className="flex w-full flex-col gap-1.5">
            <div className="mb-4 px-2 text-xl font-bold text-rainbow hidden md:block">
              vontor
            </div>
            {items.map((it) => (
              <NavLink
                key={it.to}
                to={it.to}
                className={({ isActive }) =>
                  [
                    "flex items-center gap-3 rounded-2xl px-3 py-2.5 transition-colors",
                    "text-brand-text/80 hover:bg-brand-lines/10 hover:text-brand-text",
                    isActive ? "bg-brand-lines/10 text-brand-accent font-semibold" : "",
                  ].join(" ")
                }
              >
                {it.icon}
                <span className="hidden md:inline">{t(it.labelKey)}</span>
              </NavLink>
            ))}
          </div>

          <div className="flex w-full items-center gap-3 rounded-2xl px-2 py-2 hover:bg-brand-lines/10">
            <Avatar name={user?.username ?? user?.email ?? "?"} src={(user as any)?.avatar ?? null} size={36} />
            <div className="hidden min-w-0 md:block">
              <div className="truncate text-sm font-semibold text-brand-text">
                {user?.username ?? "—"}
              </div>
              <NavLink
                to="/social/logout"
                className="flex items-center gap-1 text-xs text-brand-text/60 hover:text-brand-accent"
              >
                <FiLogOut size={12} /> {t("nav.logout")}
              </NavLink>
            </div>
          </div>
        </aside>

        {/* Main column */}
        <main className="min-h-screen flex-1 border-x border-brand-lines/15 max-w-[640px]">
          <Outlet />
        </main>

        {/* Right rail (placeholder; hidden on small screens) */}
        <aside className="sticky top-0 hidden h-screen w-[300px] flex-shrink-0 py-6 lg:block">
          <div className="glass rounded-2xl p-4 text-sm text-brand-text/70">
            <div className="font-semibold text-brand-text mb-2">
              {t("nav.hubs")}
            </div>
            <p className="text-xs">—</p>
          </div>
        </aside>
      </div>
    </div>
  );
}
