'use client';

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
import { User } from '@/lib/session';
import { fetchPreferences, fetchReminderSettings, saveReminderSettings, ReminderSettings, UserPreferences } from '@/lib/storage';
import { useNotifications } from '@/hooks/useNotifications';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { Cigarette, Leaf, LogOut, Home, ChevronDown, Sun, Moon, Bell, BellOff, BellRing, Menu } from 'lucide-react';
import { useTheme } from '@/lib/theme-context';

interface UserHeaderProps {
  user: User;
  preferences?: UserPreferences | null;
}

export function UserHeader({ user, preferences }: UserHeaderProps) {
  const [userName, setUserName] = useState<string | null>(null);
  const [reminderSettings, setReminderSettings] = useState<ReminderSettings>({ enabled: false, reminderTime: '09:00' });
  const [showReminderDialog, setShowReminderDialog] = useState(false);
  const [localTime, setLocalTime] = useState('09:00');
  const router = useRouter();
  const { theme, toggleTheme } = useTheme();
  const { isSupported, permission, requestPermission } = useNotifications(reminderSettings);

  useEffect(() => {
    const loadData = async () => {
      // If preferences passed from parent, use them. Otherwise fetch.
      /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
      const [prefs, reminders] = await Promise.all([
        preferences ? Promise.resolve(preferences) : fetchPreferences(),
        fetchReminderSettings(),
      ]);

      if (prefs) {
        setUserName(prefs.userName);
      }

      setReminderSettings(reminders);
      setLocalTime(reminders.reminderTime);
    };
    loadData();
  }, [preferences]);

  const handleToggleReminders = async () => {
    if (!reminderSettings.enabled && permission !== 'granted') {
      const result = await requestPermission();
      if (result !== 'granted') return;
    }
    const newSettings = { ...reminderSettings, enabled: !reminderSettings.enabled };
    setReminderSettings(newSettings);
    await saveReminderSettings(newSettings);
  };

  const handleTimeChange = async (newTime: string) => {
    setLocalTime(newTime);
    const newSettings = { ...reminderSettings, reminderTime: newTime };
    setReminderSettings(newSettings);
    await saveReminderSettings(newSettings);
  };

  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="sticky top-0 z-50 border-b border-border/10 transition-colors duration-300" style={{
      background: theme === 'light'
        ? 'rgba(255, 255, 255, 0.8)'
        : 'linear-gradient(135deg, rgba(10, 10, 20, 0.98) 0%, rgba(20, 30, 60, 0.95) 50%, rgba(15, 25, 50, 0.98) 100%)',
      backdropFilter: 'blur(10px)',
    }}>
      <div className="container mx-auto px-4 py-3 sm:py-4 flex items-center justify-between">
        <div className="flex items-center gap-4 sm:gap-8">
          <h1
            className="text-xl sm:text-2xl font-bold cursor-pointer hover:opacity-90 transition-all duration-300 hover:scale-105"
            onClick={() => handleNavigate('/')}
            style={{
              background: 'linear-gradient(135deg, #a78bfa 0%, #818cf8 50%, #6366f1 100%)',
              WebkitBackgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
              backgroundClip: 'text',
            }}
          >
            QuitTraq
          </h1>
          {userName && (
            <p className="text-foreground/90 text-lg hidden sm:block ml-4">
              Welcome {userName}, you got this!
            </p>
          )}
        </div>

        <div className="flex items-center gap-2 sm:gap-3">
          <button
            onClick={() => setShowReminderDialog(true)}
            className={`p-2.5 sm:p-2 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-white/30 hover:scale-110 active:scale-95 ${reminderSettings.enabled
              ? 'bg-indigo-500/30 hover:bg-indigo-500/40'
              : 'bg-muted hover:bg-muted/80'
              }`}
            aria-label="Reminder settings"
            title={reminderSettings.enabled ? `Reminders on at ${reminderSettings.reminderTime}` : 'Reminders off'}
          >
            {reminderSettings.enabled ? (
              <BellRing className="h-5 w-5 text-indigo-300 transition-transform duration-300" />
            ) : (
              <Bell className="h-5 w-5 text-muted-foreground transition-transform duration-300" />
            )}
          </button>
          <button
            onClick={toggleTheme}
            className="p-2.5 sm:p-2 rounded-full bg-muted hover:bg-muted/80 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary/30 hover:scale-110 active:scale-95"
            aria-label="Toggle theme"
          >
            {theme === 'dark' ? (
              <Moon className="h-5 w-5 text-blue-300 transition-transform duration-300" />
            ) : (
              <Sun className="h-5 w-5 text-yellow-400 transition-transform duration-300" />
            )}
          </button>

          {/* Main Navigation Menu */}
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <button
                className="p-2.5 sm:p-2 rounded-full bg-muted hover:bg-muted/80 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary/30 hover:scale-110 active:scale-95"
                aria-label="Open menu"
              >
                <Menu className="h-5 w-5 text-muted-foreground" />
              </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" sideOffset={8}>
              <DropdownMenuItem onClick={() => handleNavigate('/')}>
                <Home className="mr-3 h-4 w-4 text-muted-foreground" />
                <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>
            </DropdownMenuContent>
          </DropdownMenu>

          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <button className="flex items-center gap-2 px-3 py-2 rounded-full bg-muted hover:bg-muted/80 transition-all focus:outline-none focus:ring-2 focus:ring-primary/30">
                <Avatar className="h-8 w-8 ring-2 ring-primary/30">
                  <AvatarImage src={user.profilePictureUrl ?? undefined} alt={userName || 'User'} />
                  <AvatarFallback className="bg-primary/20 text-primary text-sm">{initials}</AvatarFallback>
                </Avatar>
                <ChevronDown className="h-4 w-4 text-muted-foreground" />
              </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" sideOffset={8}>
              <DropdownMenuItem onClick={() => handleNavigate('/')}>
                <Home className="mr-3 h-4 w-4 text-muted-foreground" />
                <span>Dashboard</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-2">
          <p className="text-muted-foreground text-sm">
            Welcome {userName}, you got this!
          </p>
        </div>
      )}

      {/* Reminder Settings Dialog */}
      <Dialog open={showReminderDialog} onOpenChange={setShowReminderDialog}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <Bell className="h-5 w-5 text-indigo-400" />
              Daily Reminders
            </DialogTitle>
          </DialogHeader>

          <div className="space-y-4 py-4">


            {/* Enable/Disable Toggle */}
            <div className="flex items-center justify-between p-3 bg-muted rounded-lg">
              <div className="flex items-center gap-2">
                {reminderSettings.enabled ? (
                  <BellRing className="h-4 w-4 text-indigo-400" />
                ) : (
                  <BellOff className="h-4 w-4 text-muted-foreground" />
                )}
                <span className="text-sm">
                  {reminderSettings.enabled ? 'Reminders On' : 'Reminders Off'}
                </span>
              </div>
              <button
                onClick={handleToggleReminders}
                disabled={!isSupported || (permission === 'denied' && !reminderSettings.enabled)}
                className={`relative w-12 h-6 rounded-full transition-all duration-300 ${reminderSettings.enabled ? 'bg-indigo-500' : 'bg-muted-foreground/30'
                  } ${!isSupported || (permission === 'denied' && !reminderSettings.enabled) ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
              >
                <div
                  className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-all duration-300 ${reminderSettings.enabled ? 'left-7' : 'left-1'
                    }`}
                />
              </button>
            </div>

            {/* Time Picker */}
            {reminderSettings.enabled && (
              <div className="space-y-2">
                <Label htmlFor="reminderTime" className="text-sm">
                  Reminder Time
                </Label>
                <Input
                  id="reminderTime"
                  type="time"
                  value={localTime}
                  onChange={(e) => handleTimeChange(e.target.value)}
                />
                <p className="text-xs text-muted-foreground">
                  You&apos;ll receive a reminder at this time each day
                </p>
              </div>
            )}

            {/* Request Permission Button */}
            {isSupported && permission === 'default' && (
              <Button
                onClick={requestPermission}
                variant="outline"
                className="w-full"
              >
                <Bell className="mr-2 h-4 w-4" />
                Enable Notifications
              </Button>
            )}

            {/* Denied Message */}
            {permission === 'denied' && (
              <div className="p-3 bg-red-500/10 border border-red-500/30 rounded-lg">
                <p className="text-xs text-red-400">
                  Notifications are blocked. Please enable them in your browser settings to receive reminders.
                </p>
              </div>
            )}
          </div>
        </DialogContent>
      </Dialog>
    </header>
  );
}