'use client'

import { useState, useEffect } from 'react'
import { useRouter, useParams } from 'next/navigation'
import { ArrowLeft, Save, Eye, Upload, X, Trash2, Send } from 'lucide-react'
import { isAuthenticated, hasRole, getAdminUser } from '@/lib/auth'
import { apiGet, apiPut, apiDelete, apiPost } from '@/lib/apiClient'
import { API_BASE_URL } from '@/config/api'
import { normalizeImageUrl } from '@/lib/media'
import { useToast } from '@/components/admin/Toast'
import LoadingSpinner from '@/components/LoadingSpinner'
import { formatFileSize } from '@/lib/imageUtils'

interface NewsArticle {
  _id: string
  title: string
  description: string
  content: string
  imageUrl: string
  link?: string
  category: string
  tags: string[]
  status?: 'draft' | 'pending_review' | 'published'
  isFeatured: boolean
  isPublished: boolean
  order: number
  publishedAt?: string
  createdBy?: string | { _id: string }
}

export default function EditArticlePage() {
  const router = useRouter()
  const params = useParams()
  const articleId = params.id as string
  const { showToast, updateToast, dismissToast } = useToast()

  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [uploading, setUploading] = useState(false)
  const [imagePreview, setImagePreview] = useState<string>('')
  const [imageError, setImageError] = useState(false)
  const [currentUser, setCurrentUser] = useState<any>(null)
  const [formData, setFormData] = useState({
    title: '',
    description: '',
    content: '',
    imageUrl: '',
    link: '',
    category: 'general',
    tags: '',
    status: 'draft' as 'draft' | 'pending_review' | 'published',
    isFeatured: false,
    isPublished: false,
    order: 0,
    createdBy: '',
  })

  const [isManager, setIsManager] = useState(false)
  const [canEdit, setCanEdit] = useState(false)

  useEffect(() => {
    if (!isAuthenticated()) {
      router.push('/admin')
      return
    }
    const user = getAdminUser()
    setCurrentUser(user)
    setIsManager(hasRole(['ADMINISTRATOR', 'COMMUNICATIONS_MANAGER']))
    setCanEdit(hasRole(['ADMINISTRATOR', 'COMMUNICATIONS_MANAGER', 'SENIOR_COMMUNICATIONS_OFFICER', 'COMMUNICATIONS_OFFICER']))
    fetchArticle()
  }, [articleId, router])

  const fetchArticle = async () => {
    try {
      const result = await apiGet<NewsArticle>(`/news-articles/${articleId}`)
      if (result.success && result.data) {
        const createdById = typeof result.data.createdBy === 'object' 
          ? result.data.createdBy._id 
          : result.data.createdBy || ''
        
        const normalizedImageUrl = normalizeImageUrl(result.data.imageUrl)
        setFormData({
          title: result.data.title,
          description: result.data.description,
          content: result.data.content || '',
          imageUrl: normalizedImageUrl,
          link: result.data.link || '',
          category: result.data.category || 'general',
          tags: result.data.tags?.join(', ') || '',
          status: result.data.status || (result.data.isPublished ? 'published' : 'draft'),
          isFeatured: result.data.isFeatured || false,
          isPublished: result.data.isPublished || false,
          order: result.data.order || 0,
          createdBy: createdById,
        })
        if (normalizedImageUrl) {
          setImagePreview(normalizedImageUrl)
          setImageError(false)
        }
      }
    } catch (error: any) {
      console.error('Error fetching article:', error)
      alert(error.message || 'Failed to load article')
      router.push('/admin/news-articles')
    } finally {
      setLoading(false)
    }
  }

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const { name, value, type } = e.target
    const checked = (e.target as HTMLInputElement).checked

    if (name === 'imageUrl') {
      const normalizedValue = normalizeImageUrl(value)
      setFormData(prev => ({
        ...prev,
        imageUrl: normalizedValue,
      }))
      setImagePreview(normalizedValue)
      setImageError(false)
      return
    }

    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value,
    }))
  }

  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return

    // Show local preview immediately
    const reader = new FileReader()
    reader.onloadend = () => {
      setImagePreview(reader.result as string)
    }
    reader.readAsDataURL(file)

    // Upload to backend
    let toastId = ''
    try {
      setUploading(true)

      // Show compressing toast if file is large
      const { prepareImageForUpload } = await import('@/lib/imageUtils')
      if (file.size > 5 * 1024 * 1024) {
        toastId = showToast({
          type: 'compressing',
          title: 'Optimizing image...',
          message: `Compressing ${formatFileSize(file.size)} image for upload`,
          duration: 0,
        })
      }

      const result = await prepareImageForUpload(file)

      // Update toast with compression result
      if (result.wasCompressed && toastId) {
        updateToast(toastId, {
          type: 'info',
          title: 'Image compressed',
          message: `${formatFileSize(result.originalSize)} → ${formatFileSize(result.finalSize)}`,
          duration: 3000,
        })
      } else if (toastId) {
        dismissToast(toastId)
      }

      // Now upload
      toastId = showToast({
        type: 'info',
        title: 'Uploading image...',
        message: `Sending ${formatFileSize(result.finalSize)} to server`,
        duration: 0,
      })

      const uploadFormData = new FormData()
      uploadFormData.append('type', 'news')
      uploadFormData.append('image', result.file)

      const { apiUpload } = await import('@/lib/apiClient')
      
      const uploadResult = await apiUpload('/upload/image?type=news', uploadFormData, {
        headers: {
          'x-upload-type': 'news'
        }
      })

      if (uploadResult.success && uploadResult.data) {
        const fullUrl = normalizeImageUrl(uploadResult.data.fullUrl || uploadResult.data.url)
        setFormData(prev => ({
          ...prev,
          imageUrl: fullUrl,
        }))
        updateToast(toastId, {
          type: 'success',
          title: 'Image uploaded successfully',
          duration: 3000,
        })
      } else {
        dismissToast(toastId)
        showToast({
          type: 'error',
          title: 'Upload failed',
          message: uploadResult.message || 'The server could not process the image. Please try again.',
        })
        setImagePreview('')
      }
    } catch (error: any) {
      console.error('Upload error:', error)
      if (toastId) dismissToast(toastId)
      showToast({
        type: 'error',
        title: 'Image upload failed',
        message: error.message || 'Something went wrong. Please try a different image.',
      })
      setImagePreview('')
    } finally {
      setUploading(false)
    }
  }

  const handleSubmit = async (e: React.FormEvent, publish = false) => {
    e.preventDefault()
    setSaving(true)

    try {
      const dataToSend = {
        ...formData,
        tags: formData.tags.split(',').map(tag => tag.trim()).filter(Boolean),
        isPublished: publish || formData.isPublished,
      }

      const result = await apiPut(`/news-articles/${articleId}`, dataToSend)

      if (result.success) {
        router.push('/admin/news-articles')
      } else {
        alert(result.message || 'Failed to update article')
      }
    } catch (error: any) {
      console.error('Error updating article:', error)
      alert(error.message || 'An error occurred')
    } finally {
      setSaving(false)
    }
  }

  const handleDelete = async () => {
    if (!confirm('Are you sure you want to delete this article?')) return

    try {
      const result = await apiDelete(`/news-articles/${articleId}`)
      if (result.success) {
        router.push('/admin/news-articles')
      }
    } catch (error: any) {
      console.error('Error deleting article:', error)
      alert(error.message || 'Failed to delete article')
    }
  }

  const handleSubmitForReview = async () => {
    try {
      const result = await apiPost(`/news-articles/${articleId}/submit-for-review`)
      if (result.success) {
        alert('Article submitted for review successfully')
        router.push('/admin/news-articles')
      }
    } catch (error: any) {
      console.error('Error submitting for review:', error)
      alert(error.message || 'Failed to submit article for review')
    }
  }

  const isArticleOwner = () => {
    return currentUser && formData.createdBy && formData.createdBy === currentUser.id
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center h-screen">
        <LoadingSpinner />
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <button
            onClick={() => router.back()}
            className="p-2 hover:bg-white/10 rounded-lg transition-all"
          >
            <ArrowLeft className="w-5 h-5 text-white" />
          </button>
          <div>
            <h1 className="text-3xl font-bold text-white">Edit Article</h1>
            <p className="text-white/70">Update news article details</p>
          </div>
        </div>
        <button
          onClick={handleDelete}
          className="flex items-center gap-2 px-4 py-2 bg-red-500/20 hover:bg-red-500/30 text-red-400 rounded-lg transition-all"
        >
          <Trash2 className="w-5 h-5" />
          Delete
        </button>
      </div>

      {/* Form */}
      <form onSubmit={(e) => handleSubmit(e, false)} className="space-y-6">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Main Content */}
          <div className="lg:col-span-2 space-y-6">
            {/* Title */}
            <div className="bg-white/10 backdrop-blur-xl rounded-xl p-6 border border-white/20">
              <label className="block text-white font-medium mb-2">
                Title <span className="text-red-400">*</span>
              </label>
              <input
                type="text"
                name="title"
                value={formData.title}
                onChange={handleChange}
                required
                className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-primary"
                placeholder="Enter article title..."
              />
            </div>

            {/* Description */}
            <div className="bg-white/10 backdrop-blur-xl rounded-xl p-6 border border-white/20">
              <label className="block text-white font-medium mb-2">
                Description <span className="text-red-400">*</span>
              </label>
              <textarea
                name="description"
                value={formData.description}
                onChange={handleChange}
                required
                rows={3}
                className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-primary resize-none"
                placeholder="Brief description (shown in previews)..."
              />
            </div>

            {/* Content */}
            <div className="bg-white/10 backdrop-blur-xl rounded-xl p-6 border border-white/20">
              <label className="block text-white font-medium mb-2">
                Content
              </label>
              <textarea
                name="content"
                value={formData.content}
                onChange={handleChange}
                rows={12}
                className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-primary resize-none"
                placeholder="Full article content..."
              />
            </div>

            {/* External Link */}
            <div className="bg-white/10 backdrop-blur-xl rounded-xl p-6 border border-white/20">
              <label className="block text-white font-medium mb-2">
                External Link (Optional)
              </label>
              <input
                type="url"
                name="link"
                value={formData.link}
                onChange={handleChange}
                className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-primary"
                placeholder="https://example.com/full-article"
              />
            </div>
          </div>

          {/* Sidebar */}
          <div className="space-y-6">
            {/* Image Upload */}
            <div className="bg-white/10 backdrop-blur-xl rounded-xl p-6 border border-white/20">
              <label className="block text-white font-medium mb-4">
                Featured Image <span className="text-red-400">*</span>
              </label>

              {imagePreview ? (
                <div className="space-y-3">
                  <div className="relative">
                    <div className="w-full h-48 bg-white/5 rounded-lg overflow-hidden flex items-center justify-center">
                      {imageError ? (
                        <div className="text-white/50 text-sm">Image failed to load</div>
                      ) : (
                        <img
                          src={imagePreview}
                          alt="Preview"
                          className="w-full h-full object-cover"
                          onError={() => setImageError(true)}
                        />
                      )}
                    </div>
                    <button
                      type="button"
                      onClick={() => {
                        setImagePreview('')
                        setImageError(false)
                        setFormData(prev => ({ ...prev, imageUrl: '' }))
                      }}
                      className="absolute top-2 right-2 p-2 bg-red-500 hover:bg-red-600 rounded-full transition-all z-10"
                    >
                      <X className="w-4 h-4 text-white" />
                    </button>
                    {uploading && (
                      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm rounded-lg flex items-center justify-center">
                        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white"></div>
                      </div>
                    )}
                  </div>
                  {formData.imageUrl && (
                    <div className="p-2 bg-white/5 rounded border border-white/10">
                      <p className="text-white/50 text-xs mb-1">Image URL:</p>
                      <p className="text-white/90 text-xs break-all font-mono">{formData.imageUrl}</p>
                    </div>
                  )}
                </div>
              ) : (
                <label className="flex flex-col items-center justify-center w-full h-48 border-2 border-dashed border-white/30 rounded-lg cursor-pointer hover:border-white/50 transition-all">
                  <Upload className="w-12 h-12 text-white/50 mb-2" />
                  <span className="text-white/70 text-sm">Click to upload image</span>
                  <input
                    type="file"
                    accept="image/*"
                    onChange={handleImageUpload}
                    className="hidden"
                    disabled={uploading}
                  />
                </label>
              )}

              <input
                type="url"
                name="imageUrl"
                value={formData.imageUrl}
                onChange={handleChange}
                placeholder="Or paste image URL"
                className="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-primary text-sm"
              />
            </div>

            {/* Category */}
            <div className="bg-white/10 backdrop-blur-xl rounded-xl p-6 border border-white/20">
              <label className="block text-white font-medium mb-2">
                Category
              </label>
              <select
                name="category"
                value={formData.category}
                onChange={handleChange}
                className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary appearance-none"
              >
                <option value="general">General</option>
                <option value="announcement">Announcement</option>
                <option value="event">Event</option>
                <option value="update">Update</option>
                <option value="community">Community</option>
                <option value="infrastructure">Infrastructure</option>
              </select>
            </div>

            {/* Tags */}
            <div className="bg-white/10 backdrop-blur-xl rounded-xl p-6 border border-white/20">
              <label className="block text-white font-medium mb-2">
                Tags
              </label>
              <input
                type="text"
                name="tags"
                value={formData.tags}
                onChange={handleChange}
                className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-primary"
                placeholder="tag1, tag2, tag3"
              />
            </div>

            {/* Options */}
            <div className="bg-white/10 backdrop-blur-xl rounded-xl p-6 border border-white/20 space-y-4">
              <label className="flex items-center gap-3 cursor-pointer">
                <input
                  type="checkbox"
                  name="isFeatured"
                  checked={formData.isFeatured}
                  onChange={handleChange}
                  className="w-5 h-5 rounded border-white/20 bg-white/10 text-primary focus:ring-primary"
                />
                <span className="text-white">Featured Article</span>
              </label>

              <label className="flex items-center gap-3 cursor-pointer">
                <input
                  type="checkbox"
                  name="isPublished"
                  checked={formData.isPublished}
                  onChange={handleChange}
                  className="w-5 h-5 rounded border-white/20 bg-white/10 text-primary focus:ring-primary"
                />
                <span className="text-white">Published</span>
              </label>

              <div>
                <label className="block text-white/70 text-sm mb-2">
                  Display Order
                </label>
                <input
                  type="number"
                  name="order"
                  value={formData.order}
                  onChange={handleChange}
                  className="w-full px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-primary"
                  min="0"
                />
              </div>
            </div>

            {/* Action Buttons */}
            <div className="bg-white/10 backdrop-blur-xl rounded-xl p-6 border border-white/20 space-y-3">
              <button
                type="submit"
                disabled={saving}
                className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-primary hover:bg-primary-dark text-white rounded-lg transition-all disabled:opacity-50"
              >
                <Save className="w-5 h-5" />
                {saving ? 'Saving...' : 'Save Changes'}
              </button>

              {isManager ? (
                <button
                  type="button"
                  onClick={(e) => handleSubmit(e as any, true)}
                  disabled={saving}
                  className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-all disabled:opacity-50"
                >
                  <Eye className="w-5 h-5" />
                  {saving ? 'Publishing...' : 'Publish Now'}
                </button>
              ) : formData.status === 'draft' && isArticleOwner() ? (
                <button
                  type="button"
                  onClick={handleSubmitForReview}
                  disabled={saving}
                  className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-all disabled:opacity-50"
                >
                  <Send className="w-5 h-5" />
                  Submit for Review
                </button>
              ) : null}

              <button
                type="button"
                onClick={() => router.back()}
                className="w-full px-4 py-3 bg-white/10 hover:bg-white/20 text-white rounded-lg transition-all"
              >
                Cancel
              </button>
            </div>
          </div>
        </div>
      </form>
    </div>
  )
}