374 lines
14 KiB
TypeScript
374 lines
14 KiB
TypeScript
'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 { useEffect, useMemo, useState } from 'react';
|
||
|
||
import DriverSummaryPill from '@/components/profile/DriverSummaryPill';
|
||
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
|
||
import type { DriverDTO } from '@core/racing/application/dto/DriverDTO';
|
||
import { EntityMappers } from '@core/racing/application/mappers/EntityMappers';
|
||
|
||
// TODO EntityMapper is legacy. Must use ´useServices` hook.
|
||
|
||
// 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 [driver, setDriver] = useState<DriverDTO | 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 repo = getDriverRepository();
|
||
const entity = await repo.findById(primaryDriverId);
|
||
if (!cancelled) {
|
||
setDriver(EntityMappers.toDriverDTO(entity));
|
||
}
|
||
}
|
||
|
||
loadDriver();
|
||
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [primaryDriverId]);
|
||
|
||
const data = useMemo(() => {
|
||
if (!session?.user || !primaryDriverId || !driver) {
|
||
return null;
|
||
}
|
||
|
||
const driverStats = getDriverStats(primaryDriverId);
|
||
const allRankings = getAllDriverRankings();
|
||
|
||
let rating: number | null = driverStats?.rating ?? null;
|
||
let rank: number | null = null;
|
||
let totalDrivers: number | null = null;
|
||
|
||
if (driverStats) {
|
||
totalDrivers = allRankings.length || null;
|
||
|
||
if (typeof driverStats.overallRank === 'number' && driverStats.overallRank > 0) {
|
||
rank = driverStats.overallRank;
|
||
} else {
|
||
const indexInGlobal = allRankings.findIndex(
|
||
(stat) => stat.driverId === driverStats.driverId,
|
||
);
|
||
if (indexInGlobal !== -1) {
|
||
rank = indexInGlobal + 1;
|
||
}
|
||
}
|
||
|
||
if (rating === null) {
|
||
const globalEntry = allRankings.find(
|
||
(stat) => stat.driverId === driverStats.driverId,
|
||
);
|
||
if (globalEntry) {
|
||
rating = globalEntry.rating;
|
||
}
|
||
}
|
||
}
|
||
|
||
const avatarSrc = getImageService().getDriverAvatar(primaryDriverId);
|
||
|
||
return {
|
||
driver,
|
||
avatarSrc,
|
||
rating,
|
||
rank,
|
||
};
|
||
}, [session, driver, primaryDriverId]);
|
||
|
||
// 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 */}
|
||
<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>
|
||
|
||
{/* 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>
|
||
);
|
||
} |