import React, { useEffect, useRef, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { createEvent, getAdminToken, getEvent, updateEvent, uploadImage } from '../../utils/api'

const apiBaseUrl = (import.meta.env.VITE_API_BASE_URL || 'http://localhost:4001').replace(/\/$/, '')

function resolveImageUrl(value) {
  if (!value) return ''
  const trimmed = value.trim()
  if (!trimmed) return ''
  if (/^(?:https?:)?\/\//i.test(trimmed) || trimmed.startsWith('data:')) {
    return trimmed
  }
  const path = trimmed.startsWith('/') ? trimmed : `/${trimmed}`
  if (apiBaseUrl) {
    return `${apiBaseUrl}${path}`
  }
  return path
}


const emptyForm = {
  title: '',
  date: '',
  time: '',
  location: '',
  description: '',
  category: '',
  image: '',
  slug: '',
}

export default function AdminEventForm() {
  const { slug } = useParams()
  const isEdit = Boolean(slug)
  const navigate = useNavigate()
  const [form, setForm] = useState(emptyForm)
  const [loading, setLoading] = useState(isEdit)
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState('')
  const [selectedFile, setSelectedFile] = useState(null)
  const [uploading, setUploading] = useState(false)
  const [uploadError, setUploadError] = useState('')
  const [uploadMessage, setUploadMessage] = useState('')
  const fileInputRef = useRef(null)
  const previewSrc = resolveImageUrl(form.image)

  useEffect(() => {
    if (!isEdit) return

    let ignore = false
    async function loadEvent() {
      setLoading(true)
      setError('')
      try {
        const data = await getEvent(slug)
        if (!ignore) {
          setForm({
            title: data.title || '',
            date: data.date || '',
            time: data.time || '',
            location: data.location || '',
            description: data.description || '',
            category: data.category || '',
            image: data.image || '',
            slug: data.slug || '',
          })
        }
      } catch (err) {
        console.error('Failed to load event for editing', err)
        if (!ignore) {
          setError(err.message || 'Unable to load event data.')
        }
      } finally {
        if (!ignore) {
          setLoading(false)
        }
      }
    }

    loadEvent()
    return () => {
      ignore = true
    }
  }, [isEdit, slug])

  const handleChange = (event) => {
    const { name, value } = event.target
    setForm((prev) => ({ ...prev, [name]: value }))
  }

  const handleFileSelect = (event) => {
    const file = event.target.files && event.target.files[0] ? event.target.files[0] : null
    setSelectedFile(file)
    setUploadError('')
    setUploadMessage('')
  }

  const handleUpload = async () => {
    setUploadError('')
    setUploadMessage('')

    if (!selectedFile) {
      setUploadError('Select an image file before uploading.')
      return
    }

    const token = getAdminToken()
    if (!token) {
      setError('No admin token found. Please log in again.')
      return
    }

    setUploading(true)
    try {
      const { url } = await uploadImage(selectedFile, token)
      setForm(prev => ({ ...prev, image: url }))
      setSelectedFile(null)
      if (fileInputRef.current) {
        fileInputRef.current.value = ''
      }
      setUploadMessage('Image uploaded successfully.')
    } catch (err) {
      console.error('Failed to upload image', err)
      setUploadError(err.message || 'Unable to upload image. Please try again.')
    } finally {
      setUploading(false)
    }
  }

  const handleSubmit = async (event) => {
    event.preventDefault()
    setError('')

    if (!form.title || !form.date) {
      setError('Title and date are required.')
      return
    }

    const token = getAdminToken()
    if (!token) {
      setError('No admin token found. Please log in again.')
      return
    }

    setSaving(true)
    let imageValue = form.image

    try {
      if (selectedFile) {
        setUploadError('')
        setUploadMessage('')
        setUploading(true)
        try {
          const { url, path } = await uploadImage(selectedFile, token)
          imageValue = path || url
          setForm(prev => ({ ...prev, image: imageValue }))
          setSelectedFile(null)
          if (fileInputRef.current) {
            fileInputRef.current.value = ''
          }
          setUploadMessage('Image uploaded successfully.')
        } catch (err) {
          console.error('Failed to upload image', err)
          setError(err.message || 'Unable to upload image. Please try again.')
          setSaving(false)
          setUploading(false)
          return
        } finally {
          setUploading(false)
        }
      }

      const payload = {
        title: form.title,
        date: form.date,
        time: form.time,
        location: form.location,
        description: form.description,
        category: form.category,
        image: imageValue,
      }

      if (form.slug) {
        payload.slug = form.slug
      }

      if (isEdit) {
        await updateEvent(slug, payload, token)
      } else {
        await createEvent(payload, token)
      }

      navigate('/admin/events', { replace: true })
    } catch (err) {
      console.error('Failed to save event', err)
      setError(err.message || 'Unable to save event. Please try again.')
    } finally {
      setSaving(false)
    }
  }

  return (
    <div className="max-w-3xl">
      <h1 className="text-3xl font-semibold text-slate-900 mb-6">
        {isEdit ? 'Edit Event' : 'Add New Event'}
      </h1>
      <p className="text-muted mb-6">
        Provide the event details below. Title and date are required. Slug is optional and generated automatically if left blank.
      </p>

      {error && <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md mb-6">{error}</div>}

      {loading ? (
        <p className="text-muted">Loading event...</p>
      ) : (
        <form onSubmit={handleSubmit} className="space-y-6">
          <div>
            <label htmlFor="title" className="block text-sm font-medium text-slate-700 mb-2">Title *</label>
            <input
              id="title"
              name="title"
              type="text"
              value={form.title}
              onChange={handleChange}
              className="w-full border border-subtle rounded-md px-4 py-2 outline-none focus:ring-2 focus:ring-primary"
              required
            />
          </div>

          <div className="grid md:grid-cols-2 gap-4">
            <div>
              <label htmlFor="date" className="block text-sm font-medium text-slate-700 mb-2">Date *</label>
              <input
                id="date"
                name="date"
                type="date"
                value={form.date}
                onChange={handleChange}
                className="w-full border border-subtle rounded-md px-4 py-2 outline-none focus:ring-2 focus:ring-primary"
                required
              />
            </div>
            <div>
              <label htmlFor="time" className="block text-sm font-medium text-slate-700 mb-2">Time</label>
              <input
                id="time"
                name="time"
                type="text"
                placeholder="e.g. 11:00 AM"
                value={form.time}
                onChange={handleChange}
                className="w-full border border-subtle rounded-md px-4 py-2 outline-none focus:ring-2 focus:ring-primary"
              />
            </div>
          </div>

          <div>
            <label htmlFor="location" className="block text-sm font-medium text-slate-700 mb-2">Location</label>
            <input
              id="location"
              name="location"
              type="text"
              value={form.location}
              onChange={handleChange}
              className="w-full border border-subtle rounded-md px-4 py-2 outline-none focus:ring-2 focus:ring-primary"
              placeholder="Sanctuary, Fellowship Hall, etc."
            />
          </div>

          <div>
            <label htmlFor="description" className="block text-sm font-medium text-slate-700 mb-2">Description</label>
            <textarea
              id="description"
              name="description"
              rows={5}
              value={form.description}
              onChange={handleChange}
              className="w-full border border-subtle rounded-md px-4 py-2 outline-none focus:ring-2 focus:ring-primary"
            />
          </div>

          <div className="grid md:grid-cols-2 gap-4">
            <div>
              <label htmlFor="category" className="block text-sm font-medium text-slate-700 mb-2">Category</label>
              <input
                id="category"
                name="category"
                type="text"
                value={form.category}
                onChange={handleChange}
                className="w-full border border-subtle rounded-md px-4 py-2 outline-none focus:ring-2 focus:ring-primary"
                placeholder="Family, Outreach, Youth"
              />
            </div>
            <div>
              <label htmlFor="image" className="block text-sm font-medium text-slate-700 mb-2">Image</label>
              <div className="space-y-3">
                <input
                  id="image"
                  name="image"
                  type="text"
                  value={form.image}
                  onChange={handleChange}
                  className="w-full border border-subtle rounded-md px-4 py-2 outline-none focus:ring-2 focus:ring-primary"
                  placeholder="Paste an image URL or upload a file below"
                />
                <div className="flex flex-wrap items-center gap-3">
                  <input
                    ref={fileInputRef}
                    type="file"
                    accept="image/*"
                    onChange={handleFileSelect}
                    className="text-sm"
                  />
                  <button
                    type="button"
                    className="btn-outline"
                    onClick={handleUpload}
                    disabled={!selectedFile || uploading}
                  >
                    {uploading ? 'Uploading...' : 'Upload Image'}
                  </button>
                </div>
                {selectedFile && (
                  <p className="text-xs text-muted">Selected file: {selectedFile.name}</p>
                )}
                {uploadError && (
                  <p className="text-xs text-red-600">{uploadError}</p>
                )}
                {uploadMessage && (
                  <p className="text-xs text-emerald-600">{uploadMessage}</p>
                )}
                {previewSrc && (
                  <div className="pt-2">
                    <span className="text-xs text-muted block mb-1">Preview</span>
                    <img
                      src={previewSrc}
                      alt="Event image preview"
                      className="h-24 w-24 rounded-md border border-subtle object-cover"
                    />
                  </div>
                )}
              </div>
            </div>
          </div>

          <div>
            <label htmlFor="slug" className="block text-sm font-medium text-slate-700 mb-2">Slug (optional)</label>
            <input
              id="slug"
              name="slug"
              type="text"
              value={form.slug}
              onChange={handleChange}
              className="w-full border border-subtle rounded-md px-4 py-2 outline-none focus:ring-2 focus:ring-primary"
              placeholder="custom-event-slug"
            />
            <p className="text-xs text-muted mt-2">If blank, the slug will be generated from the title.</p>
          </div>

          <div className="flex items-center gap-3">
            <button type="submit" className="btn" disabled={saving}>
              {saving ? (isEdit ? 'Saving...' : 'Creating...') : (isEdit ? 'Save Changes' : 'Create Event')}
            </button>
            <button type="button" className="btn-outline" onClick={() => navigate('/admin/events')} disabled={saving}>
              Cancel
            </button>
          </div>
        </form>
      )}
    </div>
  )
}