import { ReactNode } from "react";
import { cn } from "@/lib/utils";

interface DashboardLayoutProps {
  header: ReactNode;
  chart: ReactNode;
  orderBook: ReactNode;
  orderForm: ReactNode;
  className?: string;
}

export function DashboardLayout({
  header,
  chart,
  orderBook,
  orderForm,
  className,
}: DashboardLayoutProps) {
  return (
    <div
      className={cn(
        "flex flex-col bg-background dark:bg-[linear-gradient(135deg,rgba(53,35,86,0.18),rgba(13,13,20,0.98))]",
        // Mobile: Scrollable page height
        "min-h-[calc(100vh-64px)]",
        // Desktop: Fixed height, no window scroll
        "xl:h-[calc(100vh-64px)] xl:overflow-hidden",
        className,
      )}
    >
      {/* 1. Header Area */}
      <div className="flex-none border-b border-brand-100 bg-white dark:border-brand-800/45 dark:bg-brand-900/22">
        {header}
      </div>

      {/* 2. Main Content Area */}
      <div
        className={cn(
          "flex flex-1 flex-col",
          // Mobile: Allow content to flow naturally with spacing
          "overflow-visible pb-4 gap-4",
          // Desktop: Internal scrolling, horizontal layout, no page spacing
          "xl:overflow-hidden xl:flex-row xl:pb-0 xl:gap-0",
        )}
      >
        {/* Left Column: Chart & Info */}
        <div
          className={cn(
            "flex flex-col border-border dark:border-brand-800/45",
            // Mobile: Fixed height for chart to ensure visibility
            "h-[320px] flex-none border-b sm:h-[360px]",
            // Desktop: Fill remaining space, remove bottom border, add right border
            "xl:flex-1 xl:h-auto xl:min-h-0 xl:min-w-0 xl:border-b-0 xl:border-r",
          )}
        >
          <div className="flex-1 min-h-0">{chart}</div>
          {/* Future: Transaction History / Market Depth can go here */}
        </div>

        {/* Right Column: Order Book & Order Form */}
        <div className="flex min-h-0 w-full flex-none flex-col bg-background dark:bg-brand-900/12 xl:w-[460px] xl:pr-2 2xl:w-[500px]">
          {/* Top: Order Book (Hoga) */}
          <div className="h-[390px] flex-none overflow-hidden border-t border-border dark:border-brand-800/45 sm:h-[430px] xl:min-h-0 xl:flex-1 xl:h-auto xl:border-t-0 xl:border-b">
            {orderBook}
          </div>
          {/* Bottom: Order Form */}
          <div className="flex-none h-auto sm:h-auto xl:h-[380px]">
            {orderForm}
          </div>
        </div>
      </div>
    </div>
  );
}