import { useEffect, useState } from 'react';
import { NavLink, Navigate, Outlet, useNavigate } from 'react-router-dom';
import { LogOut, Menu, X, Database, Users } from 'lucide-react';
import { cn } from '../lib/cn';
import { useAuth } from '../auth/context';
import { onAuthErrorAll, orderBookingClient } from '../api/clients';
import { SCREENS } from './tabs';
import { routeConfig } from '../routesConfig';
import logoUrl from '../assets/logo.png';
import './screen.css';

const canAccessScreen = (key: string, isAdmin: boolean, roles: string[]) => {
  const route = routeConfig.find(r => r.path === `/${key}`);
  if (!route) return true;
  if (route.adminOnly && !isAdmin) return false;
  if (!route.adminOnly && route.roles) {
    return route.roles.some(r => roles.includes(r));
  }
  return true;
};

/** Auth-guarded shell: slim navy top bar + fixed bottom tab nav + routed <Outlet>. */
export function ConsoleLayout() {
  const { authed, logout, isAdmin, roles: userRoles } = useAuth();
  const navigate = useNavigate();
  const user = orderBookingClient.currentUser();

  const [isMenuOpen, setIsMenuOpen] = useState(false);

  // A 401 from any workflow client bounces back to login.
  useEffect(() => {
    onAuthErrorAll(() => {
      logout();
      navigate('/login', { replace: true });
    });
  }, [logout, navigate]);

  if (!authed) return <Navigate to="/login" replace />;

  return (
    <div className="h-[100dvh] overflow-hidden bg-app flex flex-col">
      <header className="print:hidden sticky top-0 z-20 shrink-0 flex items-center justify-between gap-3 px-4 h-14 pt-[env(safe-area-inset-top)] top-navbar shadow-md">
        <div className="flex items-center gap-3 flex-1">
          <button
            type="button"
            aria-label="Toggle Menu"
            onClick={() => setIsMenuOpen(true)}
            className="inline-flex items-center justify-center size-9 rounded-md text-white hover:text-white hover:bg-white/10 transition-colors duration-150 cursor-pointer nav-menu-icon"
          >
            <Menu size={20} />
          </button>
          <div className="flex flex-col justify-center leading-none">
            <span className="text-white font-extrabold text-on-navy tracking-[-0.01em] leading-none nav-title">Krishna Sales</span>
            {/* <span className="text-2xs text-on-navy-muted">Sandbox {APP_ID}{user?.name ? ` · ${user.name}` : ''}</span> */}
          </div>
        </div>
      </header>

      <main className="flex-1 overflow-y-auto px-4 pt-4 pb-24">
        <div className="w-full max-w-[1200px] mx-auto flex flex-col gap-5">
          <Outlet />
        </div>
      </main>

      <nav
        className="print:hidden fixed bottom-0 inset-x-0 z-20 h-16 pb-[env(safe-area-inset-bottom)] bg-app border-t border-border-subtle grid shadow-[0_-2px_16px_rgba(11,27,59,0.06)]"
        style={{ gridTemplateColumns: `repeat(${SCREENS.filter(t => t.key !== 'analytics' && t.key !== 'all-daily' && t.key !== 'sales-report' && canAccessScreen(t.key, isAdmin, userRoles)).length}, minmax(0, 1fr))` }}
      >
        {SCREENS.filter(t => t.key !== 'analytics' && t.key !== 'all-daily' && t.key !== 'sales-report' && canAccessScreen(t.key, isAdmin, userRoles)).map((t) => {
          const Icon = t.icon;
          return (
            <NavLink
              key={t.key}
              to={`/${t.key}`}
              className="flex flex-col items-center justify-center gap-1 no-underline min-h-[48px]"
            >
              {({ isActive }) => (
                <>
                  <span
                    className={cn(
                      'flex items-center justify-center h-7 w-14 rounded-pill transition-colors duration-150 bottom-nav-icon',
                      isActive ? 'active' : 'text-faint',
                    )}
                  >
                    <Icon size={20} />
                  </span>
                  <span
                    className={cn(
                      'text-2xs leading-none transition-colors duration-150 bottom-nav-text',
                      isActive ? 'font-semibold active' : 'font-medium text-faint',
                    )}
                  >
                    {t.label}
                  </span>
                </>
              )}
            </NavLink>
          );
        })}
      </nav>

      {/* Sidebar Overlay */}
      {isMenuOpen && (
        <div
          className="fixed inset-0 z-40 bg-black/50 transition-opacity"
          onClick={() => setIsMenuOpen(false)}
        />
      )}

      <div
        className={cn(
          "fixed inset-y-0 left-0 z-50 w-64 bg-app border-r border-border-subtle shadow-xl transform transition-transform duration-300 ease-in-out flex flex-col",
          isMenuOpen ? "translate-x-0" : "-translate-x-full"
        )}
      >
        <div className="h-14 flex items-center justify-between px-4 border-b border-border-subtle pt-[env(safe-area-inset-top)] shrink-0">
          <div className="flex items-center gap-2.5">
            <img src={logoUrl} alt="Krishna" className="w-7 h-7 rounded-full object-cover shadow-sm" />
            <span className="font-bold text-foreground tracking-tight">Krishna Field Sales</span>
          </div>
          <button
            type="button"
            onClick={() => setIsMenuOpen(false)}
            className="inline-flex items-center justify-center size-8 rounded-md text-faint hover:text-foreground hover:bg-black/5 transition-colors cursor-pointer"
          >
            <X size={20} />
          </button>
        </div>
        <div className="flex-1 overflow-y-auto py-2">
          {SCREENS.filter(t => canAccessScreen(t.key, isAdmin, userRoles)).map((t) => {
            const Icon = t.icon;
            return (
              <NavLink
                key={t.key}
                to={`/${t.key}`}
                onClick={() => setIsMenuOpen(false)}
                className={({ isActive }) => cn(
                  "flex items-center gap-3 px-4 py-3 mx-2 rounded-lg no-underline transition-colors duration-150 sidebar-item",
                  isActive ? "active" : ""
                )}
              >
                <Icon size={20} className="shrink-0" />
                <span>{t.label}</span>
              </NavLink>
            );
          })}

          <div className="my-2 border-t border-border-subtle" />

          {isAdmin && (
            <>
              <NavLink
                to="/admin/users"
                onClick={() => setIsMenuOpen(false)}
                className={({ isActive }) => cn(
                  "flex items-center gap-3 px-4 py-3 mx-2 rounded-lg no-underline transition-colors duration-150 sidebar-item",
                  isActive ? "active" : ""
                )}
              >
                <Users size={20} className="shrink-0" />
                <span>Sales Officers</span>
              </NavLink>

              <NavLink
                to="/admin/datasets"
                onClick={() => setIsMenuOpen(false)}
                className={({ isActive }) => cn(
                  "flex items-center gap-3 px-4 py-3 mx-2 rounded-lg no-underline transition-colors duration-150 sidebar-item",
                  isActive ? "active" : ""
                )}
              >
                <Database size={20} className="shrink-0" />
                <span>Manage Datasets</span>
              </NavLink>
            </>
          )}
        </div>

        <div className="p-4 border-t border-border-subtle shrink-0 flex flex-col gap-3 mb-[env(safe-area-inset-bottom)]">
          {user && (
            <div className="flex flex-col px-1">

              <span className="text-sm font-medium text-foreground truncate">{user.name || 'User'}</span>
              <span className="text-xs text-foreground/70 truncate">{user.email || 'user@email.com'}</span>
              {userRoles && userRoles.length > 0 && (
                <span className="text-xs font-semibold text-primary mt-0.5 truncate">{userRoles.join(', ')}</span>
              )}
            </div>
          )}
          <button
            type="button"
            onClick={() => {
              setIsMenuOpen(false);
              logout();
              navigate('/login', { replace: true });
            }}
            className="flex items-center justify-center gap-2 w-full py-2.5 px-4 rounded-lg bg-black/5 hover:bg-black/10 text-foreground transition-colors font-medium text-sm cursor-pointer"
          >
            <LogOut size={16} />
            <span>Sign out</span>
          </button>
        </div>
      </div>
    </div>
  );
}