import type { ReactNode } from "react";

import type { TuViPalaceView } from "@/lib/tuvi-chart-view-model";

import {
  TuViLuanCungPalaceSelector,
  type TuViPalaceSelectorDesktopVariant,
  type TuViPalaceSelectorMobileVariant,
} from "./TuViLuanCungPalaceSelector";

type Props = {
  palaces: TuViPalaceView[];
  palaceOrderIndex: Map<string, number>;
  selectedPalaceKey: string;
  onSelectPalace: (key: string) => void;
  centerHint?: string;
  desktopVariant?: TuViPalaceSelectorDesktopVariant;
  mobileVariant?: TuViPalaceSelectorMobileVariant;
  selectId?: string;
  /** Ví dụ thanh mục luận — luận chi tiết mở trong overlay trên trang cha. */
  children?: ReactNode;
  className?: string;
};

/**
 * Luận cung — một cột: chọn cung (thiên bàn thu nhỏ) + tuỳ chọn phụ trợ phía dưới.
 */
export function TuViLuanCungWorkspace({
  palaces,
  palaceOrderIndex,
  selectedPalaceKey,
  onSelectPalace,
  centerHint,
  desktopVariant,
  mobileVariant,
  selectId,
  children,
  className = "",
}: Props) {
  return (
    <div id="tuvi-luan-cung-root" className={`flex flex-col gap-5 ${className}`}>
      <div className="min-w-0">
        <TuViLuanCungPalaceSelector
          palaces={palaces}
          palaceOrderIndex={palaceOrderIndex}
          selectedPalaceKey={selectedPalaceKey}
          onSelectPalace={onSelectPalace}
          centerHint={centerHint}
          desktopVariant={desktopVariant}
          mobileVariant={mobileVariant}
          selectId={selectId}
        />
      </div>

      {children ?
        <div className="min-w-0 scroll-mt-4" aria-label="Mục luận giải theo cung">
          {children}
        </div>
      : null}
    </div>
  );
}