'use client'

import { useState, useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { DollarSign, Eye, MousePointer, Calendar, Filter, TrendingUp, Info } from 'lucide-react'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'

interface Ad {
  _id: string
  businessName: string
  facilityName?: string
  imageUrl: string
  targetUrl: string
  placementType: string
  startDate: string
  endDate: string
  status: string
  payment: {
    amount: number
    status: string
  }
  description?: string
  location?: string
  category?: string
  analytics?: {
    impressions: number
    clicks: number
    ctr: number
  }
  createdAt: string
}

export default function AdminAdsPage() {
  const router = useRouter()
  const [ads, setAds] = useState<Ad[]>([])
  const [loading, setLoading] = useState(true)
  const [activeTab, setActiveTab] = useState('active')
  const [adTypeFilter, setAdTypeFilter] = useState('all')
  const [lastRefresh, setLastRefresh] = useState<Date>(new Date())
  const [autoRefresh, setAutoRefresh] = useState(false)
  const [stats, setStats] = useState({
    pendingApproval: 0,
    activeCampaigns: 0,
    totalRevenue: 0
  })

  useEffect(() => {
    fetchAds()
  }, [])
  
  // Auto-refresh every 30 seconds if enabled
  useEffect(() => {
    if (!autoRefresh) return
    
    const interval = setInterval(() => {
      fetchAds()
    }, 30000) // 30 seconds
    
    return () => clearInterval(interval)
  }, [autoRefresh])
  
  // Add debug function to check database
  const debugAds = async () => {
    try {
      const response = await fetch('/api/admin/ads/debug', {
        headers: getAuthHeaders()
      })
      if (response.ok) {
        const data = await response.json()
        console.log('=== AD DATABASE DEBUG INFO ===')
        console.log('Total ads:', data.counts.total)
        console.log('Status breakdown:', data.counts)
        console.log('Should show in Scheduled tab:', data.scheduled)
        console.log('Should show in Running tab:', data.running)
        console.log('Scheduled ads:', data.scheduledAds)
        console.log('Running ads:', data.runningAds)
        console.log('All ads grouped by status:', data.grouped)
        alert(`Debug info logged to console. Check browser console.\n\nScheduled: ${data.scheduled}\nRunning: ${data.running}\nTotal: ${data.counts.total}`)
      }
    } catch (error) {
      console.error('Error fetching debug info:', error)
    }
  }

  const getAuthHeaders = () => {
    // Get token from localStorage (same as AuthManager in data-api.ts)
    const token = typeof window !== 'undefined'
      ? localStorage.getItem('geezer_guide_token')
      : null

    return {
      'Content-Type': 'application/json',
      ...(token ? { Authorization: `Bearer ${token}` } : {})
    }
  }

  const fetchAds = async () => {
    try {
      // Fetch all ads (pending and active) for statistics
      const [pendingRes, activeRes, expiredRes] = await Promise.all([
        fetch('/api/admin/ads/list?status=pending', {
          headers: getAuthHeaders(),
          cache: 'no-store' // Disable cache to get fresh analytics data
        }),
        fetch('/api/admin/ads/list?status=active', {
          headers: getAuthHeaders(),
          cache: 'no-store'
        }),
        fetch('/api/admin/ads/list?status=expired', {
          headers: getAuthHeaders(),
          cache: 'no-store'
        })
      ])

      if (!pendingRes.ok || !activeRes.ok || !expiredRes.ok) {
        throw new Error('Failed to fetch ads')
      }

      const pendingData = await pendingRes.json()
      const activeData = await activeRes.json()
      const expiredData = await expiredRes.json()

      // Combine all ads
      const allAds = [
        ...(pendingData.ads || []),
        ...(activeData.ads || []),
        ...(expiredData.ads || [])
      ]

      console.log('[Admin Ads] Fetched ads with analytics:', allAds.map(ad => ({
        id: ad._id,
        name: ad.facilityName,
        status: ad.status,
        impressions: ad.analytics?.impressions || 0,
        clicks: ad.analytics?.clicks || 0,
        ctr: ad.analytics?.ctr || 0
      })))

      setAds(allAds)
      calculateStats(allAds)
      setLastRefresh(new Date())
    } catch (error) {
      console.error('Error fetching ads:', error)
    } finally {
      setLoading(false)
    }
  }

  const calculateStats = (allAds: Ad[]) => {
    const pending = allAds.filter(ad => ad.status === 'pending').length
    const active = allAds.filter(ad => ad.status === 'active' || ad.status === 'approved').length
    const revenue = allAds
      .filter(ad => ad.payment.status === 'captured')
      .reduce((sum, ad) => sum + ad.payment.amount, 0)

    setStats({
      pendingApproval: pending,
      activeCampaigns: active,
      totalRevenue: revenue
    })
  }

  const handleApprove = async (adId: string) => {
    try {
      const response = await fetch('/api/admin/ads/approve', {
        method: 'POST',
        headers: getAuthHeaders(),
        body: JSON.stringify({ adId })
      })
      if (!response.ok) throw new Error('Failed to approve ad')
      fetchAds()
    } catch (error) {
      console.error('Error approving ad:', error)
    }
  }

  const handleReject = async (adId: string) => {
    try {
      const response = await fetch('/api/admin/ads/reject', {
        method: 'POST',
        headers: getAuthHeaders(),
        body: JSON.stringify({ adId })
      })
      if (!response.ok) throw new Error('Failed to reject ad')
      fetchAds()
    } catch (error) {
      console.error('Error rejecting ad:', error)
    }
  }

  const handleRefund = async (adId: string) => {
    try {
      const confirmRefund = window.confirm(
        'Refund this expired (unapproved) campaign? Payment will be returned and the ad will remain expired. This cannot be undone.'
      )
      if (!confirmRefund) return

      const response = await fetch('/api/admin/ads/refund', {
        method: 'POST',
        headers: getAuthHeaders(),
        body: JSON.stringify({ adId })
      })
      const data = await response.json().catch(() => ({}))
      if (!response.ok) {
        throw new Error(data?.error || 'Failed to refund ad')
      }
      alert(data?.message || 'Refund processed and status remains Expired.')
      fetchAds()
    } catch (error) {
      console.error('Error refunding ad:', error)
      alert(error instanceof Error ? error.message : 'Failed to refund ad')
    }
  }

  const getAdTypeName = (placementType: string) => {
    const types: Record<string, string> = {
      'top-banner': 'Top Banner',
      'right-side': 'Right Side',
      'left-side': 'Left Side'
    }
    return types[placementType] || placementType
  }

  const getAdTypeColor = (placementType: string) => {
    const colors: Record<string, string> = {
      'top-banner': 'bg-purple-100 text-purple-700 border-purple-200',
      'right-side': 'bg-blue-100 text-blue-700 border-blue-200',
      'left-side': 'bg-green-100 text-green-700 border-green-200'
    }
    return colors[placementType] || 'bg-gray-100 text-gray-700 border-gray-200'
  }

  const getStatusBadge = (status: string) => {
    const styles: Record<string, { label: string; className: string }> = {
      pending: { label: 'Scheduled', className: 'bg-yellow-100 text-yellow-700 border-yellow-200' },
      pending_payment: { label: 'Awaiting Payment', className: 'bg-orange-100 text-orange-700 border-orange-200' },
      active: { label: 'Running', className: 'bg-green-100 text-green-700 border-green-200' },
      approved: { label: 'Running', className: 'bg-green-100 text-green-700 border-green-200' },
      rejected: { label: 'Rejected', className: 'bg-red-100 text-red-700 border-red-200' },
      expired: { label: 'Expired', className: 'bg-gray-100 text-gray-700 border-gray-200' }
    }
    const style = styles[status] || { label: status, className: 'bg-gray-100 text-gray-700' }
    return <Badge className={`${style.className} font-semibold border`}>{style.label}</Badge>
  }

  const getPaymentBadge = (paymentStatus: string) => {
    const styles: Record<string, { label: string; className: string; icon: string }> = {
      captured: { label: 'Paid', className: 'bg-green-100 text-green-700 border-green-300', icon: '✓' },
      pending: { label: 'Payment Pending', className: 'bg-orange-100 text-orange-700 border-orange-300', icon: '⏳' },
      processing: { label: 'Processing', className: 'bg-blue-100 text-blue-700 border-blue-300', icon: '⚙️' },
      refunded: { label: 'Refunded', className: 'bg-purple-100 text-purple-700 border-purple-300', icon: '↩️' },
      failed: { label: 'Payment Failed', className: 'bg-red-100 text-red-700 border-red-300', icon: '✗' }
    }
    const style = styles[paymentStatus] || { label: paymentStatus, className: 'bg-gray-100 text-gray-700 border-gray-300', icon: '?' }
    return <Badge className={`${style.className} font-semibold border`}>{style.icon} {style.label}</Badge>
  }

  const filterAds = (adsToFilter: Ad[]) => {
    let filtered = adsToFilter
    const now = new Date()

    // Filter by status (tab)
    if (activeTab === 'pending') {
      // Show ALL pending ads regardless of date
      // Admin needs to review and approve them even if start date has passed
      filtered = filtered.filter(ad => ad.status === 'pending')
    } else if (activeTab === 'expired') {
      // Show only expired ads (not pending ads with past dates)
      filtered = filtered.filter(ad => ad.status === 'expired')
    } else if (activeTab === 'active') {
      filtered = filtered.filter(ad => ad.status === 'active' || ad.status === 'approved')
    } else if (activeTab === 'completed') {
      filtered = filtered.filter(ad => {
        const endDate = new Date(ad.endDate)
        return endDate < now || ad.status === 'expired'
      })
    }

    // Filter by ad type
    if (adTypeFilter !== 'all') {
      filtered = filtered.filter(ad => ad.placementType === adTypeFilter)
    }

    return filtered
  }

  const filteredAds = filterAds(ads)

  const calculateCTR = (impressions: number, clicks: number) => {
    if (impressions === 0) return '0.00%'
    return ((clicks / impressions) * 100).toFixed(2) + '%'
  }

  const calculateDaysLeft = (endDate: string) => {
    const end = new Date(endDate)
    const today = new Date()
    const diffTime = end.getTime() - today.getTime()
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
    return diffDays > 0 ? diffDays : 0
  }

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

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50 p-3 md:p-6">
      <div className="max-w-7xl mx-auto space-y-4 md:space-y-6">
        {/* Header */}
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
          <div>
            <h1 className="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900">Ad Management</h1>
            <div className="flex items-center gap-2 mt-1 md:mt-2">
              <div className="w-2 h-2 md:w-3 md:h-3 rounded-full bg-blue-500 animate-pulse"></div>
              <p className="text-xs md:text-sm text-gray-600">
                All Ads - Showing all ad campaigns (paid and unpaid)
              </p>
            </div>
          </div>
          <div className="flex flex-col sm:flex-row gap-2">
            <div className="flex gap-2">
              <Button
                onClick={debugAds}
                variant="outline"
                size="sm"
                className="border-purple-200 hover:bg-purple-50 text-purple-600 text-xs md:text-sm"
              >
                <span className="hidden sm:inline">🔍 Debug</span>
                <span className="sm:hidden">🔍</span>
              </Button>
              <Button
                onClick={() => {
                  fetchAds()
                }}
                variant="outline"
                size="sm"
                className="border-green-200 hover:bg-green-50 text-green-600 text-xs md:text-sm"
              >
                <span className="hidden sm:inline">🔄 Refresh</span>
                <span className="sm:hidden">🔄</span>
              </Button>
              <Button
                onClick={() => setAutoRefresh(!autoRefresh)}
                variant={autoRefresh ? "default" : "outline"}
                size="sm"
                className={autoRefresh ? "bg-blue-600 hover:bg-blue-700 text-white text-xs md:text-sm" : "border-blue-200 hover:bg-blue-50 text-blue-600 text-xs md:text-sm"}
              >
                <span className="hidden sm:inline">{autoRefresh ? "Auto-Refresh On" : "Auto-Refresh Off"}</span>
                <span className="sm:hidden">{autoRefresh ? "🔄 On" : "🔄 Off"}</span>
              </Button>
              <Button
                onClick={() => router.push('/admin/dashboard')}
                variant="outline"
                size="sm"
                className="border-gray-200 hover:bg-gray-50 text-xs md:text-sm hidden md:flex"
              >
                ← Back
              </Button>
            </div>
            <div className="text-xs text-gray-500 flex items-center gap-1">
              <span className="hidden sm:inline">Last updated:</span>
              <span className="font-medium">{lastRefresh.toLocaleTimeString()}</span>
            </div>
          </div>
        </div>

        {/* Stats Cards */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 md:gap-6">
          <Card className="bg-gradient-to-br from-yellow-50 to-yellow-100 border-yellow-200 shadow-md hover:shadow-lg transition-shadow">
            <CardHeader className="pb-2 md:pb-3">
              <CardTitle className="text-xs md:text-sm font-medium text-yellow-800 flex items-center gap-2">
                <Calendar className="w-3 h-3 md:w-4 md:h-4" />
                Pending Approval
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl md:text-3xl font-bold text-yellow-900">{stats.pendingApproval}</div>
              <p className="text-[10px] md:text-xs text-yellow-700 mt-1">Awaiting review</p>
            </CardContent>
          </Card>

          <Card className="bg-gradient-to-br from-green-50 to-green-100 border-green-200 shadow-md hover:shadow-lg transition-shadow">
            <CardHeader className="pb-2 md:pb-3">
              <CardTitle className="text-xs md:text-sm font-medium text-green-800 flex items-center gap-2">
                <TrendingUp className="w-3 h-3 md:w-4 md:h-4" />
                Active Campaigns
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl md:text-3xl font-bold text-green-900">{stats.activeCampaigns}</div>
              <p className="text-[10px] md:text-xs text-green-700 mt-1">Currently running</p>
            </CardContent>
          </Card>

          <Card className="bg-gradient-to-br from-blue-50 to-indigo-100 border-blue-200 shadow-md hover:shadow-lg transition-shadow sm:col-span-2 lg:col-span-1">
            <CardHeader className="pb-2 md:pb-3">
              <CardTitle className="text-xs md:text-sm font-medium text-blue-800 flex items-center gap-2">
                <DollarSign className="w-3 h-3 md:w-4 md:h-4" />
                Total Revenue
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-3xl font-bold text-blue-900">${stats.totalRevenue}</div>
              <p className="text-xs text-blue-700 mt-1">From all campaigns</p>
            </CardContent>
          </Card>
        </div>

        {/* Filters and Tabs */}
        <Card className="shadow-md">
          <CardContent className="p-6">
            <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-6">
              <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full md:w-auto">
                <TabsList className="grid w-full md:w-auto grid-cols-4 bg-gray-100">
                  <TabsTrigger value="pending" className="data-[state=active]:bg-yellow-500 data-[state=active]:text-white">
                    Pending Approval
                  </TabsTrigger>
                  <TabsTrigger value="active" className="data-[state=active]:bg-green-500 data-[state=active]:text-white">
                    Active
                  </TabsTrigger>
                  <TabsTrigger value="expired" className="data-[state=active]:bg-red-500 data-[state=active]:text-white">
                    Expired
                  </TabsTrigger>
                  <TabsTrigger value="completed" className="data-[state=active]:bg-gray-500 data-[state=active]:text-white">
                    Completed
                  </TabsTrigger>
                </TabsList>
              </Tabs>

              <div className="flex items-center gap-2 w-full md:w-auto">
                <Filter className="w-4 h-4 text-gray-600" />
                <Select value={adTypeFilter} onValueChange={setAdTypeFilter}>
                  <SelectTrigger className="w-full md:w-[200px] border-gray-300">
                    <SelectValue placeholder="Filter by Ad Type" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Ad Types</SelectItem>
                    <SelectItem value="top-banner">Top Banner</SelectItem>
                    <SelectItem value="right-side">Right Side</SelectItem>
                    <SelectItem value="left-side">Left Side</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

            {/* Ads List */}
            {filteredAds.length === 0 ? (
              <div className="text-center py-12">
                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-100 flex items-center justify-center">
                  <Calendar className="w-8 h-8 text-gray-400" />
                </div>
                <h3 className="text-lg font-semibold text-gray-900 mb-2">No ads found</h3>
                <p className="text-gray-600">
                  {activeTab === 'pending' && 'No pending ads at the moment'}
                  {activeTab === 'active' && 'No active campaigns running'}
                  {activeTab === 'completed' && 'No completed campaigns yet'}
                  {activeTab === 'expired' && 'No expired campaigns'}
                </p>
              </div>
            ) : (
              <div className="space-y-4">
                {filteredAds.map((ad) => (
                  <Card key={ad._id} className="hover:shadow-lg transition-shadow border-2 hover:border-blue-200">
                    <CardContent className="p-6">
                      <div className="flex flex-col lg:flex-row gap-6">
                        {/* Image */}
                        <div className="lg:w-48 h-32 lg:h-auto flex-shrink-0">
                          <img
                            src={ad.imageUrl || '/placeholder.svg'}
                            alt={ad.businessName}
                            className="w-full h-full object-cover rounded-lg border-2 border-gray-200"
                          />
                        </div>

                        {/* Content */}
                        <div className="flex-1 space-y-4">
                          {/* Header */}
                          <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
                            <div>
                              <h3 className="text-xl font-bold text-gray-900 mb-2">
                                {ad.businessName || ad.facilityName}
                              </h3>
                              <div className="flex flex-wrap items-center gap-2">
                                {getStatusBadge(ad.status)}
                                {getPaymentBadge(ad.payment.status)}
                                <Badge className={`${getAdTypeColor(ad.placementType)} font-semibold border`}>
                                  {getAdTypeName(ad.placementType)}
                                </Badge>
                              </div>
                            </div>
                            <div className="text-right">
                              <div className="text-2xl font-bold text-green-600">
                                ${ad.payment.amount}
                              </div>
                              <div className="text-sm text-gray-600">Total Revenue</div>
                            </div>
                          </div>

                          {/* Description */}
                          {ad.description && (
                            <p className="text-gray-700 text-sm line-clamp-2">{ad.description}</p>
                          )}

                          {/* Stats Grid */}
                          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                            <div className="bg-blue-50 rounded-lg p-3 border border-blue-200">
                              <div className="flex items-center gap-2 text-blue-600 mb-1">
                                <Eye className="w-4 h-4" />
                                <TooltipProvider>
                                  <Tooltip>
                                    <TooltipTrigger asChild>
                                      <div className="flex items-center gap-1 cursor-help">
                                        <span className="text-xs font-medium">Unique Impressions</span>
                                        <Info className="w-3 h-3" />
                                      </div>
                                    </TooltipTrigger>
                                    <TooltipContent className="max-w-xs">
                                      <p className="text-sm">
                                        Unique impressions per user session. Ad must be 50% visible for 1+ second.
                                        Follows IAB/MRC industry standards.
                                      </p>
                                    </TooltipContent>
                                  </Tooltip>
                                </TooltipProvider>
                              </div>
                              <div className="text-xl font-bold text-blue-900">
                                {ad.analytics?.impressions || 0}
                              </div>
                            </div>

                            <div className="bg-green-50 rounded-lg p-3 border border-green-200">
                              <div className="flex items-center gap-2 text-green-600 mb-1">
                                <MousePointer className="w-4 h-4" />
                                <span className="text-xs font-medium">Clicks</span>
                              </div>
                              <div className="text-xl font-bold text-green-900">
                                {ad.analytics?.clicks || 0}
                              </div>
                            </div>

                            <div className="bg-purple-50 rounded-lg p-3 border border-purple-200">
                              <div className="flex items-center gap-2 text-purple-600 mb-1">
                                <TrendingUp className="w-4 h-4" />
                                <TooltipProvider>
                                  <Tooltip>
                                    <TooltipTrigger asChild>
                                      <div className="flex items-center gap-1 cursor-help">
                                        <span className="text-xs font-medium">CTR</span>
                                        <Info className="w-3 h-3" />
                                      </div>
                                    </TooltipTrigger>
                                    <TooltipContent className="max-w-xs">
                                      <p className="text-sm">
                                        Click-Through Rate = (Clicks / Unique Impressions) × 100.
                                        Industry average: 0.05-0.1% for display ads.
                                      </p>
                                    </TooltipContent>
                                  </Tooltip>
                                </TooltipProvider>
                              </div>
                              <div className="text-xl font-bold text-purple-900">
                                {calculateCTR(ad.analytics?.impressions || 0, ad.analytics?.clicks || 0)}
                              </div>
                            </div>

                            <div className="bg-orange-50 rounded-lg p-3 border border-orange-200">
                              <div className="flex items-center gap-2 text-orange-600 mb-1">
                                <Calendar className="w-4 h-4" />
                                <span className="text-xs font-medium">Days Left</span>
                              </div>
                              <div className="text-xl font-bold text-orange-900">
                                {calculateDaysLeft(ad.endDate)}
                              </div>
                            </div>
                          </div>

                          {/* Campaign Period */}
                          <div className="text-sm text-gray-600 bg-gray-50 rounded-lg p-3 border border-gray-200">
                            <span className="font-medium">Campaign Period:</span>{' '}
                            {new Date(ad.startDate).toLocaleDateString('en-US', {
                              month: 'short',
                              day: 'numeric',
                              year: 'numeric'
                            })}{' '}
                            -{' '}
                            {new Date(ad.endDate).toLocaleDateString('en-US', {
                              month: 'short',
                              day: 'numeric',
                              year: 'numeric'
                            })}
                          </div>

                          {/* Actions */}
                          {ad.status === 'pending' && activeTab !== 'expired' && (
                            <div className="flex gap-3 pt-2">
                              <Button
                                onClick={() => handleApprove(ad._id)}
                                className="flex-1 bg-green-600 hover:bg-green-700 text-white"
                              >
                                Approve Campaign
                              </Button>
                              <Button
                                onClick={() => handleReject(ad._id)}
                                variant="outline"
                                className="flex-1 border-red-300 text-red-600 hover:bg-red-50"
                              >
                                Reject
                              </Button>
                            </div>
                          )}

                          {activeTab === 'expired' && (ad.status === 'pending' || ad.status === 'expired') && ad.payment.status !== 'refunded' && (
                            <div className="flex gap-3 pt-2">
                              <Button
                                onClick={() => handleRefund(ad._id)}
                                className="flex-1 bg-red-600 hover:bg-red-700 text-white"
                              >
                                Manual Refund
                              </Button>
                            </div>
                          )}

                          <Button
                            onClick={() => window.open(ad.targetUrl, '_blank')}
                            variant="outline"
                            className="w-full border-blue-300 text-blue-600 hover:bg-blue-50"
                          >
                            View Target URL →
                          </Button>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}