'use client'

import { useState, useEffect } from 'react'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent } from '@/components/ui/card'
import Image from 'next/image'
import { AuthManager } from '@/lib/data-api'
import { Calendar, Eye, MousePointerClick, TrendingUp, ExternalLink } from 'lucide-react'

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

export function ActiveAdsTable({ onUpdate }: ActiveAdsTableProps) {
  const [ads, setAds] = useState([])
  const [loading, setLoading] = useState(true)
  
  const loadActiveAds = async () => {
    try {
      setLoading(true)
      const token = AuthManager.getToken()
      if (!token) {
        console.error('No auth token found')
        return
      }
      
      const response = await fetch('/api/admin/ads/list?status=active', {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      })
      
      if (response.ok) {
        const data = await response.json()
        setAds(data.ads)
      }
    } catch (error) {
      console.error('Error loading active ads:', error)
    } finally {
      setLoading(false)
    }
  }
  
  useEffect(() => {
    loadActiveAds()
  }, [])
  
  const getStatusBadge = (ad: any) => {
    const now = new Date()
    const startDate = new Date(ad.startDate)
    const endDate = new Date(ad.endDate)
    
    if (now < startDate) {
      return <Badge className="bg-yellow-100 text-yellow-800">Scheduled</Badge>
    } else if (now >= startDate && now <= endDate) {
      return <Badge className="bg-green-100 text-green-800">Running</Badge>
    } else {
      return <Badge className="bg-gray-100 text-gray-800">Completed</Badge>
    }
  }
  
  const getDaysRemaining = (endDate: string) => {
    const now = new Date()
    const end = new Date(endDate)
    const diff = Math.ceil((end.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
    return Math.max(0, diff)
  }
  
  const calculateCTR = (clicks: number, impressions: number) => {
    if (impressions === 0) return '0.00'
    return ((clicks / impressions) * 100).toFixed(2)
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center p-12">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {ads.length === 0 ? (
        <Card>
          <CardContent className="p-12 text-center">
            <div className="flex flex-col items-center gap-4">
              <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center">
                <Calendar className="w-8 h-8 text-gray-400" />
              </div>
              <div>
                <h3 className="text-lg font-semibold text-gray-900 mb-1">No Active Campaigns</h3>
                <p className="text-gray-500">Approved ads will appear here when they go live</p>
              </div>
            </div>
          </CardContent>
        </Card>
      ) : (
        <div className="grid grid-cols-1 gap-6">
          {ads.map((ad: any) => (
            <Card key={ad._id} className="overflow-hidden hover:shadow-lg transition-shadow">
              <CardContent className="p-6">
                <div className="flex gap-6">
                  {/* Image */}
                  <div className="flex-shrink-0">
                    <Image
                      src={ad.imageUrl}
                      alt={ad.facilityName}
                      width={200}
                      height={120}
                      className="rounded-lg object-cover"
                    />
                  </div>
                  
                  {/* Main Info */}
                  <div className="flex-1 space-y-3">
                    <div className="flex items-start justify-between">
                      <div>
                        <div className="flex items-center gap-3 mb-1">
                          <h3 className="text-xl font-bold text-gray-900">{ad.facilityName}</h3>
                          {getStatusBadge(ad)}
                          <Badge variant="outline" className="text-xs">
                            {ad.placementType}
                          </Badge>
                        </div>
                        {ad.location && (
                          <p className="text-sm text-gray-600">{ad.location}</p>
                        )}
                      </div>
                      <div className="text-right">
                        <div className="text-2xl font-bold text-green-600">${ad.pricing.totalCost}</div>
                        <div className="text-xs text-gray-500">Total Revenue</div>
                      </div>
                    </div>
                    
                    {ad.description && (
                      <p className="text-sm text-gray-700 line-clamp-2">{ad.description}</p>
                    )}
                    
                    {/* Stats Grid */}
                    <div className="grid grid-cols-4 gap-4 pt-3 border-t">
                      <div className="text-center">
                        <div className="flex items-center justify-center gap-1 mb-1">
                          <Eye className="w-4 h-4 text-blue-600" />
                          <span className="text-xs text-gray-500">Impressions</span>
                        </div>
                        <div className="text-lg font-bold text-gray-900">
                          {ad.analytics?.impressions?.toLocaleString() || 0}
                        </div>
                      </div>
                      
                      <div className="text-center">
                        <div className="flex items-center justify-center gap-1 mb-1">
                          <MousePointerClick className="w-4 h-4 text-green-600" />
                          <span className="text-xs text-gray-500">Clicks</span>
                        </div>
                        <div className="text-lg font-bold text-gray-900">
                          {ad.analytics?.clicks?.toLocaleString() || 0}
                        </div>
                      </div>
                      
                      <div className="text-center">
                        <div className="flex items-center justify-center gap-1 mb-1">
                          <TrendingUp className="w-4 h-4 text-purple-600" />
                          <span className="text-xs text-gray-500">CTR</span>
                        </div>
                        <div className="text-lg font-bold text-gray-900">
                          {calculateCTR(ad.analytics?.clicks || 0, ad.analytics?.impressions || 0)}%
                        </div>
                      </div>
                      
                      <div className="text-center">
                        <div className="flex items-center justify-center gap-1 mb-1">
                          <Calendar className="w-4 h-4 text-orange-600" />
                          <span className="text-xs text-gray-500">Days Left</span>
                        </div>
                        <div className="text-lg font-bold text-gray-900">
                          {getDaysRemaining(ad.endDate)}
                        </div>
                      </div>
                    </div>
                    
                    {/* Footer */}
                    <div className="flex items-center justify-between pt-3 border-t">
                      <div className="text-sm text-gray-600">
                        <span className="font-medium">Campaign Period:</span>{' '}
                        {new Date(ad.startDate).toLocaleDateString()} - {new Date(ad.endDate).toLocaleDateString()}
                      </div>
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => window.open(ad.targetUrl, '_blank')}
                      >
                        <ExternalLink className="w-4 h-4 mr-2" />
                        View Target
                      </Button>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </div>
  )
}