'use client'

import { useState, useEffect } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { AuthManager } from '@/lib/data-api'
import { 
  Eye, 
  MousePointerClick, 
  TrendingUp, 
  DollarSign, 
  Target,
  Award,
  BarChart3,
  Calendar
} from 'lucide-react'

export function AdsAnalytics() {
  const [analytics, setAnalytics] = useState<any>(null)
  const [loading, setLoading] = useState(true)
  
  const loadAnalytics = async () => {
    try {
      setLoading(true)
      const token = AuthManager.getToken()
      if (!token) return
      
      // Fetch all ads (pending, active, approved, completed)
      const [pendingRes, activeRes, approvedRes, completedRes] = await Promise.all([
        fetch('/api/admin/ads/list?status=pending', {
          headers: { 'Authorization': `Bearer ${token}` }
        }),
        fetch('/api/admin/ads/list?status=active', {
          headers: { 'Authorization': `Bearer ${token}` }
        }),
        fetch('/api/admin/ads/list?status=approved', {
          headers: { 'Authorization': `Bearer ${token}` }
        }),
        fetch('/api/admin/ads/list?status=completed', {
          headers: { 'Authorization': `Bearer ${token}` }
        })
      ])
      
      const pending = await pendingRes.json()
      const active = await activeRes.json()
      const approved = await approvedRes.json()
      const completed = await completedRes.json()
      
      const allAds = [
        ...pending.ads,
        ...active.ads,
        ...approved.ads,
        ...completed.ads
      ]
      
      // Calculate analytics
      const totalImpressions = allAds.reduce((sum, ad) => sum + (ad.analytics?.impressions || 0), 0)
      const totalClicks = allAds.reduce((sum, ad) => sum + (ad.analytics?.clicks || 0), 0)
      const totalRevenue = allAds.reduce((sum, ad) => {
        if (ad.payment?.status === 'captured') {
          return sum + ad.payment.amount
        }
        return sum
      }, 0)
      
      const avgCTR = totalImpressions > 0 ? (totalClicks / totalImpressions) * 100 : 0
      
      // Placement breakdown
      const placementStats = {
        'top-banner': { ads: 0, revenue: 0, impressions: 0, clicks: 0 },
        'right-side': { ads: 0, revenue: 0, impressions: 0, clicks: 0 },
        'left-side': { ads: 0, revenue: 0, impressions: 0, clicks: 0 }
      }
      
      allAds.forEach(ad => {
        const type = ad.placementType as keyof typeof placementStats
        if (placementStats[type]) {
          placementStats[type].ads++
          if (ad.payment?.status === 'captured') {
            placementStats[type].revenue += ad.payment.amount
          }
          placementStats[type].impressions += ad.analytics?.impressions || 0
          placementStats[type].clicks += ad.analytics?.clicks || 0
        }
      })
      
      // Top performing ads
      const topAds = [...active.ads, ...completed.ads]
        .filter(ad => ad.analytics?.impressions > 0)
        .sort((a, b) => {
          const ctrA = (a.analytics.clicks / a.analytics.impressions) * 100
          const ctrB = (b.analytics.clicks / b.analytics.impressions) * 100
          return ctrB - ctrA
        })
        .slice(0, 5)
      
      setAnalytics({
        totalAds: allAds.length,
        totalImpressions,
        totalClicks,
        totalRevenue,
        avgCTR,
        placementStats,
        topAds,
        statusBreakdown: {
          pending: pending.ads.length,
          approved: approved.ads.length,
          active: active.ads.length,
          completed: completed.ads.length
        }
      })
      
    } catch (error) {
      console.error('Error loading analytics:', error)
    } finally {
      setLoading(false)
    }
  }
  
  useEffect(() => {
    loadAnalytics()
  }, [])

  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>
    )
  }

  if (!analytics) {
    return (
      <div className="text-center p-12 text-gray-500">
        Failed to load analytics
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {/* Overview Stats */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-600 mb-1">Total Impressions</p>
                <p className="text-3xl font-bold text-gray-900">
                  {analytics.totalImpressions.toLocaleString()}
                </p>
                <p className="text-xs text-gray-500 mt-1">Across all campaigns</p>
              </div>
              <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
                <Eye className="w-6 h-6 text-blue-600" />
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-600 mb-1">Total Clicks</p>
                <p className="text-3xl font-bold text-gray-900">
                  {analytics.totalClicks.toLocaleString()}
                </p>
                <p className="text-xs text-gray-500 mt-1">User interactions</p>
              </div>
              <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                <MousePointerClick className="w-6 h-6 text-green-600" />
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-600 mb-1">Average CTR</p>
                <p className="text-3xl font-bold text-gray-900">
                  {analytics.avgCTR.toFixed(2)}%
                </p>
                <p className="text-xs text-gray-500 mt-1">Click-through rate</p>
              </div>
              <div className="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
                <TrendingUp className="w-6 h-6 text-purple-600" />
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-600 mb-1">Total Revenue</p>
                <p className="text-3xl font-bold text-green-600">
                  ${analytics.totalRevenue.toLocaleString()}
                </p>
                <p className="text-xs text-gray-500 mt-1">From {analytics.totalAds} campaigns</p>
              </div>
              <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                <DollarSign className="w-6 h-6 text-green-600" />
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Campaign Status Breakdown */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <BarChart3 className="w-5 h-5" />
            Campaign Status Breakdown
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div className="text-center p-4 bg-yellow-50 rounded-lg">
              <div className="text-2xl font-bold text-yellow-700">{analytics.statusBreakdown.pending}</div>
              <div className="text-sm text-gray-600 mt-1">Pending Review</div>
            </div>
            <div className="text-center p-4 bg-blue-50 rounded-lg">
              <div className="text-2xl font-bold text-blue-700">{analytics.statusBreakdown.approved}</div>
              <div className="text-sm text-gray-600 mt-1">Approved</div>
            </div>
            <div className="text-center p-4 bg-green-50 rounded-lg">
              <div className="text-2xl font-bold text-green-700">{analytics.statusBreakdown.active}</div>
              <div className="text-sm text-gray-600 mt-1">Active</div>
            </div>
            <div className="text-center p-4 bg-gray-50 rounded-lg">
              <div className="text-2xl font-bold text-gray-700">{analytics.statusBreakdown.completed}</div>
              <div className="text-sm text-gray-600 mt-1">Completed</div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Placement Performance */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Target className="w-5 h-5" />
            Performance by Placement Type
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {Object.entries(analytics.placementStats).map(([type, stats]: [string, any]) => {
              const ctr = stats.impressions > 0 ? ((stats.clicks / stats.impressions) * 100).toFixed(2) : '0.00'
              return (
                <div key={type} className="border rounded-lg p-4">
                  <div className="flex items-center justify-between mb-3">
                    <div className="flex items-center gap-3">
                      <Badge variant="outline" className="text-sm">
                        {type === 'top-banner' ? 'Premium Sponsored' : 
                         type === 'right-side' ? 'Featured Ad' : 'Sponsored Ad'}
                      </Badge>
                      <span className="text-sm text-gray-600">{stats.ads} campaigns</span>
                    </div>
                    <div className="text-lg font-bold text-green-600">
                      ${stats.revenue.toLocaleString()}
                    </div>
                  </div>
                  <div className="grid grid-cols-3 gap-4 text-center">
                    <div>
                      <div className="text-sm text-gray-500">Impressions</div>
                      <div className="text-lg font-semibold">{stats.impressions.toLocaleString()}</div>
                    </div>
                    <div>
                      <div className="text-sm text-gray-500">Clicks</div>
                      <div className="text-lg font-semibold">{stats.clicks.toLocaleString()}</div>
                    </div>
                    <div>
                      <div className="text-sm text-gray-500">CTR</div>
                      <div className="text-lg font-semibold">{ctr}%</div>
                    </div>
                  </div>
                </div>
              )
            })}
          </div>
        </CardContent>
      </Card>

      {/* Top Performing Ads */}
      {analytics.topAds.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Award className="w-5 h-5" />
              Top Performing Ads
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {analytics.topAds.map((ad: any, index: number) => {
                const ctr = ((ad.analytics.clicks / ad.analytics.impressions) * 100).toFixed(2)
                return (
                  <div key={ad._id} className="flex items-center gap-4 p-4 bg-gray-50 rounded-lg">
                    <div className="flex-shrink-0 w-8 h-8 bg-yellow-400 rounded-full flex items-center justify-center font-bold text-white">
                      {index + 1}
                    </div>
                    <div className="flex-1">
                      <div className="font-semibold text-gray-900">{ad.facilityName}</div>
                      <div className="text-sm text-gray-600">{ad.location}</div>
                    </div>
                    <div className="text-right">
                      <div className="text-sm text-gray-500">CTR</div>
                      <div className="text-lg font-bold text-green-600">{ctr}%</div>
                    </div>
                    <div className="text-right">
                      <div className="text-sm text-gray-500">Clicks</div>
                      <div className="text-lg font-semibold">{ad.analytics.clicks.toLocaleString()}</div>
                    </div>
                    <div className="text-right">
                      <div className="text-sm text-gray-500">Views</div>
                      <div className="text-lg font-semibold">{ad.analytics.impressions.toLocaleString()}</div>
                    </div>
                  </div>
                )
              })}
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}