import { useState } from 'react';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import { Navbar, Sidebar, FootNav, useTheme } from '@dreamtree-org/twreact-ui';
import { LayoutDashboard, Receipt, Package, Users, Settings, Shield, KeySquare, Moon, Sun, Circle } from 'lucide-react';
import { useAppApi } from '@/lib/api';
import { useAuth, useCan } from '@rbac/useCan';
import { clearAuth } from '@rbac/permissions';
import { buildRoutes } from '@/routes';
import { useModules } from '@/modules';

const ICONS = { 'layout-dashboard': LayoutDashboard, receipt: Receipt, package: Package, users: Users, settings: Settings, shield: Shield, 'key-square': KeySquare };
const Icon = ({ name, size = 18 }) => {
  const C = ICONS[name] || Circle;
  return <C size={size} />;
};

/**
 * Responsive app shell (all screen sizes):
 *   - Navbar across the top
 *   - Sidebar on >= md (laptop/desktop/ultrawide), hidden on phones
 *   - FootNav (twreact, mobile-only by design) on phones
 * Nav items are filtered by the user's (module, action='view') permissions.
 */
export default function DefaultLayout() {
  const nav = useNavigate();
  const loc = useLocation();
  const user = useAuth();
  const can = useCan();
  const { toggleTheme, isDark } = useTheme();
  const { fetchApi } = useAppApi();
  const [collapsed, setCollapsed] = useState(false);

  const allowed = buildRoutes(useModules()).filter((r) => can(r.module, r.action));

  const toItem = (r) => ({
    id: r.path,
    label: r.label,
    icon: <Icon name={r.icon} />,
    active: loc.pathname === r.path,
    onClick: () => nav(r.path),
  });
  const sidebarItems = allowed.map(toItem);
  const footItems = allowed.slice(0, 5).map(toItem);

  const logout = async () => {
    try { await fetchApi('logout'); } catch {}
    clearAuth();
    nav('/login', { replace: true });
  };

  return (
    <div className="min-h-screen flex flex-col">
      <Navbar
        logo={<span className="font-bold text-primary-600 px-2">__APP_NAME__</span>}
        user={user ? { name: user.name, email: user.email } : undefined}
        rightMenuContent={
          <button onClick={toggleTheme} className="p-2 rounded-md hover:bg-gray-100" aria-label="Toggle theme">
            {isDark ? <Sun size={18} /> : <Moon size={18} />}
          </button>
        }
        onLogoutClick={logout}
        onLeftIconClick={() => setCollapsed((c) => !c)}
      />

      <div className="flex flex-1 min-h-0">
        {/* Sidebar: tablet and up */}
        <aside data-testid="sidebar" className="hidden md:block border-r border-[var(--app-border)] bg-[var(--app-surface)]">
          <Sidebar items={sidebarItems} collapsed={collapsed} onToggle={() => setCollapsed((c) => !c)} />
        </aside>

        {/* Main content: fluid, capped for ultrawide readability */}
        <main className="flex-1 min-w-0 overflow-y-auto pt-safe pb-safe-nav md:pb-6">
          <div className="mx-auto w-full max-w-screen-2xl px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
            <Outlet />
          </div>
        </main>
      </div>

      {/* Bottom tab bar: phones only (twreact FootNav is md:hidden) */}
      <FootNav items={footItems} className="pb-safe" data-testid="footnav" />
    </div>
  );
}