import * as React from 'react';
import { cn } from '@/lib/utils';

export interface DashboardLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
  header?: React.ReactNode;
  sidebar?: React.ReactNode;
  ticker?: React.ReactNode;
  statusBar?: React.ReactNode;
  /** Chiều rộng sidebar khi expand (collapsed luôn 56px). */
  sidebarWidth?: number;
  /** Có collapse sidebar không. */
  sidebarCollapsed?: boolean;
  children: React.ReactNode;
}

/**
 * Layout khung cho toàn bộ trang dashboard / trading terminal.
 *
 * Cấu trúc:
 *  ┌─────────────────────────────────────┐
 *  │ TICKER STRIP (optional, 32px)      │
 *  ├──────────┬─────────────────────────┤
 *  │ SIDEBAR  │ HEADER (48px)          │
 *  │ (56 px   ├─────────────────────────┤
 *  │  hoặc    │ MAIN                    │
 *  │  expand) │ (scroll-y)              │
 *  ├──────────┴─────────────────────────┤
 *  │ STATUS BAR (optional, 24px)        │
 *  └─────────────────────────────────────┘
 */
export function DashboardLayout({
  header,
  sidebar,
  ticker,
  statusBar,
  sidebarWidth = 200,
  sidebarCollapsed = true,
  children,
  className,
  ...rest
}: DashboardLayoutProps) {
  const sidebarPx = sidebarCollapsed ? 56 : sidebarWidth;
  return (
    <div
      className={cn('flex min-h-screen flex-col bg-background text-foreground', className)}
      {...rest}
    >
      {ticker ? (
        <div className="h-ticker-bar border-b border-border bg-background-elevated">
          {ticker}
        </div>
      ) : null}
      <div className="flex flex-1">
        {sidebar ? (
          <aside
            className="shrink-0 border-r border-border bg-background-elevated transition-[width] duration-200"
            style={{ width: sidebarPx }}
          >
            {sidebar}
          </aside>
        ) : null}
        <div className="flex min-w-0 flex-1 flex-col">
          {header}
          <main className="flex-1 overflow-y-auto px-4 py-4 md:px-6">{children}</main>
        </div>
      </div>
      {statusBar ? (
        <div
          role="status"
          aria-live="polite"
          className="flex h-6 items-center gap-4 border-t border-border bg-background-elevated px-4 text-[11px] text-foreground-muted"
        >
          {statusBar}
        </div>
      ) : null}
    </div>
  );
}