'use client';

import React from 'react';
import {
  ZoomIn,
  ZoomOut,
  Maximize2,
  Printer,
  Download,
  Pencil,
  Trash2,
  Send,
  CheckCircle,
  XCircle,
  Copy,
  FileOutput,
  Mail,
  MessageCircle,
  Loader2,
} from 'lucide-react';
import { ReactNode } from 'react';
import { Button } from '@/components/ui/button';
import { ActionType, DocumentFeatures, UseZoomReturn } from '../types';

interface DocumentToolbarProps {
  // 줌 컨트롤
  zoom: UseZoomReturn;
  features: DocumentFeatures;

  // 액션 버튼
  actions: ActionType[];
  onPrint?: () => void;
  onDownload?: () => void;
  onEdit?: () => void;
  onDelete?: () => void;
  onSubmit?: () => void;
  onApprove?: () => void;
  onReject?: () => void;
  onCopy?: () => void;
  onPdf?: () => void;
  onEmail?: () => void;
  onFax?: () => void;
  onKakao?: () => void;
  toolbarExtra?: ReactNode;

  // 로딩 상태
  loadingAction?: ActionType | null;
}

/**
 * 문서 뷰어 툴바
 * - 좌측: 줌 컨트롤 (축소, 확대, 맞춤, 배율)
 * - 우측: 액션 버튼 (인쇄, 다운로드, 수정, 삭제, 상신)
 */
export function DocumentToolbar({
  zoom,
  features,
  actions,
  onPrint,
  onDownload,
  onEdit,
  onDelete,
  onSubmit,
  onApprove,
  onReject,
  onCopy,
  onPdf,
  onEmail,
  onFax,
  onKakao,
  toolbarExtra,
  loadingAction,
}: DocumentToolbarProps) {
  const showZoomControls = features.zoom !== false;
  const isAnyLoading = !!loadingAction;

  // 액션 버튼 렌더링
  const renderActionButton = (action: ActionType) => {
    switch (action) {
      case 'print':
        if (!onPrint) return null;
        return (
          <Button
            key="print"
            variant="outline"
            size="sm"
            className="h-8 gap-1 text-xs px-2 sm:px-3"
            onClick={onPrint}
            disabled={isAnyLoading}
          >
            {loadingAction === 'print' ? (
              <Loader2 size={14} className="animate-spin" />
            ) : (
              <Printer size={14} />
            )}
            <span className="hidden sm:inline">{loadingAction === 'print' ? '인쇄 중...' : '인쇄'}</span>
          </Button>
        );

      case 'download':
        if (!onDownload) return null;
        return (
          <Button
            key="download"
            size="sm"
            className="h-8 bg-green-600 hover:bg-green-700 text-white gap-1 text-xs px-2 sm:px-3"
            onClick={onDownload}
            disabled={isAnyLoading}
          >
            {loadingAction === 'download' ? (
              <Loader2 size={14} className="animate-spin" />
            ) : (
              <Download size={14} />
            )}
            <span className="hidden sm:inline">{loadingAction === 'download' ? '다운로드 중...' : '다운로드'}</span>
          </Button>
        );

      case 'edit':
        if (!onEdit) return null;
        return (
          <Button
            key="edit"
            variant="outline"
            size="sm"
            className="h-8 gap-1 text-xs px-2 sm:px-3"
            onClick={onEdit}
          >
            <Pencil size={14} />
            <span className="hidden sm:inline">수정</span>
          </Button>
        );

      case 'delete':
        if (!onDelete) return null;
        return (
          <Button
            key="delete"
            variant="outline"
            size="sm"
            className="h-8 gap-1 text-xs px-2 sm:px-3 text-red-600 hover:text-red-700 hover:bg-red-50"
            onClick={onDelete}
          >
            <Trash2 size={14} />
            <span className="hidden sm:inline">삭제</span>
          </Button>
        );

      case 'submit':
        if (!onSubmit) return null;
        return (
          <Button
            key="submit"
            size="sm"
            className="h-8 bg-blue-600 hover:bg-blue-700 text-white gap-1 text-xs px-2 sm:px-3"
            onClick={onSubmit}
          >
            <Send size={14} />
            <span className="hidden sm:inline">상신</span>
          </Button>
        );

      case 'approve':
        if (!onApprove) return null;
        return (
          <Button
            key="approve"
            size="sm"
            className="h-8 bg-blue-600 hover:bg-blue-700 text-white gap-1 text-xs px-2 sm:px-3"
            onClick={onApprove}
          >
            <CheckCircle size={14} />
            <span className="hidden sm:inline">승인</span>
          </Button>
        );

      case 'reject':
        if (!onReject) return null;
        return (
          <Button
            key="reject"
            variant="outline"
            size="sm"
            className="h-8 gap-1 text-xs px-2 sm:px-3 text-red-600 hover:text-red-700 hover:bg-red-50"
            onClick={onReject}
          >
            <XCircle size={14} />
            <span className="hidden sm:inline">반려</span>
          </Button>
        );

      case 'copy':
        if (!onCopy) return null;
        return (
          <Button
            key="copy"
            variant="outline"
            size="sm"
            className="h-8 gap-1 text-xs px-2 sm:px-3"
            onClick={onCopy}
          >
            <Copy size={14} />
            <span className="hidden sm:inline">복제</span>
          </Button>
        );

      case 'pdf':
        if (!onPdf) return null;
        return (
          <Button
            key="pdf"
            size="sm"
            className="h-8 bg-red-600 hover:bg-red-700 text-white gap-1 text-xs px-2 sm:px-3"
            onClick={onPdf}
            disabled={isAnyLoading}
          >
            {loadingAction === 'pdf' ? (
              <Loader2 size={14} className="animate-spin" />
            ) : (
              <Download size={14} />
            )}
            <span className="hidden sm:inline">{loadingAction === 'pdf' ? 'PDF 생성 중...' : 'PDF'}</span>
          </Button>
        );

      case 'email':
        if (!onEmail) return null;
        return (
          <Button
            key="email"
            size="sm"
            className="h-8 bg-blue-600 hover:bg-blue-700 text-white gap-1 text-xs px-2 sm:px-3"
            onClick={onEmail}
          >
            <Mail size={14} />
            <span className="hidden sm:inline">이메일</span>
          </Button>
        );

      case 'fax':
        if (!onFax) return null;
        return (
          <Button
            key="fax"
            size="sm"
            className="h-8 bg-purple-600 hover:bg-purple-700 text-white gap-1 text-xs px-2 sm:px-3"
            onClick={onFax}
          >
            <FileOutput size={14} />
            <span className="hidden sm:inline">팩스</span>
          </Button>
        );

      case 'kakao':
        if (!onKakao) return null;
        return (
          <Button
            key="kakao"
            size="sm"
            className="h-8 bg-yellow-500 hover:bg-yellow-600 text-white gap-1 text-xs px-2 sm:px-3"
            onClick={onKakao}
          >
            <MessageCircle size={14} />
            <span className="hidden sm:inline">카카오톡</span>
          </Button>
        );

      default:
        return null;
    }
  };

  return (
    <div className="flex items-center justify-between px-4 py-2 bg-white border-b border-gray-100 shrink-0 flex-wrap gap-2 print:hidden">
      {/* 좌측: 줌 컨트롤 */}
      <div className="flex items-center gap-1 sm:gap-2">
        {showZoomControls && (
          <>
            <Button
              variant="ghost"
              size="sm"
              className="h-8 gap-1 text-xs px-2 sm:px-3"
              onClick={zoom.zoomOut}
              disabled={!zoom.canZoomOut}
            >
              <ZoomOut size={14} />
              <span className="hidden sm:inline">축소</span>
            </Button>
            <Button
              variant="ghost"
              size="sm"
              className="h-8 gap-1 text-xs px-2 sm:px-3"
              onClick={zoom.zoomIn}
              disabled={!zoom.canZoomIn}
            >
              <ZoomIn size={14} />
              <span className="hidden sm:inline">확대</span>
            </Button>
            <Button
              variant="ghost"
              size="sm"
              className="h-8 gap-1 text-xs px-2 sm:px-3"
              onClick={zoom.zoomReset}
            >
              <Maximize2 size={14} />
              <span className="hidden sm:inline">맞춤</span>
            </Button>
            <span className="text-xs font-mono text-gray-600 bg-gray-100 px-2 py-1 rounded min-w-[48px] text-center">
              {zoom.zoom}%
            </span>
          </>
        )}
      </div>

      {/* 우측: 액션 버튼 + 추가 요소 */}
      <div className="flex items-center gap-1 sm:gap-2 flex-wrap">
        {actions.map(renderActionButton)}
        {toolbarExtra && (
          <div className="flex items-center gap-2 pl-2 border-l border-gray-200">
            {toolbarExtra}
          </div>
        )}
      </div>
    </div>
  );
}
