'use client'

import React, { useState } from 'react'
import Header from '../../components/nav/Header'
import Footer from '../../components/Footer'
import { 
  PlusIcon, 
  PencilIcon, 
  TrashIcon, 
  LinkIcon,
  PhotoIcon,
  XMarkIcon,
  MagnifyingGlassIcon
} from '@heroicons/react/24/outline'
import useAuthStore from '../../store/authStore'
import { useRouter } from 'next/navigation'
import PageTransitionEffect from '../../components/animation/pageTransitionEffect'
import { useAdminAffiliates, type AdminAffiliate } from './hooks/getAffiliates'
import { addAffiliate } from './hooks/addAffiliate'
import { updateAffiliate } from './hooks/updateAffiliate'
import { deleteAffiliate } from './hooks/deleteAffiliate'
import AffiliateCropModal from './components/AffiliateCropModal'

type Affiliate = AdminAffiliate

// Centralized affiliate categories
const AFFILIATE_CATEGORIES = [
  'Technology',
  'Energy',
  'Finance',
  'Healthcare',
  'Education',
  'Travel',
  'Retail',
  'Construction',
  'Food',
  'Automotive',
  'Fashion',
  'Pets'
] as const

export default function AffiliateManagementPage() {
  const router = useRouter()
  const user = useAuthStore(s => s.user)
  const isAdmin = !!user && (
    (user as any)?.role === 'admin' ||
    (user as any)?.userType === 'admin' ||
    (user as any)?.isAdmin === true ||
    ((user as any)?.roles?.includes?.('admin'))
  )

  const [authChecked, setAuthChecked] = React.useState(false)
  React.useEffect(() => {
    if (user === null) {
      router.replace('/login')
      return
    }
    if (user && !isAdmin) {
      router.replace('/')
      return
    }
    setAuthChecked(true)
  }, [user, isAdmin, router])

  // Fetch affiliates from API
  const { affiliates, loading, error, refresh } = useAdminAffiliates()

  const [searchQuery, setSearchQuery] = useState('')
  const [categoryFilter, setCategoryFilter] = useState<string>('all')
  const [showCreateModal, setShowCreateModal] = useState(false)
  const [showEditModal, setShowEditModal] = useState(false)
  const [showDeleteModal, setShowDeleteModal] = useState(false)
  const [selectedAffiliate, setSelectedAffiliate] = useState<Affiliate | null>(null)
  const [isCreating, setIsCreating] = useState(false)
  const [isUpdating, setIsUpdating] = useState(false)
  const [isDeleting, setIsDeleting] = useState(false)

  const categories = ['all', ...AFFILIATE_CATEGORIES]

  const filteredAffiliates = affiliates.filter(affiliate => {
    const matchesSearch = affiliate.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
                         affiliate.description.toLowerCase().includes(searchQuery.toLowerCase())
    const matchesCategory = categoryFilter === 'all' || affiliate.category === categoryFilter
    return matchesSearch && matchesCategory
  })

  const handleEdit = (affiliate: Affiliate) => {
    setSelectedAffiliate(affiliate)
    setShowEditModal(true)
  }

  const handleDelete = (affiliate: Affiliate) => {
    setSelectedAffiliate(affiliate)
    setShowDeleteModal(true)
  }

  const confirmDelete = async () => {
    if (!selectedAffiliate) return
    
    setIsDeleting(true)
    try {
      const result = await deleteAffiliate(selectedAffiliate.id)
      if (result.ok) {
        setShowDeleteModal(false)
        setSelectedAffiliate(null)
        await refresh()
      } else {
        alert(result.message || 'Failed to delete affiliate')
      }
    } catch (err) {
      console.error('Delete error:', err)
      alert('Failed to delete affiliate')
    } finally {
      setIsDeleting(false)
    }
  }

  if (!authChecked) return null

  return (
    <PageTransitionEffect>
      <div className="min-h-screen flex flex-col bg-gradient-to-tr from-blue-50 via-white to-blue-100">
        <Header />
        <main className="flex-1 py-8 px-4 sm:px-6 lg:px-8">
          <div className="max-w-7xl mx-auto">
            {/* Error State */}
            {error && (
              <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
                <p className="text-red-800 text-sm">
                  Error loading affiliates: {error}
                </p>
                <button 
                  onClick={refresh}
                  className="mt-2 text-sm text-red-600 hover:text-red-800 font-medium"
                >
                  Try again
                </button>
              </div>
            )}

            {/* Header */}
            <header className="bg-white/90 backdrop-blur border-b border-blue-100 py-10 px-8 rounded-2xl shadow-lg mb-8">
              <div className="flex items-center justify-between mb-6">
                <div>
                  <h1 className="text-4xl font-extrabold text-blue-900 tracking-tight">Affiliate Management</h1>
                  <p className="text-lg text-blue-700 mt-2">Manage your affiliate partners and tracking links</p>
                </div>
                <button
                  onClick={() => setShowCreateModal(true)}
                  className="inline-flex items-center gap-2 rounded-lg bg-blue-900 hover:bg-blue-800 text-blue-50 px-5 py-3 text-sm font-semibold shadow transition"
                >
                  <PlusIcon className="h-5 w-5" />
                  Add Affiliate
                </button>
              </div>

              {/* Search and Filter */}
              <div className="flex flex-col sm:flex-row gap-4">
                <div className="flex-1 relative">
                  <MagnifyingGlassIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
                  <input
                    type="text"
                    placeholder="Search affiliates..."
                    value={searchQuery}
                    onChange={e => setSearchQuery(e.target.value)}
                    className="w-full pl-10 pr-4 py-2.5 rounded-lg border border-gray-300 bg-white text-gray-900 placeholder-gray-400 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
                  />
                </div>
                <select
                  value={categoryFilter}
                  onChange={e => setCategoryFilter(e.target.value)}
                  className="px-4 py-2.5 rounded-lg border border-gray-300 bg-white text-gray-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
                >
                  {categories.map(cat => (
                    <option key={cat} value={cat}>
                      {cat === 'all' ? 'All Categories' : cat}
                    </option>
                  ))}
                </select>
              </div>
            </header>

            {/* Stats */}
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-8">
              <div className="bg-white rounded-2xl border border-gray-100 shadow-lg p-6">
                <div className="flex items-center gap-3">
                  <div className="rounded-lg bg-blue-50 p-3">
                    <LinkIcon className="h-6 w-6 text-blue-900" />
                  </div>
                  <div>
                    <p className="text-sm text-gray-600">Total Affiliates</p>
                    <p className="text-2xl font-bold text-gray-900">{affiliates.length}</p>
                  </div>
                </div>
              </div>
              <div className="bg-white rounded-2xl border border-gray-100 shadow-lg p-6">
                <div className="flex items-center gap-3">
                  <div className="rounded-lg bg-green-50 p-3">
                    <LinkIcon className="h-6 w-6 text-green-700" />
                  </div>
                  <div>
                    <p className="text-sm text-gray-600">Active</p>
                    <p className="text-2xl font-bold text-gray-900">
                      {affiliates.filter(a => a.isActive).length}
                    </p>
                  </div>
                </div>
              </div>
              <div className="bg-white rounded-2xl border border-gray-100 shadow-lg p-6">
                <div className="flex items-center gap-3">
                  <div className="rounded-lg bg-amber-50 p-3">
                    <LinkIcon className="h-6 w-6 text-amber-700" />
                  </div>
                  <div>
                    <p className="text-sm text-gray-600">Inactive</p>
                    <p className="text-2xl font-bold text-gray-900">
                      {affiliates.filter(a => !a.isActive).length}
                    </p>
                  </div>
                </div>
              </div>
            </div>

            {/* Affiliates Grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {loading && (
                <div className="col-span-full text-center py-12">
                  <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-blue-600 border-r-transparent"></div>
                  <p className="mt-4 text-sm text-gray-600">Loading affiliates...</p>
                </div>
              )}

              {!loading && filteredAffiliates.map((affiliate) => (
                <article
                  key={affiliate.id}
                  className="bg-white rounded-2xl border border-gray-100 shadow-lg overflow-hidden hover:shadow-xl transition"
                >
                  {/* Logo/Image */}
                  <div className="relative h-40 bg-gradient-to-br from-blue-50 to-gray-100">
                    {affiliate.logoUrl ? (
                      <img
                        src={affiliate.logoUrl}
                        alt={affiliate.name}
                        className="w-full h-full object-cover"
                      />
                    ) : (
                      <div className="w-full h-full flex items-center justify-center">
                        <PhotoIcon className="h-16 w-16 text-gray-300" />
                      </div>
                    )}
                    <div className="absolute top-3 right-3">
                      <span className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-medium ${
                        affiliate.isActive 
                          ? 'bg-green-100 text-green-800' 
                          : 'bg-gray-100 text-gray-700'
                      }`}>
                        {affiliate.isActive ? 'Active' : 'Inactive'}
                      </span>
                    </div>
                  </div>

                  {/* Content */}
                  <div className="p-5">
                    <div className="flex items-start justify-between mb-2">
                      <h3 className="text-lg font-semibold text-blue-900">{affiliate.name}</h3>
                      <span className="inline-flex items-center rounded-full bg-blue-50 px-2 py-1 text-xs font-medium text-blue-900">
                        {affiliate.category}
                      </span>
                    </div>
                    <p className="text-sm text-gray-600 mb-4 line-clamp-2">{affiliate.description}</p>
                    
                    {affiliate.commissionRate && (
                      <div className="mb-4 flex items-center gap-2">
                        <span className="text-xs text-gray-500">Commission:</span>
                        <span className="text-sm font-semibold text-blue-900">{affiliate.commissionRate}</span>
                      </div>
                    )}

                    <a
                      href={affiliate.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-xs text-blue-600 hover:text-blue-800 flex items-center gap-1 mb-4 truncate"
                    >
                      <LinkIcon className="h-3 w-3 flex-shrink-0" />
                      <span className="truncate">{affiliate.url}</span>
                    </a>

                    {/* Actions */}
                    <div className="space-y-3 pt-4 border-t border-gray-100">
                      <div className="flex items-center justify-between">
                        <span className="text-sm font-medium text-gray-700">Status</span>
                        <button
                          onClick={async () => {
                            try {
                              const { updateAffiliate } = await import('./hooks/updateAffiliate');
                              const result = await updateAffiliate({
                                id: affiliate.id,
                                name: affiliate.name,
                                description: affiliate.description,
                                url: affiliate.url,
                                category: affiliate.category,
                                commissionRate: affiliate.commissionRate,
                                isActive: !affiliate.isActive
                              });
                              if (result.ok) {
                                await refresh();
                              }
                            } catch (err) {
                              console.error('Toggle status error:', err);
                            }
                          }}
                          className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
                            affiliate.isActive ? 'bg-green-600' : 'bg-gray-300'
                          }`}
                        >
                          <span
                            className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                              affiliate.isActive ? 'translate-x-6' : 'translate-x-1'
                            }`}
                          />
                        </button>
                      </div>
                      <div className="flex items-center gap-2">
                        <button
                          onClick={() => handleEdit(affiliate)}
                          className="flex-1 inline-flex items-center justify-center gap-2 rounded-lg bg-blue-50 text-blue-900 px-3 py-2 text-sm font-medium hover:bg-blue-100 transition"
                        >
                          <PencilIcon className="h-4 w-4" />
                          Edit
                        </button>
                        <button
                          onClick={() => handleDelete(affiliate)}
                          className="flex-1 inline-flex items-center justify-center gap-2 rounded-lg bg-red-50 text-red-700 px-3 py-2 text-sm font-medium hover:bg-red-100 transition"
                        >
                          <TrashIcon className="h-4 w-4" />
                          Delete
                        </button>
                      </div>
                    </div>
                  </div>
                </article>
              ))}

              {!loading && filteredAffiliates.length === 0 && (
                <div className="col-span-full text-center py-12">
                  <PhotoIcon className="mx-auto h-12 w-12 text-gray-400" />
                  <h3 className="mt-2 text-sm font-medium text-gray-900">No affiliates found</h3>
                  <p className="mt-1 text-sm text-gray-500">
                    {searchQuery || categoryFilter !== 'all' 
                      ? 'Try adjusting your search or filter' 
                      : 'Get started by adding a new affiliate partner'}
                  </p>
                </div>
              )}
            </div>
          </div>
        </main>
        <Footer />
      </div>

      {/* Modals */}
      {showCreateModal && <CreateAffiliateModal 
        onClose={() => setShowCreateModal(false)} 
        onCreate={async (newAffiliate) => {
          setIsCreating(true)
          try {
            const result = await addAffiliate({
              name: newAffiliate.name,
              description: newAffiliate.description,
              url: newAffiliate.url,
              category: newAffiliate.category,
              commissionRate: newAffiliate.commissionRate,
              isActive: newAffiliate.isActive,
              logoFile: newAffiliate.logoFile
            })
            
            if (result.ok) {
              await refresh()
              setShowCreateModal(false)
            } else {
              alert(result.message || 'Failed to create affiliate')
            }
          } catch (err) {
            console.error('Create error:', err)
            alert('Failed to create affiliate')
          } finally {
            setIsCreating(false)
          }
        }} 
      />}

      {showEditModal && selectedAffiliate && (
        <EditAffiliateModal
          affiliate={selectedAffiliate}
          onClose={() => {
            setShowEditModal(false)
            setSelectedAffiliate(null)
          }}
          onUpdate={async (updated) => {
            setIsUpdating(true)
            try {
              const result = await updateAffiliate({
                id: updated.id,
                name: updated.name,
                description: updated.description,
                url: updated.url,
                category: updated.category,
                commissionRate: updated.commissionRate,
                isActive: updated.isActive,
                logoFile: updated.logoFile,
                removeLogo: updated.removeLogo
              })
              
              if (result.ok) {
                await refresh()
                setShowEditModal(false)
                setSelectedAffiliate(null)
              } else {
                alert(result.message || 'Failed to update affiliate')
              }
            } catch (err) {
              console.error('Update error:', err)
              alert('Failed to update affiliate')
            } finally {
              setIsUpdating(false)
            }
          }}
        />
      )}

      {showDeleteModal && selectedAffiliate && (
        <DeleteConfirmModal
          affiliateName={selectedAffiliate.name}
          isDeleting={isDeleting}
          onClose={() => {
            if (!isDeleting) {
              setShowDeleteModal(false)
              setSelectedAffiliate(null)
            }
          }}
          onConfirm={confirmDelete}
        />
      )}
    </PageTransitionEffect>
  )
}

// Create Modal Component
function CreateAffiliateModal({ onClose, onCreate }: { onClose: () => void; onCreate: (affiliate: Omit<Affiliate, 'id' | 'createdAt'> & { logoFile?: File }) => void }) {
  const [name, setName] = useState('')
  const [description, setDescription] = useState('')
  const [url, setUrl] = useState('')
  const [category, setCategory] = useState<string>(AFFILIATE_CATEGORIES[0])
  const [commissionRate, setCommissionRate] = useState('')
  const [isActive, setIsActive] = useState(true)
  const [logoFile, setLogoFile] = useState<File | undefined>(undefined)
  const [previewUrl, setPreviewUrl] = useState<string | null>(null)
  const [showCropModal, setShowCropModal] = useState(false)
  const [rawImageUrl, setRawImageUrl] = useState<string | null>(null)

  // Cleanup preview URL on unmount
  React.useEffect(() => {
    return () => {
      if (previewUrl) URL.revokeObjectURL(previewUrl)
      if (rawImageUrl) URL.revokeObjectURL(rawImageUrl)
    }
  }, [previewUrl, rawImageUrl])

  const handleLogoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) {
      console.log('No file selected')
      return
    }

    console.log('File selected:', file.name, file.type, file.size)

    const allowed = ['image/jpeg', 'image/png', 'image/webp', 'image/svg+xml']
    if (!allowed.includes(file.type)) {
      alert('Invalid image type. Allowed: JPG, PNG, WebP, SVG')
      e.target.value = '' // Reset input
      return
    }
    if (file.size > 5 * 1024 * 1024) {
      alert('Image exceeds 5MB limit')
      e.target.value = '' // Reset input
      return
    }

    // Open crop modal with raw image
    const url = URL.createObjectURL(file)
    setRawImageUrl(url)
    setShowCropModal(true)
    
    // Reset input so same file can be selected again
    e.target.value = ''
  }

  const handleCropComplete = (croppedBlob: Blob) => {
    // Clean up old preview
    if (previewUrl) URL.revokeObjectURL(previewUrl)
    if (rawImageUrl) URL.revokeObjectURL(rawImageUrl)

    // Create file from blob
    const croppedFile = new File([croppedBlob], 'affiliate-logo.jpg', { type: 'image/jpeg' })
    setLogoFile(croppedFile)
    
    // Create preview
    const url = URL.createObjectURL(croppedBlob)
    setPreviewUrl(url)
    setRawImageUrl(null)
  }

  const handleRemoveLogo = () => {
    if (previewUrl) URL.revokeObjectURL(previewUrl)
    setLogoFile(undefined)
    setPreviewUrl(null)
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onCreate({
      name,
      description,
      url,
      category,
      commissionRate: commissionRate || undefined,
      isActive,
      logoFile
    })
  }

  return (
    <>
      <AffiliateCropModal
        isOpen={showCropModal}
        imageSrc={rawImageUrl || ''}
        onClose={() => {
          setShowCropModal(false)
          if (rawImageUrl) URL.revokeObjectURL(rawImageUrl)
          setRawImageUrl(null)
        }}
        onCropComplete={handleCropComplete}
      />
      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
        <div className="relative w-full max-w-2xl mx-4 bg-white rounded-2xl shadow-2xl max-h-[90vh] overflow-y-auto">
          <div className="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between rounded-t-2xl">
            <h2 className="text-2xl font-bold text-blue-900">Add New Affiliate</h2>
          <button onClick={onClose} className="text-gray-500 hover:text-gray-700 transition">
            <XMarkIcon className="h-6 w-6" />
          </button>
        </div>

        <form onSubmit={handleSubmit} className="p-6 space-y-6">
          <div>
            <label className="block text-sm font-medium text-blue-900 mb-2">Partner Name *</label>
            <input
              required
              value={name}
              onChange={e => setName(e.target.value)}
              className="w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
              placeholder="e.g., Coffee Equipment Co."
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-blue-900 mb-2">Description *</label>
            <textarea
              required
              value={description}
              onChange={e => setDescription(e.target.value)}
              rows={3}
              className="w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
              placeholder="Brief description of the affiliate partner..."
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-blue-900 mb-2">Affiliate URL *</label>
            <input
              required
              type="url"
              value={url}
              onChange={e => setUrl(e.target.value)}
              className="w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
              placeholder="https://example.com/affiliate-link"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-blue-900 mb-2">Logo Image</label>
            <div
              className="relative flex justify-center items-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 cursor-pointer overflow-hidden transition hover:border-blue-400 hover:bg-blue-100"
              style={{ minHeight: '200px' }}
              onClick={(e) => {
                e.stopPropagation()
                const input = document.getElementById('create-logo-upload') as HTMLInputElement
                if (input) input.click()
              }}
            >
              {!previewUrl && (
                <div className="text-center w-full px-6 py-10">
                  <PhotoIcon aria-hidden="true" className="mx-auto h-12 w-12 text-gray-400" />
                  <div className="mt-4 text-sm font-medium text-gray-700">
                    <span>Click to upload logo</span>
                  </div>
                  <p className="text-xs text-gray-500 mt-2">PNG, JPG, WebP, SVG up to 5MB</p>
                </div>
              )}
              {previewUrl && (
                <div className="relative w-full h-full min-h-[200px] flex items-center justify-center bg-white p-4">
                  <img 
                    src={previewUrl} 
                    alt="Logo preview" 
                    className="max-h-[180px] max-w-full object-contain" 
                  />
                  <button
                    type="button"
                    onClick={(e) => {
                      e.stopPropagation()
                      handleRemoveLogo()
                    }}
                    className="absolute top-2 right-2 bg-red-50 hover:bg-red-100 text-red-700 px-3 py-1.5 rounded-lg text-sm font-medium shadow transition"
                  >
                    Remove
                  </button>
                </div>
              )}
            </div>
            <input
              id="create-logo-upload"
              type="file"
              accept="image/*"
              onChange={handleLogoChange}
              className="hidden"
            />
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-blue-900 mb-2">Category *</label>
              <select
                value={category}
                onChange={e => setCategory(e.target.value)}
                className="w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
              >
                {AFFILIATE_CATEGORIES.map(cat => (
                  <option key={cat} value={cat}>{cat}</option>
                ))}
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium text-blue-900 mb-2">Commission Rate</label>
              <input
                value={commissionRate}
                onChange={e => setCommissionRate(e.target.value)}
                className="w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
                placeholder="e.g., 10%"
              />
            </div>
          </div>

          <div className="flex items-center gap-2">
            <input
              id="isActive"
              type="checkbox"
              checked={isActive}
              onChange={e => setIsActive(e.target.checked)}
              className="h-4 w-4 rounded border-gray-300 text-blue-900 focus:ring-blue-900"
            />
            <label htmlFor="isActive" className="text-sm font-medium text-gray-700">
              Active (visible to users)
            </label>
          </div>

          <div className="flex items-center justify-end gap-3 pt-4 border-t border-gray-200">
            <button
              type="button"
              onClick={onClose}
              className="px-5 py-2.5 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition"
            >
              Cancel
            </button>
            <button
              type="submit"
              className="px-5 py-2.5 text-sm font-semibold text-white bg-blue-900 rounded-lg hover:bg-blue-800 shadow transition"
            >
              Add Affiliate
            </button>
          </div>
        </form>
      </div>
    </div>
    </>
  )
}

// Edit Modal Component
function EditAffiliateModal({ affiliate, onClose, onUpdate }: { 
  affiliate: Affiliate; 
  onClose: () => void; 
  onUpdate: (affiliate: Affiliate & { logoFile?: File; removeLogo?: boolean }) => void 
}) {
  const [name, setName] = useState(affiliate.name)
  const [description, setDescription] = useState(affiliate.description)
  const [url, setUrl] = useState(affiliate.url)
  const [category, setCategory] = useState(affiliate.category)
  const [commissionRate, setCommissionRate] = useState(affiliate.commissionRate || '')
  const [isActive, setIsActive] = useState(affiliate.isActive)
  const [logoFile, setLogoFile] = useState<File | undefined>(undefined)
  const [previewUrl, setPreviewUrl] = useState<string | null>(null)
  const [currentLogoUrl, setCurrentLogoUrl] = useState<string | undefined>(affiliate.logoUrl)
  const [logoRemoved, setLogoRemoved] = useState(false)
  const [showCropModal, setShowCropModal] = useState(false)
  const [rawImageUrl, setRawImageUrl] = useState<string | null>(null)

  // Cleanup preview URL on unmount
  React.useEffect(() => {
    return () => {
      if (previewUrl) URL.revokeObjectURL(previewUrl)
      if (rawImageUrl) URL.revokeObjectURL(rawImageUrl)
    }
  }, [previewUrl, rawImageUrl])

  const handleLogoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) {
      console.log('No file selected')
      return
    }

    console.log('File selected:', file.name, file.type, file.size)

    const allowed = ['image/jpeg', 'image/png', 'image/webp', 'image/svg+xml']
    if (!allowed.includes(file.type)) {
      alert('Invalid image type. Allowed: JPG, PNG, WebP, SVG')
      e.target.value = '' // Reset input
      return
    }
    if (file.size > 5 * 1024 * 1024) {
      alert('Image exceeds 5MB limit')
      e.target.value = '' // Reset input
      return
    }

    // Open crop modal with raw image
    const url = URL.createObjectURL(file)
    setRawImageUrl(url)
    setShowCropModal(true)
    
    // Reset input so same file can be selected again
    e.target.value = ''
  }

  const handleCropComplete = (croppedBlob: Blob) => {
    // Clean up old preview
    if (previewUrl) URL.revokeObjectURL(previewUrl)
    if (rawImageUrl) URL.revokeObjectURL(rawImageUrl)

    // Create file from blob
    const croppedFile = new File([croppedBlob], 'affiliate-logo.jpg', { type: 'image/jpeg' })
    setLogoFile(croppedFile)
    setLogoRemoved(false)
    
    // Create preview
    const url = URL.createObjectURL(croppedBlob)
    setPreviewUrl(url)
    setRawImageUrl(null)
  }

  const handleRemoveLogo = () => {
    if (previewUrl) URL.revokeObjectURL(previewUrl)
    setLogoFile(undefined)
    setPreviewUrl(null)
    setCurrentLogoUrl(undefined)
    setLogoRemoved(true)
  }

  const displayLogoUrl = logoRemoved ? null : (previewUrl || currentLogoUrl)

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onUpdate({
      ...affiliate,
      name,
      description,
      url,
      category,
      commissionRate: commissionRate || undefined,
      isActive,
      logoFile,
      removeLogo: logoRemoved && !logoFile
    })
  }

  return (
    <>
      <AffiliateCropModal
        isOpen={showCropModal}
        imageSrc={rawImageUrl || ''}
        onClose={() => {
          setShowCropModal(false)
          if (rawImageUrl) URL.revokeObjectURL(rawImageUrl)
          setRawImageUrl(null)
        }}
        onCropComplete={handleCropComplete}
      />
      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
        <div className="relative w-full max-w-2xl mx-4 bg-white rounded-2xl shadow-2xl max-h-[90vh] overflow-y-auto">
          <div className="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between rounded-t-2xl">
            <h2 className="text-2xl font-bold text-blue-900">Edit Affiliate</h2>
          <button onClick={onClose} className="text-gray-500 hover:text-gray-700 transition">
            <XMarkIcon className="h-6 w-6" />
          </button>
        </div>

        <form onSubmit={handleSubmit} className="p-6 space-y-6">
          <div>
            <label className="block text-sm font-medium text-blue-900 mb-2">Partner Name *</label>
            <input
              required
              value={name}
              onChange={e => setName(e.target.value)}
              className="w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-blue-900 mb-2">Description *</label>
            <textarea
              required
              value={description}
              onChange={e => setDescription(e.target.value)}
              rows={3}
              className="w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-blue-900 mb-2">Affiliate URL *</label>
            <input
              required
              type="url"
              value={url}
              onChange={e => setUrl(e.target.value)}
              className="w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-blue-900 mb-2">Logo Image</label>
            <div
              className="relative flex justify-center items-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 cursor-pointer overflow-hidden transition hover:border-blue-400 hover:bg-blue-100"
              style={{ minHeight: '200px' }}
              onClick={(e) => {
                e.stopPropagation()
                const input = document.getElementById('edit-logo-upload') as HTMLInputElement
                if (input) input.click()
              }}
            >
              {!displayLogoUrl && (
                <div className="text-center w-full px-6 py-10">
                  <PhotoIcon aria-hidden="true" className="mx-auto h-12 w-12 text-gray-400" />
                  <div className="mt-4 text-sm font-medium text-gray-700">
                    <span>Click to upload logo</span>
                  </div>
                  <p className="text-xs text-gray-500 mt-2">PNG, JPG, WebP, SVG up to 5MB</p>
                </div>
              )}
              {displayLogoUrl && (
                <div className="relative w-full h-full min-h-[200px] flex flex-col items-center justify-center bg-white p-4">
                  <img 
                    src={displayLogoUrl} 
                    alt="Logo" 
                    className="max-h-[180px] max-w-full object-contain" 
                  />
                  <p className="mt-2 text-xs text-gray-600">
                    {logoFile ? '🆕 New logo selected' : '📷 Current logo'}
                  </p>
                  <button
                    type="button"
                    onClick={(e) => {
                      e.stopPropagation()
                      handleRemoveLogo()
                    }}
                    className="absolute top-2 right-2 bg-red-50 hover:bg-red-100 text-red-700 px-3 py-1.5 rounded-lg text-sm font-medium shadow transition"
                  >
                    Remove
                  </button>
                </div>
              )}
            </div>
            <input
              id="edit-logo-upload"
              type="file"
              accept="image/*"
              onChange={handleLogoChange}
              className="hidden"
            />
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-blue-900 mb-2">Category *</label>
              <select
                value={category}
                onChange={e => setCategory(e.target.value)}
                className="w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
              >
                {AFFILIATE_CATEGORIES.map(cat => (
                  <option key={cat} value={cat}>{cat}</option>
                ))}
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium text-blue-900 mb-2">Commission Rate</label>
              <input
                value={commissionRate}
                onChange={e => setCommissionRate(e.target.value)}
                className="w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 focus:ring-2 focus:ring-blue-900 focus:border-transparent"
              />
            </div>
          </div>

          <div className="flex items-center gap-2">
            <input
              id="editIsActive"
              type="checkbox"
              checked={isActive}
              onChange={e => setIsActive(e.target.checked)}
              className="h-4 w-4 rounded border-gray-300 text-blue-900 focus:ring-blue-900"
            />
            <label htmlFor="editIsActive" className="text-sm font-medium text-gray-700">
              Active (visible to users)
            </label>
          </div>

          <div className="flex items-center justify-end gap-3 pt-4 border-t border-gray-200">
            <button
              type="button"
              onClick={onClose}
              className="px-5 py-2.5 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition"
            >
              Cancel
            </button>
            <button
              type="submit"
              className="px-5 py-2.5 text-sm font-semibold text-white bg-blue-900 rounded-lg hover:bg-blue-800 shadow transition"
            >
              Save Changes
            </button>
          </div>
        </form>
      </div>
    </div>
    </>
  )
}

// Delete Confirmation Modal
function DeleteConfirmModal({ affiliateName, onClose, onConfirm, isDeleting }: {
  affiliateName: string;
  onClose: () => void;
  onConfirm: () => void;
  isDeleting: boolean;
}) {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
      <div className="relative w-full max-w-md mx-4 bg-white rounded-2xl shadow-2xl p-6">
        <div className="mb-4">
          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
            <TrashIcon className="h-6 w-6 text-red-600" />
          </div>
          <h3 className="mt-4 text-lg font-semibold text-center text-gray-900">Delete Affiliate</h3>
          <p className="mt-2 text-sm text-center text-gray-600">
            Are you sure you want to delete <span className="font-semibold">{affiliateName}</span>? This action cannot be undone.
          </p>
        </div>

        <div className="flex items-center gap-3">
          <button
            onClick={onClose}
            disabled={isDeleting}
            className="flex-1 px-4 py-2.5 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition disabled:opacity-50 disabled:cursor-not-allowed"
          >
            Cancel
          </button>
          <button
            onClick={onConfirm}
            disabled={isDeleting}
            className="flex-1 px-4 py-2.5 text-sm font-semibold text-white bg-red-600 rounded-lg hover:bg-red-700 shadow transition disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {isDeleting ? 'Deleting...' : 'Delete'}
          </button>
        </div>
      </div>
    </div>
  )
}