import { useEffect, useState } from 'react';
import { Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';
import { AnimatePresence, motion } from 'framer-motion';
import { useStore } from '@/store/useStore';
import { Sidebar } from '@/components/layout/Sidebar';
import { LoginScreen } from '@/components/layout/LoginScreen';
import { Dashboard } from '@/components/modules/Dashboard';
import { Oracle } from '@/components/modules/Oracle';
import { Sentinel } from '@/components/modules/Sentinel';
import { Inventory } from '@/components/modules/Inventory';
import { Settings } from '@/components/modules/Settings';
import { Catalyst } from '@/components/modules/Catalyst';
import { CRM } from '@/components/modules/CRM';
import { NotificationCenter } from '@/components/layout/NotificationCenter';
import { useCrmBootstrap } from '@/hooks/useCrmBootstrap';
import type { ModuleId } from '@/types';
import AdminPage from '@/app/admin/page';
import {
  clearVelocityToken,
  getVelocityMe,
  getVelocityToken,
  isAdminRole,
  normalizeVelocityRole,
  resolveVelocityFirstName,
} from '@/lib/velocityPlatformClient';

import {
  MoreVertical,
  LogOut,
  Settings2
} from 'lucide-react';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

// ── Route map ─────────────────────────────────────────────────────────────────
// Single source of truth: module id → URL path → page title → component

export const MODULE_ROUTES: Array<{
  id: ModuleId;
  path: string;
  title: string;
  component: React.ComponentType;
  adminOnly?: boolean;
}> = [
  { id: 'dashboard',  path: '/dashboard',  title: 'Dashboard',     component: Dashboard  },
  { id: 'oracle',     path: '/oracle',      title: 'The Oracle',    component: Oracle     },
  { id: 'sentinel',   path: '/sentinel',    title: 'The Sentinel',  component: Sentinel   },
  { id: 'inventory',  path: '/inventory',   title: 'Inventory',     component: Inventory  },
  { id: 'catalyst',   path: '/catalyst',    title: 'The Catalyst',  component: Catalyst   },
  { id: 'crm',        path: '/crm',         title: 'CRM',           component: CRM        },
  { id: 'settings',   path: '/settings',    title: 'Settings',      component: Settings   },
  { id: 'admin',      path: '/admin',       title: 'Admin',         component: AdminPage, adminOnly: true },
];

export const PATH_TO_MODULE = Object.fromEntries(
  MODULE_ROUTES.map((r) => [r.path, r.id])
) as Record<string, ModuleId>;

// ── Protected Route guard ─────────────────────────────────────────────────────

function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const { isAuthenticated } = useStore();
  if (!isAuthenticated) return <Navigate to="/login" replace />;
  return <>{children}</>;
}

// ── Sync URL → Zustand activeModule ──────────────────────────────────────────
// This keeps the Zustand store in sync with the URL so existing module
// components that read `activeModule` from the store continue to work.

function RouteModuleSync() {
  const { pathname } = useLocation();
  const { setActiveModule } = useStore();

  useEffect(() => {
    const moduleId = PATH_TO_MODULE[pathname];
    if (moduleId) setActiveModule(moduleId);
  }, [pathname, setActiveModule]);

  return null;
}

// ── Main authenticated layout ─────────────────────────────────────────────────

function MainLayout() {
  const { activeModule, setActiveModule, sidebarExpanded, logout, user } = useStore();
  useCrmBootstrap();
  const navigate = useNavigate();
  const location = useLocation();
  const availableRoutes = MODULE_ROUTES.filter((route) => !route.adminOnly || isAdminRole(user?.role));

  // Current route title
  const currentRoute = availableRoutes.find((r) => r.path === location.pathname);
  const pageTitle = currentRoute?.title ?? 'Velocity';
  const roleLabel = formatRoleLabel(user?.role);
  const userLabel = user?.name?.trim() || user?.fullName?.trim() || user?.email?.trim() || user?.id || 'Authenticated User';
  const initials = userLabel
    .split(/\s+/)
    .filter(Boolean)
    .slice(0, 2)
    .map((part) => part[0]?.toUpperCase() ?? '')
    .join('') || 'AU';

  // Navigate to settings from dropdown (keeps router in sync)
  const goToSettings = () => {
    setActiveModule('settings');
    navigate('/settings');
  };

  return (
    <div className="min-h-screen flex" style={{ background: '#000' }}>
      {/* Sync URL → store */}
      <RouteModuleSync />

      {/* Sidebar */}
      <Sidebar />

      {/* Main Content Area */}
      <motion.main
        className="flex-1 h-screen flex flex-col overflow-hidden"
        initial={{ marginLeft: 72 }}
        animate={{ marginLeft: sidebarExpanded ? 232 : 72 }}
        transition={{
          type: 'spring',
          stiffness: 320,
          damping: 32,
          mass: 0.8
        }}
      >
        {/* Top Bar */}
        <header className="flex-none z-40 px-6 py-4">
          <div
            className="flex items-center justify-between px-5 py-3 rounded-2xl"
            style={{
              background: 'hsl(var(--surface))',
              border: '1px solid hsl(var(--border-subtle))',
            }}
          >
            <motion.div
              key={activeModule}
              initial={{ opacity: 0, x: -12 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.25 }}
            >
              <h1 className="text-base font-semibold text-white tracking-tight">{pageTitle}</h1>
              <p className="text-xs" style={{ color: 'hsl(var(--muted-fg))' }}>Project Velocity · v.1.1</p>
            </motion.div>

            {/* User Profile */}
            <div className="flex items-center gap-2">
              {/* Active Notification Center */}
              <NotificationCenter />

              <div className="w-px h-6 bg-white/10" />

              <div className="text-right">

                <p className="text-sm font-medium text-white">{userLabel}</p>
                <p className="text-xs" style={{ color: 'hsl(var(--muted-fg))' }}>{roleLabel}</p>
              </div>
              <div
                className="w-9 h-9 rounded-xl flex items-center justify-center text-sm font-semibold"
                style={{
                  background: 'hsl(var(--accent))',
                  color: 'hsl(var(--accent-fg))',
                }}
              >
                {initials}
              </div>
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <button className="h-9 w-9 flex items-center justify-center rounded-lg hover:bg-white/5 text-zinc-400 hover:text-white transition-colors outline-none">
                    <MoreVertical className="w-5 h-5" />
                  </button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="w-48 bg-[#0A0B10] border-white/10 text-zinc-200">
                  <DropdownMenuItem
                    className="cursor-pointer focus:bg-white/5"
                    onClick={goToSettings}
                  >
                    <Settings2 className="mr-2 h-4 w-4 text-zinc-400" />
                    <span>Settings</span>
                  </DropdownMenuItem>
                  <DropdownMenuSeparator className="bg-white/10" />
                  <DropdownMenuItem
                    className="text-red-400 focus:text-red-400 focus:bg-red-500/10 cursor-pointer"
                    onClick={() => {
                      clearVelocityToken();
                      logout();
                    }}
                  >
                    <LogOut className="mr-2 h-4 w-4" />
                    <span>Log out</span>
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </div>
        </header>

        {/* Module Content — animated on route change */}
        <div className="flex-1 overflow-y-auto custom-scrollbar">
          <div className="px-8 pb-8 min-h-full relative">
            <AnimatePresence mode="wait">
              <motion.div
              key={location.pathname}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              transition={{
                duration: 0.3,
                ease: [0.4, 0, 0.2, 1]
              }}
            >
              {/* Nested module routes rendered here */}
              <Routes>
                {availableRoutes.map(({ path, component: Component, adminOnly }) => (
                  <Route
                    key={path}
                    path={path}
                    element={adminOnly && !isAdminRole(user?.role) ? <Navigate to="/dashboard" replace /> : <Component />}
                  />
                ))}
                {/* Default: redirect / → /dashboard */}
                <Route path="/" element={<Navigate to="/dashboard" replace />} />
                {/* Catch-all: any unknown path → dashboard */}
                <Route path="*" element={<Navigate to="/dashboard" replace />} />
              </Routes>
            </motion.div>
          </AnimatePresence>
          </div>
        </div>
      </motion.main>
    </div>
  );
}

// ── Root App ──────────────────────────────────────────────────────────────────

function App() {
  const { isAuthenticated, login, logout, user } = useStore();
  const [authBootstrapped, setAuthBootstrapped] = useState(false);

  useEffect(() => {
    let cancelled = false;
    const token = getVelocityToken();

    if (!token) {
      setAuthBootstrapped(true);
      if (isAuthenticated) {
        logout();
      }
      return () => {
        cancelled = true;
      };
    }

    void getVelocityMe()
      .then((me) => {
        if (cancelled) return;
        const resolvedEmail = me.email?.trim() || user?.email?.trim() || undefined;
        const resolvedFullName = me.full_name?.trim() || user?.fullName?.trim() || undefined;
        login({
          id: me.user_id,
          name: resolveVelocityFirstName({
            ...me,
            email: resolvedEmail ?? null,
            full_name: resolvedFullName ?? null,
          }),
          fullName: resolvedFullName,
          email: resolvedEmail,
          avatar: me.avatar_url?.trim() || user?.avatar?.trim() || undefined,
          role: normalizeVelocityRole(me.role),
        });
        setAuthBootstrapped(true);
      })
      .catch(() => {
        if (cancelled) return;
        clearVelocityToken();
        logout();
        setAuthBootstrapped(true);
      });

    return () => {
      cancelled = true;
    };
  }, [isAuthenticated, login, logout]);

  useEffect(() => {
    if (!isAuthenticated || !authBootstrapped) {
      return;
    }

    let cancelled = false;

    void getVelocityMe()
      .then((me) => {
        if (cancelled) return;
        const resolvedEmail = me.email?.trim() || user?.email?.trim() || undefined;
        const resolvedFullName = me.full_name?.trim() || user?.fullName?.trim() || undefined;
        login({
          id: me.user_id,
          name: resolveVelocityFirstName({
            ...me,
            email: resolvedEmail ?? null,
            full_name: resolvedFullName ?? null,
          }),
          fullName: resolvedFullName,
          email: resolvedEmail,
          avatar: me.avatar_url?.trim() || user?.avatar?.trim() || undefined,
          role: normalizeVelocityRole(me.role),
        });
      })
      .catch(() => {
        if (cancelled) return;
        clearVelocityToken();
        logout();
      });

    return () => {
      cancelled = true;
    };
  }, [authBootstrapped, isAuthenticated, login, logout, user]);

  if (!authBootstrapped) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-black text-zinc-300 text-sm">
        Validating live Velocity session...
      </div>
    );
  }

  return (
    <AnimatePresence mode="wait">
      {!isAuthenticated ? (
        <motion.div
          key="login"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.5 }}
        >
          <Routes>
            <Route path="/login" element={<LoginScreen />} />
            <Route path="*" element={<LoginScreen />} />
          </Routes>
        </motion.div>
      ) : (
        <motion.div
          key="app"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.5 }}
        >
          <Routes>
            <Route
              path="/*"
              element={
                <ProtectedRoute>
                  <MainLayout />
                </ProtectedRoute>
              }
            />
          </Routes>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

export default App;

function formatRoleLabel(role: string | undefined) {
  const normalized = normalizeVelocityRole(role);
  if (!normalized) {
    return 'Authenticated User';
  }
  return normalized
    .toLowerCase()
    .split('_')
    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
    .join(' ');
}