'use client';

import { useAuth } from '@/lib/auth/AuthContext';
import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
import { BarChart3, Building2, ChevronDown, CreditCard, Handshake, LogOut, Megaphone, Paintbrush, Settings, TrendingUp, Trophy } from 'lucide-react';
import Link from 'next/link';
import React, { useEffect, useMemo, useState } from 'react';

import DriverSummaryPill from '@/components/profile/DriverSummaryPill';
import { CapabilityGate } from '@/components/shared/CapabilityGate';
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
import { DriverViewModel as DriverViewModelClass } from '@/lib/view-models/DriverViewModel';
import { useServices } from '@/lib/services/ServiceProvider';

// Hook to detect sponsor mode
function useSponsorMode(): boolean {
  const [isSponsor, setIsSponsor] = useState(false);
  useEffect(() => {
    const cookie = document.cookie
      .split('; ')
      .find(row => row.startsWith('gridpilot_demo_mode='));
    if (cookie) {
      const value = cookie.split('=')[1];
      setIsSponsor(value === 'sponsor');
    }
  }, []);
  return isSponsor;
}

// Hook to detect demo user mode
function useDemoUserMode(): { isDemo: boolean; demoRole: string | null } {
  const { session } = useAuth();
  const [demoMode, setDemoMode] = useState({ isDemo: false, demoRole: null as string | null });
  
  useEffect(() => {
    if (!session?.user) {
      setDemoMode({ isDemo: false, demoRole: null });
      return;
    }

    const email = session.user.email?.toLowerCase() || '';
    const displayName = session.user.displayName?.toLowerCase() || '';
    const primaryDriverId = (session.user as any).primaryDriverId || '';

    // Check if this is a demo user
    if (email.includes('demo') ||
        displayName.includes('demo') ||
        primaryDriverId.startsWith('demo-')) {
      
      let role = 'driver';
      if (email.includes('sponsor')) role = 'sponsor';
      else if (email.includes('league-owner') || displayName.includes('owner')) role = 'league-owner';
      else if (email.includes('league-steward') || displayName.includes('steward')) role = 'league-steward';
      else if (email.includes('league-admin') || displayName.includes('admin')) role = 'league-admin';
      else if (email.includes('system-owner') || displayName.includes('system owner')) role = 'system-owner';
      else if (email.includes('super-admin') || displayName.includes('super admin')) role = 'super-admin';
      
      setDemoMode({ isDemo: true, demoRole: role });
    } else {
      setDemoMode({ isDemo: false, demoRole: null });
    }
  }, [session]);
  
  return demoMode;
}

// Sponsor Pill Component - matches the style of DriverSummaryPill
function SponsorSummaryPill({ 
  onClick, 
  companyName = 'Acme Racing Co.',
  activeSponsors = 7,
  impressions = 127,
}: { 
  onClick: () => void;
  companyName?: string;
  activeSponsors?: number;
  impressions?: number;
}) {
  const shouldReduceMotion = useReducedMotion();
  
  return (
    <motion.button
      onClick={onClick}
      className="group flex items-center gap-3 rounded-full bg-gradient-to-r from-iron-gray to-deep-graphite border border-charcoal-outline px-3 py-1.5 hover:border-performance-green/50 transition-all duration-200"
      whileHover={shouldReduceMotion ? {} : { scale: 1.02 }}
      whileTap={shouldReduceMotion ? {} : { scale: 0.98 }}
    >
      {/* Avatar/Logo */}
      <div className="relative">
        <div className="w-8 h-8 rounded-full bg-gradient-to-br from-performance-green/20 to-performance-green/5 border border-performance-green/30 flex items-center justify-center">
          <Building2 className="w-4 h-4 text-performance-green" />
        </div>
        {/* Active indicator */}
        <div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full bg-performance-green border-2 border-deep-graphite" />
      </div>

      {/* Info */}
      <div className="hidden sm:flex flex-col items-start">
        <span className="text-xs font-semibold text-white truncate max-w-[100px]">
          {companyName.split(' ')[0]}
        </span>
        <div className="flex items-center gap-1.5 text-[10px] text-gray-500">
          <span className="flex items-center gap-0.5">
            <Trophy className="w-2.5 h-2.5 text-performance-green" />
            {activeSponsors}
          </span>
          <span className="text-gray-600">•</span>
          <span className="flex items-center gap-0.5">
            <TrendingUp className="w-2.5 h-2.5 text-primary-blue" />
            {impressions}k
          </span>
        </div>
      </div>

      {/* Chevron */}
      <ChevronDown className="w-3.5 h-3.5 text-gray-500 group-hover:text-gray-300 transition-colors" />
    </motion.button>
  );
}

export default function UserPill() {
  const { session } = useAuth();
  const { driverService, mediaService } = useServices();
  const [driver, setDriver] = useState<DriverViewModel | null>(null);
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const isSponsorMode = useSponsorMode();
  const { isDemo, demoRole } = useDemoUserMode();
  const shouldReduceMotion = useReducedMotion();

  const primaryDriverId = useEffectiveDriverId();

  // Load driver data only for non-demo users
  useEffect(() => {
    let cancelled = false;

    async function loadDriver() {
      if (!primaryDriverId || isDemo) {
        if (!cancelled) {
          setDriver(null);
        }
        return;
      }

      const dto = await driverService.findById(primaryDriverId);
      if (!cancelled) {
        setDriver(dto ? new DriverViewModelClass({ ...dto, avatarUrl: (dto as any).avatarUrl ?? null }) : null);
      }
    }

    void loadDriver();

    return () => {
      cancelled = true;
    };
  }, [primaryDriverId, driverService, isDemo]);

  const data = useMemo(() => {
    if (!session?.user) {
      return null;
    }

    // Demo users don't have real driver data
    if (isDemo) {
      return {
        isDemo: true,
        demoRole,
        displayName: session.user.displayName,
        email: session.user.email,
        avatarUrl: session.user.avatarUrl,
      };
    }

    if (!primaryDriverId || !driver) {
      return null;
    }

    // Driver rating + rank are not exposed by the current API contract for the lightweight
    // driver DTO used in the header. Keep it null until the API provides it.
    const rating: number | null = null;
    const rank: number | null = null;

    const avatarSrc = driver.avatarUrl;

    return {
      driver,
      avatarSrc,
      rating,
      rank,
      isDemo: false,
      demoRole: null,
    };
  }, [session, driver, primaryDriverId, isDemo, demoRole]);

  // Close menu when clicking outside
  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (isMenuOpen) {
        const target = e.target as HTMLElement;
        if (!target.closest('[data-user-pill]')) {
          setIsMenuOpen(false);
        }
      }
    };
    document.addEventListener('click', handleClickOutside);
    return () => document.removeEventListener('click', handleClickOutside);
  }, [isMenuOpen]);

  // Logout handler for demo users
  const handleLogout = async () => {
    try {
      // Call the logout API
      await fetch('/api/auth/logout', { method: 'POST' });
      // Clear any demo mode cookies
      document.cookie = 'gridpilot_demo_mode=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
      // Redirect to home
      window.location.href = '/';
    } catch (error) {
      console.error('Logout failed:', error);
      window.location.href = '/';
    }
  };

  // Demo user UI
  if (isDemo && data?.isDemo) {
    const roleLabel = {
      'driver': 'Driver',
      'sponsor': 'Sponsor',
      'league-owner': 'League Owner',
      'league-steward': 'League Steward',
      'league-admin': 'League Admin',
      'system-owner': 'System Owner',
      'super-admin': 'Super Admin',
    }[demoRole || 'driver'];

    const roleColor = {
      'driver': 'text-primary-blue',
      'sponsor': 'text-performance-green',
      'league-owner': 'text-purple-400',
      'league-steward': 'text-amber-400',
      'league-admin': 'text-red-400',
      'system-owner': 'text-indigo-400',
      'super-admin': 'text-pink-400',
    }[demoRole || 'driver'];

    return (
      <div className="relative inline-flex items-center" data-user-pill>
        <motion.button
          onClick={() => setIsMenuOpen((open) => !open)}
          className="group flex items-center gap-3 rounded-full bg-gradient-to-r from-iron-gray to-deep-graphite border border-charcoal-outline px-3 py-1.5 hover:border-primary-blue/50 transition-all duration-200"
          whileHover={{ scale: 1.02 }}
          whileTap={{ scale: 0.98 }}
        >
          {/* Avatar */}
          <div className="relative">
            {data.avatarUrl ? (
              <div className="w-8 h-8 rounded-full overflow-hidden bg-charcoal-outline flex items-center justify-center border border-charcoal-outline/80">
                <img
                  src={data.avatarUrl}
                  alt={data.displayName}
                  className="w-full h-full object-cover"
                />
              </div>
            ) : (
              <div className="w-8 h-8 rounded-full bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/30 flex items-center justify-center">
                <span className="text-xs font-bold text-primary-blue">DEMO</span>
              </div>
            )}
            <div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full bg-primary-blue border-2 border-deep-graphite" />
          </div>

          {/* Info */}
          <div className="hidden sm:flex flex-col items-start">
            <span className="text-xs font-semibold text-white truncate max-w-[100px]">
              {data.displayName}
            </span>
            <span className={`text-[10px] ${roleColor} font-medium`}>
              {roleLabel}
            </span>
          </div>

          {/* Chevron */}
          <ChevronDown className="w-3.5 h-3.5 text-gray-500 group-hover:text-gray-300 transition-colors" />
        </motion.button>

        <AnimatePresence>
          {isMenuOpen && (
            <motion.div
              className="absolute right-0 top-full mt-2 w-56 rounded-xl bg-deep-graphite border border-charcoal-outline shadow-xl shadow-black/30 z-50 overflow-hidden"
              initial={{ opacity: 0, y: -10, scale: 0.95 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, y: -10, scale: 0.95 }}
              transition={{ duration: 0.15 }}
            >
              {/* Header */}
              <div className="p-4 bg-gradient-to-r from-primary-blue/10 to-transparent border-b border-charcoal-outline">
                <div className="flex items-center gap-3">
                  {data.avatarUrl ? (
                    <div className="w-10 h-10 rounded-lg overflow-hidden bg-charcoal-outline flex items-center justify-center border border-charcoal-outline/80">
                      <img
                        src={data.avatarUrl}
                        alt={data.displayName}
                        className="w-full h-full object-cover"
                      />
                    </div>
                  ) : (
                    <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/30 flex items-center justify-center">
                      <span className="text-xs font-bold text-primary-blue">DEMO</span>
                    </div>
                  )}
                  <div>
                    <p className="text-sm font-semibold text-white">{data.displayName}</p>
                    <p className={`text-xs ${roleColor}`}>{roleLabel}</p>
                  </div>
                </div>
                <div className="mt-2 text-xs text-gray-500">
                  Development account - not for production use
                </div>
              </div>

              {/* Menu Items */}
              <div className="py-1 text-sm text-gray-200">
                <div className="px-4 py-2 text-xs text-gray-500 italic">
                  Demo users have limited profile access
                </div>
              </div>

              {/* Footer */}
              <div className="border-t border-charcoal-outline">
                <button
                  type="button"
                  onClick={handleLogout}
                  className="flex w-full items-center justify-between px-4 py-3 text-sm text-gray-500 hover:text-racing-red hover:bg-racing-red/5 transition-colors"
                >
                  <span>Logout</span>
                  <LogOut className="h-4 w-4" />
                </button>
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    );
  }

  // Sponsor mode UI
  if (isSponsorMode) {
    return (
      <div className="relative inline-flex items-center" data-user-pill>
        <SponsorSummaryPill onClick={() => setIsMenuOpen((open) => !open)} />

        <AnimatePresence>
          {isMenuOpen && (
            <motion.div 
              className="absolute right-0 top-full mt-2 w-64 rounded-xl bg-deep-graphite border border-charcoal-outline shadow-xl shadow-black/30 z-50 overflow-hidden"
              initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: -10, scale: 0.95 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, y: -10, scale: 0.95 }}
              transition={{ duration: 0.15 }}
            >
              {/* Header */}
              <div className="p-4 bg-gradient-to-r from-performance-green/10 to-transparent border-b border-charcoal-outline">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-performance-green/20 to-performance-green/5 border border-performance-green/30 flex items-center justify-center">
                    <Building2 className="w-5 h-5 text-performance-green" />
                  </div>
                  <div>
                    <p className="text-sm font-semibold text-white">Acme Racing Co.</p>
                    <p className="text-xs text-gray-500">Sponsor Account</p>
                  </div>
                </div>
                {/* Quick stats */}
                <div className="flex items-center gap-4 mt-3 pt-3 border-t border-charcoal-outline/50">
                  <div className="flex items-center gap-1.5">
                    <Trophy className="w-3.5 h-3.5 text-performance-green" />
                    <span className="text-xs text-gray-400">7 active</span>
                  </div>
                  <div className="flex items-center gap-1.5">
                    <TrendingUp className="w-3.5 h-3.5 text-primary-blue" />
                    <span className="text-xs text-gray-400">127k views</span>
                  </div>
                </div>
              </div>

              {/* Menu Items */}
              <CapabilityGate
                capabilityKey="sponsors.portal"
                fallback={
                  <div className="py-2 px-4 text-xs text-gray-500">
                    Sponsor portal is currently unavailable.
                  </div>
                }
                comingSoon={
                  <div className="py-2 px-4 text-xs text-gray-500">
                    Sponsor portal is coming soon.
                  </div>
                }
              >
                <div className="py-2 text-sm text-gray-200">
                  <Link
                    href="/sponsor"
                    className="flex items-center gap-3 px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
                    onClick={() => setIsMenuOpen(false)}
                  >
                    <BarChart3 className="h-4 w-4 text-performance-green" />
                    <span>Dashboard</span>
                  </Link>
                  <Link
                    href="/sponsor/campaigns"
                    className="flex items-center gap-3 px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
                    onClick={() => setIsMenuOpen(false)}
                  >
                    <Megaphone className="h-4 w-4 text-primary-blue" />
                    <span>My Sponsorships</span>
                  </Link>
                  <Link
                    href="/sponsor/billing"
                    className="flex items-center gap-3 px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
                    onClick={() => setIsMenuOpen(false)}
                  >
                    <CreditCard className="h-4 w-4 text-warning-amber" />
                    <span>Billing</span>
                  </Link>
                  <Link
                    href="/sponsor/settings"
                    className="flex items-center gap-3 px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
                    onClick={() => setIsMenuOpen(false)}
                  >
                    <Settings className="h-4 w-4 text-gray-400" />
                    <span>Settings</span>
                  </Link>
                </div>
              </CapabilityGate>

              {/* Footer */}
              <div className="border-t border-charcoal-outline">
                <button
                  type="button"
                  onClick={() => {
                    document.cookie = 'gridpilot_demo_mode=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
                    window.location.reload();
                  }}
                  className="flex w-full items-center justify-between px-4 py-3 text-sm text-gray-500 hover:text-racing-red hover:bg-racing-red/5 transition-colors"
                >
                  <span>Exit Sponsor Mode</span>
                  <LogOut className="h-4 w-4" />
                </button>
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    );
  }

  if (!session) {
    return (
      <div className="flex items-center gap-2">
        <Link
          href="/auth/login"
          className="inline-flex items-center gap-2 rounded-full bg-iron-gray border border-charcoal-outline px-4 py-1.5 text-xs font-medium text-gray-300 hover:text-white hover:border-gray-500 transition-all"
        >
          Sign In
        </Link>
        <Link
          href="/auth/signup"
          className="inline-flex items-center gap-2 rounded-full bg-primary-blue px-4 py-1.5 text-xs font-semibold text-white shadow-[0_0_12px_rgba(25,140,255,0.5)] hover:bg-primary-blue/90 hover:shadow-[0_0_18px_rgba(25,140,255,0.8)] transition-all"
        >
          Get Started
        </Link>
      </div>
    );
  }

  if (!data || data.isDemo) {
    return null;
  }

  // Type guard to ensure data has the required properties for regular driver
  if (!data.driver || data.rating === undefined || data.rank === undefined) {
    return null;
  }

  return (
    <div className="relative inline-flex items-center" data-user-pill>
      <DriverSummaryPill
        driver={data.driver}
        rating={data.rating}
        rank={data.rank}
        avatarSrc={data.avatarSrc}
        onClick={() => setIsMenuOpen((open) => !open)}
      />

      <AnimatePresence>
        {isMenuOpen && (
          <motion.div 
            className="absolute right-0 top-full mt-2 w-48 rounded-lg bg-deep-graphite border border-charcoal-outline shadow-lg z-50"
            initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            transition={{ duration: 0.15 }}
          >
            <div className="py-1 text-sm text-gray-200">
              <Link
                href="/profile"
                className="block px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
                onClick={() => setIsMenuOpen(false)}
              >
                Profile
              </Link>
              <Link
                href="/profile/leagues"
                className="block px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
                onClick={() => setIsMenuOpen(false)}
              >
                Manage leagues
              </Link>
              <Link
                href="/profile/liveries"
                className="flex items-center gap-2 px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
                onClick={() => setIsMenuOpen(false)}
              >
                <Paintbrush className="h-4 w-4" />
                <span>Liveries</span>
              </Link>
              <Link
                href="/profile/sponsorship-requests"
                className="flex items-center gap-2 px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
                onClick={() => setIsMenuOpen(false)}
              >
                <Handshake className="h-4 w-4 text-performance-green" />
                <span>Sponsorship Requests</span>
              </Link>
              <Link
                href="/profile/settings"
                className="flex items-center gap-2 px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
                onClick={() => setIsMenuOpen(false)}
              >
                <Settings className="h-4 w-4" />
                <span>Settings</span>
              </Link>
            </div>
            <div className="border-t border-charcoal-outline">
              <form action="/auth/logout" method="POST">
                <button
                  type="submit"
                  className="flex w-full items-center justify-between px-3 py-2 text-sm text-gray-400 hover:text-red-400 hover:bg-red-500/10 transition-colors"
                >
                  <span>Logout</span>
                  <LogOut className="h-4 w-4" />
                </button>
              </form>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}