'use client';

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { User } from '@/lib/session';
import { fetchPreferences } from '@/lib/storage';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { Cigarette, Leaf, LogOut, Home, ChevronDown } from 'lucide-react';

interface UserHeaderProps {
  user: User;
}

export function UserHeader({ user }: UserHeaderProps) {
  const [userName, setUserName] = useState<string | null>(null);
  const router = useRouter();

  useEffect(() => {
    const loadUserName = async () => {
      const prefs = await fetchPreferences();
      setUserName(prefs.userName);
    };
    loadUserName();
  }, []);

  const initials = [user.firstName?.[0], user.lastName?.[0]]
    .filter(Boolean)
    .join('')
    .toUpperCase() || user.email[0].toUpperCase();

  const handleLogout = () => {
    window.location.href = '/api/auth/logout';
  };

  const handleNavigate = (path: string) => {
    router.push(path);
  };

  return (
    <header className="border-b border-white/10" style={{
      background: 'linear-gradient(135deg, rgba(10, 10, 20, 0.95) 0%, rgba(20, 30, 60, 0.9) 50%, rgba(15, 25, 50, 0.95) 100%)',
      backdropFilter: 'blur(10px)',
    }}>
      <div className="container mx-auto px-4 py-4 flex items-center justify-between">
        <div className="flex items-center gap-4">
          <h1
            className="text-2xl font-bold text-white cursor-pointer hover:opacity-80 transition-opacity"
            onClick={() => handleNavigate('/')}
          >
            QuitTraq
          </h1>
          {userName && (
            <p className="text-white/90 text-lg hidden sm:block">
              Welcome {userName}, you got this!
            </p>
          )}
        </div>

        <div className="flex items-center gap-2">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <button className="flex items-center gap-2 px-3 py-2 rounded-full bg-white/10 hover:bg-white/20 transition-all focus:outline-none focus:ring-2 focus:ring-white/30">
                <Avatar className="h-8 w-8 ring-2 ring-white/30">
                  <AvatarImage src={user.profilePictureUrl ?? undefined} alt={userName || 'User'} />
                  <AvatarFallback className="bg-white/20 text-white text-sm">{initials}</AvatarFallback>
                </Avatar>
                <ChevronDown className="h-4 w-4 text-white" />
              </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" sideOffset={8}>
              <DropdownMenuItem onClick={() => handleNavigate('/')}>
                <Home className="mr-3 h-4 w-4 text-white/70" />
                <span>Dashboard</span>
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem onClick={() => handleNavigate('/track/nicotine')}>
                <Cigarette className="mr-3 h-4 w-4 text-red-400" />
                <span>Track Nicotine Usage</span>
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => handleNavigate('/track/marijuana')}>
                <Leaf className="mr-3 h-4 w-4 text-green-400" />
                <span>Track Marijuana Usage</span>
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem onClick={handleLogout} className="text-red-400 hover:text-red-300">
                <LogOut className="mr-3 h-4 w-4" />
                <span>Sign out</span>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>
      {userName && (
        <div className="sm:hidden container mx-auto px-4 pb-3">
          <p className="text-white/90 text-base">
            Welcome {userName}, you got this!
          </p>
        </div>
      )}
    </header>
  );
}