"use client";

/**
 * FullscreenDialog — 전체화면 토글이 포함된 공통 Dialog
 *
 * 사용법:
 * <FullscreenDialog open={open} onOpenChange={setOpen} title="제목" description="설명">
 *   {children}
 * </FullscreenDialog>
 *
 * footer prop으로 하단 버튼 영역 커스텀 가능
 */

import React, { useState } from "react";
import {
  Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Maximize2, Minimize2 } from "lucide-react";
import { cn } from "@/lib/utils";

interface FullscreenDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  title: React.ReactNode;
  description?: React.ReactNode;
  children: React.ReactNode;
  footer?: React.ReactNode;
  /** 기본 모달 최대 너비 (기본: "max-w-5xl") */
  defaultMaxWidth?: string;
  /** 기본 모달 너비 (기본: "w-[95vw]") */
  defaultWidth?: string;
  className?: string;
  /** children wrapper에 추가할 className (기본: "overflow-auto") — "overflow-hidden"으로 변경하면 내부 flex 레이아웃이 고정 높이 내에서 동작 */
  contentClassName?: string;
}

export function FullscreenDialog({
  open, onOpenChange, title, description, children, footer,
  defaultMaxWidth = "max-w-5xl",
  defaultWidth = "w-[95vw]",
  className,
  contentClassName,
}: FullscreenDialogProps) {
  const [isFullscreen, setIsFullscreen] = useState(false);

  const handleOpenChange = (v: boolean) => {
    if (!v) setIsFullscreen(false);
    onOpenChange(v);
  };

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogContent className={cn(
        "overflow-auto flex flex-col transition-all duration-200",
        isFullscreen
          ? "max-w-screen max-h-screen w-screen h-screen rounded-none"
          : `${defaultMaxWidth} ${defaultWidth} max-h-[90vh]`,
        className,
      )}>
        <DialogHeader className="shrink-0">
          <div className="flex items-center justify-between pr-8">
            <div>
              {/* title은 string/JSX 무관하게 항상 DialogTitle로 감싼다
                  (Radix 접근성: DialogContent에 DialogTitle 필수) */}
              <DialogTitle>{title}</DialogTitle>
              {description && <DialogDescription>{description}</DialogDescription>}
            </div>
            <Button variant="ghost" size="sm" className="h-8 w-8 p-0"
              onClick={() => setIsFullscreen((p) => !p)}
              title={isFullscreen ? "기본 크기" : "전체 화면"}>
              {isFullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
            </Button>
          </div>
        </DialogHeader>

        <div className={cn("flex-1", contentClassName || "overflow-auto")}>
          {children}
        </div>

        {footer && (
          <DialogFooter className="shrink-0">
            {footer}
          </DialogFooter>
        )}
      </DialogContent>
    </Dialog>
  );
}
