'use client';

import { useState, useEffect } from 'react';
import { motion, useReducedMotion, AnimatePresence } from 'framer-motion';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import StatusBadge from '@/components/ui/StatusBadge';
import InfoBanner from '@/components/ui/InfoBanner';
import {
  BarChart3,
  Eye,
  Users,
  Trophy,
  TrendingUp,
  Calendar,
  DollarSign,
  Target,
  ArrowUpRight,
  ArrowDownRight,
  ExternalLink,
  Loader2,
  Car,
  Flag,
  Megaphone,
  ChevronRight,
  Plus,
  Bell,
  Settings,
  CreditCard,
  FileText,
  RefreshCw
} from 'lucide-react';
import Link from 'next/link';
import { SponsorService } from '@/lib/services/sponsors/SponsorService';
import { SponsorDashboardViewModel } from '@/lib/view-models/SponsorDashboardViewModel';
import { ServiceFactory } from '@/lib/services/ServiceFactory';

// Metric Card Component
function MetricCard({ 
  title, 
  value, 
  change, 
  icon: Icon,
  suffix = '',
  prefix = '',
  delay = 0,
}: { 
  title: string; 
  value: number | string; 
  change?: number;
  icon: typeof Eye;
  suffix?: string;
  prefix?: string;
  delay?: number;
}) {
  const shouldReduceMotion = useReducedMotion();
  const isPositive = change && change > 0;
  const isNegative = change && change < 0;

  return (
    <motion.div
      initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay }}
    >
      <Card className="p-5 h-full">
        <div className="flex items-start justify-between mb-3">
          <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-primary-blue/10">
            <Icon className="w-5 h-5 text-primary-blue" />
          </div>
          {change !== undefined && (
            <div className={`flex items-center gap-1 text-sm font-medium ${
              isPositive ? 'text-performance-green' : isNegative ? 'text-racing-red' : 'text-gray-400'
            }`}>
              {isPositive ? <ArrowUpRight className="w-4 h-4" /> : isNegative ? <ArrowDownRight className="w-4 h-4" /> : null}
              {Math.abs(change)}%
            </div>
          )}
        </div>
        <div className="text-2xl font-bold text-white mb-1">
          {prefix}{typeof value === 'number' ? value.toLocaleString() : value}{suffix}
        </div>
        <div className="text-sm text-gray-400">{title}</div>
      </Card>
    </motion.div>
  );
}

// Sponsorship Category Card
function SponsorshipCategoryCard({ 
  icon: Icon, 
  title, 
  count, 
  impressions, 
  color, 
  href 
}: { 
  icon: typeof Trophy; 
  title: string; 
  count: number; 
  impressions: number;
  color: string;
  href: string;
}) {
  return (
    <Link href={href}>
      <Card className="p-4 hover:border-primary-blue/50 transition-all duration-300 cursor-pointer group">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className={`w-10 h-10 rounded-lg bg-iron-gray flex items-center justify-center group-hover:bg-primary-blue/10 transition-colors`}>
              <Icon className={`w-5 h-5 ${color}`} />
            </div>
            <div>
              <p className="text-white font-medium">{title}</p>
              <p className="text-sm text-gray-500">{count} active</p>
            </div>
          </div>
          <div className="text-right">
            <p className="text-white font-semibold">{impressions.toLocaleString()}</p>
            <p className="text-xs text-gray-500">impressions</p>
          </div>
        </div>
      </Card>
    </Link>
  );
}

// Activity Item
function ActivityItem({ activity }: { activity: any }) {
  return (
    <div className="flex items-start gap-3 py-3 border-b border-charcoal-outline/50 last:border-b-0">
      <div className={`w-2 h-2 rounded-full mt-2 ${activity.typeColor}`} />
      <div className="flex-1 min-w-0">
        <p className="text-sm text-white truncate">{activity.message}</p>
        <div className="flex items-center gap-2 mt-1">
          <span className="text-xs text-gray-500">{activity.time}</span>
          {activity.formattedImpressions && (
            <>
              <span className="text-xs text-gray-600">•</span>
              <span className="text-xs text-gray-400">{activity.formattedImpressions} views</span>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

// Renewal Alert
function RenewalAlert({ renewal }: { renewal: any }) {
  const typeIcons = {
    league: Trophy,
    team: Users,
    driver: Car,
    race: Flag,
    platform: Megaphone,
  };
  const Icon = typeIcons[renewal.type] || Trophy;

  return (
    <div className="flex items-center justify-between p-3 rounded-lg bg-warning-amber/10 border border-warning-amber/30">
      <div className="flex items-center gap-3">
        <Icon className="w-4 h-4 text-warning-amber" />
        <div>
          <p className="text-sm text-white">{renewal.name}</p>
          <p className="text-xs text-gray-400">Renews {renewal.formattedRenewDate}</p>
        </div>
      </div>
      <div className="text-right">
        <p className="text-sm font-semibold text-white">{renewal.formattedPrice}</p>
        <Button variant="secondary" className="text-xs mt-1 py-1 px-2 min-h-0">
          Renew
        </Button>
      </div>
    </div>
  );
}

export default function SponsorDashboardPage() {
  const shouldReduceMotion = useReducedMotion();
  const [timeRange, setTimeRange] = useState<'7d' | '30d' | '90d' | 'all'>('30d');
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState<SponsorDashboardViewModel | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const loadDashboard = async () => {
      try {
        const sponsorService = ServiceFactory.getSponsorService();
        const dashboardData = await sponsorService.getSponsorDashboard('demo-sponsor-1');
        if (dashboardData) {
          setData(dashboardData);
        } else {
          setError('Failed to load dashboard data');
        }
      } catch (err) {
        console.error('Error loading dashboard:', err);
        setError('Failed to load dashboard data');
      } finally {
        setLoading(false);
      }
    };

    loadDashboard();
  }, []);

  if (loading) {
    return (
      <div className="max-w-7xl mx-auto py-8 px-4 flex items-center justify-center min-h-[600px]">
        <div className="text-center">
          <Loader2 className="w-8 h-8 animate-spin text-primary-blue mx-auto mb-4" />
          <p className="text-gray-400">Loading dashboard...</p>
        </div>
      </div>
    );
  }

  if (error || !data) {
    return (
      <div className="max-w-7xl mx-auto py-8 px-4 flex items-center justify-center min-h-[600px]">
        <div className="text-center">
          <p className="text-gray-400">{error || 'No dashboard data available'}</p>
        </div>
      </div>
    );
  }

  const categoryData = data.categoryData;

  if (loading) {
    return (
      <div className="max-w-7xl mx-auto py-8 px-4 flex items-center justify-center min-h-[600px]">
        <div className="text-center">
          <Loader2 className="w-8 h-8 animate-spin text-primary-blue mx-auto mb-4" />
          <p className="text-gray-400">Loading dashboard...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="max-w-7xl mx-auto py-8 px-4">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
        <div>
          <h1 className="text-2xl font-bold text-white">Sponsor Dashboard</h1>
          <p className="text-gray-400">Welcome back, {data.sponsorName}</p>
        </div>
        <div className="flex items-center gap-3">
          {/* Time Range Selector */}
          <div className="flex items-center bg-iron-gray/50 rounded-lg p-1">
            {(['7d', '30d', '90d', 'all'] as const).map((range) => (
              <button
                key={range}
                onClick={() => setTimeRange(range)}
                className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
                  timeRange === range
                    ? 'bg-primary-blue text-white'
                    : 'text-gray-400 hover:text-white'
                }`}
              >
                {range === 'all' ? 'All' : range}
              </button>
            ))}
          </div>
          
          {/* Quick Actions */}
          <Button variant="secondary" className="hidden sm:flex">
            <RefreshCw className="w-4 h-4" />
          </Button>
          <Link href="/sponsor/settings">
            <Button variant="secondary" className="hidden sm:flex">
              <Settings className="w-4 h-4" />
            </Button>
          </Link>
        </div>
      </div>

      {/* Key Metrics */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
        <MetricCard
          title="Total Impressions"
          value={data.totalImpressions}
          change={data.metrics.impressionsChange}
          icon={Eye}
          delay={0}
        />
        <MetricCard
          title="Unique Viewers"
          value={data.metrics.uniqueViewers}
          change={data.metrics.viewersChange}
          icon={Users}
          delay={0.1}
        />
        <MetricCard
          title="Engagement Rate"
          value={data.metrics.exposure}
          change={data.metrics.exposureChange}
          icon={TrendingUp}
          suffix="%"
          delay={0.2}
        />
        <MetricCard
          title="Total Investment"
          value={data.totalInvestment}
          icon={DollarSign}
          prefix="$"
          delay={0.3}
        />
      </div>

      {/* Sponsorship Categories */}
      <div className="mb-8">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-lg font-semibold text-white">Your Sponsorships</h2>
          <Link href="/sponsor/campaigns">
            <Button variant="secondary" className="text-sm">
              View All
              <ChevronRight className="w-4 h-4 ml-1" />
            </Button>
          </Link>
        </div>
        
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
          <SponsorshipCategoryCard
            icon={Trophy}
            title="Leagues"
            count={categoryData.leagues.count}
            impressions={categoryData.leagues.impressions}
            color="text-primary-blue"
            href="/sponsor/campaigns?type=leagues"
          />
          <SponsorshipCategoryCard
            icon={Users}
            title="Teams"
            count={categoryData.teams.count}
            impressions={categoryData.teams.impressions}
            color="text-purple-400"
            href="/sponsor/campaigns?type=teams"
          />
          <SponsorshipCategoryCard
            icon={Car}
            title="Drivers"
            count={categoryData.drivers.count}
            impressions={categoryData.drivers.impressions}
            color="text-performance-green"
            href="/sponsor/campaigns?type=drivers"
          />
          <SponsorshipCategoryCard
            icon={Flag}
            title="Races"
            count={categoryData.races.count}
            impressions={categoryData.races.impressions}
            color="text-warning-amber"
            href="/sponsor/campaigns?type=races"
          />
          <SponsorshipCategoryCard
            icon={Megaphone}
            title="Platform Ads"
            count={categoryData.platform.count}
            impressions={categoryData.platform.impressions}
            color="text-racing-red"
            href="/sponsor/campaigns?type=platform"
          />
        </div>
      </div>

      {/* Main Content Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Left Column - Sponsored Entities */}
        <div className="lg:col-span-2 space-y-6">
          {/* Top Performing Sponsorships */}
          <Card>
            <div className="flex items-center justify-between p-4 border-b border-charcoal-outline">
              <h2 className="text-lg font-semibold text-white">Top Performing</h2>
              <Link href="/leagues">
                <Button variant="secondary" className="text-sm">
                  <Plus className="w-4 h-4 mr-1" />
                  Find More
                </Button>
              </Link>
            </div>
            <div className="divide-y divide-charcoal-outline/50">
              {/* Leagues */}
              {data.sponsorships.leagues.map((league) => (
                <div key={league.id} className="flex items-center justify-between p-4 hover:bg-iron-gray/30 transition-colors">
                  <div className="flex items-center gap-4">
                    <div className={`px-2 py-1 rounded text-xs font-medium ${
                      league.tier === 'main'
                        ? 'bg-primary-blue/20 text-primary-blue border border-primary-blue/30'
                        : 'bg-purple-500/20 text-purple-400 border border-purple-500/30'
                    }`}>
                      {league.tier === 'main' ? 'Main' : 'Secondary'}
                    </div>
                    <div>
                      <div className="flex items-center gap-2">
                        <Trophy className="w-4 h-4 text-gray-500" />
                        <span className="font-medium text-white">{league.entityName}</span>
                      </div>
                      <div className="text-sm text-gray-500">{league.details}</div>
                    </div>
                  </div>
                  <div className="flex items-center gap-4">
                    <div className="text-right">
                      <div className="font-semibold text-white">{league.formattedImpressions}</div>
                      <div className="text-xs text-gray-500">impressions</div>
                    </div>
                    <Link href={`/sponsor/leagues/${league.entityId}`}>
                      <Button variant="secondary" className="text-xs">
                        <ExternalLink className="w-3 h-3" />
                      </Button>
                    </Link>
                  </div>
                </div>
              ))}

              {/* Teams */}
              {data.sponsorships.teams.map((team) => (
                <div key={team.id} className="flex items-center justify-between p-4 hover:bg-iron-gray/30 transition-colors">
                  <div className="flex items-center gap-4">
                    <div className="px-2 py-1 rounded text-xs font-medium bg-purple-500/20 text-purple-400 border border-purple-500/30">
                      Team
                    </div>
                    <div>
                      <div className="flex items-center gap-2">
                        <Users className="w-4 h-4 text-gray-500" />
                        <span className="font-medium text-white">{team.entityName}</span>
                      </div>
                      <div className="text-sm text-gray-500">{team.details}</div>
                    </div>
                  </div>
                  <div className="flex items-center gap-4">
                    <div className="text-right">
                      <div className="font-semibold text-white">{team.formattedImpressions}</div>
                      <div className="text-xs text-gray-500">impressions</div>
                    </div>
                    <Button variant="secondary" className="text-xs">
                      <ExternalLink className="w-3 h-3" />
                    </Button>
                  </div>
                </div>
              ))}

              {/* Drivers */}
              {data.sponsorships.drivers.slice(0, 2).map((driver) => (
                <div key={driver.id} className="flex items-center justify-between p-4 hover:bg-iron-gray/30 transition-colors">
                  <div className="flex items-center gap-4">
                    <div className="px-2 py-1 rounded text-xs font-medium bg-performance-green/20 text-performance-green border border-performance-green/30">
                      Driver
                    </div>
                    <div>
                      <div className="flex items-center gap-2">
                        <Car className="w-4 h-4 text-gray-500" />
                        <span className="font-medium text-white">{driver.entityName}</span>
                      </div>
                      <div className="text-sm text-gray-500">{driver.details}</div>
                    </div>
                  </div>
                  <div className="flex items-center gap-4">
                    <div className="text-right">
                      <div className="font-semibold text-white">{driver.formattedImpressions}</div>
                      <div className="text-xs text-gray-500">impressions</div>
                    </div>
                    <Button variant="secondary" className="text-xs">
                      <ExternalLink className="w-3 h-3" />
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          </Card>

          {/* Upcoming Events */}
          <Card>
            <div className="p-4 border-b border-charcoal-outline">
              <h2 className="text-lg font-semibold text-white flex items-center gap-2">
                <Calendar className="w-5 h-5 text-warning-amber" />
                Upcoming Sponsored Events
              </h2>
            </div>
            <div className="p-4">
              {data.sponsorships.races.length > 0 ? (
                <div className="space-y-3">
                  {data.sponsorships.races.map((race) => (
                    <div key={race.id} className="flex items-center justify-between p-3 rounded-lg bg-iron-gray/30">
                      <div className="flex items-center gap-3">
                        <div className="w-10 h-10 rounded-lg bg-warning-amber/10 flex items-center justify-center">
                          <Flag className="w-5 h-5 text-warning-amber" />
                        </div>
                        <div>
                          <p className="font-medium text-white">{race.entityName}</p>
                          <p className="text-sm text-gray-500">{race.details}</p>
                        </div>
                      </div>
                      <div className="text-right">
                        <span className="px-2 py-1 rounded text-xs font-medium bg-warning-amber/20 text-warning-amber">
                          {race.status}
                        </span>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="text-center py-8 text-gray-500">
                  <Calendar className="w-8 h-8 mx-auto mb-2 opacity-50" />
                  <p>No upcoming sponsored events</p>
                </div>
              )}
            </div>
          </Card>
        </div>

        {/* Right Column - Activity & Quick Actions */}
        <div className="space-y-6">
          {/* Quick Actions */}
          <Card className="p-4">
            <h3 className="text-lg font-semibold text-white mb-4">Quick Actions</h3>
            <div className="space-y-2">
              <Link href="/leagues" className="block">
                <Button variant="secondary" className="w-full justify-start">
                  <Target className="w-4 h-4 mr-2" />
                  Find Leagues to Sponsor
                </Button>
              </Link>
              <Link href="/teams" className="block">
                <Button variant="secondary" className="w-full justify-start">
                  <Users className="w-4 h-4 mr-2" />
                  Browse Teams
                </Button>
              </Link>
              <Link href="/drivers" className="block">
                <Button variant="secondary" className="w-full justify-start">
                  <Car className="w-4 h-4 mr-2" />
                  Discover Drivers
                </Button>
              </Link>
              <Link href="/sponsor/billing" className="block">
                <Button variant="secondary" className="w-full justify-start">
                  <CreditCard className="w-4 h-4 mr-2" />
                  Manage Billing
                </Button>
              </Link>
              <Link href="/sponsor/campaigns" className="block">
                <Button variant="secondary" className="w-full justify-start">
                  <BarChart3 className="w-4 h-4 mr-2" />
                  View Analytics
                </Button>
              </Link>
            </div>
          </Card>

          {/* Renewal Alerts */}
          {data.upcomingRenewals.length > 0 && (
            <Card className="p-4">
              <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
                <Bell className="w-5 h-5 text-warning-amber" />
                Upcoming Renewals
              </h3>
              <div className="space-y-3">
                {data.upcomingRenewals.map((renewal) => (
                  <RenewalAlert key={renewal.id} renewal={renewal} />
                ))}
              </div>
            </Card>
          )}

          {/* Recent Activity */}
          <Card className="p-4">
            <h3 className="text-lg font-semibold text-white mb-4">Recent Activity</h3>
            <div>
              {data.recentActivity.map((activity) => (
                <ActivityItem key={activity.id} activity={activity} />
              ))}
            </div>
          </Card>

          {/* Investment Summary */}
          <Card className="p-4">
            <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
              <FileText className="w-5 h-5 text-primary-blue" />
              Investment Summary
            </h3>
            <div className="space-y-3">
              <div className="flex items-center justify-between">
                <span className="text-gray-400">Active Sponsorships</span>
                <span className="font-medium text-white">{data.activeSponsorships}</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-gray-400">Total Investment</span>
                <span className="font-medium text-white">{data.formattedTotalInvestment}</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-gray-400">Cost per 1K Views</span>
                <span className="font-medium text-performance-green">
                  {data.costPerThousandViews}
                </span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-gray-400">Next Invoice</span>
                <span className="font-medium text-white">Jan 1, 2026</span>
              </div>
              <div className="pt-3 border-t border-charcoal-outline">
                <Link href="/sponsor/billing">
                  <Button variant="secondary" className="w-full text-sm">
                    <CreditCard className="w-4 h-4 mr-2" />
                    View Billing Details
                  </Button>
                </Link>
              </div>
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}