'use client'

import { useState, useEffect, Suspense } from 'react'
import Image from 'next/image'
import AuthModal from './AuthModal'
import UnlockModal from './UnlockModal'
import { useI18n } from '@/lib/i18n'

interface DropData {
  id: number
  item: string
  description?: string | null
  size: number
  fill: number
  unit: string
  ppu: number
  price_chf?: number | null
  price_eur?: number | null
  wholesale_price_chf?: number | null
  wholesale_price_eur?: number | null
  image_url: string | null
  images?: string[] // Array of image URLs (up to 4)
  created_at: string
  start_time: string | null
  is_upcoming?: boolean
  sales_fill?: number // Only confirmed sales
  pending_fill?: number // Items on hold (pending orders)
}

interface User {
  id: number
  username: string
  email: string
  referral_points?: number
}

export default function Drop() {
  const { t, language } = useI18n()
  const [drop, setDrop] = useState<DropData | null>(null)
  const [loading, setLoading] = useState(true)
  const [selectedSize, setSelectedSize] = useState(50)
  const [customQuantity, setCustomQuantity] = useState<string>('')
  const [quantityError, setQuantityError] = useState<string>('')
  const [selectedCurrency, setSelectedCurrency] = useState<string>('btc')
  const [availableCurrencies, setAvailableCurrencies] = useState<string[]>([])
  const [loadingCurrencies, setLoadingCurrencies] = useState(false)
  const [buyerFullname, setBuyerFullname] = useState<string>('')
  const [buyerAddress, setBuyerAddress] = useState<string>('')
  const [buyerPhone, setBuyerPhone] = useState<string>('')
  const [showConfirmModal, setShowConfirmModal] = useState(false)
  const [showAuthModal, setShowAuthModal] = useState(false)
  const [showPaymentModal, setShowPaymentModal] = useState(false)
  const [showSuccessModal, setShowSuccessModal] = useState(false)
  const [showErrorModal, setShowErrorModal] = useState(false)
  const [errorMessage, setErrorMessage] = useState<string>('')
  const [paymentData, setPaymentData] = useState<any>(null)
  const [processing, setProcessing] = useState(false)
  const [user, setUser] = useState<User | null>(null)
  const [checkingAuth, setCheckingAuth] = useState(true)
  const [isWholesaleUnlocked, setIsWholesaleUnlocked] = useState(false)
  const [showUnlockModal, setShowUnlockModal] = useState(false)
  const [selectedImageIndex, setSelectedImageIndex] = useState(0)
  const [shippingFee, setShippingFee] = useState<number | null>(null)
  const [loadingShippingFee, setLoadingShippingFee] = useState(false)
  // Currency is based on language: English (en) → EUR, German (de) → CHF
  const currency: 'CHF' | 'EUR' = language === 'de' ? 'CHF' : 'EUR'
  const [referralPoints, setReferralPoints] = useState<number>(0)
  const [pointsToEur, setPointsToEur] = useState<number>(100)
  const [pointsToChf, setPointsToChf] = useState<number>(100) // Keep for backward compatibility
  const [pointsToUse, setPointsToUse] = useState<number>(0)
  const [loadingPoints, setLoadingPoints] = useState(false)

  useEffect(() => {
    fetchActiveDrop()
    checkAuth()
    checkWholesaleStatus()
    fetchShippingFee() // Fetch currency info on mount
    fetchReferralPoints()

    // Poll active drop every 30 seconds
    const interval = setInterval(() => {
      fetchActiveDrop()
    }, 30000) // 30 seconds

    return () => clearInterval(interval)
  }, [])

  // Fetch referral points when user is authenticated
  useEffect(() => {
    if (user) {
      fetchReferralPoints()
    } else {
      setReferralPoints(0)
      setPointsToUse(0)
    }
  }, [user])

  const checkWholesaleStatus = async () => {
    try {
      const response = await fetch('/api/referrals/status', {
        credentials: 'include',
      })
      if (response.ok) {
        const data = await response.json()
        setIsWholesaleUnlocked(data.isUnlocked || false)
      }
    } catch (error) {
      console.error('Error checking wholesale status:', error)
    }
  }

  const fetchReferralPoints = async () => {
    if (!user) {
      setReferralPoints(0)
      setPointsToUse(0)
      return
    }

    setLoadingPoints(true)
    try {
      const response = await fetch('/api/referral-points', {
        credentials: 'include',
      })
      if (response.ok) {
        const data = await response.json()
        setReferralPoints(data.referral_points || 0)
        // Use EUR-based setting (preferred), fallback to CHF converted to EUR
        if (data.points_to_eur) {
          setPointsToEur(data.points_to_eur)
        } else {
          // Convert CHF to EUR (1 CHF ≈ 1.0309 EUR)
          setPointsToEur((data.points_to_chf || 100) / 1.030927835)
        }
        setPointsToChf(data.points_to_chf || 100) // Keep for backward compatibility
      }
    } catch (error) {
      console.error('Error fetching referral points:', error)
    } finally {
      setLoadingPoints(false)
    }
  }

  // Poll payment status when payment modal is open
  useEffect(() => {
    if (!showPaymentModal || !paymentData?.payment_id) return

    const checkPaymentStatus = async () => {
      try {
        const response = await fetch(`/api/payments/check-status?payment_id=${paymentData.payment_id}`, {
          credentials: 'include',
        })

        if (response.ok) {
          const status = await response.json()
          
          // If pending order is gone and sale exists, payment was processed
          if (!status.has_pending_order && status.has_sale) {
            // Close payment modal
            setShowPaymentModal(false)
            // Show success modal
            setShowSuccessModal(true)
            // Refresh drop data
            await fetchActiveDrop()
          }
        }
      } catch (error) {
        console.error('Error checking payment status:', error)
      }
    }

    // Check immediately, then poll every 3 seconds
    checkPaymentStatus()
    const interval = setInterval(checkPaymentStatus, 3000)

    return () => clearInterval(interval)
  }, [showPaymentModal, paymentData?.payment_id])

  const checkAuth = async () => {
    try {
      const response = await fetch('/api/auth/session', {
        credentials: 'include',
      })
      if (response.ok) {
        const data = await response.json()
        setUser(data.user)
      }
    } catch (error) {
      console.error('Error checking auth:', error)
    } finally {
      setCheckingAuth(false)
    }
  }

  const fetchActiveDrop = async () => {
    try {
      const response = await fetch('/api/drops/active', {
        // Add cache control to prevent stale data
        cache: 'no-store',
      })
      if (response.ok) {
        const data = await response.json()
        // Handle both null response and actual drop data
        setDrop(data) // data can be null if no active drop
      } else {
        // If response is not ok, log the error
        const errorData = await response.json().catch(() => ({ error: 'Unknown error' }))
        console.error('Error fetching active drop:', errorData)
        setDrop(null)
      }
    } catch (error) {
      console.error('Error fetching active drop:', error)
      setDrop(null)
    } finally {
      setLoading(false)
    }
  }

  const getProgressPercentage = (fill: number, size: number) => {
    return Math.min((fill / size) * 100, 100)
  }

  const formatSize = (size: number, unit: string) => {
    if (unit === 'g' && size >= 1000) {
      return `${(size / 1000).toFixed(1)}kg`
    }
    return `${size}${unit}`
  }

  const getAvailableSizes = () => {
    if (!drop) return []
    const sizes = [50, 100, 250] // Always in grams
    
    // Calculate remaining inventory in grams
    let remainingInGrams = 0
    if (drop.unit === 'kg') {
      remainingInGrams = (drop.size - drop.fill) * 1000
    } else {
      // For 'g' or any other unit, assume same unit
      remainingInGrams = drop.size - drop.fill
    }
    
    // Only show sizes that don't exceed remaining inventory
    return sizes.filter((size) => size <= remainingInGrams)
  }

  const getRemainingInGrams = () => {
    if (!drop) return 0
    if (drop.unit === 'kg') {
      return (drop.size - drop.fill) * 1000
    }
    return drop.size - drop.fill
  }

  const getMinimumGrams = () => {
    if (!drop) return 0
    // Minimum price is 5 in user's currency
    // Calculate minimum grams needed for 5 (EUR or CHF)
    const pricePerGram = getPricePerGram()
    const minPrice = 5 // 5 in user's currency
    return Math.ceil(minPrice / pricePerGram)
  }

  const handleCustomQuantityChange = (value: string) => {
    setCustomQuantity(value)
    setQuantityError('')
    
    // Clear selected preset size when custom input is used
    if (value.trim() !== '') {
      const numValue = parseInt(value, 10)
      if (!isNaN(numValue) && numValue > 0) {
        setSelectedSize(numValue)
      }
    }
  }

  const validateCustomQuantity = () => {
    if (!drop || !customQuantity.trim()) {
      setQuantityError('')
      return true
    }

    const numValue = parseInt(customQuantity, 10)
    const remaining = getRemainingInGrams()
    const minimum = getMinimumGrams()

    if (isNaN(numValue) || numValue <= 0) {
      setQuantityError(t('drop.enterValidNumber'))
      return false
    }

    if (numValue < minimum) {
      setQuantityError(t('drop.minimumRequired', { minimum }))
      return false
    }

    if (numValue > remaining) {
      setQuantityError(t('drop.maximumAvailable', { maximum: remaining }))
      return false
    }

    setQuantityError('')
    return true
  }

  const handleQuantityButtonClick = (size: number) => {
    setSelectedSize(size)
    setCustomQuantity('')
    setQuantityError('')
  }

  const fetchAvailableCurrencies = async () => {
    setLoadingCurrencies(true)
    try {
      const response = await fetch('/api/payments/currencies')
      if (response.ok) {
        const data = await response.json()
        
        // When fixed_rate=true, API returns objects with { currency, min_amount, max_amount }
        // When fixed_rate=false, API returns array of strings
        const currencies: string[] = []
        if (Array.isArray(data.currencies)) {
          data.currencies.forEach((c: any) => {
            let currencyCode: string | null = null
            
            // Handle object format (when fixed_rate=true)
            if (typeof c === 'object' && c !== null && c.currency) {
              currencyCode = String(c.currency).trim().toLowerCase()
            }
            // Handle string format (when fixed_rate=false)
            else if (typeof c === 'string') {
              currencyCode = c.trim().toLowerCase()
            }
            
            // Add to array if valid
            if (currencyCode && currencyCode.length > 0) {
              currencies.push(currencyCode)
            }
          })
        }
        
        setAvailableCurrencies(currencies)
        // Set default to BTC if available, otherwise first currency
        if (currencies.length > 0) {
          const defaultCurrency = currencies.includes('btc') ? 'btc' : currencies[0]
          setSelectedCurrency(defaultCurrency)
        }
      }
    } catch (error) {
      console.error('Error fetching currencies:', error)
    } finally {
      setLoadingCurrencies(false)
    }
  }

  const fetchBuyerData = async () => {
    try {
      const response = await fetch('/api/buyer-data', {
        credentials: 'include',
      })
      if (response.ok) {
        const data = await response.json()
        if (data.buyer_data) {
          // Autofill form fields with existing buyer data
          setBuyerFullname(data.buyer_data.fullname || '')
          setBuyerAddress(data.buyer_data.address || '')
          setBuyerPhone(data.buyer_data.phone || '')
        }
      }
    } catch (error) {
      console.error('Error fetching buyer data:', error)
    }
  }

  const fetchShippingFee = async () => {
    setLoadingShippingFee(true)
    try {
      const response = await fetch('/api/shipping-fee', {
        credentials: 'include',
      })
      if (response.ok) {
        const data = await response.json()
        setShippingFee(data.shipping_fee || 40)
        // Currency is now based on language, not geolocation
      } else {
        // Default to 40 EUR if fetch fails
        setShippingFee(40)
      }
    } catch (error) {
      console.error('Error fetching shipping fee:', error)
      // Default to 40 EUR on error
      setShippingFee(40)
    } finally {
      setLoadingShippingFee(false)
    }
  }

  // Get price per gram based on user's currency and wholesale status
  const getPricePerGramFromDrop = (): number => {
    if (!drop) return 0
    
    // Use new price fields if available, otherwise fall back to ppu calculation
    if (isWholesaleUnlocked) {
      // Wholesale price
      if (currency === 'CHF' && drop.wholesale_price_chf != null) {
        return Number(drop.wholesale_price_chf) || 0
      } else if (currency === 'EUR' && drop.wholesale_price_eur != null) {
        return Number(drop.wholesale_price_eur) || 0
      }
      // Fallback to ppu calculation if new fields not set
      const pricePerGramEur = Number(drop.ppu) / 1000
      return currency === 'CHF' ? pricePerGramEur * 0.97 : pricePerGramEur
    } else {
      // Regular price
      if (currency === 'CHF' && drop.price_chf != null) {
        return Number(drop.price_chf) || 0
      } else if (currency === 'EUR' && drop.price_eur != null) {
        return Number(drop.price_eur) || 0
      }
      // Fallback to ppu calculation if new fields not set
      const pricePerGramEur = Number(drop.ppu) / 1000
      return currency === 'CHF' ? pricePerGramEur * 0.97 : pricePerGramEur
    }
  }

  const handleJoinDrop = () => {
    // Validate custom quantity if entered
    if (customQuantity && !validateCustomQuantity()) {
      return
    }

    // Check if user is logged in
    if (!user) {
      setShowAuthModal(true)
      return
    }
    // Fetch available currencies, buyer data, and shipping fee when opening confirm modal
    fetchAvailableCurrencies()
    fetchBuyerData()
    fetchShippingFee()
    setShowConfirmModal(true)
  }

  const handleLogin = (loggedInUser: User) => {
    setUser(loggedInUser)
    setShowAuthModal(false)
    // After login, fetch buyer data and show the confirmation modal
    fetchAvailableCurrencies()
    fetchBuyerData()
    fetchShippingFee()
    setShowConfirmModal(true)
  }

  const handleConfirmPurchase = async () => {
    if (!drop) return

    // Validate buyer data fields
    if (!buyerFullname.trim() || !buyerAddress.trim() || !buyerPhone.trim()) {
      setErrorMessage(t('drop.fillDeliveryInfo'))
      setShowErrorModal(true)
      return
    }

    setProcessing(true)
    try {
      // First, get or create buyer_data
      const buyerDataResponse = await fetch('/api/buyer-data/get-or-create', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        credentials: 'include',
        body: JSON.stringify({
          fullname: buyerFullname.trim(),
          address: buyerAddress.trim(),
          phone: buyerPhone.trim(),
        }),
      })

      if (!buyerDataResponse.ok) {
        const error = await buyerDataResponse.json()
        setErrorMessage(error.error || 'Failed to save delivery information')
        setShowErrorModal(true)
        setProcessing(false)
        return
      }

      const buyerData = await buyerDataResponse.json()

      // Create NOWPayments payment
      const response = await fetch('/api/payments/create-invoice', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        credentials: 'include', // Important for cookies
        body: JSON.stringify({
          drop_id: drop.id,
          size: selectedSize, // Size in grams
          pay_currency: selectedCurrency, // Selected payment currency
          buyer_data_id: buyerData.buyer_data_id, // Buyer delivery data ID
          points_to_use: pointsToUse, // Points to use for discount
          currency: currency, // Display currency based on language (EUR for en, CHF for de)
        }),
      })

      if (!response.ok) {
        const error = await response.json()
        if (response.status === 401) {
          // User not authenticated - show login modal
          setShowConfirmModal(false)
          setShowAuthModal(true)
          setProcessing(false)
          return
        }
        // Show error modal instead of alert
        setErrorMessage(error.error || 'Failed to create payment')
        setShowErrorModal(true)
        setShowConfirmModal(false)
        setProcessing(false)
        return
      }

      const data = await response.json()

      // Refresh referral points if any were used
      if (pointsToUse > 0) {
        fetchReferralPoints()
        setPointsToUse(0) // Reset points used
      }

      // Close confirmation modal
      setShowConfirmModal(false)
      setProcessing(false)

      // Show payment modal with payment details
      if (data.pay_address) {
        setPaymentData(data)
        setShowPaymentModal(true)
      } else {
        setErrorMessage('Payment created but no payment address received')
        setShowErrorModal(true)
        await fetchActiveDrop()
      }
    } catch (error) {
      console.error('Error creating payment invoice:', error)
      setErrorMessage('Failed to create payment invoice. Please try again.')
      setShowErrorModal(true)
      setProcessing(false)
    }
  }

  const handleCancelPurchase = () => {
    setShowConfirmModal(false)
    setPointsToUse(0) // Reset points when canceling
  }

  const handlePointsToUseChange = (value: string) => {
    const numValue = parseFloat(value) || 0
    // Calculate max points based on EUR price (universal base)
    const priceEur = currency === 'CHF' ? calculatePriceBeforeDiscount() / 0.97 : calculatePriceBeforeDiscount()
    const maxPoints = Math.min(referralPoints, priceEur * pointsToEur)
    setPointsToUse(Math.max(0, Math.min(numValue, maxPoints)))
  }

  const calculatePriceBeforeDiscount = () => {
    if (!drop) return 0
    const pricePerGram = getPricePerGramFromDrop()
    return selectedSize * pricePerGram
  }

  const getMaxDiscountFromPoints = () => {
    if (pointsToEur === 0) return 0
    // Calculate discount in EUR (universal base)
    const discountEur = referralPoints / pointsToEur
    // Convert to user's currency for display
    if (currency === 'CHF') {
      return discountEur * 0.97 // Convert EUR to CHF
    } else {
      return discountEur // Already in EUR
    }
  }

  const calculateDiscountFromPoints = () => {
    if (pointsToUse === 0 || pointsToEur === 0) return 0
    // Calculate discount in EUR first (universal base)
    const discountEur = pointsToUse / pointsToEur
    // Convert to user's currency
    if (currency === 'CHF') {
      return discountEur * 0.97 // Convert EUR to CHF
    } else {
      return discountEur // Already in EUR
    }
  }

  const calculatePrice = () => {
    if (!drop) return 0
    const pricePerGram = getPricePerGramFromDrop()
    const price = selectedSize * pricePerGram
    // Apply points discount
    const discount = calculateDiscountFromPoints()
    return Math.max(0, price - discount)
  }

  const calculateStandardPrice = (): number => {
    if (!drop) return 0
    // Get regular price (not wholesale)
    let pricePerGram: number
    if (currency === 'CHF' && drop.price_chf != null) {
      pricePerGram = Number(drop.price_chf) || 0
    } else if (currency === 'EUR' && drop.price_eur != null) {
      pricePerGram = Number(drop.price_eur) || 0
    } else {
      // Fallback to ppu calculation
      const pricePerGramEur = Number(drop.ppu) / 1000
      pricePerGram = pricePerGramEur * (currency === 'CHF' ? 0.97 : 1)
    }
    return selectedSize * pricePerGram
  }

  const calculateWholesalePrice = (): number => {
    if (!drop) return 0
    // Get wholesale price
    let pricePerGram: number
    if (currency === 'CHF' && drop.wholesale_price_chf != null) {
      pricePerGram = Number(drop.wholesale_price_chf) || 0
    } else if (currency === 'EUR' && drop.wholesale_price_eur != null) {
      pricePerGram = Number(drop.wholesale_price_eur) || 0
    } else {
      // Fallback to ppu calculation
      const pricePerGramEur = Number(drop.ppu) / 1000
      pricePerGram = (pricePerGramEur * 0.76) * (currency === 'CHF' ? 0.97 : 1)
    }
    return selectedSize * pricePerGram
  }

  // Get price per gram in user's currency (regular price)
  const getPricePerGram = (): number => {
    if (!drop) return 0
    if (currency === 'CHF' && drop.price_chf != null) {
      return Number(drop.price_chf) || 0
    } else if (currency === 'EUR' && drop.price_eur != null) {
      return Number(drop.price_eur) || 0
    }
    // Fallback to ppu calculation
    const pricePerGramEur = Number(drop.ppu) / 1000
    return currency === 'CHF' ? pricePerGramEur * 0.97 : pricePerGramEur
  }

  // Get wholesale price per gram in user's currency
  const getWholesalePricePerGram = (): number => {
    if (!drop) return 0
    if (currency === 'CHF' && drop.wholesale_price_chf != null) {
      return Number(drop.wholesale_price_chf) || 0
    } else if (currency === 'EUR' && drop.wholesale_price_eur != null) {
      return Number(drop.wholesale_price_eur) || 0
    }
    // Fallback to ppu calculation
    const pricePerGramEur = Number(drop.ppu) / 1000
    return (pricePerGramEur * 0.76) * (currency === 'CHF' ? 0.97 : 1)
  }

  const getTimeUntilStart = () => {
    if (!drop || !drop.is_upcoming || !drop.start_time) return null
    
    const startTime = new Date(drop.start_time)
    const now = new Date()
    const diffMs = startTime.getTime() - now.getTime()
    
    if (diffMs <= 0) return null
    
    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
    const diffHours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
    const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60))
    
    if (diffDays > 0) {
      const dayText = diffDays === 1 ? t('drop.day') : t('drop.days')
      const hourText = diffHours > 0 ? (diffHours === 1 ? t('drop.hour') : t('drop.hours')) : ''
      return `${diffDays} ${dayText}${diffHours > 0 ? ` ${diffHours} ${hourText}` : ''}`
    } else if (diffHours > 0) {
      const hourText = diffHours === 1 ? t('drop.hour') : t('drop.hours')
      const minuteText = diffMinutes > 0 ? (diffMinutes === 1 ? t('drop.minute') : t('drop.minutes')) : ''
      return `${diffHours} ${hourText}${diffMinutes > 0 ? ` ${diffMinutes} ${minuteText}` : ''}`
    } else {
      const minuteText = diffMinutes === 1 ? t('drop.minute') : t('drop.minutes')
      return `${diffMinutes} ${minuteText}`
    }
  }

  // Get images array (prioritize new images array, fallback to legacy image_url)
  // Must be defined before early returns to maintain hook order
  const images = drop?.images && drop.images.length > 0 
    ? drop.images 
    : (drop?.image_url ? [drop.image_url] : [])

  // Reset selected image index when images change
  // Must be called before early returns to maintain hook order
  useEffect(() => {
    if (images.length > 0 && selectedImageIndex >= images.length) {
      setSelectedImageIndex(0)
    } else if (images.length === 0) {
      setSelectedImageIndex(0)
    }
  }, [images, selectedImageIndex])

  if (loading) {
    return (
      <div className="drop">
        <div style={{ gridColumn: '1 / -1', textAlign: 'center', padding: '40px' }}>
          <p style={{ color: 'var(--muted)' }}>{t('drop.loading')}</p>
        </div>
      </div>
    )
  }

  if (!drop) {
    return (
      <div className="drop">
        <div style={{ gridColumn: '1 / -1', textAlign: 'center', padding: '60px' }}>
          <h2 style={{ marginBottom: '16px' }}>{t('drop.dropSoldOut')}</h2>
          <p style={{ color: 'var(--muted)', marginBottom: '20px' }}>
            {t('drop.fullyReserved')}
          </p>
          <p style={{ color: 'var(--muted)' }}>
            {t('drop.nextDropComingSoon')}
          </p>
        </div>
      </div>
    )
  }

  const progressPercentage = getProgressPercentage(drop.fill, drop.size)
  // Calculate separate percentages for sales and pending
  const salesFill = Number(drop.sales_fill) || 0
  const pendingFill = Number(drop.pending_fill) || 0
  const salesPercentage = getProgressPercentage(salesFill, drop.size)
  const pendingPercentage = getProgressPercentage(pendingFill, drop.size)
  const availableSizes = getAvailableSizes()
  const timeUntilStart = getTimeUntilStart()
  const isUpcoming = drop.is_upcoming && timeUntilStart
  
  // Calculate remaining in the drop's unit
  const remaining = drop.size - drop.fill
  const hasRemaining = remaining > 0

  return (
    <div className="drop">
      {images.length > 0 ? (
        <div>
          {/* Main large image */}
          <div style={{ marginBottom: '12px' }}>
            <Image
              src={images[selectedImageIndex]}
              alt={`${drop.item} - Image ${selectedImageIndex + 1}`}
              width={420}
              height={420}
              style={{ 
                width: '100%', 
                height: 'auto', 
                borderRadius: '16px', 
                objectFit: 'cover',
                aspectRatio: '1 / 1'
              }}
            />
          </div>
          
          {/* Thumbnails */}
          {images.length > 1 && (
            <div style={{ 
              display: 'grid', 
              gridTemplateColumns: `repeat(${Math.min(images.length, 4)}, 1fr)`,
              gap: '8px'
            }}>
              {images.slice(0, 4).map((imgUrl, index) => (
                <button
                  key={index}
                  onClick={() => setSelectedImageIndex(index)}
                  style={{
                    padding: 0,
                    border: selectedImageIndex === index 
                      ? '2px solid var(--accent)' 
                      : '2px solid transparent',
                    borderRadius: '8px',
                    background: 'transparent',
                    cursor: 'pointer',
                    overflow: 'hidden',
                    aspectRatio: '1 / 1'
                  }}
                >
                  <Image
                    src={imgUrl}
                    alt={`${drop.item} - Thumbnail ${index + 1}`}
                    width={100}
                    height={100}
                    style={{ 
                      width: '100%', 
                      height: '100%', 
                      objectFit: 'cover',
                      opacity: selectedImageIndex === index ? 1 : 0.7,
                      transition: 'opacity 0.2s'
                    }}
                  />
                </button>
              ))}
            </div>
          )}
        </div>
      ) : (
        <div
          style={{
            width: '100%',
            aspectRatio: '1 / 1',
            background: 'var(--bg-soft)',
            borderRadius: '16px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'var(--muted)',
          }}
        >
          {t('common.noImage')}
        </div>
      )}
      <div>
        <h2>{drop.item}</h2>
        {drop.description && (
          <div style={{ 
            marginTop: '12px', 
            marginBottom: '16px', 
            color: 'var(--muted)', 
            lineHeight: '1.6',
            fontSize: '15px'
          }}>
            {drop.description}
          </div>
        )}
        <div className="meta">
          {formatSize(drop.size, drop.unit)} {t('drop.batch')}
        </div>
        <div className="price">
          {(() => {
            // Get prices in user's currency
            const pricePerGram = getPricePerGram();
            const wholesalePricePerGram = getWholesalePricePerGram();
            
            if (isWholesaleUnlocked) {
              return (
                <>
                  <strong>{t('drop.wholesalePriceLabel')} {wholesalePricePerGram.toFixed(2)} {currency} / g</strong>
                  <span className="muted" style={{ display: 'block', marginTop: '6px', fontSize: '14px' }}>
                    {t('drop.standard')}: {pricePerGram.toFixed(2)} {currency} / g
                  </span>
                </>
              );
            }
            
            return (
              <>
                <strong>{t('drop.standardPriceLabel')} {pricePerGram.toFixed(2)} {currency} / g</strong>
                <span className="muted">
                  {t('drop.wholesale')}: {wholesalePricePerGram.toFixed(2)} {currency} / g 🔒 <a href="#unlock" onClick={(e) => { e.preventDefault(); setShowUnlockModal(true); }}>{t('drop.unlock')}</a>
                </span>
                <div className="hint">{t('drop.unlockOnce')}</div>
              </>
            );
          })()}
        </div>

        {isUpcoming ? (
          <div style={{ marginTop: '30px', padding: '20px', background: 'var(--bg-soft)', borderRadius: '12px', textAlign: 'center' }}>
            <p style={{ margin: 0, color: 'var(--muted)', fontSize: '16px' }}>
              {t('drop.dropStartsIn')} <strong>{timeUntilStart}</strong>
            </p>
          </div>
        ) : (
          <>
            <div className="progress">
              <div style={{ display: 'flex', height: '100%', width: '100%' }}>
                {salesPercentage > 0 && (
                  <span style={{ 
                    width: `${salesPercentage}%`, 
                    height: '100%',
                    background: 'linear-gradient(90deg, var(--accent), #1fa463)',
                    display: 'block'
                  }}></span>
                )}
                {pendingPercentage > 0 && (
                  <span style={{ 
                    width: `${pendingPercentage}%`, 
                    height: '100%',
                    background: '#808080',
                    display: 'block'
                  }}></span>
                )}
              </div>
            </div>
            <div className="meta">
              {(() => {
                const fillDisplay = drop.unit === 'kg' ? Math.round(drop.fill * 1000) : Math.round(drop.fill);
                const sizeDisplay = drop.unit === 'kg' ? Math.round(drop.size * 1000) : drop.size;
                return `${fillDisplay}g ${t('drop.of')} ${sizeDisplay}g ${t('drop.reserved')}`;
              })()}
            </div>
            {(() => {
              const pendingFill = Number(drop.pending_fill) || 0;
              console.log(`pending fill:${pendingFill}`)
              return pendingFill > 0 && (
                <div className="meta" style={{ fontSize: '12px', color: 'var(--muted)', marginTop: '4px' }}>
                  {drop.unit === 'kg' ? pendingFill.toFixed(2) : Math.round(pendingFill)}
                  {drop.unit} {t('drop.onHold')}
                </div>
              )
            })()}
          </>
        )}

        {!isUpcoming && hasRemaining && (
          <>
            <div style={{ display: 'flex', gap: '12px', alignItems: 'flex-start', flexWrap: 'wrap' }}>
              {availableSizes.length > 0 && (
                <div className="options" style={{ flex: '1', minWidth: '200px' }}>
                  {availableSizes.map((size) => (
                    <button
                      key={size}
                      className={selectedSize === size && !customQuantity ? 'active' : ''}
                      onClick={() => handleQuantityButtonClick(size)}
                    >
                      {size}g
                    </button>
                  ))}
                </div>
              )}
              <div style={{ flex: availableSizes.length > 0 ? '1' : '100%', minWidth: '150px' }}>
                <input
                  type="number"
                  value={customQuantity}
                  onChange={(e) => handleCustomQuantityChange(e.target.value)}
                  onBlur={validateCustomQuantity}
                  placeholder={t('drop.custom')}
                  min={getMinimumGrams()}
                  max={getRemainingInGrams()}
                  style={{
                    width: '100%',
                    padding: '14px',
                    borderRadius: '12px',
                    border: `1px solid ${quantityError ? '#dc2626' : 'var(--border)'}`,
                    background: 'var(--bg-soft)',
                    color: 'var(--text)',
                    fontSize: '14px',
                  }}
                />
                {quantityError && (
                  <div style={{ marginTop: '6px', fontSize: '12px', color: '#dc2626' }}>
                    {quantityError}
                  </div>
                )}
                {!quantityError && customQuantity && (
                  <div style={{ marginTop: '6px', fontSize: '12px', color: 'var(--muted)' }}>
                    {t('drop.min')}: {getMinimumGrams()}g · {t('drop.max')}: {getRemainingInGrams()}g
                  </div>
                )}
              </div>
            </div>

            <div style={{ marginTop: '24px', marginBottom: '16px' }}>
              {isWholesaleUnlocked ? (
                <>
                  <div style={{ fontSize: '18px', fontWeight: 500, marginBottom: '8px' }}>
                    {t('drop.total')}: {calculatePrice().toFixed(2)} {currency}
                  </div>
                  <div style={{ fontSize: '14px', color: 'var(--muted)' }}>
                    {t('drop.standardTotal')}: {calculateStandardPrice().toFixed(2)} {currency}
                  </div>
                </>
              ) : (
                <>
                  <div style={{ fontSize: '18px', fontWeight: 500, marginBottom: '8px' }}>
                    {t('drop.total')}: {calculateStandardPrice().toFixed(2)} {currency}
                  </div>
                  <div style={{ fontSize: '14px', color: 'var(--muted)', display: 'flex', alignItems: 'center', gap: '6px' }}>
                    {t('drop.wholesaleTotal')}: {calculateWholesalePrice().toFixed(2)} {currency} 🔒
                  </div>
                </>
              )}
            </div>

            <button className="cta" onClick={handleJoinDrop}>
              {t('drop.joinTheDrop')}
            </button>
            <div className="cta-note">{t('drop.noSubscription')}</div>
          </>
        )}

        {hasRemaining && availableSizes.length === 0 && (
          <div style={{ marginTop: '30px', padding: '20px', background: 'var(--bg-soft)', borderRadius: '12px', textAlign: 'center' }}>
            <p style={{ margin: 0, color: 'var(--muted)' }}>
              {t('drop.lessThanRemaining', { amount: 50, unit: drop.unit })}
            </p>
          </div>
        )}

        {!hasRemaining && (
          <div style={{ marginTop: '30px', padding: '20px', background: 'var(--bg-soft)', borderRadius: '12px', textAlign: 'center' }}>
            <p style={{ margin: 0, color: 'var(--muted)' }}>{t('drop.fullyReservedText')}</p>
          </div>
        )}
      </div>

      {/* Confirmation Modal */}
      {showConfirmModal && drop && (
        <div
          style={{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            background: 'rgba(0, 0, 0, 0.7)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            zIndex: 1000,
            padding: '20px',
          }}
          onClick={handleCancelPurchase}
        >
          <div
            style={{
              background: 'var(--card)',
              borderRadius: '16px',
              padding: '32px',
              maxWidth: '500px',
              width: '100%',
              maxHeight: '90vh',
              overflowY: 'auto',
              boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)',
            }}
            onClick={(e) => e.stopPropagation()}
          >
            <h2 style={{ marginTop: 0, marginBottom: '20px' }}>
              {t('drop.confirmPurchase')}
            </h2>
            <div style={{ marginBottom: '24px' }}>
              <p style={{ marginBottom: '12px', color: 'var(--muted)' }}>
                <strong>{t('drop.item')}:</strong> {drop.item}
              </p>
              <p style={{ marginBottom: '12px', color: 'var(--muted)' }}>
                <strong>{t('drop.quantity')}:</strong> {selectedSize}g
              </p>
              <p style={{ marginBottom: '12px', color: 'var(--muted)' }}>
                <strong>{t('drop.pricePerUnit', { unit: drop.unit })}:</strong> {getPricePerGram().toFixed(2)} {currency}
              </p>

              {/* Delivery Information */}
              <div style={{ marginTop: '24px', marginBottom: '16px' }}>
                <h3 style={{ marginBottom: '16px', fontSize: '16px', color: 'var(--text)' }}>
                  {t('drop.deliveryInformation')}
                </h3>
                
                <div style={{ marginBottom: '12px' }}>
                  <label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', color: 'var(--muted)' }}>
                    <strong>{t('drop.fullNameRequired')}</strong>
                  </label>
                  <input
                    type="text"
                    value={buyerFullname}
                    onChange={(e) => setBuyerFullname(e.target.value)}
                    placeholder={t('drop.enterFullName')}
                    required
                    style={{
                      width: '100%',
                      padding: '12px',
                      background: 'var(--bg-soft)',
                      border: '1px solid var(--border)',
                      borderRadius: '8px',
                      fontSize: '14px',
                      color: 'var(--text)',
                      boxSizing: 'border-box',
                    }}
                  />
                </div>

                <div style={{ marginBottom: '12px' }}>
                  <label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', color: 'var(--muted)' }}>
                    <strong>{t('drop.addressRequired')}</strong>
                  </label>
                  <textarea
                    value={buyerAddress}
                    onChange={(e) => setBuyerAddress(e.target.value)}
                    placeholder={t('drop.enterAddress')}
                    required
                    rows={3}
                    style={{
                      width: '100%',
                      padding: '12px',
                      background: 'var(--bg-soft)',
                      border: '1px solid var(--border)',
                      borderRadius: '8px',
                      fontSize: '14px',
                      color: 'var(--text)',
                      fontFamily: 'inherit',
                      resize: 'vertical',
                      boxSizing: 'border-box',
                    }}
                  />
                </div>

                <div style={{ marginBottom: '12px' }}>
                  <label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', color: 'var(--muted)' }}>
                    <strong>{t('drop.phoneRequired')}</strong>
                  </label>
                  <input
                    type="tel"
                    value={buyerPhone}
                    onChange={(e) => setBuyerPhone(e.target.value)}
                    placeholder={t('drop.enterPhone')}
                    required
                    style={{
                      width: '100%',
                      padding: '12px',
                      background: 'var(--bg-soft)',
                      border: '1px solid var(--border)',
                      borderRadius: '8px',
                      fontSize: '14px',
                      color: 'var(--text)',
                      boxSizing: 'border-box',
                    }}
                  />
                </div>
              </div>

              {/* Currency Selection */}
              <div style={{ marginTop: '24px', marginBottom: '16px' }}>
                <label style={{ display: 'block', marginBottom: '8px', fontSize: '14px', color: 'var(--muted)' }}>
                  <strong>{t('drop.paymentCurrency')}:</strong>
                </label>
                {loadingCurrencies ? (
                  <p style={{ color: 'var(--muted)', fontSize: '14px' }}>{t('drop.loadingCurrencies')}</p>
                ) : (
                  <select
                    value={selectedCurrency}
                    onChange={(e) => setSelectedCurrency(e.target.value)}
                    style={{
                      width: '100%',
                      padding: '12px',
                      background: 'var(--bg-soft)',
                      border: '1px solid var(--border)',
                      borderRadius: '8px',
                      fontSize: '14px',
                      color: 'var(--text)',
                      cursor: 'pointer',
                    }}
                  >
                    {availableCurrencies.map((currency, index) => {
                      // Ensure currency is a string - handle both string and object cases
                      let currencyStr: string
                      if (typeof currency === 'string') {
                        currencyStr = currency.trim().toLowerCase()
                      } else if (currency && typeof currency === 'object') {
                        // If it's an object, try to extract a string value
                        currencyStr = (currency as any).value || (currency as any).code || String(currency).trim().toLowerCase()
                      } else {
                        currencyStr = String(currency || '').trim().toLowerCase()
                      }
                      
                      // Fallback if we still don't have a valid string
                      if (!currencyStr || currencyStr === '[object object]' || currencyStr === 'null' || currencyStr === 'undefined') {
                        console.warn('Invalid currency value:', currency, 'at index', index)
                        return null
                      }
                      
                      return (
                        <option key={`${currencyStr}-${index}`} value={currencyStr}>
                          {currencyStr.toUpperCase()}
                        </option>
                      )
                    }).filter(Boolean)}
                  </select>
                )}
              </div>

              {/* Referral Points Usage */}
              {user && referralPoints > 0 && (
                <div style={{ marginTop: '24px', marginBottom: '16px' }}>
                  <label style={{ display: 'block', marginBottom: '8px', fontSize: '14px', color: 'var(--muted)' }}>
                    <strong style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
                      <Image 
                        src="/icon_ref_points.png" 
                        alt="Referral Points" 
                        width={18} 
                        height={18}
                        style={{ display: 'inline-block', verticalAlign: 'middle' }}
                      />
                      {t('drop.useReferralPoints')}
                    </strong>
                    <span style={{ marginLeft: '8px', fontSize: '12px', color: 'var(--muted)' }}>
                      ({referralPoints.toFixed(0)} {t('drop.available')})
                    </span>
                  </label>
                  <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
                    <input
                      type="number"
                      min="0"
                      max={referralPoints}
                      step="1"
                      value={pointsToUse}
                      onChange={(e) => handlePointsToUseChange(e.target.value)}
                      style={{
                        flex: 1,
                        padding: '12px',
                        background: 'var(--bg-soft)',
                        border: '1px solid var(--border)',
                        borderRadius: '8px',
                        fontSize: '14px',
                        color: 'var(--text)',
                      }}
                      placeholder="0"
                    />
                    <button
                      type="button"
                      onClick={() => {
                        const priceEur = currency === 'CHF' ? calculatePriceBeforeDiscount() / 0.97 : calculatePriceBeforeDiscount()
                        const maxPoints = Math.min(referralPoints, priceEur * pointsToEur)
                        setPointsToUse(maxPoints)
                      }}
                      style={{
                        padding: '12px 16px',
                        background: 'var(--bg-soft)',
                        border: '1px solid var(--border)',
                        borderRadius: '8px',
                        fontSize: '12px',
                        color: 'var(--text)',
                        cursor: 'pointer',
                        whiteSpace: 'nowrap',
                      }}
                    >
                      {t('drop.useMax')}
                    </button>
                  </div>
                  {pointsToUse > 0 && (
                    <div style={{ marginTop: '8px', fontSize: '12px', color: '#0a7931' }}>
                      {t('drop.pointsDiscount')}: {calculateDiscountFromPoints().toFixed(2)} {currency === 'CHF' ? 'CHF' : 'EUR'}
                    </div>
                  )}
                </div>
              )}

              <div
                style={{
                  padding: '16px',
                  background: 'var(--bg-soft)',
                  borderRadius: '8px',
                  marginTop: '16px',
                }}
              >
                <div style={{ marginBottom: '12px' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
                    <span style={{ color: 'var(--muted)', fontSize: '14px' }}>{t('drop.subtotal')}:</span>
                    <span style={{ fontWeight: 500, fontSize: '14px' }}>
                      {calculatePriceBeforeDiscount().toFixed(2)} {currency}
                    </span>
                  </div>
                  {pointsToUse > 0 && (
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
                      <span style={{ color: '#0a7931', fontSize: '14px', display: 'flex', alignItems: 'center', gap: '6px' }}>
                        <Image 
                          src="/icon_ref_points.png" 
                          alt="Referral Points" 
                          width={16} 
                          height={16}
                          style={{ display: 'inline-block', verticalAlign: 'middle' }}
                        />
                        {t('drop.pointsDiscount')}:
                      </span>
                      <span style={{ fontWeight: 500, fontSize: '14px', color: '#0a7931' }}>
                        -{calculateDiscountFromPoints().toFixed(2)} {currency}
                      </span>
                    </div>
                  )}
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
                    <span style={{ color: 'var(--muted)', fontSize: '14px' }}>{t('drop.shippingFee')}:</span>
                    <span style={{ fontWeight: 500, fontSize: '14px' }}>
                      {loadingShippingFee ? '...' : (shippingFee !== null ? shippingFee.toFixed(2) : '40.00')} {currency}
                    </span>
                  </div>
                  <div style={{ marginBottom: '8px', marginLeft: '0', paddingLeft: '0' }}>
                    <span style={{ color: 'var(--muted)', fontSize: '12px', fontStyle: 'italic' }}>
                      {t('drop.shippingFeeNote')}
                    </span>
                  </div>
                  <div style={{ 
                    display: 'flex', 
                    justifyContent: 'space-between', 
                    marginTop: '12px', 
                    paddingTop: '12px', 
                    borderTop: '1px solid var(--border)' 
                  }}>
                    <span style={{ fontSize: '18px', fontWeight: 'bold' }}>{t('drop.total')}:</span>
                    <span style={{ fontSize: '18px', fontWeight: 'bold' }}>
                      {loadingShippingFee ? '...' : ((calculatePrice() + (shippingFee || 40)).toFixed(2))} {currency}
                    </span>
                  </div>
                  {pointsToUse > 0 && (
                    <div style={{ marginTop: '8px', fontSize: '12px', color: '#0a7931', fontStyle: 'italic' }}>
                      {t('drop.pointsWillBeDeducted')}
                    </div>
                  )}
                </div>
                <p
                  style={{
                    margin: '4px 0 0 0',
                    fontSize: '14px',
                    color: 'var(--muted)',
                  }}
                >
                  {t('drop.inclVat')}
                </p>
                <p
                  style={{
                    margin: '8px 0 0 0',
                    fontSize: '12px',
                    color: 'var(--muted)',
                  }}
                >
                  {t('drop.payWith')}: {String(selectedCurrency || '').toUpperCase()}
                </p>
              </div>
            </div>
            <div
              style={{
                display: 'flex',
                gap: '12px',
                justifyContent: 'flex-end',
                marginTop: '24px',
              }}
            >
              <button
                onClick={handleCancelPurchase}
                disabled={processing}
                style={{
                  padding: '12px 24px',
                  background: '#dc2626',
                  border: 'none',
                  borderRadius: '14px',
                  cursor: processing ? 'not-allowed' : 'pointer',
                  color: '#fff',
                  fontSize: '15px',
                  fontWeight: 500,
                  opacity: processing ? 0.6 : 1,
                  lineHeight: '1.5',
                  boxSizing: 'border-box',
                  display: 'inline-block',
                }}
              >
                {t('common.cancel')}
              </button>
              <button
                onClick={handleConfirmPurchase}
                disabled={processing}
                style={{
                  padding: '12px 24px',
                  background: '#0a7931',
                  color: '#fff',
                  border: 'none',
                  borderRadius: '14px',
                  cursor: processing ? 'not-allowed' : 'pointer',
                  fontSize: '15px',
                  fontWeight: 500,
                  opacity: processing ? 0.6 : 1,
                  lineHeight: '1.5',
                  boxSizing: 'border-box',
                  display: 'inline-block',
                }}
              >
                {processing ? t('common.processing') : t('drop.confirmPurchase')}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Auth Modal */}
      <Suspense fallback={null}>
        <AuthModal
          isOpen={showAuthModal}
          onClose={() => setShowAuthModal(false)}
          onLogin={handleLogin}
        />
      </Suspense>

      {/* Unlock Modal */}
      <UnlockModal
        isOpen={showUnlockModal}
        onClose={() => setShowUnlockModal(false)}
      />

      {/* Success Modal */}
      {showSuccessModal && (
        <div
          style={{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            background: 'rgba(0, 0, 0, 0.7)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            zIndex: 1001,
            padding: '20px',
          }}
          onClick={() => setShowSuccessModal(false)}
        >
          <div
            style={{
              background: 'var(--card)',
              borderRadius: '16px',
              padding: '32px',
              maxWidth: '500px',
              width: '100%',
              boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)',
            }}
            onClick={(e) => e.stopPropagation()}
          >
            <h2 style={{ marginTop: 0, marginBottom: '20px', color: '#0a7931' }}>
              {t('drop.paymentConfirmed')}
            </h2>
            <p style={{ marginBottom: '16px', color: 'var(--text)' }}>
              {t('drop.orderProcessed')}
            </p>
            <div style={{ marginBottom: '24px' }}>
              <p style={{ marginBottom: '12px', fontWeight: '600', color: 'var(--text)' }}>
                {t('drop.whatHappensNext')}:
              </p>
              <ul style={{ 
                margin: 0, 
                paddingLeft: '20px', 
                color: 'var(--muted)',
                lineHeight: '1.8'
              }}>
                <li>{t('drop.orderProcessed24h')}</li>
                <li>{t('drop.shippedExpress')}</li>
                <li>{t('drop.shippingConfirmation')}</li>
              </ul>
            </div>
            <p style={{ marginBottom: '24px', color: 'var(--muted)', fontStyle: 'italic' }}>
              {t('drop.thankYouCollective')}
            </p>
            <div style={{ display: 'flex', gap: '12px', justifyContent: 'flex-end' }}>
              <button
                onClick={() => {
                  setShowSuccessModal(false)
                  setPaymentData(null)
                }}
                style={{
                  padding: '12px 24px',
                  background: '#0a7931',
                  color: '#fff',
                  border: 'none',
                  borderRadius: '14px',
                  cursor: 'pointer',
                  fontSize: '15px',
                  fontWeight: 500,
                  lineHeight: '1.5',
                  boxSizing: 'border-box',
                  display: 'inline-block',
                }}
              >
                {t('common.close')}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Error Modal */}
      {showErrorModal && (
        <div
          style={{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            background: 'rgba(0, 0, 0, 0.7)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            zIndex: 1001,
            padding: '20px',
          }}
          onClick={() => {
            setShowErrorModal(false)
            setErrorMessage('')
            // Don't refresh - just return to drop view as is
          }}
        >
          <div
            style={{
              background: 'var(--card)',
              borderRadius: '16px',
              padding: '32px',
              maxWidth: '500px',
              width: '100%',
              boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)',
            }}
            onClick={(e) => e.stopPropagation()}
          >
            <h2 style={{ marginTop: 0, marginBottom: '20px', color: '#dc2626' }}>
              {t('drop.error')}
            </h2>
            <p style={{ marginBottom: '24px', color: 'var(--muted)' }}>
              {errorMessage}
            </p>
            <div style={{ display: 'flex', gap: '12px', justifyContent: 'flex-end' }}>
              <button
                onClick={() => {
                  setShowErrorModal(false)
                  setErrorMessage('')
                  // Don't refresh - just return to drop view as is
                  // The drop should still be visible with current inventory state
                }}
                style={{
                  padding: '12px 24px',
                  background: '#dc2626',
                  color: '#fff',
                  border: 'none',
                  borderRadius: '14px',
                  cursor: 'pointer',
                  fontSize: '15px',
                  fontWeight: 500,
                  lineHeight: '1.5',
                  boxSizing: 'border-box',
                  display: 'inline-block',
                }}
              >
                {t('common.close')}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Payment Modal */}
      {showPaymentModal && paymentData && (
        <div
          style={{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            background: 'rgba(0, 0, 0, 0.7)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            zIndex: 1000,
            padding: '20px',
          }}
          onClick={async () => {
            // Check if payment was already processed before cancelling
            if (paymentData?.payment_id) {
              try {
                const statusResponse = await fetch(`/api/payments/check-status?payment_id=${paymentData.payment_id}`, {
                  credentials: 'include',
                })
                
                if (statusResponse.ok) {
                  const status = await statusResponse.json()
                  // Only cancel if payment hasn't been processed yet
                  if (status.has_pending_order && !status.has_sale) {
                    await fetch('/api/payments/cancel-pending', {
                      method: 'DELETE',
                      headers: {
                        'Content-Type': 'application/json',
                      },
                      credentials: 'include',
                      body: JSON.stringify({
                        payment_id: paymentData.payment_id,
                      }),
                    })
                  }
                }
              } catch (error) {
                console.error('Error checking/cancelling pending order:', error)
              }
            }
            setShowPaymentModal(false)
            // Refresh drop data to show updated inventory
            await fetchActiveDrop()
          }}
        >
          <div
            style={{
              background: 'var(--card)',
              borderRadius: '16px',
              padding: '32px',
              maxWidth: '600px',
              width: '100%',
              boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)',
            }}
            onClick={(e) => e.stopPropagation()}
          >
            <h2 style={{ marginTop: 0, marginBottom: '20px' }}>
              {t('drop.completePayment')}
            </h2>
            
            <div style={{ marginBottom: '24px' }}>
              <p style={{ marginBottom: '12px', color: 'var(--muted)' }}>
                <strong>{t('drop.amountToPay')}:</strong> {paymentData.pay_amount} {paymentData.pay_currency.toUpperCase()}
              </p>
              
              <div style={{ 
                marginTop: '20px', 
                marginBottom: '20px', 
                padding: '16px', 
                background: 'var(--bg-soft)', 
                borderRadius: '8px' 
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
                  <span style={{ color: 'var(--muted)' }}>{t('drop.subtotal')}:</span>
                  <span style={{ fontWeight: 500 }}>
                    {paymentData.subtotal?.toFixed(2) || (paymentData.price_amount - (paymentData.shipping_fee || 0)).toFixed(2)} {paymentData.price_currency.toUpperCase()}
                  </span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
                  <span style={{ color: 'var(--muted)' }}>{t('drop.shippingFee')}:</span>
                  <span style={{ fontWeight: 500 }}>
                    {paymentData.shipping_fee?.toFixed(2) || '0.00'} {paymentData.price_currency.toUpperCase()}
                  </span>
                </div>
                <div style={{ marginBottom: '8px', marginLeft: '0', paddingLeft: '0' }}>
                  <span style={{ color: 'var(--muted)', fontSize: '12px', fontStyle: 'italic' }}>
                    {t('drop.shippingFeeNote')}
                  </span>
                </div>
                <div style={{ 
                  display: 'flex', 
                  justifyContent: 'space-between', 
                  marginTop: '12px', 
                  paddingTop: '12px', 
                  borderTop: '1px solid var(--border)' 
                }}>
                  <span style={{ fontWeight: 600, fontSize: '16px' }}>{t('drop.total')}:</span>
                  <span style={{ fontWeight: 600, fontSize: '16px' }}>
                    {paymentData.price_amount} {paymentData.price_currency.toUpperCase()}
                  </span>
                </div>
              </div>
              
              <div style={{ marginTop: '20px', marginBottom: '20px' }}>
                <label style={{ display: 'block', marginBottom: '8px', fontSize: '14px', color: 'var(--muted)' }}>
                  {t('drop.sendPaymentTo')}
                </label>
                <div
                  style={{
                    padding: '12px',
                    background: 'var(--bg-soft)',
                    borderRadius: '8px',
                    fontFamily: 'monospace',
                    fontSize: '14px',
                    wordBreak: 'break-all',
                    marginBottom: '12px',
                  }}
                >
                  {paymentData.pay_address}
                </div>
                <button
                  onClick={(e) => {
                    navigator.clipboard.writeText(paymentData.pay_address)
                    // Show brief success feedback
                    const button = e.currentTarget as HTMLButtonElement
                    const originalText = button.textContent
                    button.textContent = 'Copied!'
                    setTimeout(() => {
                      if (button) button.textContent = originalText
                    }, 2000)
                  }}
                  style={{
                    padding: '8px 16px',
                    background: 'var(--bg-soft)',
                    border: '1px solid var(--border)',
                    borderRadius: '8px',
                    cursor: 'pointer',
                    fontSize: '14px',
                  }}
                >
                  {t('drop.copyAddress')}
                </button>
              </div>

              {paymentData.payin_extra_id && (
                <div style={{ marginTop: '20px', marginBottom: '20px' }}>
                  <label style={{ display: 'block', marginBottom: '8px', fontSize: '14px', color: 'var(--muted)' }}>
                    {t('drop.memoRequired')}:
                  </label>
                  <div
                    style={{
                      padding: '12px',
                      background: 'var(--bg-soft)',
                      borderRadius: '8px',
                      fontFamily: 'monospace',
                      fontSize: '14px',
                      marginBottom: '12px',
                    }}
                  >
                    {paymentData.payin_extra_id}
                  </div>
                  <button
                    onClick={(e) => {
                      navigator.clipboard.writeText(paymentData.payin_extra_id)
                      // Show brief success feedback
                      const button = e.currentTarget as HTMLButtonElement
                      const originalText = button.textContent
                      button.textContent = 'Copied!'
                      setTimeout(() => {
                        if (button) button.textContent = originalText
                    }, 2000)
                  }}
                  style={{
                    padding: '8px 16px',
                    background: 'var(--bg-soft)',
                    border: '1px solid var(--border)',
                    borderRadius: '8px',
                    cursor: 'pointer',
                    fontSize: '14px',
                  }}
                >
                  {t('drop.copyMemo')}
                </button>
                </div>
              )}

              {paymentData.expiration_estimate_date && (
                <p style={{ marginTop: '16px', fontSize: '12px', color: 'var(--muted)' }}>
                  {t('drop.paymentExpires')}: {new Date(paymentData.expiration_estimate_date).toLocaleString()}
                </p>
              )}

              <div style={{ marginTop: '24px', padding: '16px', background: 'var(--bg-soft)', borderRadius: '8px' }}>
                <p style={{ margin: 0, fontSize: '14px', color: 'var(--muted)' }}>
                  <strong>{t('drop.status')}:</strong> {paymentData.payment_status}
                </p>
                <p style={{ margin: '12px 0 0 0', fontSize: '12px', color: '#dc2626', fontWeight: 500 }}>
                  {t('drop.closingWarning')}
                </p>
              </div>
            </div>

            <div style={{ display: 'flex', gap: '12px', justifyContent: 'flex-end' }}>
              <button
          onClick={async () => {
            // Check if payment was already processed before cancelling
            if (paymentData?.payment_id) {
              try {
                const statusResponse = await fetch(`/api/payments/check-status?payment_id=${paymentData.payment_id}`, {
                  credentials: 'include',
                })
                
                if (statusResponse.ok) {
                  const status = await statusResponse.json()
                  // Only cancel if payment hasn't been processed yet
                  if (status.has_pending_order && !status.has_sale) {
                    await fetch('/api/payments/cancel-pending', {
                      method: 'DELETE',
                      headers: {
                        'Content-Type': 'application/json',
                      },
                      credentials: 'include',
                      body: JSON.stringify({
                        payment_id: paymentData.payment_id,
                      }),
                    })
                  }
                }
              } catch (error) {
                console.error('Error checking/cancelling pending order:', error)
              }
            }
            setShowPaymentModal(false)
            // Refresh drop data to show updated inventory
            await fetchActiveDrop()
          }}
                style={{
                  padding: '12px 24px',
                  background: '#dc2626',
                  border: 'none',
                  borderRadius: '14px',
                  cursor: 'pointer',
                  color: '#fff',
                  fontSize: '15px',
                  fontWeight: 500,
                  lineHeight: '1.5',
                  boxSizing: 'border-box',
                  display: 'inline-block',
                }}
              >
                {t('common.close')}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}