import React, { useState } from 'react';
import { UploadCloud, Camera, CheckCircle2 } from 'lucide-react';

export default function PocketFishApp() {
  const [isDragging, setIsDragging] = useState(false);
  const [showResult, setShowResult] = useState(false);
  const [previewImage, setPreviewImage] = useState(null);
  const [isProcessing, setIsProcessing] = useState(false);

  // 드래그 앤 드롭 이벤트 핸들러
  const handleDragOver = (e) => {
    e.preventDefault();
    setIsDragging(true);
  };
  const handleDragLeave = () => setIsDragging(false);
  const handleDrop = (e) => {
    e.preventDefault();
    setIsDragging(false);
    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
      handleFileUpload(e.dataTransfer.files[0]);
    }
  };

  // 파일 업로드 (카메라/갤러리)
  const handleFileInput = (e) => {
    if (e.target.files && e.target.files[0]) {
      handleFileUpload(e.target.files[0]);
    }
  };

  // 업로드 시뮬레이션 (AI 분석 딜레이)
  const handleFileUpload = (file) => {
    setPreviewImage(URL.createObjectURL(file));
    setIsProcessing(true);
    setShowResult(false);
    
    // 1.5초 후 AI 분석 완료 팝업 띄우기
    setTimeout(() => {
      setIsProcessing(false);
      setShowResult(true);
    }, 1500);
  };

  return (
    <div className="min-h-screen bg-gray-50 flex justify-center font-sans text-gray-800 pb-24">
      <div className="w-full max-w-md p-5 flex flex-col gap-6">
        
        {/* 1. 상단 헤더 & 레벨 바 */}
        <header className="bg-white rounded-2xl p-5 shadow-sm mt-4">
          <div className="flex justify-between items-end mb-3">
            <h1 className="text-2xl font-bold text-gray-900 tracking-tight">
              포켓물고기 <span className="text-xl">🎣</span>
            </h1>
            <span className="text-sm font-semibold text-blue-600">
              Lv.10 전설의 강태공
            </span>
          </div>
          {/* 경험치 바 UI */}
          <div className="w-full bg-gray-100 rounded-full h-3.5 mb-1 overflow-hidden">
            <div className="bg-blue-500 h-3.5 rounded-full w-3/4 transition-all duration-500 ease-out"></div>
          </div>
          <p className="text-xs text-right text-gray-400 mt-1">
            다음 레벨까지 250 XP
          </p>
        </header>

        {/* 2. 중앙 업로드 영역 */}
        <section 
          className={`relative bg-white rounded-3xl p-8 shadow-sm border-2 border-dashed transition-all duration-200 flex flex-col items-center justify-center text-center cursor-pointer min-h-[300px]
            ${isDragging ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:bg-gray-50'}`}
          onDragOver={handleDragOver}
          onDragLeave={handleDragLeave}
          onDrop={handleDrop}
          onClick={() => document.getElementById('file-upload').click()}
        >
          <input 
            type="file" 
            id="file-upload" 
            accept="image/*" 
            className="hidden" 
            onChange={handleFileInput} 
          />
          
          {previewImage ? (
            <div className="relative w-full h-full rounded-2xl overflow-hidden shadow-inner">
              <img src={previewImage} alt="업로드된 물고기" className="object-cover w-full h-48 rounded-xl" />
              {isProcessing && (
                <div className="absolute inset-0 bg-white/60 flex items-center justify-center backdrop-blur-sm rounded-xl">
                  <div className="flex flex-col items-center gap-2">
                    <div className="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
                    <span className="font-semibold text-blue-700">AI가 어종을 분석 중입니다...</span>
                  </div>
                </div>
              )}
            </div>
          ) : (
            <div className="flex flex-col items-center gap-4 py-10">
              <div className="w-16 h-16 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mb-2">
                <UploadCloud size={32} />
              </div>
              <div>
                <p className="text-lg font-bold text-gray-800 mb-1">여기를 눌러 사진 올리기</p>
                <p className="text-sm text-gray-500">또는 사진을 드래그해서 놓아주세요</p>
              </div>
              <button className="mt-4 flex items-center gap-2 bg-gray-900 text-white px-5 py-2.5 rounded-xl font-medium hover:bg-gray-800 transition-colors">
                <Camera size={18} />
                <span>카메라로 촬영</span>
              </button>
            </div>
          )}
        </section>

        {/* 3. 결과 팝업창 (Slide-up 애니메이션) */}
        <div 
          className={`fixed bottom-0 left-0 right-0 z-50 flex justify-center w-full px-4 pb-6 transition-transform duration-500 ease-out transform
          ${showResult ? 'translate-y-0' : 'translate-y-[150%]'}`}
        >
          <div className="bg-white w-full max-w-md rounded-3xl p-6 shadow-2xl border border-gray-100">
            <div className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 bg-green-100 text-green-600 rounded-full flex items-center justify-center animate-bounce">
                <CheckCircle2 size={24} />
              </div>
              <h2 className="text-xl font-bold text-gray-900">🎉 도감 등록 완료!</h2>
            </div>
            
            <div className="bg-gray-50 rounded-2xl p-4 flex flex-col gap-3">
              <div className="flex justify-between items-center">
                <span className="text-gray-500 font-medium">어종</span>
                <span className="font-bold text-gray-900 text-lg">감성돔 <span className="text-blue-600 text-sm bg-blue-50 px-2 py-0.5 rounded-md ml-1">S급 대물</span></span>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-gray-500 font-medium">크기</span>
                <span className="font-bold text-gray-900">48cm</span>
              </div>
              <div className="flex justify-between items-center pt-3 border-t border-gray-200">
                <span className="text-gray-500 font-medium">방생 여부</span>
                <span className="font-bold text-green-600 bg-green-50 px-3 py-1 rounded-lg">포획 가능 🟢</span>
              </div>
            </div>
            
            <button 
              onClick={() => { setShowResult(false); setPreviewImage(null); }}
              className="mt-5 w-full bg-blue-600 text-white font-bold py-3.5 rounded-xl hover:bg-blue-700 transition-colors"
            >
              도감 확인하기
            </button>
          </div>
        </div>
        
      </div>
    </div>
  );
}