'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, Shield } 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 { useFindDriverById } from '@/hooks/driver/useFindDriverById';

// Hook to detect demo user mode based on session
function useDemoUserMode(): { isDemo: boolean; demoRole: string | null } {
  const { session } = useAuth();
  const [demoMode, setDemoMode] = useState({ isDemo: false, demoRole: null as string | null });
  
  // Check if this is a demo user
  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 || '';
    const role = (session.user as any).role;

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

// Helper to check if user has admin access (Owner or Super Admin)
function useHasAdminAccess(): boolean {
  const { session } = useAuth();
  const { isDemo, demoRole } = useDemoUserMode();
  
  // Demo users with system-owner or super-admin roles
  if (isDemo && (demoRole === 'system-owner' || demoRole === 'super-admin')) {
    return true;
  }
  
  // Real users - would need role information from session
  // For now, we'll check if the user has any admin-related capabilities
  // This can be enhanced when the API includes role information
  if (!session?.user) return false;
  
  // Check for admin-related email patterns as a temporary measure
  const email = session.user.email?.toLowerCase() || '';
  const displayName = session.user.displayName?.toLowerCase() || '';
  
  return email.includes('system-owner') ||
         email.includes('super-admin') ||
         displayName.includes('system owner') ||
         displayName.includes('super admin');
}

// 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 [isMenuOpen, setIsMenuOpen] = useState(false);
  const { isDemo, demoRole } = useDemoUserMode();
  const shouldReduceMotion = useReducedMotion();

  const primaryDriverId = useEffectiveDriverId();

  // Use React-Query hook for driver data (only for non-demo users)
  const { data: driverDto } = useFindDriverById(primaryDriverId || '', {
    enabled: !!primaryDriverId && !isDemo,
  });

  // Transform DTO to ViewModel
  const driver = useMemo(() => {
    if (!driverDto) return null;
    return new DriverViewModelClass({ ...driverDto, avatarUrl: (driverDto as any).avatarUrl ?? null });
  }, [driverDto]);

  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' });
      // Redirect to home
      window.location.href = '/';
    } catch (error) {
      console.error('Logout failed:', error);
      window.location.href = '/';
    }
  };

  // Call hooks unconditionally before any returns
  const hasAdminAccess = useHasAdminAccess();
  
  // Handle unauthenticated users
  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>
    );
  }

  // For all authenticated users (demo or regular), show the user pill
  // Determine what to show in the pill
  const displayName = driver?.name || session.user.displayName || session.user.email || 'User';
  const avatarUrl = session.user.avatarUrl;
  const roleLabel = isDemo ? {
    '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'] : null;

  const roleColor = isDemo ? {
    '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'] : null;

  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">
          {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={avatarUrl}
                alt={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">
                {displayName[0]?.toUpperCase() || 'U'}
              </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]">
            {displayName}
          </span>
          {roleLabel && (
            <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 ${isDemo ? 'from-primary-blue/10' : 'from-iron-gray/20'} to-transparent border-b border-charcoal-outline`}>
              <div className="flex items-center gap-3">
                {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={avatarUrl}
                      alt={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">
                      {displayName[0]?.toUpperCase() || 'U'}
                    </span>
                  </div>
                )}
                <div>
                  <p className="text-sm font-semibold text-white">{displayName}</p>
                  {roleLabel && (
                    <p className={`text-xs ${roleColor}`}>{roleLabel}</p>
                  )}
                  {isDemo && (
                    <p className="text-xs text-gray-500">Demo Account</p>
                  )}
                </div>
              </div>
              {isDemo && (
                <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">
              {/* Admin link for Owner/Super Admin users */}
              {hasAdminAccess && (
                <Link
                  href="/admin"
                  className="flex items-center gap-3 px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
                  onClick={() => setIsMenuOpen(false)}
                >
                  <Shield className="h-4 w-4 text-indigo-400" />
                  <span>Admin Area</span>
                </Link>
              )}
              
              {/* Sponsor portal link for demo sponsor users */}
              {isDemo && demoRole === 'sponsor' && (
                <>
                  <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>
                </>
              )}

              {/* Regular user profile links */}
              <Link
                href="/profile"
                className="block px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
                onClick={() => setIsMenuOpen(false)}
              >
                Profile
              </Link>
              <Link
                href="/profile/leagues"
                className="block px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
                onClick={() => setIsMenuOpen(false)}
              >
                Manage leagues
              </Link>
              <Link
                href="/profile/liveries"
                className="flex items-center gap-2 px-4 py-2.5 hover:bg-iron-gray/50 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-4 py-2.5 hover:bg-iron-gray/50 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-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
                onClick={() => setIsMenuOpen(false)}
              >
                <Settings className="h-4 w-4" />
                <span>Settings</span>
              </Link>

              {/* Demo-specific info */}
              {isDemo && (
                <div className="px-4 py-2 text-xs text-gray-500 italic border-t border-charcoal-outline/50 mt-1">
                  Demo users have limited profile access
                </div>
              )}
            </div>

            {/* Footer */}
            <div className="border-t border-charcoal-outline">
              {isDemo ? (
                <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>
              ) : (
                <form action="/auth/logout" method="POST">
                  <button
                    type="submit"
                    className="flex w-full items-center justify-between px-4 py-3 text-sm text-gray-500 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>
  );
}