'use client'
import { useAuth } from '@/components/AuthProvider'
import { useRouter } from 'next/navigation'
import { useEffect, useState } from 'react'
import Sidebar from './components/Sidebar'
import NewBookDialog from '@/components/NewBookDialog'
import { NewBookDialogContext } from '@/lib/contexts/NewBookDialogContext'
interface DashboardLayoutProps {
children: React.ReactNode
}
export default function DashboardLayout({ children }: DashboardLayoutProps) {
const { user, loading, signingOut } = useAuth()
const router = useRouter()
const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
const [isNewBookDialogOpen, setIsNewBookDialogOpen] = useState(false)
// Redirect to home if not authenticated
useEffect(() => {
if (!loading && !user && !signingOut) {
router.push('/')
}
}, [user, loading, signingOut, router])
const handleCreateBook = async (bookData: { title: string; description?: string; author?: string; genres?: string[]; template_id?: string }) => {
const response = await fetch('/api/books', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
...bookData,
userId: user?.id
}),
})
const data = await response.json()
if (!response.ok) {
// Create an error object that preserves the API response details
const error = new Error(data.error || 'Failed to create book') as any
error.limitExceeded = data.limitExceeded
error.usageInfo = data.usageInfo
throw error
}
// Return the book data, let the dialog component handle navigation and closing
return data
}
const dialogContextValue = {
isOpen: isNewBookDialogOpen,
openDialog: () => setIsNewBookDialogOpen(true),
closeDialog: () => setIsNewBookDialogOpen(false)
}
if (loading) {
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 relative overflow-hidden">
{/* Magical orbs for consistency */}
<div className="absolute inset-0 overflow-hidden pointer-events-none">
<div className="orb orb-1" />
<div className="orb orb-2" />
<div className="orb orb-3" />
<div className="orb orb-4" />
<style jsx>{`
.orb {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle, rgba(20, 184, 166, 0.4) 0%, rgba(6, 182, 212, 0.2) 50%, transparent 100%);
will-change: opacity;
}
.orb-1 {
left: 10%;
top: 20%;
width: 6px;
height: 6px;
animation: float 4s ease-in-out infinite;
}
.orb-2 {
left: 80%;
top: 80%;
width: 4px;
height: 4px;
animation: float 5s ease-in-out infinite 1s;
}
.orb-3 {
left: 60%;
top: 30%;
width: 8px;
height: 8px;
animation: float 6s ease-in-out infinite 2s;
}
.orb-4 {
left: 30%;
top: 70%;
width: 5px;
height: 5px;
animation: float 4.5s ease-in-out infinite 0.5s;
}
@keyframes float {
0%, 100% {
opacity: 0.3;
transform: translateY(0px);
}
50% {
opacity: 0.7;
transform: translateY(-10px);
}
}
`}</style>
</div>
{/* Radial gradient overlay */}
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-teal-500/5 via-transparent to-transparent" />
<div className="max-w-md w-full mx-4 relative z-10">
<div className="w-full bg-white/10 dark:bg-slate-800/30 backdrop-blur-sm rounded-2xl shadow-lg border border-white/20 dark:border-teal-600/20 p-8 text-center">
<div className="flex justify-center mb-4">
<div className="w-12 h-12 rounded-full border-4 border-gray-300 dark:border-gray-600 border-t-teal-500 animate-spin"></div>
</div>
<div className="flex justify-center mb-4">
<img
src="/images/logo-glyph-white.png"
alt="Bookwiz Glyph"
width={24}
height={24}
className="opacity-70"
/>
</div>
<h1 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
Loading
</h1>
<p className="text-gray-600 dark:text-gray-300 text-sm">
Setting up your dashboard...
</p>
</div>
</div>
</div>
)
}
if (!user && !signingOut) {
return null // Will redirect to home
}
// Show signing out state
if (signingOut) {
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 relative overflow-hidden">
{/* Magical orbs for consistency with login */}
<div className="absolute inset-0 overflow-hidden pointer-events-none">
<div className="orb orb-1" />
<div className="orb orb-2" />
<div className="orb orb-3" />
<div className="orb orb-4" />
<style jsx>{`
.orb {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle, rgba(239, 68, 68, 0.4) 0%, rgba(220, 38, 38, 0.2) 50%, transparent 100%);
will-change: opacity;
}
.orb-1 {
left: 10%;
top: 20%;
width: 6px;
height: 6px;
animation: float 4s ease-in-out infinite;
}
.orb-2 {
left: 80%;
top: 80%;
width: 4px;
height: 4px;
animation: float 5s ease-in-out infinite 1s;
}
.orb-3 {
left: 60%;
top: 30%;
width: 8px;
height: 8px;
animation: float 6s ease-in-out infinite 2s;
}
.orb-4 {
left: 30%;
top: 70%;
width: 5px;
height: 5px;
animation: float 4.5s ease-in-out infinite 0.5s;
}
@keyframes float {
0%, 100% {
opacity: 0.3;
transform: translateY(0px);
}
50% {
opacity: 0.7;
transform: translateY(-10px);
}
}
`}</style>
</div>
{/* Radial gradient overlay */}
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-red-500/5 via-transparent to-transparent" />
<div className="max-w-md w-full mx-4 relative z-10">
<div className="w-full bg-white/10 dark:bg-slate-800/30 backdrop-blur-sm rounded-2xl shadow-lg border border-white/20 dark:border-red-600/20 p-8 text-center">
<div className="flex justify-center mb-4">
<div className="w-12 h-12 rounded-full border-4 border-gray-300 dark:border-gray-600 border-t-red-500 animate-spin"></div>
</div>
<div className="flex justify-center mb-4">
<img
src="/images/logo-glyph-white.png"
alt="Bookwiz Glyph"
width={24}
height={24}
className="opacity-70"
/>
</div>
<h1 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
Signing Out
</h1>
<p className="text-gray-600 dark:text-gray-300 text-sm">
Cleaning up your session...
</p>
</div>
</div>
</div>
)
}
return (
<NewBookDialogContext.Provider value={dialogContextValue}>
<div className="min-h-screen bg-black relative overflow-hidden">
{/* Modern gradient background */}
<div className="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black pointer-events-none" />
{/* Subtle animated gradient overlay */}
<div className="absolute inset-0 opacity-30 pointer-events-none">
<div className="absolute top-0 left-1/4 w-96 h-96 bg-gradient-to-r from-blue-600/20 to-purple-600/20 rounded-full blur-3xl animate-pulse" />
<div className="absolute bottom-0 right-1/4 w-96 h-96 bg-gradient-to-r from-purple-600/20 to-pink-600/20 rounded-full blur-3xl animate-pulse" style={{ animationDelay: '1s' }} />
</div>
{/* Dashboard Layout */}
<div className="flex h-screen relative z-10">
{/* Sidebar */}
<Sidebar
collapsed={sidebarCollapsed}
onToggleCollapse={() => setSidebarCollapsed(!sidebarCollapsed)}
/>
{/* Main Content */}
<main className={`flex-1 flex flex-col overflow-hidden transition-all duration-300 ${
sidebarCollapsed ? 'lg:ml-20' : 'lg:ml-72'
}`}>
<div className="flex-1 overflow-y-auto">
{children}
</div>
</main>
</div>
{/* Global New Book Dialog */}
<NewBookDialog
isOpen={isNewBookDialogOpen}
onClose={() => setIsNewBookDialogOpen(false)}
onSubmit={handleCreateBook}
/>
</div>
</NewBookDialogContext.Provider>
)
}