New booking panel

apps/frontend/src/components/header.tsx

@@ -1,67 +1,143 @@
-import { useState } from "react"
-import { CalendarDays, LogOut, Menu, Settings, User, X } from "lucide-react"
+import {
+  CalendarDays,
+  Check,
+  Laptop,
+  LogOut,
+  Menu,
+  Moon,
+  Settings,
+  Sun,
+  User,
+  X,
+} from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
-import PlayzerIcon from "@/assets/playzer-favicon-512-transparent.png"
-import { Link, useLocation } from "@tanstack/react-router"
+import PlayzerIcon from '@/assets/playzer-favicon-512-transparent.png';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { Link, useLocation, useNavigate } from '@tanstack/react-router';
 
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Button } from "@/components/ui/button"
+import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
-import { useAuth } from "@/lib/auth"
+} from '@/components/ui/dropdown-menu';
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
+import { UserAvatar } from '@/components/user-avatar';
+import { apiClient } from '@/lib/api-client';
+import { useAuth } from '@/lib/auth';
+import { acceptStoredPendingInvite } from '@/lib/invitations';
+import { useCurrentComplexStore } from '@/lib/stores/current-complex-store';
+import { useTheme } from '@/lib/theme';
 
 interface NavItemProps {
-  to: string
-  label: string
-  isMobile?: boolean
-  onClick?: () => void
+  to: '/' | '/about';
+  label: string;
+  isMobile?: boolean;
+  onClick?: () => void;
 }
 
 function NavItem({ to, label, isMobile, onClick }: NavItemProps) {
-  const location = useLocation()
-  const currentPath = location.pathname
-  const isActive = to === "/" ? currentPath === "/" : currentPath.startsWith(to)
+  const location = useLocation();
+  const currentPath = location.pathname;
+  const isActive = to === '/' ? currentPath === '/' : currentPath.startsWith(to);
 
   return (
     <Link to={to} onClick={onClick}>
       <Button
         variant="ghost"
-        size={isMobile ? "default" : "sm"}
+        size={isMobile ? 'default' : 'sm'}
         className={[
-          "rounded-none transition-all duration-200 hover:bg-transparent",
-          "focus-visible:ring-2 focus-visible:ring-primary/50",
-          isMobile && "w-full justify-start rounded-2xl",
+          'rounded-none transition-all duration-200 hover:bg-transparent',
+          'focus-visible:ring-2 focus-visible:ring-primary/50',
+          isMobile && 'w-full justify-start rounded-2xl',
           isActive
-            ? "text-primary relative after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary"
-            : "text-muted-foreground hover:text-foreground relative hover:after:absolute hover:after:bottom-0 hover:after:left-0 hover:after:right-0 hover:after:h-0.5 hover:after:bg-primary/50",
+            ? 'text-primary relative after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary'
+            : 'text-muted-foreground hover:text-foreground relative hover:after:absolute hover:after:bottom-0 hover:after:left-0 hover:after:right-0 hover:after:h-0.5 hover:after:bg-primary/50',
         ]
           .filter(Boolean)
-          .join(" ")}
+          .join(' ')}
       >
         {label}
       </Button>
     </Link>
-  )
+  );
 }
 
 export function Header() {
-  const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState(false);
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
   const { user, isAuthenticated, displayName, avatarUrl, signOut } = useAuth();
-  
+  const { theme, setTheme } = useTheme();
+  const { currentComplexSlug, setCurrentComplex } = useCurrentComplexStore();
+  const processedInviteForUser = useRef<string | null>(null);
+  const myComplexesQuery = useQuery({
+    queryKey: ['my-complexes'],
+    enabled: isAuthenticated,
+    queryFn: () => apiClient.complexes.listMine(),
+  });
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      processedInviteForUser.current = null;
+      return;
+    }
+
+    const userKey = user?.email ?? displayName ?? 'authenticated-user';
+
+    if (processedInviteForUser.current === userKey) {
+      return;
+    }
+
+    processedInviteForUser.current = userKey;
+
+    void (async () => {
+      await acceptStoredPendingInvite(apiClient.complexes.acceptPendingInvitations);
+      await queryClient.invalidateQueries({ queryKey: ['my-complexes'] });
+    })();
+  }, [displayName, isAuthenticated, queryClient, user?.email]);
+
+  const complexSlug = currentComplexSlug || myComplexesQuery.data?.[0]?.complexSlug;
+  const currentComplexName = useMemo(() => {
+    const complexes = myComplexesQuery.data ?? [];
+    if (complexes.length === 0) return 'Mi complejo';
+
+    const selected = complexes.find((complex) => complex.complexSlug === complexSlug);
+
+    return selected?.complexName ?? complexes[0]?.complexName ?? 'Mi complejo';
+  }, [complexSlug, myComplexesQuery.data]);
+
   const menuItems = [
-    { label: "Inicio", to: "/" },
-    { label: "Reservas", to: "/booking" },
-    { label: "Canchas", to: "/canchas" },
-    { label: "Dashboard", to: "/dashboard" },
-    { label: "Contacto", to: "/contacto" },
-  ]
+    { label: 'Inicio', to: '/' },
+    { label: 'About', to: '/about' },
+  ] as const;
+
+  const handleSelectComplex = async (complexId: string, nextSlug: string) => {
+    await apiClient.complexes.select({ complexId });
+    setCurrentComplex(nextSlug);
+    await queryClient.invalidateQueries({ queryKey: ['current-complex'] });
+  };
+
+  const handleSignOut = async () => {
+    await signOut();
+    await navigate({ to: '/login' });
+  };
+
+  const handleOpenBookingCreate = async () => {
+    if (location.pathname !== '/') {
+      await navigate({ to: '/' });
+    }
+
+    window.setTimeout(() => {
+      window.dispatchEvent(new Event('playzer:open-booking-create'));
+    }, 0);
+  };
 
   return (
     <header className="sticky top-0 z-50 w-full border-b border-border/60 bg-background/60 dark:border-primary/20 dark:bg-[#030a10]/90 backdrop-blur-xl">
@@ -87,66 +163,147 @@ export function Header() {
         <div className="flex-1" />
 
         <div className="hidden items-center gap-2 md:flex">
-          <Button className="rounded-2xl px-5 shadow-lg shadow-primary/20">
+          <Button
+            className="rounded-2xl px-5 shadow-lg shadow-primary/20"
+            onClick={() => {
+              void handleOpenBookingCreate();
+            }}
+          >
             <CalendarDays className="mr-2 size-4" />
             Reservar ahora
           </Button>
         </div>
 
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <button className="hidden size-10 rounded-full ring-2 ring-transparent transition-all duration-200 hover:ring-primary/30 focus:outline-none md:flex">
-              <Avatar className="size-10 border border-border/60 shadow-lg shadow-black/10">
-                <AvatarImage src={avatarUrl!} alt="Usuario" />
-                <AvatarFallback className="bg-primary/15 text-primary">
-                  JD
-                </AvatarFallback>
-              </Avatar>
-            </button>
-          </DropdownMenuTrigger>
+        {isAuthenticated ? (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button
+                type="button"
+                className="hidden size-10 rounded-full ring-2 ring-transparent transition-all duration-200 hover:ring-primary/30 focus:outline-none md:flex"
+              >
+                <UserAvatar
+                  src={avatarUrl}
+                  alt={displayName}
+                  fallbackText={displayName}
+                  className="size-10 border border-border/60 shadow-lg shadow-black/10"
+                />
+              </button>
+            </DropdownMenuTrigger>
 
-          <DropdownMenuContent
-            align="end"
-            className="w-64 rounded-2xl border-border/60 bg-popover/95 p-2 shadow-xl shadow-black/20 backdrop-blur-xl"
-          >
-            <DropdownMenuLabel className="px-2 py-2">
-              <div className="flex items-center gap-3">
-                <Avatar className="size-9">
-                  <AvatarImage src={ avatarUrl ?? "https://github.com/shadcn.png"} alt="Usuario" />
-                  <AvatarFallback className="bg-primary/15 text-primary">
-                    JD
-                  </AvatarFallback>
-                </Avatar>
+            <DropdownMenuContent
+              align="end"
+              className="w-64 rounded-2xl border-border/60 bg-popover/95 p-2 shadow-xl shadow-black/20 backdrop-blur-xl"
+            >
+              <DropdownMenuLabel className="px-2 py-2">
+                <div className="flex items-center gap-3">
+                  <UserAvatar
+                    src={avatarUrl}
+                    alt={displayName}
+                    fallbackText={displayName}
+                    className="size-9"
+                  />
 
-                <div className="flex min-w-0 flex-col">
-                  <span className="truncate text-sm font-medium">{displayName}</span>
-                  <span className="truncate text-xs text-muted-foreground">
-                    {user?.email}
-                  </span>
+                  <div className="flex min-w-0 flex-col">
+                    <span className="truncate text-sm font-medium">{displayName}</span>
+                    <span className="truncate text-xs text-muted-foreground">{user?.email}</span>
+                    <span className="truncate text-xs text-muted-foreground">
+                      {currentComplexName}
+                    </span>
+                  </div>
                 </div>
-              </div>
-            </DropdownMenuLabel>
+              </DropdownMenuLabel>
 
-            <DropdownMenuSeparator />
+              <DropdownMenuSeparator />
 
-            <DropdownMenuItem className="cursor-pointer rounded-xl">
-              <User className="mr-2 size-4" />
-              Mi Perfil
-            </DropdownMenuItem>
+              {myComplexesQuery.data && myComplexesQuery.data.length > 1 && (
+                <>
+                  <DropdownMenuLabel className="px-2 text-xs font-normal text-muted-foreground">
+                    Cambiar complejo
+                  </DropdownMenuLabel>
+                  {myComplexesQuery.data.map((complex) => (
+                    <DropdownMenuItem
+                      key={complex.id}
+                      className="cursor-pointer rounded-xl"
+                      onSelect={() => {
+                        void handleSelectComplex(complex.id, complex.complexSlug);
+                      }}
+                    >
+                      <span className="mr-2 flex size-4 items-center justify-center">
+                        {complex.complexSlug === complexSlug && <Check className="size-4" />}
+                      </span>
+                      {complex.complexName}
+                    </DropdownMenuItem>
+                  ))}
+                  <DropdownMenuSeparator />
+                </>
+              )}
 
-            <DropdownMenuItem className="cursor-pointer rounded-xl">
-              <Settings className="mr-2 size-4" />
-              Configuración
-            </DropdownMenuItem>
+              <DropdownMenuLabel className="px-2 text-xs font-normal text-muted-foreground">
+                Apariencia
+              </DropdownMenuLabel>
+              <DropdownMenuRadioGroup
+                value={theme}
+                onValueChange={(value) => setTheme(value as 'light' | 'dark' | 'system')}
+              >
+                <DropdownMenuRadioItem value="light" className="cursor-pointer rounded-xl">
+                  <Sun className="mr-2 size-4" />
+                  Light
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="dark" className="cursor-pointer rounded-xl">
+                  <Moon className="mr-2 size-4" />
+                  Dark
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="system" className="cursor-pointer rounded-xl">
+                  <Laptop className="mr-2 size-4" />
+                  System
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
 
-            <DropdownMenuSeparator />
+              <DropdownMenuSeparator />
 
-            <DropdownMenuItem className="cursor-pointer rounded-xl text-destructive focus:bg-destructive/10 focus:text-destructive">
-              <LogOut className="mr-2 size-4" />
-              Cerrar sesión
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+              <DropdownMenuItem
+                className="cursor-pointer rounded-xl"
+                onSelect={() => {
+                  void navigate({ to: '/profile' });
+                }}
+              >
+                <User className="mr-2 size-4" />
+                Mi Perfil
+              </DropdownMenuItem>
+
+              {currentComplexSlug && (
+                <DropdownMenuItem
+                  className="cursor-pointer rounded-xl"
+                  onSelect={() => {
+                    void navigate({
+                      to: '/complex/$slug/edit',
+                      params: { slug: currentComplexSlug },
+                    });
+                  }}
+                >
+                  <Settings className="mr-2 size-4" />
+                  Configuración
+                </DropdownMenuItem>
+              )}
+
+              <DropdownMenuSeparator />
+
+              <DropdownMenuItem
+                className="cursor-pointer rounded-xl text-destructive focus:bg-destructive/10 focus:text-destructive"
+                onSelect={() => {
+                  void handleSignOut();
+                }}
+              >
+                <LogOut className="mr-2 size-4" />
+                Cerrar sesión
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ) : (
+          <Button asChild size="sm" variant="outline" className="hidden rounded-2xl md:inline-flex">
+            <Link to="/login">Login</Link>
+          </Button>
+        )}
 
         <Sheet open={open} onOpenChange={setOpen}>
           <SheetTrigger asChild>
@@ -162,18 +319,19 @@ export function Header() {
             <div className="mt-6 flex flex-col gap-6">
               <div className="rounded-3xl border border-border/60 bg-card/70 p-4 shadow-xl shadow-black/10">
                 <div className="flex items-center gap-3">
-                  <Avatar className="size-11">
-                    <AvatarImage src="https://github.com/shadcn.png" alt="Usuario" />
-                    <AvatarFallback className="bg-primary/15 text-primary">
-                      JD
-                    </AvatarFallback>
-                  </Avatar>
+                  <UserAvatar
+                    src={avatarUrl}
+                    alt={displayName}
+                    fallbackText={displayName}
+                    className="size-11"
+                  />
 
                   <div className="min-w-0">
-                    <p className="truncate text-sm font-medium">John Doe</p>
-                    <p className="truncate text-xs text-muted-foreground">
-                      john@example.com
-                    </p>
+                    <p className="truncate text-sm font-medium">{displayName}</p>
+                    <p className="truncate text-xs text-muted-foreground">{user?.email}</p>
+                    {isAuthenticated && (
+                      <p className="truncate text-xs text-muted-foreground">{currentComplexName}</p>
+                    )}
                   </div>
                 </div>
               </div>
@@ -192,44 +350,131 @@ export function Header() {
 
               <Button
                 className="rounded-2xl shadow-lg shadow-primary/20"
-                onClick={() => setOpen(false)}
+                onClick={() => {
+                  setOpen(false);
+                  void handleOpenBookingCreate();
+                }}
               >
                 <CalendarDays className="mr-2 size-4" />
                 Reservar ahora
               </Button>
 
               <div className="border-t border-border/60 pt-4">
-                <p className="mb-2 px-2 text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                  Cuenta
-                </p>
+                <div className="mb-2 flex items-center justify-between px-2">
+                  <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+                    Cuenta
+                  </p>
+                </div>
 
                 <nav className="flex flex-col gap-1">
-                  <Button
-                    variant="ghost"
-                    className="justify-start rounded-2xl"
-                    onClick={() => setOpen(false)}
-                  >
-                    <User className="mr-2 size-4" />
-                    Mi Perfil
-                  </Button>
+                  {!isAuthenticated && (
+                    <Button
+                      variant="ghost"
+                      className="justify-start rounded-2xl"
+                      onClick={() => {
+                        setOpen(false);
+                        void navigate({ to: '/login' });
+                      }}
+                    >
+                      Login
+                    </Button>
+                  )}
 
-                  <Button
-                    variant="ghost"
-                    className="justify-start rounded-2xl"
-                    onClick={() => setOpen(false)}
-                  >
-                    <Settings className="mr-2 size-4" />
-                    Configuración
-                  </Button>
+                  <div className="py-1">
+                    <p className="px-3 py-1 text-xs text-muted-foreground">Apariencia</p>
+                    {[
+                      { value: 'light', label: 'Light', icon: Sun },
+                      { value: 'dark', label: 'Dark', icon: Moon },
+                      { value: 'system', label: 'System', icon: Laptop },
+                    ].map((item) => {
+                      const Icon = item.icon;
 
-                  <Button
-                    variant="ghost"
-                    className="justify-start rounded-2xl text-destructive hover:bg-destructive/10 hover:text-destructive"
-                    onClick={() => setOpen(false)}
-                  >
-                    <LogOut className="mr-2 size-4" />
-                    Cerrar sesión
-                  </Button>
+                      return (
+                        <Button
+                          key={item.value}
+                          variant="ghost"
+                          className="w-full justify-start rounded-2xl"
+                          onClick={() => setTheme(item.value as 'light' | 'dark' | 'system')}
+                        >
+                          <span className="mr-2 flex size-4 items-center justify-center">
+                            {theme === item.value ? (
+                              <Check className="size-4" />
+                            ) : (
+                              <Icon className="size-4" />
+                            )}
+                          </span>
+                          {item.label}
+                        </Button>
+                      );
+                    })}
+                  </div>
+
+                  {myComplexesQuery.data && myComplexesQuery.data.length > 1 && (
+                    <div className="py-1">
+                      <p className="px-3 py-1 text-xs text-muted-foreground">Cambiar complejo</p>
+                      {myComplexesQuery.data.map((complex) => (
+                        <Button
+                          key={complex.id}
+                          variant="ghost"
+                          className="w-full justify-start rounded-2xl"
+                          onClick={() => {
+                            setOpen(false);
+                            void handleSelectComplex(complex.id, complex.complexSlug);
+                          }}
+                        >
+                          <span className="mr-2 flex size-4 items-center justify-center">
+                            {complex.complexSlug === complexSlug && <Check className="size-4" />}
+                          </span>
+                          {complex.complexName}
+                        </Button>
+                      ))}
+                    </div>
+                  )}
+
+                  {isAuthenticated && (
+                    <Button
+                      variant="ghost"
+                      className="justify-start rounded-2xl"
+                      onClick={() => {
+                        setOpen(false);
+                        void navigate({ to: '/profile' });
+                      }}
+                    >
+                      <User className="mr-2 size-4" />
+                      Mi Perfil
+                    </Button>
+                  )}
+
+                  {currentComplexSlug && (
+                    <Button
+                      variant="ghost"
+                      className="justify-start rounded-2xl"
+                      onClick={() => {
+                        setOpen(false);
+                        void navigate({
+                          to: '/complex/$slug/edit',
+                          params: { slug: currentComplexSlug },
+                        });
+                      }}
+                    >
+                      <Settings className="mr-2 size-4" />
+                      Configuración
+                    </Button>
+                  )}
+
+                  {isAuthenticated && (
+                    <Button
+                      variant="ghost"
+                      className="justify-start rounded-2xl text-destructive hover:bg-destructive/10 hover:text-destructive"
+                      onClick={() => {
+                        setOpen(false);
+                        void handleSignOut();
+                      }}
+                    >
+                      <LogOut className="mr-2 size-4" />
+                      Cerrar sesión
+                    </Button>
+                  )}
                 </nav>
               </div>
             </div>
@@ -239,5 +484,5 @@ export function Header() {
 
       <div className="h-px bg-gradient-to-r from-transparent via-primary/40 to-transparent" />
     </header>
-  )
-}
+  );
+}