/**
 * DetailActions - 상세 페이지 버튼 영역 컴포넌트
 *
 * 공통 레이아웃:
 * - 왼쪽: 목록으로/취소 (뒤로가기 성격)
 * - 오른쪽: [추가액션] 삭제 | 수정/저장/등록 (액션 성격)
 *
 * View 모드: 목록으로 | [추가액션] 수정
 * Edit 모드: 취소 | [추가액션] 삭제 | 저장
 * Create 모드: 취소 | [추가액션] 등록
 */

'use client';

import type { ReactNode } from 'react';
import { ArrowLeft, Save, Trash2, X, Edit, Loader2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { useMenuStore } from '@/stores/menuStore';
import type { ActionItem } from '../types';

export interface DetailActionsProps {
  /** 현재 모드 */
  mode: 'view' | 'edit' | 'create';
  /** 제출 중 여부 */
  isSubmitting?: boolean;
  /** 권한 */
  permissions?: {
    canEdit?: boolean;
    canDelete?: boolean;
  };
  /** 버튼 표시 설정 */
  showButtons?: {
    back?: boolean;
    delete?: boolean;
    edit?: boolean;
    save?: boolean;
  };
  /** 버튼 라벨 */
  labels?: {
    back?: string;
    cancel?: string;
    delete?: string;
    edit?: string;
    submit?: string;
  };
  /** 핸들러 */
  onBack?: () => void;
  onCancel?: () => void;
  onDelete?: () => void;
  onEdit?: () => void;
  onSubmit?: () => void;
  /** 추가 액션 (삭제 버튼 앞에 표시, 자유 JSX) */
  extraActions?: ReactNode;
  /** 추가 액션 아이템 (config 배열, 모바일 아이콘 패턴 자동 적용) */
  extraActionItems?: ActionItem[];
  /** 하단 고정 (sticky) 모드 */
  sticky?: boolean;
  /** 추가 클래스 */
  className?: string;
}

export function DetailActions({
  mode,
  isSubmitting = false,
  permissions = {},
  showButtons = {},
  labels = {},
  onBack,
  onCancel,
  onDelete,
  onEdit,
  onSubmit,
  extraActions,
  extraActionItems,
  sticky = false,
  className,
}: DetailActionsProps) {
  const isViewMode = mode === 'view';
  const isCreateMode = mode === 'create';
  const isEditMode = mode === 'edit';

  // 사이드바 상태 가져오기 (sticky 모드에서 left 값 동적 계산용)
  const sidebarCollapsed = useMenuStore((state) => state.sidebarCollapsed);

  const {
    canEdit = true,
    canDelete = true,
  } = permissions;

  const {
    back: showBack = true,
    delete: showDelete = true,
    edit: showEdit = true,
    save: showSave = true,
  } = showButtons;

  const {
    back: backLabel = '목록으로',
    cancel: cancelLabel = '취소',
    delete: deleteLabel = '삭제',
    edit: editLabel = '수정',
    submit: submitLabel,
  } = labels;

  // 실제 submit 라벨 (create 모드면 '등록', 아니면 '저장')
  const actualSubmitLabel = submitLabel || (isCreateMode ? '등록' : '저장');

  // Fixed 스타일: 화면 하단에 고정 (사이드바 상태에 따라 동적 계산)
  // 모바일: 좌우 여백 16px (left-4 right-4)
  // 태블릿/데스크탑: 사이드바 펼침(w-64=256px), 접힘(w-24=96px) + 콘텐츠 패딩(24px) 맞춤
  const stickyStyles = sticky
    ? `fixed bottom-4 left-4 right-4 px-4 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 md:bottom-6 md:px-6 md:right-[24px] ${sidebarCollapsed ? 'md:left-[120px]' : 'md:left-[280px]'}`
    : '';

  // 공통 레이아웃: 왼쪽(뒤로) | 오른쪽(액션들)
  // 모바일: 아이콘만, 태블릿 이상: 아이콘 + 텍스트
  return (
    <div className={cn('flex items-center justify-between gap-2', stickyStyles, className)}>
      {/* 왼쪽: 목록으로 (view) 또는 취소 (edit/create) */}
      {isViewMode ? (
        showBack && onBack ? (
          <Button variant="outline" onClick={onBack} size="sm" className="md:size-default">
            <ArrowLeft className="w-4 h-4 md:mr-2" />
            <span className="hidden md:inline">{backLabel}</span>
          </Button>
        ) : (
          <div />
        )
      ) : (
        <Button variant="outline" onClick={onCancel} disabled={isSubmitting} size="sm" className="md:size-default">
          <X className="w-4 h-4 md:mr-2" />
          <span className="hidden md:inline">{cancelLabel}</span>
        </Button>
      )}

      {/* 오른쪽: 추가액션 + 삭제 + 수정/저장/등록 */}
      <div className="flex items-center gap-1 md:gap-2">
        {extraActions}

        {/* config 배열 기반 추가 버튼 (모바일 아이콘 패턴 자동 적용) */}
        {extraActionItems?.filter(item => !item.hidden).map((item, idx) => {
          const Icon = item.loading ? Loader2 : item.icon;
          return (
            <Button
              key={idx}
              variant={item.variant || 'outline'}
              size="sm"
              className={cn('md:size-default', item.className)}
              onClick={item.onClick}
              disabled={item.disabled || item.loading}
            >
              <Icon className={cn('w-4 h-4 md:mr-2', item.loading && 'animate-spin')} />
              <span className="hidden md:inline">{item.label}</span>
            </Button>
          );
        })}

        {/* 삭제 버튼: edit 모드에서만 표시 (view는 읽기 전용, create는 삭제 대상 없음) */}
        {isEditMode && canDelete && showDelete && onDelete && (
          <Button
            variant="outline"
            onClick={onDelete}
            disabled={isSubmitting}
            size="sm"
            className="text-destructive hover:bg-destructive hover:text-destructive-foreground md:size-default"
          >
            <Trash2 className="w-4 h-4 md:mr-2" />
            <span className="hidden md:inline">{deleteLabel}</span>
          </Button>
        )}

        {/* 수정 버튼: view 모드에서만 */}
        {isViewMode && canEdit && showEdit && onEdit && (
          <Button onClick={onEdit} size="sm" className="md:size-default">
            <Edit className="w-4 h-4 md:mr-2" />
            <span className="hidden md:inline">{editLabel}</span>
          </Button>
        )}

        {/* 저장/등록 버튼: edit, create 모드에서만 */}
        {!isViewMode && showSave && onSubmit && (
          <Button onClick={onSubmit} disabled={isSubmitting} size="sm" className="md:size-default">
            <Save className="w-4 h-4 md:mr-2" />
            <span className="hidden md:inline">{actualSubmitLabel}</span>
          </Button>
        )}
      </div>
    </div>
  );
}

export default DetailActions;
