'use client'

import { useState } from 'react'

import Header from '@/components/Header'
import Sidebar from '@/components/Sidebar'
import { ChatCardSkeleton, DashboardPreviewSkeleton, DashboardSettingsSkeleton } from '@/app/room/_components/Skeletons'

export default function Loading() {
    const [sidebarOpen, setSidebarOpen] = useState(false)

    return (
        <>
            <Header onMenuClick={() => setSidebarOpen(true)} />
            <div className="min-h-screen min-w-[380px] bg-white dark:bg-[#0c0d0e] text-[#17191c] dark:text-gray-50 flex overflow-x-auto transition-colors">
                <Sidebar mode="drawer" isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
                <main className="flex-1 min-h-screen w-full max-w-full overflow-x-hidden pt-[65px] bg-[#fafafc] dark:bg-[#0c0d0e]">
                    <div className="w-full h-full px-4 lg:px-6 pt-2 lg:pt-2 max-w-[1900px] mx-auto">
                        <div className="mb-4 flex items-center justify-between gap-3">
                            <div className="h-7 w-40 rounded-md bg-gray-200 dark:bg-neutral-900" />
                        </div>
                        <div className="grid gap-4 lg:gap-6 grid-cols-1 lg:grid-cols-[360px_minmax(0,1fr)]">
                            <DashboardSettingsSkeleton />
                            <div className="flex flex-col gap-4 lg:flex-row lg:gap-0">
                                <div className="flex flex-col lg:flex-[3]">
                                    <DashboardPreviewSkeleton />
                                </div>
                                <section className="bg-white dark:bg-[#0c0d0e] flex flex-col min-h-[260px] max-h-[calc(100vh-130px)] lg:w-[360px] xl:w-[380px] lg:flex-shrink-0">
                                    <ChatCardSkeleton variant="desktop" theater={false} isPopout />
                                </section>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </>
    )
}