'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;
}

// 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 shouldReduceMotion = useReducedMotion();


  const primaryDriverId = useEffectiveDriverId();

  useEffect(() => {
    let cancelled = false;

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

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

    void loadDriver();

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

  const data = useMemo(() => {
    if (!session?.user || !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 = mediaService.getDriverAvatar(primaryDriverId);

    return {
      driver,
      avatarSrc,
      rating,
      rank,
    };
  }, [session, driver, primaryDriverId, mediaService]);

  // 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]);

  // 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) {
    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>
  );
}