"use client";

import { useState } from "react";
import { usePathname } from "next/navigation";
import { Sidebar } from "./sidebar";
import { Topbar } from "./topbar";
import { useTranslations } from "@/lib/i18n/i18n-provider";

const SEGMENT_TO_NAV_KEY: Record<string, string> = {
  dashboard: "nav.dashboard",
  expenses: "nav.expenses",
  budget: "nav.budget",
  goals: "nav.goals",
  subscriptions: "nav.subscriptions",
  planning: "nav.planning",
  reports: "nav.reports",
  settings: "nav.settings",
  admin: "nav.admin"
};

export function AppShell({
  firstName,
  isAdmin = false,
  children
}: {
  firstName?: string | null;
  isAdmin?: boolean;
  children: React.ReactNode;
}) {
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
  const t = useTranslations();
  const pathname = usePathname();
  const section = pathname.split("/")[2] ?? "";
  const title = t(SEGMENT_TO_NAV_KEY[section] ?? "nav.dashboard");

  return (
    <div className="flex min-h-screen bg-ink-50/40">
      <Sidebar mobileOpen={mobileNavOpen} onCloseMobile={() => setMobileNavOpen(false)} isAdmin={isAdmin} />
      <div className="flex min-h-screen flex-1 flex-col">
        <Topbar title={title} firstName={firstName} onOpenMobileNav={() => setMobileNavOpen(true)} />
        <main className="flex-1 p-4 md:p-6">{children}</main>
      </div>
    </div>
  );
}