import { ReactNode } from "react";
import { ChevronDown, ChevronUp } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface DashboardLayoutProps {
  header: ReactNode;
  chart: ReactNode;
  orderBook: ReactNode;
  orderForm: ReactNode;
  isChartVisible: boolean;
  onToggleChart: () => void;
  className?: string;
}

/**
 * @description 트레이드 본문 레이아웃을 구성합니다. 상단 차트 영역은 보임/숨김 토글을 지원합니다.
 * @see features/trade/components/layout/TradeDashboardContent.tsx 상위 컴포넌트에서 차트 토글 상태를 관리하고 본 레이아웃에 전달합니다.
 */
export function DashboardLayout({
  header,
  chart,
  orderBook,
  orderForm,
  isChartVisible,
  onToggleChart,
  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-1 min-h-0 overflow-y-auto",
          "xl:overflow-hidden",
        )}
      >
        <div className="flex min-h-full flex-col xl:h-full xl:min-h-0">
          {/* ========== CHART SECTION ========== */}
          <section className="flex-none border-b border-border dark:border-brand-800/45">
            <div className="flex items-center justify-between gap-2 bg-muted/20 px-3 py-1.5 dark:bg-brand-900/30 sm:px-4">
              <div className="min-w-0">
                <p className="text-xs font-semibold text-foreground dark:text-brand-50 sm:text-sm">
                  실시간 차트
                </p>
                <p className="text-[10px] text-muted-foreground dark:text-brand-100/70 sm:text-[11px]">
                  거래 화면 집중을 위해 기본은 접힌 상태입니다.
                </p>
              </div>
              {/* UI 흐름: 차트 토글 버튼 -> onToggleChart 호출 -> TradeDashboardContent의 상태 변경 -> 차트 wrapper 높이 반영 */}
              <Button
                type="button"
                variant="outline"
                size="sm"
                onClick={onToggleChart}
                className="h-7 gap-1 border-brand-200 bg-white px-2 text-[11px] text-brand-700 hover:bg-brand-50 dark:border-brand-700/55 dark:bg-brand-900/35 dark:text-brand-100 dark:hover:bg-brand-800/35 sm:h-8 sm:px-3 sm:text-xs"
                aria-expanded={isChartVisible}
              >
                {isChartVisible ? (
                  <>
                    차트 숨기기 <ChevronUp className="h-3.5 w-3.5" />
                  </>
                ) : (
                  <>
                    차트 보이기 <ChevronDown className="h-3.5 w-3.5" />
                  </>
                )}
              </Button>
            </div>

            <div
              className={cn(
                "overflow-hidden border-t border-border/70 transition-[max-height,opacity] duration-200 dark:border-brand-800/45",
                isChartVisible ? "max-h-[56vh] opacity-100" : "max-h-0 opacity-0",
              )}
            >
              <div className="h-[34vh] min-h-[280px] w-full sm:h-[40vh] xl:h-[34vh] 2xl:h-[38vh]">
                {chart}
              </div>
            </div>
          </section>

          {/* ========== ORDERBOOK + ORDER SECTION ========== */}
          <div className="flex flex-1 min-h-0 flex-col xl:flex-row xl:overflow-hidden">
            <section className="flex min-h-0 flex-col border-b border-border dark:border-brand-800/45 xl:flex-1 xl:border-b-0 xl:border-r">
              <div className="h-[390px] min-h-0 sm:h-[430px] xl:h-full">
                {orderBook}
              </div>
            </section>

            <section className="flex min-h-0 flex-col bg-background dark:bg-brand-900/12 xl:w-[430px] 2xl:w-[470px]">
              <div className="min-h-[320px] xl:h-full">{orderForm}</div>
            </section>
          </div>
        </div>
      </div>
    </div>
  );
}