'use client'

import { useState, useEffect } from 'react'
import { Button } from '@/components/ui/button'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Textarea } from '@/components/ui/textarea'
import { Badge } from '@/components/ui/badge'
import Image from 'next/image'
import { AuthManager } from '@/lib/data-api'
import { CheckCircle2, DollarSign } from 'lucide-react'

interface PendingAdsTableProps {
  onUpdate?: () => void
}

export function PendingAdsTable({ onUpdate }: PendingAdsTableProps) {
  const [ads, setAds] = useState([])
  const [selectedAd, setSelectedAd] = useState<any>(null)
  const [rejectReason, setRejectReason] = useState('')
  const [isRejectDialogOpen, setIsRejectDialogOpen] = useState(false)
  
  const handleApprove = async (adId: string) => {
    try {
      const token = AuthManager.getToken()
      if (!token) {
        console.error('No auth token found')
        return
      }
      
      const response = await fetch('/api/admin/ads/approve', {
        method: 'POST',
        headers: { 
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify({ adId })
      })
      
      if (response.ok) {
        // Refresh list
        loadPendingAds()
        onUpdate?.()
      }
    } catch (error) {
      console.error('Error approving ad:', error)
    }
  }
  
  const handleReject = async () => {
    if (!selectedAd || !rejectReason) return
    
    try {
      const token = AuthManager.getToken()
      if (!token) {
        console.error('No auth token found')
        return
      }
      
      const response = await fetch('/api/admin/ads/reject', {
        method: 'POST',
        headers: { 
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify({ 
          adId: selectedAd._id,
          reason: rejectReason
        })
      })
      
      if (response.ok) {
        setIsRejectDialogOpen(false)
        setRejectReason('')
        loadPendingAds()
        onUpdate?.()
      }
    } catch (error) {
      console.error('Error rejecting ad:', error)
    }
  }
  
  const loadPendingAds = async () => {
    try {
      const token = AuthManager.getToken()
      if (!token) {
        console.error('No auth token found')
        return
      }
      
      const response = await fetch('/api/admin/ads/list?status=pending', {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      })
      if (response.ok) {
        const data = await response.json()
        setAds(data.ads)
      }
    } catch (error) {
      console.error('Error loading pending ads:', error)
    }
  }
  
  useEffect(() => {
    loadPendingAds()
  }, [])
  
  return (
    <div className="bg-white rounded-lg shadow">
      <table className="w-full">
        <thead>
          <tr className="border-b">
            <th className="p-4 text-left">Image</th>
            <th className="p-4 text-left">Facility</th>
            <th className="p-4 text-left">Contact Email</th>
            <th className="p-4 text-left">Placement</th>
            <th className="p-4 text-left">Dates</th>
            <th className="p-4 text-left">Payment</th>
            <th className="p-4 text-left">Actions</th>
          </tr>
        </thead>
        <tbody>
          {ads.length === 0 ? (
            <tr>
              <td colSpan={7} className="p-8 text-center text-gray-500">
                No pending ads to review
              </td>
            </tr>
          ) : (
            ads.map((ad: any) => (
              <tr key={ad._id} className="border-b hover:bg-gray-50">
                <td className="p-4">
                  <Image 
                    src={ad.imageUrl} 
                    alt={ad.facilityName}
                    width={100}
                    height={60}
                    className="rounded"
                  />
                </td>
                <td className="p-4">
                  <div className="font-medium">{ad.facilityName}</div>
                  {ad.location && (
                    <div className="text-xs text-gray-500">{ad.location}</div>
                  )}
                </td>
                <td className="p-4">
                  <a href={`mailto:${ad.contactEmail}`} className="text-blue-600 hover:underline text-sm">
                    {ad.contactEmail}
                  </a>
                </td>
                <td className="p-4">
                  <span className="px-2 py-1 text-xs rounded bg-blue-100 text-blue-800">
                    {ad.placementType}
                  </span>
                </td>
                <td className="p-4 text-sm">
                  <div>{new Date(ad.startDate).toLocaleDateString()}</div>
                  <div className="text-gray-500">{new Date(ad.endDate).toLocaleDateString()}</div>
                </td>
                <td className="p-4">
                  <div className="flex flex-col gap-1">
                    <div className="font-bold text-green-700">${ad.pricing.totalCost}</div>
                    <Badge className="bg-green-100 text-green-800 hover:bg-green-100 w-fit">
                      <CheckCircle2 className="w-3 h-3 mr-1" />
                      Paid
                    </Badge>
                    {ad.payment?.stripePaymentIntentId && (
                      <div className="text-xs text-gray-500 font-mono">
                        {ad.payment.stripePaymentIntentId.substring(0, 20)}...
                      </div>
                    )}
                  </div>
                </td>
                <td className="p-4 space-x-2">
                  <Button 
                    size="sm"
                    onClick={() => handleApprove(ad._id)}
                    className="bg-green-600 hover:bg-green-700"
                  >
                    Approve
                  </Button>
                  <Button 
                    size="sm"
                    variant="destructive"
                    onClick={() => {
                      setSelectedAd(ad)
                      setIsRejectDialogOpen(true)
                    }}
                  >
                    Reject
                  </Button>
                </td>
              </tr>
            ))
          )}
        </tbody>
      </table>
      
      {/* Reject Dialog */}
      <Dialog open={isRejectDialogOpen} onOpenChange={setIsRejectDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Reject Ad Campaign</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <Textarea
              placeholder="Reason for rejection..."
              value={rejectReason}
              onChange={(e) => setRejectReason(e.target.value)}
            />
            <div className="flex justify-end space-x-2">
              <Button variant="outline" onClick={() => setIsRejectDialogOpen(false)}>
                Cancel
              </Button>
              <Button variant="destructive" onClick={handleReject}>
                Reject & Refund
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}