import React, { useState, useEffect, ReactNode } from "react";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from "../ui/sheet";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "../ui/dialog";
import { Button } from "../ui/button";

/**
 * 공통 바텀시트 템플릿
 * 
 * 모바일에서는 바텀시트(Sheet), 데스크톱에서는 다이얼로그(Dialog)로 표시되는 반응형 컴포넌트입니다.
 * 모바일에서는 CTA 버튼이 하단에 sticky로 고정됩니다.
 * 
 * @example
 * ```tsx
 * <CommonBottomSheet
 *   isOpen={isOpen}
 *   onClose={() => setIsOpen(false)}
 *   title="위젯 관리"
 *   description="대시보드에 표시할 위젯을 선택하고 순서를 변경할 수 있습니다."
 *   icon={<Settings className="h-5 w-5" />}
 *   showFooter={true}
 *   onSave={handleSave}
 *   onCancel={handleCancel}
 * >
 *   <div>콘텐츠 영역</div>
 * </CommonBottomSheet>
 * ```
 */

interface CommonBottomSheetProps {
  /** 바텀시트 열림 상태 */
  isOpen: boolean;
  
  /** 바텀시트 닫기 핸들러 */
  onClose: () => void;
  
  /** 바텀시트 타이틀 */
  title: string;
  
  /** 바텀시트 설명 (선택) */
  description?: string;
  
  /** 타이틀 앞 아이콘 (선택) */
  icon?: ReactNode;
  
  /** 콘텐츠 영역 */
  children: ReactNode;
  
  /** 푸터 표시 여부 */
  showFooter?: boolean;
  
  /** 저장 버튼 텍스트 (기본: "저장") */
  saveButtonText?: string;
  
  /** 취소 버튼 텍스트 (기본: "취소") */
  cancelButtonText?: string;
  
  /** 저장 버튼 클릭 핸들러 */
  onSave?: () => void;
  
  /** 취소 버튼 클릭 핸들러 */
  onCancel?: () => void;
  
  /** 저장 버튼 비활성화 여부 */
  saveDisabled?: boolean;
  
  /** 커스텀 푸터 (showFooter=true일 때만 사용) */
  customFooter?: ReactNode;
  
  /** 최대 너비 (기본: "5xl") */
  maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
  
  /** 최대 높이 (기본: "85vh") */
  maxHeight?: string;
  
  /** 데스크톱 모드에서도 바텀시트 사용 (기본: false) */
  forceBottomSheet?: boolean;
  
  /** 모바일 핸들바 숨김 (기본: false) */
  hideHandle?: boolean;
  
  /** 콘텐츠 영역 커스텀 클래스 */
  contentClassName?: string;
  
  /** 헤더 영역 커스텀 클래스 */
  headerClassName?: string;
  
  /** 푸터 영역 커스텀 클래스 */
  footerClassName?: string;
}

export function CommonBottomSheet({
  isOpen,
  onClose,
  title,
  description,
  icon,
  children,
  showFooter = false,
  saveButtonText = "저장",
  cancelButtonText = "취소",
  onSave,
  onCancel,
  saveDisabled = false,
  customFooter,
  maxWidth = "5xl",
  maxHeight = "85vh",
  forceBottomSheet = false,
  hideHandle = false,
  contentClassName = "",
  headerClassName = "",
  footerClassName = ""
}: CommonBottomSheetProps) {
  const [isMobile, setIsMobile] = useState(false);

  // 모바일 감지
  useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth < 768);
    };
    
    checkMobile();
    window.addEventListener('resize', checkMobile);
    return () => window.removeEventListener('resize', checkMobile);
  }, []);

  // 취소 핸들러
  const handleCancel = () => {
    if (onCancel) {
      onCancel();
    } else {
      onClose();
    }
  };

  // 저장 핸들러
  const handleSave = () => {
    if (onSave) {
      onSave();
    }
  };

  // 최대 너비 클래스 매핑
  const maxWidthClass = `max-w-${maxWidth}`;

  // 푸터 렌더링 함수
  const renderFooter = () => {
    if (!showFooter) return null;
    
    if (customFooter) {
      return (
        <div className={footerClassName}>
          {customFooter}
        </div>
      );
    }
    
    return (
      <div className={`flex flex-row justify-end gap-2 ${footerClassName}`}>
        <Button 
          variant="outline" 
          onClick={handleCancel} 
          className="flex-1 sm:flex-none sm:w-auto"
        >
          {cancelButtonText}
        </Button>
        <Button 
          onClick={handleSave} 
          disabled={saveDisabled}
          className="flex-1 sm:flex-none sm:w-auto"
        >
          {saveButtonText}
        </Button>
      </div>
    );
  };

  // 모바일 또는 강제 바텀시트: Sheet 사용
  if (isMobile || forceBottomSheet) {
    return (
      <Sheet open={isOpen} onOpenChange={onClose}>
        <SheetContent 
          side="bottom" 
          className={`${maxWidthClass} mx-auto max-h-[${maxHeight}] overflow-hidden flex flex-col rounded-t-3xl p-0`}
          aria-describedby="bottom-sheet-description"
        >
          {/* 핸들바 (모바일 전용) */}
          {!hideHandle && (
            <div className="flex justify-center pt-2 pb-1 px-6">
              <div className="w-10 h-1 bg-gray-300 rounded-full"></div>
            </div>
          )}
          
          {/* 헤더 - 스크롤 영역 밖 */}
          <div className={`px-6 py-4 border-b flex-shrink-0 flex items-start ${headerClassName}`}>
            <div className="space-y-1.5 text-left flex-1 pr-8">
              <SheetTitle className="text-xl text-left">
                {title}
              </SheetTitle>
              {description && (
                <SheetDescription id="bottom-sheet-description" className="text-left">
                  {description}
                </SheetDescription>
              )}
            </div>
          </div>
          
          {/* 콘텐츠 - 스크롤 가능 영역 */}
          <div className={`flex-1 overflow-y-auto p-6 ${contentClassName}`}>
            {children}
          </div>
          
          {/* 푸터 - STICKY (모바일에서 하단 고정) */}
          {showFooter && (
            <div className="sticky bottom-0 left-0 right-0 bg-background border-t pt-4 pb-6 px-6 flex-shrink-0">
              {renderFooter()}
            </div>
          )}
        </SheetContent>
      </Sheet>
    );
  }

  // 데스크톱: Dialog 사용
  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent 
        className={`${maxWidthClass} max-h-[${maxHeight}] overflow-hidden flex flex-col gap-0 p-0`}
        aria-describedby={description ? "dialog-description" : undefined}
      >
        <DialogHeader className={`px-6 pt-6 pb-4 border-b flex-shrink-0 text-left space-y-1.5 ${headerClassName}`}>
          <DialogTitle className="text-xl text-left pr-8">
            {title}
          </DialogTitle>
          {description && (
            <DialogDescription id="dialog-description" className="text-left pr-8">
              {description}
            </DialogDescription>
          )}
        </DialogHeader>
        
        <div className={`flex-1 overflow-y-auto p-6 ${contentClassName}`}>
          {children}
        </div>
        
        {showFooter && (
          <div className={`px-6 pt-4 pb-6 border-t flex-shrink-0 ${footerClassName}`}>
            {renderFooter()}
          </div>
        )}
      </DialogContent>
    </Dialog>
  );
}