'use client'

import { useState, useEffect } from 'react'
import Image from 'next/image'
import AuthModal from './AuthModal'

interface DropData {
  id: number
  item: string
  size: number
  fill: number
  unit: string
  ppu: number
  image_url: string | null
  created_at: string
}

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

export default function Drop() {
  const [drop, setDrop] = useState<DropData | null>(null)
  const [loading, setLoading] = useState(true)
  const [selectedSize, setSelectedSize] = useState(50)
  const [showConfirmModal, setShowConfirmModal] = useState(false)
  const [showAuthModal, setShowAuthModal] = useState(false)
  const [processing, setProcessing] = useState(false)
  const [user, setUser] = useState<User | null>(null)
  const [checkingAuth, setCheckingAuth] = useState(true)

  useEffect(() => {
    fetchActiveDrop()
    checkAuth()
  }, [])

  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')
      if (response.ok) {
        const data = await response.json()
        setDrop(data)
      }
    } catch (error) {
      console.error('Error fetching active drop:', error)
    } 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 handleJoinDrop = () => {
    // Check if user is logged in
    if (!user) {
      setShowAuthModal(true)
      return
    }
    setShowConfirmModal(true)
  }

  const handleLogin = (loggedInUser: User) => {
    setUser(loggedInUser)
    setShowAuthModal(false)
    // After login, show the confirmation modal
    setShowConfirmModal(true)
  }

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

    setProcessing(true)
    try {
      // Create NOWPayments invoice and sale record
      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
        }),
      })

      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
        }
        alert(`Error: ${error.error || 'Failed to create payment invoice'}`)
        setProcessing(false)
        return
      }

      const data = await response.json()

      // Close modal
      setShowConfirmModal(false)

      // Redirect to NOWPayments invoice
      if (data.invoice_url) {
        window.location.href = data.invoice_url
      } else {
        alert('Payment invoice created but no redirect URL received')
        await fetchActiveDrop()
      }
    } catch (error) {
      console.error('Error creating payment invoice:', error)
      alert('Failed to create payment invoice. Please try again.')
      setProcessing(false)
    }
  }

  const handleCancelPurchase = () => {
    setShowConfirmModal(false)
  }

  const calculatePrice = () => {
    if (!drop) return 0
    if (drop.unit === 'kg') {
      return (selectedSize / 1000) * drop.ppu
    }
    return selectedSize * drop.ppu
  }

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

  if (!drop) {
    return (
      <div className="drop">
        <div style={{ gridColumn: '1 / -1', textAlign: 'center', padding: '60px' }}>
          <h2 style={{ marginBottom: '16px' }}>Drop Sold Out</h2>
          <p style={{ color: 'var(--muted)', marginBottom: '20px' }}>
            The current collective drop has been fully reserved.
          </p>
          <p style={{ color: 'var(--muted)' }}>
            Next collective drop coming soon.
          </p>
        </div>
      </div>
    )
  }

  const progressPercentage = getProgressPercentage(drop.fill, drop.size)
  const availableSizes = getAvailableSizes()
  
  // Calculate remaining in the drop's unit
  const remaining = drop.size - drop.fill
  const hasRemaining = remaining > 0

  return (
    <div className="drop">
      {drop.image_url ? (
        <Image
          src={drop.image_url}
          alt={drop.item}
          width={420}
          height={420}
          style={{ width: '100%', height: 'auto', borderRadius: '16px', objectFit: 'cover' }}
        />
      ) : (
        <div
          style={{
            width: '100%',
            aspectRatio: '1 / 1',
            background: 'var(--bg-soft)',
            borderRadius: '16px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'var(--muted)',
          }}
        >
          No Image
        </div>
      )}
      <div>
        <h2>{drop.item}</h2>
        <div className="meta">
          {formatSize(drop.size, drop.unit)} Batch
        </div>
        <div className="price">
          {drop.ppu.toFixed(2)} CHF / {drop.unit} · incl. 2.5% VAT
        </div>

        <div className="progress">
          <span style={{ width: `${progressPercentage}%` }}></span>
        </div>
        <div className="meta">
          {drop.unit === 'kg' ? drop.fill.toFixed(2) : Math.round(drop.fill)}
          {drop.unit} of {drop.size}
          {drop.unit} reserved
        </div>

        {hasRemaining && availableSizes.length > 0 && (
          <>
            <div className="options">
              {availableSizes.map((size) => (
                <button
                  key={size}
                  className={selectedSize === size ? 'active' : ''}
                  onClick={() => setSelectedSize(size)}
                >
                  {size}g
                </button>
              ))}
            </div>

            <button className="cta" onClick={handleJoinDrop}>
              Join Drop
            </button>
          </>
        )}

        {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)' }}>
              Less than 50{drop.unit} remaining. This drop is almost fully reserved.
            </p>
          </div>
        )}

        {!hasRemaining && (
          <div style={{ marginTop: '30px', padding: '20px', background: 'var(--bg-soft)', borderRadius: '12px', textAlign: 'center' }}>
            <p style={{ margin: 0, color: 'var(--muted)' }}>This drop is fully reserved</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%',
              boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)',
            }}
            onClick={(e) => e.stopPropagation()}
          >
            <h2 style={{ marginTop: 0, marginBottom: '20px' }}>
              Confirm Purchase
            </h2>
            <div style={{ marginBottom: '24px' }}>
              <p style={{ marginBottom: '12px', color: 'var(--muted)' }}>
                <strong>Item:</strong> {drop.item}
              </p>
              <p style={{ marginBottom: '12px', color: 'var(--muted)' }}>
                <strong>Quantity:</strong> {selectedSize}g
              </p>
              <p style={{ marginBottom: '12px', color: 'var(--muted)' }}>
                <strong>Price per {drop.unit}:</strong> {drop.ppu.toFixed(2)} CHF
              </p>
              <div
                style={{
                  padding: '16px',
                  background: 'var(--bg-soft)',
                  borderRadius: '8px',
                  marginTop: '16px',
                }}
              >
                <p style={{ margin: 0, fontSize: '18px', fontWeight: 'bold' }}>
                  Total: {calculatePrice().toFixed(2)} CHF
                </p>
                <p
                  style={{
                    margin: '4px 0 0 0',
                    fontSize: '14px',
                    color: 'var(--muted)',
                  }}
                >
                  incl. 2.5% VAT
                </p>
              </div>
            </div>
            <div
              style={{
                display: 'flex',
                gap: '12px',
                justifyContent: 'flex-end',
              }}
            >
              <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',
                }}
              >
                Cancel
              </button>
              <button
                onClick={handleConfirmPurchase}
                disabled={processing}
                style={{
                  padding: '12px 24px',
                  background: 'var(--accent)',
                  color: '#000',
                  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 ? 'Processing...' : 'Confirm Purchase'}
              </button>
            </div>
          </div>
        </div>
      )}

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