"use client";

import { useState } from "react";

export default function ResumeUploadPage() {
  const [uploading, setUploading] = useState(false);
  const [uploadedImages, setUploadedImages] = useState<string[]>([]);

  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (!files) return;
    
    setUploading(true);
    const newImages: string[] = [];
    
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      const formData = new FormData();
      formData.append("file", file);
      
      try {
        const res = await fetch("/api/upload", {
          method: "POST",
          body: formData,
        });
        const data = await res.json();
        if (data.url) {
          newImages.push(data.url);
        }
      } catch (err) {
        console.error("Upload failed:", err);
      }
    }
    
    setUploadedImages([...uploadedImages, ...newImages]);
    setUploading(false);
  };

  return (
    <div className="min-h-screen bg-slate-950 p-8">
      <div className="max-w-4xl mx-auto">
        <h1 className="text-2xl font-bold text-white mb-6">📤 Upload Resume Images</h1>
        <p className="text-slate-400 mb-6">Upload images of your resume design to let Horus analyze and recreate it.</p>
        
        <div className="border-2 border-dashed border-slate-600 rounded-xl p-12 text-center hover:border-slate-500 transition-colors">
          <input
            type="file"
            accept="image/*"
            multiple
            onChange={handleUpload}
            className="hidden"
            id="file-upload"
          />
          <label htmlFor="file-upload" className="cursor-pointer">
            <div className="text-6xl mb-4">📁</div>
            <div className="text-white text-lg mb-2">Click to upload images</div>
            <div className="text-slate-500 text-sm">PNG, JPG, GIF up to 10MB</div>
          </label>
        </div>
        
        {uploading && (
          <div className="mt-6 text-center text-slate-400">Uploading...</div>
        )}
        
        {uploadedImages.length > 0 && (
          <div className="mt-8">
            <h2 className="text-white font-bold mb-4">Uploaded Images:</h2>
            <div className="space-y-4">
              {uploadedImages.map((url, i) => (
                <div key={i} className="bg-slate-800 rounded-lg p-4">
                  <div className="text-slate-400 text-sm mb-2">Image {i + 1}</div>
                  <div className="bg-slate-700 rounded p-2 text-slate-300 text-sm font-mono break-all">{url}</div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}