'use client';

import React, { useState, useRef, useCallback } from 'react';
import { Upload, FileText, Download, Trash2, Eye, RefreshCw } from 'lucide-react';
import { Button } from '@/components/ui/button';

export interface QualityDocumentFile {
  id?: number;
  name: string;
  url: string;
  size?: number;
  uploadedAt?: string;
}

interface QualityDocumentUploaderProps {
  /** 기존 업로드된 파일 정보 */
  existingFile?: QualityDocumentFile | null;
  /** 파일 업로드 콜백 */
  onFileUpload: (file: File) => void;
  /** 파일 삭제 콜백 */
  onFileDelete?: () => void;
  /** 파일 다운로드 콜백 */
  onFileDownload?: (file: QualityDocumentFile) => void;
  /** 비활성화 여부 */
  disabled?: boolean;
  /** 최대 파일 크기 (MB) */
  maxSize?: number;
}

/**
 * 품질관리서 PDF 업로드/뷰어 컴포넌트
 *
 * - PDF 파일 업로드 (드래그 앤 드롭 / 클릭)
 * - PDF 미리보기 (iframe)
 * - 다운로드 / 삭제 / 교체 기능
 */
export function QualityDocumentUploader({
  existingFile,
  onFileUpload,
  onFileDelete,
  onFileDownload,
  disabled = false,
  maxSize = 20, // 20MB default
}: QualityDocumentUploaderProps) {
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [isDragging, setIsDragging] = useState(false);
  const [showPreview, setShowPreview] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  // 파일 유효성 검증
  const validateFile = (file: File): string | null => {
    // PDF 파일만 허용
    if (file.type !== 'application/pdf') {
      return 'PDF 파일만 업로드 가능합니다.';
    }
    // 파일 크기 검증
    const fileSizeMB = file.size / (1024 * 1024);
    if (fileSizeMB > maxSize) {
      return `파일 크기는 ${maxSize}MB 이하여야 합니다.`;
    }
    return null;
  };

  // 파일 선택 처리
  const handleFileSelect = useCallback((file: File) => {
    const validationError = validateFile(file);
    if (validationError) {
      setError(validationError);
      return;
    }

    setError(null);
    setSelectedFile(file);

    // Blob URL 생성하여 미리보기
    const url = URL.createObjectURL(file);
    setPreviewUrl(url);

    // 부모 컴포넌트에 알림
    onFileUpload(file);
  }, [maxSize, onFileUpload]);

  // Input 변경 처리
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      handleFileSelect(file);
    }
  };

  // 드래그 앤 드롭 이벤트
  const handleDragEnter = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    if (!disabled) setIsDragging(true);
  };

  const handleDragLeave = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);
  };

  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
  };

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);

    if (disabled) return;

    const file = e.dataTransfer.files?.[0];
    if (file) {
      handleFileSelect(file);
    }
  };

  // 파일 선택 버튼 클릭
  const handleClick = () => {
    if (!disabled) {
      fileInputRef.current?.click();
    }
  };

  // 파일 삭제
  const handleDelete = () => {
    if (previewUrl) {
      URL.revokeObjectURL(previewUrl);
    }
    setSelectedFile(null);
    setPreviewUrl(null);
    setError(null);
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
    onFileDelete?.();
  };

  // 파일 다운로드
  const handleDownload = () => {
    if (existingFile) {
      onFileDownload?.(existingFile);
    } else if (selectedFile && previewUrl) {
      // 로컬 파일 다운로드
      const a = document.createElement('a');
      a.href = previewUrl;
      a.download = selectedFile.name;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
  };

  // 미리보기 토글
  const togglePreview = () => {
    setShowPreview(!showPreview);
  };

  // 현재 표시할 파일 정보
  const currentFile = selectedFile || existingFile;
  const currentPreviewUrl = previewUrl || existingFile?.url;

  // 파일 크기 포맷
  const formatFileSize = (bytes?: number) => {
    if (!bytes) return '';
    if (bytes < 1024) return `${bytes} B`;
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
  };

  return (
    <div className="w-full h-full flex flex-col">
      {/* 숨김 파일 입력 */}
      <input
        ref={fileInputRef}
        type="file"
        accept=".pdf,application/pdf"
        onChange={handleInputChange}
        disabled={disabled}
        className="hidden"
      />

      {currentFile ? (
        // 파일이 있는 경우: 정보 표시 + 미리보기
        <div className="flex flex-col h-full">
          {/* 파일 정보 헤더 */}
          <div className="bg-white border-b p-4 flex items-center justify-between shrink-0">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
                <FileText className="w-5 h-5 text-red-600" />
              </div>
              <div>
                <p className="font-medium text-sm text-gray-800">
                  {selectedFile?.name || existingFile?.name}
                </p>
                <p className="text-xs text-gray-500">
                  {formatFileSize(selectedFile?.size || existingFile?.size)}
                  {existingFile?.uploadedAt && ` • ${existingFile.uploadedAt}`}
                </p>
              </div>
            </div>
            <div className="flex items-center gap-2">
              <Button
                type="button"
                variant="outline"
                size="sm"
                onClick={togglePreview}
                className="gap-1.5"
              >
                <Eye className="w-4 h-4" />
                {showPreview ? '미리보기 닫기' : '미리보기'}
              </Button>
              <Button
                type="button"
                variant="outline"
                size="sm"
                onClick={handleDownload}
                className="gap-1.5"
              >
                <Download className="w-4 h-4" />
                다운로드
              </Button>
              <Button
                type="button"
                variant="outline"
                size="sm"
                onClick={handleClick}
                disabled={disabled}
                className="gap-1.5"
              >
                <RefreshCw className="w-4 h-4" />
                교체
              </Button>
              <Button
                type="button"
                variant="outline"
                size="sm"
                onClick={handleDelete}
                disabled={disabled}
                className="gap-1.5 text-red-600 hover:text-red-700 hover:bg-red-50"
              >
                <Trash2 className="w-4 h-4" />
                삭제
              </Button>
            </div>
          </div>

          {/* PDF 미리보기 영역 */}
          {showPreview && currentPreviewUrl ? (
            <div className="flex-1 bg-gray-100 p-4">
              <iframe
                src={currentPreviewUrl}
                className="w-full h-full border-0 rounded-lg shadow-sm bg-white"
                title="PDF Preview"
              />
            </div>
          ) : (
            <div className="flex-1 flex items-center justify-center bg-gray-50">
              <div className="text-center">
                <FileText className="w-16 h-16 text-gray-300 mx-auto mb-4" />
                <p className="text-gray-500 text-sm">미리보기 버튼을 클릭하여 PDF를 확인하세요</p>
              </div>
            </div>
          )}
        </div>
      ) : (
        // 파일이 없는 경우: 업로드 영역
        <div
          onDragEnter={handleDragEnter}
          onDragLeave={handleDragLeave}
          onDragOver={handleDragOver}
          onDrop={handleDrop}
          onClick={handleClick}
          className={`
            flex-1 border-2 border-dashed rounded-lg
            flex flex-col items-center justify-center
            cursor-pointer transition-all duration-200
            ${isDragging
              ? 'border-purple-500 bg-purple-50'
              : 'border-gray-300 hover:border-purple-400 hover:bg-gray-50'
            }
            ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
          `}
        >
          <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
            <Upload className="w-8 h-8 text-purple-600" />
          </div>
          <h3 className="text-lg font-medium text-gray-800 mb-2">
            품질관리서 PDF 업로드
          </h3>
          <p className="text-sm text-gray-500 mb-1">
            클릭하거나 파일을 드래그하여 업로드하세요
          </p>
          <p className="text-xs text-gray-400">
            PDF 파일만 가능 • 최대 {maxSize}MB
          </p>

          {error && (
            <div className="mt-4 px-4 py-2 bg-red-50 border border-red-200 rounded-lg">
              <p className="text-sm text-red-600">{error}</p>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

// Mock 데이터 (테스트용)
export const MOCK_QUALITY_DOCUMENT: QualityDocumentFile = {
  id: 1,
  name: '품질관리서_KD-SS-2024-530.pdf',
  url: '/sample-quality-document.pdf',
  size: 2456789,
  uploadedAt: '2024-10-10',
};