`app/upload-bubbe/page.tsx`

125 lines
'use client'

import { useState } from 'react'

export default function UploadBubbePage() {
  const [uploading, setUploading] = useState(false)
  const [message, setMessage] = useState('')
  const [preview, setPreview] = useState<string | null>(null)

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      // Show preview
      const reader = new FileReader()
      reader.onload = (e) => {
        setPreview(e.target?.result as string)
      }
      reader.readAsDataURL(file)
    }
  }

  const handleUpload = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()

    const formData = new FormData(e.currentTarget)
    const file = formData.get('image') as File

    if (!file) {
      setMessage('Please select an image first')
      return
    }

    setUploading(true)
    setMessage('')

    try {
      const response = await fetch('/api/upload-bubbe', {
        method: 'POST',
        body: formData
      })

      const data = await response.json()

      if (response.ok) {
        setMessage('✅ Bubbe image uploaded successfully! Refresh the main page to see it.')
      } else {
        setMessage(`❌ Upload failed: ${data.error}`)
      }
    } catch (error) {
      setMessage('❌ Upload failed: ' + (error as Error).message)
    } finally {
      setUploading(false)
    }
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-amber-100 p-8">
      <div className="max-w-2xl mx-auto">
        <div className="bg-white rounded-2xl shadow-2xl p-8">
          <h1 className="text-4xl font-black text-gray-800 mb-2">Upload Bubbe Image</h1>
          <p className="text-gray-600 mb-8">Replace Bubbe's profile picture</p>

          <form onSubmit={handleUpload} className="space-y-6">
            <div className="border-4 border-dashed border-purple-300 rounded-xl p-8 text-center hover:border-purple-500 transition-colors">
              <input
                type="file"
                name="image"
                accept="image/*"
                onChange={handleFileChange}
                className="hidden"
                id="imageUpload"
              />
              <label
                htmlFor="imageUpload"
                className="cursor-pointer block"
              >
                {preview ? (
                  <div className="space-y-4">
                    <img
                      src={preview}
                      alt="Preview"
                      className="w-48 h-48 rounded-full mx-auto object-cover border-4 border-purple-500 shadow-xl"
                    />
                    <p className="text-purple-600 font-bold">Click to change image</p>
                  </div>
                ) : (
                  <div className="space-y-4">
                    <div className="text-6xl">📷</div>
                    <p className="text-xl font-bold text-gray-700">Click to select Bubbe image</p>
                    <p className="text-sm text-gray-500">PNG, JPG, or WEBP</p>
                  </div>
                )}
              </label>
            </div>

            <button
              type="submit"
              disabled={uploading || !preview}
              className="w-full bg-gradient-to-r from-purple-600 to-pink-600 text-white py-4 px-8 rounded-xl font-black text-xl uppercase hover:from-purple-700 hover:to-pink-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-xl hover:shadow-2xl"
            >
              {uploading ? '⏳ Uploading...' : '🚀 Upload Bubbe Image'}
            </button>
          </form>

          {message && (
            <div className={`mt-6 p-4 rounded-xl font-bold text-center ${
              message.startsWith('✅')
                ? 'bg-green-100 text-green-800 border-2 border-green-500'
                : 'bg-red-100 text-red-800 border-2 border-red-500'
            }`}>
              {message}
            </div>
          )}

          <div className="mt-8 p-4 bg-blue-50 rounded-xl border-2 border-blue-200">
            <p className="text-sm text-blue-800">
              <strong>📍 After uploading:</strong> Go back to <a href="/" className="underline font-bold">Dear Bubbe</a> and hard refresh (Ctrl+Shift+R) to see the new image.
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}