"use client";

/**
 * ReportDesignerRightPanel.tsx
 *
 * [역할]
 * - 캔버스 오른쪽 고정 패널 (w-[300px])
 * - 컴포넌트 선택 시: 위치/크기/스타일 속성 편집
 * - 미선택 시: 페이지 설정
 */

import { PageSettingsTab } from "./PageSettingsTab";
import { ComponentStylePanel } from "./properties/ComponentStylePanel";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Button } from "@/components/ui/button";
import { useReportDesigner } from "@/contexts/ReportDesignerContext";
import { PanelRightClose, PanelRightOpen, Settings, Sliders } from "lucide-react";

export function ReportDesignerRightPanel() {
  const { selectedComponentId, isRightPanelCollapsed, setIsRightPanelCollapsed } = useReportDesigner();

  if (isRightPanelCollapsed) {
    return (
      <div className="flex h-full w-10 shrink-0 flex-col items-center border-l border-gray-200 bg-white pt-2 gap-2">
        <Button
          size="icon"
          variant="ghost"
          className="h-8 w-8"
          onClick={() => setIsRightPanelCollapsed(false)}
          title="속성 패널 열기"
        >
          <PanelRightOpen className="h-4 w-4" />
        </Button>
        <Button
          size="icon"
          variant="ghost"
          className="h-8 w-8"
          title={selectedComponentId ? "속성" : "페이지 설정"}
          onClick={() => setIsRightPanelCollapsed(false)}
        >
          {selectedComponentId ? <Sliders className="h-4 w-4" /> : <Settings className="h-4 w-4" />}
        </Button>
      </div>
    );
  }

  return (
    <div className="flex h-full w-[340px] shrink-0 flex-col border-l border-gray-200 bg-white">
      {/* 헤더 */}
      <div className="flex h-12 items-center justify-between border-b border-gray-200 px-4">
        <span className="text-base font-bold text-gray-800">
          {selectedComponentId ? "속성" : "페이지 설정"}
        </span>
        <Button
          size="icon"
          variant="ghost"
          className="h-7 w-7"
          onClick={() => setIsRightPanelCollapsed(true)}
          title="속성 패널 접기"
        >
          <PanelRightClose className="h-4 w-4" />
        </Button>
      </div>

      {/* 컨텐츠 */}
      <div className="min-h-0 flex-1">
        {selectedComponentId ? (
          <ComponentStylePanel />
        ) : (
          <ScrollArea className="h-full">
            <PageSettingsTab />
          </ScrollArea>
        )}
      </div>
    </div>
  );
}