'use client'

import { useState, useEffect } from 'react'
import { useRouter, useParams } from 'next/navigation'
import { ArrowLeft, Save, Eye, Upload, X, Trash2, FileText, Loader2, Sparkles } from 'lucide-react'
import { isAuthenticated, hasRole } from '@/lib/auth'
import { apiGet, apiPut, apiDelete } from '@/lib/apiClient'
import { normalizeImageUrl } from '@/lib/media'
import { useToast } from '@/components/admin/Toast'
import { formatFileSize } from '@/lib/imageUtils'
import LoadingSpinner from '@/components/LoadingSpinner'
import DateTimePicker from '@/components/admin/DateTimePicker'
import { isFakerEnabled } from '@/lib/settings'
import { generateFakeTender } from '@/lib/fakerUtils'

interface TenderDocument {
  filename: string
  originalName: string
  url: string
  fullUrl?: string
  size: number
  uploadedAt?: string
}

interface Tender {
  _id: string
  title: string
  description: string
  content: string
  tenderNumber: string
  category: string
  closingDate: string
  openingDate?: string
  documentUrl?: string
  documents?: TenderDocument[]
  imageUrl?: string
  link?: string
  status: 'draft' | 'open' | 'closed' | 'awarded' | 'cancelled'
  isPublished: boolean
  isFeatured: boolean
  order: number
  tags: string[]
  awardedTo?: string
  awardedAt?: string
  awardedAmount?: number
  createdBy?: string | { _id: string }
}

export default function EditTenderPage() {
  const router = useRouter()
  const params = useParams()
  const tenderId = 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 [uploadingDoc, setUploadingDoc] = useState(false)
  const [imagePreview, setImagePreview] = useState<string>('')
  const [isManager, setIsManager] = useState(false)
  const [documents, setDocuments] = useState<TenderDocument[]>([])
  const [showFakerButton, setShowFakerButton] = useState(false)
  const [formData, setFormData] = useState({
    title: '',
    description: '',
    content: '',
    tenderNumber: '',
    category: 'general',
    closingDate: '',
    openingDate: '',
    documentUrl: '',
    imageUrl: '',
    link: '',
    isFeatured: false,
    isPublished: false,
    order: 0,
    tags: '',
    awardedTo: '',
    awardedAt: '',
    awardedAmount: '',
  })

  useEffect(() => {
    if (!isAuthenticated()) {
      router.push('/admin')
      return
    }
    const managerRole = hasRole(['ADMINISTRATOR', 'COMMUNICATIONS_MANAGER'])
    setIsManager(managerRole)
    setShowFakerButton(isFakerEnabled())
    fetchTender()
  }, [tenderId, router])

  const fetchTender = async () => {
    try {
      const result = await apiGet<Tender>(`/tenders/${tenderId}`)
      if (result.success && result.data) {
        const tender = result.data
        const closingDate = new Date(tender.closingDate).toISOString().slice(0, 16)
        const openingDate = tender.openingDate ? new Date(tender.openingDate).toISOString().slice(0, 16) : ''
        const awardedAt = tender.awardedAt ? new Date(tender.awardedAt).toISOString().slice(0, 16) : ''
        
        setFormData({
          title: tender.title,
          description: tender.description,
          content: tender.content || '',
          tenderNumber: tender.tenderNumber,
          category: tender.category || 'general',
          closingDate,
          openingDate,
          documentUrl: tender.documentUrl || '',
          imageUrl: normalizeImageUrl(tender.imageUrl || ''),
          link: tender.link || '',
          isFeatured: tender.isFeatured || false,
          isPublished: tender.isPublished || false,
          order: tender.order || 0,
          tags: tender.tags?.join(', ') || '',
          awardedTo: tender.awardedTo || '',
          awardedAt,
          awardedAmount: tender.awardedAmount?.toString() || '',
        })
        if (tender.imageUrl) {
          setImagePreview(normalizeImageUrl(tender.imageUrl))
        }
        if (tender.documents && tender.documents.length > 0) {
          setDocuments(tender.documents)
        }
      }
    } catch (error: any) {
      console.error('Error fetching tender:', error)
      alert(error.message || 'Failed to load tender')
      router.push('/admin/tenders')
    } 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)
      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

    const reader = new FileReader()
    reader.onloadend = () => {
      setImagePreview(reader.result as string)
    }
    reader.readAsDataURL(file)

    let toastId = ''
    try {
      setUploading(true)

      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)

      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) }

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

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

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

      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 handleDocumentUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files
    if (!files || files.length === 0) return

    let toastId = ''
    try {
      setUploadingDoc(true)
      toastId = showToast({ type: 'info', title: 'Uploading document...', message: `Uploading ${files.length} file(s)`, duration: 0 })

      const { apiUpload } = await import('@/lib/apiClient')

      for (let i = 0; i < files.length; i++) {
        const file = files[i]
        const uploadFormData = new FormData()
        uploadFormData.append('document', file)

        const uploadResult = await apiUpload('/upload/document', uploadFormData)

        if (uploadResult.success && uploadResult.data) {
          setDocuments(prev => [...prev, {
            filename: uploadResult.data.filename,
            originalName: uploadResult.data.originalName,
            url: uploadResult.data.url,
            fullUrl: uploadResult.data.fullUrl,
            size: uploadResult.data.size,
            uploadedAt: new Date().toISOString(),
          }])
        }
      }

      updateToast(toastId, { type: 'success', title: `${files.length} document(s) uploaded`, duration: 3000 })
    } catch (error: any) {
      console.error('Document upload error:', error)
      if (toastId) dismissToast(toastId)
      showToast({ type: 'error', title: 'Document upload failed', message: error.message || 'Something went wrong.' })
    } finally {
      setUploadingDoc(false)
      e.target.value = ''
    }
  }

  const handleRemoveDocument = async (index: number) => {
    const doc = documents[index]
    try {
      const { apiRequest } = await import('@/lib/apiClient')
      await apiRequest('/upload/document', {
        method: 'DELETE',
        body: JSON.stringify({ filename: doc.filename }),
      })
    } catch (error) {
      console.error('Failed to delete document from server:', error)
    }
    setDocuments(prev => prev.filter((_, i) => i !== index))
  }

  const formatDocSize = (bytes: number) => {
    if (bytes === 0) return '0 B'
    const k = 1024
    const sizes = ['B', 'KB', 'MB', 'GB']
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
  }

  const getDocIcon = (filename: string) => {
    const ext = filename.split('.').pop()?.toLowerCase()
    switch (ext) {
      case 'pdf': return '📄'
      case 'doc': case 'docx': return '📝'
      case 'xls': case 'xlsx': return '📊'
      case 'ppt': case 'pptx': return '📽️'
      case 'zip': return '📦'
      default: return '📎'
    }
  }

  const handleFillFaker = () => {
    const fakeData = generateFakeTender()
    setFormData(prev => ({
      ...prev,
      ...fakeData,
    }))
    if (fakeData.imageUrl) {
      setImagePreview(fakeData.imageUrl)
    }
  }

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

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

      if (isManager && formData.awardedTo) {
        dataToSend.awardedTo = formData.awardedTo
        dataToSend.awardedAt = formData.awardedAt ? new Date(formData.awardedAt).toISOString() : null
        dataToSend.awardedAmount = formData.awardedAmount ? parseFloat(formData.awardedAmount) : null
      }

      const result = await apiPut(`/tenders/${tenderId}`, dataToSend)

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

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

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

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

  return (
    <div className="space-y-6">
      <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 Tender</h1>
            <p className="text-white/70">Update tender details</p>
          </div>
        </div>
        <div className="flex items-center gap-3">
          {showFakerButton && (
            <button
              type="button"
              onClick={handleFillFaker}
              className="flex items-center gap-2 px-4 py-2 bg-purple-500/20 hover:bg-purple-500/30 text-purple-300 rounded-lg transition-all border border-purple-500/30"
              title="Fill form with fake data for testing"
            >
              <Sparkles className="w-4 h-4" />
              Fill with Faker
            </button>
          )}
          <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>
      </div>

      <form onSubmit={(e) => handleSubmit(e, false)} className="space-y-6">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <div className="lg:col-span-2 space-y-6">
            <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"
              />
            </div>

            <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">
                Tender Number <span className="text-red-400">*</span>
              </label>
              <input
                type="text"
                name="tenderNumber"
                value={formData.tenderNumber}
                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 font-mono"
              />
            </div>

            <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"
              />
            </div>

            <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"
              />
            </div>

            {isManager && (
              <div className="bg-white/10 backdrop-blur-xl rounded-xl p-6 border border-white/20 space-y-4">
                <h3 className="text-white font-medium mb-4">Award Information</h3>
                <div>
                  <label className="block text-white/70 text-sm mb-2">Awarded To</label>
                  <input
                    type="text"
                    name="awardedTo"
                    value={formData.awardedTo}
                    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"
                  />
                </div>
                <div>
                  <DateTimePicker
                    name="awardedAt"
                    value={formData.awardedAt}
                    onChange={handleChange}
                    label="Awarded At"
                    labelClassName="text-white/70 text-sm"
                  />
                </div>
                <div>
                  <label className="block text-white/70 text-sm mb-2">Awarded Amount</label>
                  <input
                    type="number"
                    name="awardedAmount"
                    value={formData.awardedAmount}
                    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"
                  />
                </div>
              </div>
            )}
          </div>

          <div className="space-y-6">
            <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</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">
                      <img
                        src={imagePreview}
                        alt="Preview"
                        className="w-full h-full object-cover"
                      />
                    </div>
                    <button
                      type="button"
                      onClick={() => {
                        setImagePreview('')
                        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>
                </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 mt-3 text-sm"
              />
            </div>

            <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="infrastructure">Infrastructure</option>
                <option value="services">Services</option>
                <option value="supplies">Supplies</option>
              </select>
            </div>

            <div className="bg-white/10 backdrop-blur-xl rounded-xl p-6 border border-white/20">
              <DateTimePicker
                name="closingDate"
                value={formData.closingDate}
                onChange={handleChange}
                label="Closing Date"
                required
              />
            </div>

            <div className="bg-white/10 backdrop-blur-xl rounded-xl p-6 border border-white/20">
              <DateTimePicker
                name="openingDate"
                value={formData.openingDate}
                onChange={handleChange}
                label="Opening Date"
              />
            </div>

            <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">
                <FileText className="w-5 h-5 inline-block mr-2 mb-0.5" />
                Tender Documents
              </label>

              {/* Uploaded documents list */}
              {documents.length > 0 && (
                <div className="space-y-2 mb-4">
                  {documents.map((doc, index) => (
                    <div
                      key={index}
                      className="flex items-center gap-3 p-3 bg-white/5 border border-white/10 rounded-lg group hover:bg-white/10 transition-all"
                    >
                      <span className="text-xl flex-shrink-0">{getDocIcon(doc.originalName)}</span>
                      <div className="flex-1 min-w-0">
                        <p className="text-white text-sm font-medium truncate">{doc.originalName}</p>
                        <p className="text-white/50 text-xs">{formatDocSize(doc.size)}</p>
                      </div>
                      <button
                        type="button"
                        onClick={() => handleRemoveDocument(index)}
                        className="flex-shrink-0 p-1.5 text-red-400 hover:bg-red-500/20 rounded-lg opacity-0 group-hover:opacity-100 transition-all"
                        title="Remove document"
                      >
                        <Trash2 className="w-4 h-4" />
                      </button>
                    </div>
                  ))}
                </div>
              )}

              {/* Upload button */}
              <label className={`flex flex-col items-center justify-center w-full py-6 border-2 border-dashed rounded-lg cursor-pointer transition-all ${
                uploadingDoc ? 'border-white/20 opacity-50 cursor-not-allowed' : 'border-white/30 hover:border-white/50'
              }`}>
                {uploadingDoc ? (
                  <>
                    <Loader2 className="w-8 h-8 text-white/50 mb-2 animate-spin" />
                    <span className="text-white/70 text-sm">Uploading...</span>
                  </>
                ) : (
                  <>
                    <Upload className="w-8 h-8 text-white/50 mb-2" />
                    <span className="text-white/70 text-sm">Click to upload documents</span>
                    <span className="text-white/40 text-xs mt-1">PDF, DOC, DOCX, XLS, XLSX, PPT, ZIP (max 20MB)</span>
                  </>
                )}
                <input
                  type="file"
                  accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.csv,.txt,.rtf,.zip"
                  onChange={handleDocumentUpload}
                  className="hidden"
                  disabled={uploadingDoc}
                  multiple
                />
              </label>
            </div>

            <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 Tender</span>
              </label>

              {isManager && (
                <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>

            <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>
              )}

              <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>
  )
}