"use client";

import { useState } from 'react';
import { Sidebar } from './sidebar';
import { TopBar } from './top-bar';
import { useDeviceType } from '@/hooks/useDeviceType';

interface DashboardLayoutProps {
  children: React.ReactNode;
}

export function DashboardLayout({ children }: DashboardLayoutProps) {
  const [sidebarCollapsed, setSidebarCollapsed] = useState(true); // 默认收起状态
  const { deviceType, isMobile, isTablet, isDesktop } = useDeviceType();

  // 根据设备类型设置布局样式
  const getLayoutStyles = () => {
    if (isMobile || isTablet) {
      return {
        left: '0',
        width: '100vw'
      };
    }

    // 桌面端
    return {
      left: sidebarCollapsed ? '4rem' : '16rem',
      width: sidebarCollapsed ? 'calc(100vw - 4rem)' : 'calc(100vw - 16rem)'
    };
  };

  return (
    <div className=" min-h-screen bg-background">
      <TopBar collapsed={sidebarCollapsed} isDesktop={isDesktop} />
      {isDesktop && <Sidebar collapsed={sidebarCollapsed} onToggle={setSidebarCollapsed} />}
      <div
        className="h-[calc(100vh-4rem)] top-[4rem] fixed right-0 bottom-0 px-4" 
        style={getLayoutStyles()}>
        {children}
      </div>
    </div>
  );
}