'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 {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
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 { useRef, useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { Cigarette, Leaf, LogOut, Home, ChevronDown, Sun, Moon, Bell, BellOff, BellRing, Menu, Sparkles, Link as LinkIcon } from 'lucide-react';
import { useTheme } from '@/lib/theme-context';
import { InstallAppButton } from './InstallAppButton';
import { cn } from '@/lib/utils';
import { SideMenu } from './SideMenu';

interface UserHeaderProps {
  user: User;
  preferences?: UserPreferences | null;
  onModalStateChange?: (isOpen: boolean) => void;
}

interface HourlyTimePickerProps {
  value: string;
  onChange: (time: string) => void;
}

function HourlyTimePicker({ value, onChange }: HourlyTimePickerProps) {
  const [parsedHours, parsedMinutes] = value.split(':').map(Number);
  const currentAmpm = parsedHours >= 12 ? 'PM' : 'AM';
  const currentHour12 = parsedHours % 12 || 12;
  const hourString = currentHour12.toString().padStart(2, '0');
  const minuteString = parsedMinutes.toString().padStart(2, '0');

  const updateTime = (newHourStr: string, newMinuteStr: string, newAmpmStr: string) => {
    let h = parseInt(newHourStr);
    if (newAmpmStr === 'PM' && h !== 12) h += 12;
    if (newAmpmStr === 'AM' && h === 12) h = 0;

    onChange(`${h.toString().padStart(2, '0')}:${newMinuteStr}`);
  };

  const hoursOptions = Array.from({ length: 12 }, (_, i) => (i + 1).toString().padStart(2, '0'));
  const minutesOptions = Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0'));

  return (
    <div className="flex gap-2 w-full">
      {/* Hour Select */}
      <div className="flex-1">
        <Select
          value={hourString}
          onValueChange={(val) => updateTime(val, minuteString, currentAmpm)}
        >
          <SelectTrigger className="w-full">
            <SelectValue placeholder="Hour" />
          </SelectTrigger>
          <SelectContent>
            {hoursOptions.map((h) => (
              <SelectItem key={h} value={h}>
                {h}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      {/* Minute Select */}
      <div className="flex-1">
        <Select
          value={minuteString}
          onValueChange={(val) => updateTime(hourString, val, currentAmpm)}
        >
          <SelectTrigger className="w-full">
            <SelectValue placeholder="Min" />
          </SelectTrigger>
          <SelectContent>
            {minutesOptions.map((m) => (
              <SelectItem key={m} value={m}>
                {m}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      {/* AM/PM Select */}
      <div className="w-24">
        <Select
          value={currentAmpm}
          onValueChange={(val) => updateTime(hourString, minuteString, val)}
        >
          <SelectTrigger className="w-full">
            <SelectValue placeholder="AM/PM" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="AM">AM</SelectItem>
            <SelectItem value="PM">PM</SelectItem>
          </SelectContent>
        </Select>
      </div>
    </div>
  );
}

export function UserHeader({ user, preferences, onModalStateChange }: UserHeaderProps) {
  const [userName, setUserName] = useState<string | null>(null);
  const [reminderSettings, setReminderSettings] = useState<ReminderSettings>({ enabled: false, reminderTime: '09:00', frequency: 'daily' });
  const [showReminderDialog, setShowReminderDialog] = useState(false);
  const [isSideMenuOpen, setIsSideMenuOpen] = useState(false);
  const [localTime, setLocalTime] = useState('09:00');
  const [localFrequency, setLocalFrequency] = useState<'daily' | 'hourly'>('daily');
  const router = useRouter();
  const { theme, toggleTheme } = useTheme();
  const { isSupported, permission, requestPermission } = useNotifications(reminderSettings);
  const videoRef = useRef<HTMLVideoElement>(null);
  const [isVideoLoaded, setIsVideoLoaded] = useState(false);
  const [isVideoPlaying, setIsVideoPlaying] = useState(false);

  const [isMobile, setIsMobile] = useState(false);
  const [isPWA, setIsPWA] = useState(false);

  useEffect(() => {
    // Detect Mobile/PWA
    const checkMobile = () => {
      const userAgent = typeof window.navigator === "undefined" ? "" : navigator.userAgent;
      const mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
      setIsMobile(mobile);

      // Detect PWA (standalone mode)
      const isStandalone = window.matchMedia('(display-mode: standalone)').matches || (window.navigator as any).standalone;
      setIsPWA(!!isStandalone);
    };
    checkMobile();
  }, []);

  // Force play background video
  useEffect(() => {
    if (videoRef.current) {
      const video = videoRef.current;

      // Optimization: For Desktop, we prioritize quality logic if we had multiple sources.
      // For now, we ensure robust playback for both.

      // PWA/Mobile specific optimizations
      if (isMobile || isPWA) {
        // Ensure strictly muted/inline for iOS policy
        video.muted = true;
        video.defaultMuted = true;
        video.playsInline = true;
        video.setAttribute('playsinline', 'true'); // Explicit attribute for some older browsers
        video.setAttribute('webkit-playsinline', 'true');
      }

      video.loop = true;

      // If already ready, set loaded immediately
      if (video.readyState >= 3) {
        setIsVideoLoaded(true);
      }

      // Try playing
      const playPromise = video.play();
      if (playPromise !== undefined) {
        playPromise.catch((err) => {
          console.warn("Autoplay failed, user interaction might be needed:", err);
          // If PWA, we might want to show the poster as fallback silently without error spam
        });
      }
    }
  }, [isMobile, isPWA]);

  useEffect(() => {
    if (onModalStateChange) {
      onModalStateChange(showReminderDialog || isSideMenuOpen);
    }
  }, [showReminderDialog, isSideMenuOpen, onModalStateChange]);

  // Helper to parse time string
  const [parsedHours, parsedMinutes] = reminderSettings.reminderTime.split(':').map(Number);
  const currentAmpm = parsedHours >= 12 ? 'PM' : 'AM';
  const currentHour12 = parsedHours % 12 || 12;
  const hourString = currentHour12.toString().padStart(2, '0');
  const minuteString = parsedMinutes.toString().padStart(2, '0');

  const updateTime = async (newHourStr: string, newMinuteStr: string, newAmpmStr: string) => {
    let h = parseInt(newHourStr);
    if (newAmpmStr === 'PM' && h !== 12) h += 12;
    if (newAmpmStr === 'AM' && h === 12) h = 0;

    const timeString = `${h.toString().padStart(2, '0')}:${newMinuteStr}`;
    setLocalTime(timeString);

    const newSettings = { ...reminderSettings, reminderTime: timeString };
    setReminderSettings(newSettings);
    await saveReminderSettings(newSettings);
  };

  // Generate options
  const hoursOptions = Array.from({ length: 12 }, (_, i) => (i + 1).toString().padStart(2, '0'));
  const minutesOptions = Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0'));

  useEffect(() => {
    const loadData = async () => {
      const [prefs, reminders] = await Promise.all([
        preferences ? Promise.resolve(preferences) : fetchPreferences(),
        fetchReminderSettings(),
      ]);

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

      const detectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
      let settingsToUse = reminders;

      if (reminders.timezone !== detectedTimezone) {
        settingsToUse = { ...reminders, timezone: detectedTimezone };
        await saveReminderSettings(settingsToUse);
      }

      setReminderSettings(settingsToUse);
      setLocalTime(settingsToUse.reminderTime);
      setLocalFrequency(settingsToUse.frequency || 'daily');
    };
    loadData();
  }, [preferences]);

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

  const handleFrequencyChange = async (newFrequency: 'daily' | 'hourly') => {
    setLocalFrequency(newFrequency);
    const newSettings = { ...reminderSettings, frequency: newFrequency };
    setReminderSettings(newSettings);
    await saveReminderSettings(newSettings);
  };

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

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

  return (
    <>
      <header className="sticky top-0 z-50 relative overflow-hidden h-16 sm:h-20" style={{
        borderBottom: '1px solid rgba(255,255,255,0.08)'
      }}>
        {/* Background Layers */}
        <div className="absolute inset-0 z-[-1] pointer-events-none overflow-hidden">
          <style dangerouslySetInnerHTML={{
            __html: `
            /* Absolute nuclear suppression of all native iOS media HUDs */
            video::-webkit-media-controls {
              display: none !important;
              opacity: 0 !important;
              -webkit-appearance: none !important;
            }
            video::-webkit-media-controls-start-playback-button {
              display: none !important;
              opacity: 0 !important;
              -webkit-appearance: none !important;
            }
            video::-webkit-media-controls-panel {
              display: none !important;
              opacity: 0 !important;
              -webkit-appearance: none !important;
            }
            video::-webkit-media-controls-play-button {
               display: none !important;
               opacity: 0 !important;
               -webkit-appearance: none !important;
            }
            /* Extra safety for PWA/Safari specifics */
            *::-webkit-media-controls-start-playback-button {
              display: none !important;
              -webkit-appearance: none;
            }
          ` }} />

          {/* Base Background Layer - Simple semi-transparent base */}
          <div
            className="absolute inset-0 transition-colors duration-500"
            style={{
              background: 'rgba(10, 10, 20, 0.5)',
            }}
          />

          {/* Wrapper for background image/video to allow click-to-play */}
          <div
            className="absolute inset-0 w-full h-full pointer-events-auto"
            onClick={() => {
              if (videoRef.current && videoRef.current.paused) {
                videoRef.current.play().catch((err) => {
                  console.warn("User interaction play failed:", err);
                });
              }
            }}
          >
            {/* Static Poster Image Layer (Safe Fallback) */}
            <img
              src="/videos/smoke-poster.jpg"
              alt=""
              className={cn(
                "absolute inset-0 w-full h-full object-cover transition-opacity duration-1000",
                isMobile ? "scale-105" : "scale-110", // Reduce scale on mobile
                isVideoPlaying ? "opacity-0" : "opacity-100" // Hide poster completely when playing for better perf, or keep low opacity
              )}
              aria-hidden="true"
            />

            {/* Smoke Video background - Only visible when MOVING */}
            <video
              ref={videoRef}
              autoPlay
              loop
              muted
              playsInline
              {...({
                "webkit-playsinline": "true",
                "x-webkit-airplay": "deny",
                "disableRemotePlayback": true
              } as any)}
              preload="auto"
              controls={false}
              disablePictureInPicture
              onContextMenu={(e) => e.preventDefault()}
              onLoadedData={() => setIsVideoLoaded(true)}
              onPlay={() => setIsVideoPlaying(true)}
              onPlaying={() => setIsVideoPlaying(true)}
              onTimeUpdate={() => {
                if (!isVideoPlaying && videoRef.current && videoRef.current.currentTime > 0) {
                  setIsVideoPlaying(true);
                }
              }}
              className={cn(
                "absolute inset-0 w-full h-full object-cover transition-opacity duration-[1500ms] ease-in-out",
                isMobile ? "scale-105" : "scale-110",
                isVideoPlaying
                  ? "opacity-50" // Simple consistent transparency
                  : "opacity-[0.01]"
              )}
            >
              <source src="/videos/smoke.mp4" type="video/mp4" />
            </video>
          </div>

        </div>

        <div className="container mx-auto px-4 h-16 sm:h-20 flex items-center justify-between relative z-50">
          {/* LEFT: User Profile / Side Menu Trigger */}
          <div className="flex-1 flex justify-start">
            <button
              onClick={() => setIsSideMenuOpen(true)}
              className="group relative flex items-center gap-2 p-1.5 pr-3 rounded-full transition-all hover:bg-white/10 active:scale-95 border border-transparent hover:border-white/10"
            >
              <div className="relative">
                <Avatar className="h-9 w-9 sm:h-10 sm:w-10 ring-2 ring-white/20 transition-all group-hover:ring-white/50 shadow-sm">
                  <AvatarImage src={user.profilePictureUrl ?? undefined} alt={userName || 'User'} />
                  <AvatarFallback className="bg-gradient-to-br from-indigo-500 to-purple-500 text-white font-bold">{initials}</AvatarFallback>
                </Avatar>
                <div className="absolute -bottom-1 -right-1 bg-slate-900 rounded-full p-0.5 shadow-sm border border-white/10">
                  <Menu className="h-3 w-3 text-white" />
                </div>
              </div>
              <div className="hidden sm:block text-left">
                <div className="text-[10px] font-bold uppercase tracking-widest opacity-50 text-white leading-none">Menu</div>
              </div>
            </button>
          </div>

          {/* CENTER: Title and Welcome Message */}
          <div className="flex-[2] flex flex-col items-center justify-center text-center">
            <h1
              className={cn(
                "text-xl sm:text-2xl font-bold cursor-pointer transition-all duration-300 hover:scale-105 tracking-tight leading-tight bg-clip-text text-transparent w-fit mx-auto",
                "bg-gradient-to-br from-[#a78bfa] to-[#f472b6]"
              )}
              onClick={() => handleNavigate('/')}
              style={{
                filter: 'drop-shadow(0 0 10px rgba(167, 139, 250, 0.3))'
              }}
            >
              QuitTraq
            </h1>
            {userName && (
              <p className="text-[10px] sm:text-xs font-medium text-white/60 tracking-wide mt-0.5 whitespace-nowrap overflow-hidden">
                Welcome {userName}, you got this!
              </p>
            )}
          </div>

          {/* RIGHT: Action Buttons */}
          <div className="flex-1 flex items-center justify-end gap-1.5 sm:gap-3">
            <button
              onClick={() => setShowReminderDialog(true)}
              className={cn(
                "p-2 sm:p-2.5 rounded-full transition-all duration-300 active:scale-90 shadow-sm",
                reminderSettings.enabled
                  ? 'bg-indigo-500/15 text-indigo-400 border border-indigo-500/20'
                  : 'bg-white/5 border border-transparent text-white/50 hover:bg-white/10'
              )}
            >
              {reminderSettings.enabled ? (
                <BellRing className="h-4.5 w-4.5 sm:h-5 sm:w-5" />
              ) : (
                <Bell className="h-4.5 w-4.5 sm:h-5 sm:w-5" />
              )}
            </button>
            <InstallAppButton />
            <button
              onClick={toggleTheme}
              className="p-2 sm:p-2.5 rounded-full bg-white/5 border border-transparent hover:bg-white/10 transition-all active:scale-90"
            >
              {theme === 'dark' ? (
                <Moon className="h-4.5 w-4.5 sm:h-5 sm:w-5 text-blue-300" />
              ) : (
                <Sun className="h-4.5 w-4.5 sm:h-5 sm:w-5 text-yellow-500" />
              )}
            </button>
          </div>
        </div>
      </header>

      {/* Side Menu Integration */}
      <SideMenu
        isOpen={isSideMenuOpen}
        onClose={() => setIsSideMenuOpen(false)}
        user={user}
        userName={userName}
      />

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

          <div className="space-y-4 py-4 px-1">
            {/* Enable/Disable Toggle */}
            <div className={cn(
              "flex items-center justify-between p-4 rounded-2xl border transition-all",
              theme === 'light' ? "bg-slate-50 border-slate-100" : "bg-white/5 border-white/5"
            )}>
              <div className="flex items-center gap-3">
                <div className={cn(
                  "p-2.5 rounded-xl",
                  reminderSettings.enabled ? "bg-indigo-500/20 text-indigo-400" : "bg-slate-500/20 text-slate-400"
                )}>
                  {reminderSettings.enabled ? <BellRing className="h-5 w-5" /> : <BellOff className="h-5 w-5" />}
                </div>
                <div className="flex flex-col">
                  <span className="text-sm font-bold">
                    {reminderSettings.enabled ? 'Enabled' : 'Disabled'}
                  </span>
                  <span className="text-[10px] opacity-60">
                    {reminderSettings.enabled ? 'Reminders active' : 'Turn on to get alerts'}
                  </span>
                </div>
              </div>
              <button
                onClick={handleToggleReminders}
                disabled={!isSupported || (permission === 'denied' && !reminderSettings.enabled)}
                className={cn(
                  "relative w-12 h-6 rounded-full transition-all duration-300 shadow-inner",
                  reminderSettings.enabled ? "bg-indigo-500" : "bg-slate-400/30",
                  (!isSupported || (permission === 'denied' && !reminderSettings.enabled)) && "opacity-50 cursor-not-allowed"
                )}
              >
                <div className={cn(
                  "absolute top-1 w-4 h-4 rounded-full bg-white shadow-md transition-all duration-300",
                  reminderSettings.enabled ? "left-7" : "left-1"
                )} />
              </button>
            </div>

            {/* Frequency Selection */}
            {reminderSettings.enabled && (
              <div className="space-y-3">
                <div className="text-[10px] font-bold uppercase tracking-widest opacity-40 px-1">Reminder Frequency</div>
                <div className="grid grid-cols-2 gap-3">
                  <button
                    onClick={() => handleFrequencyChange('daily')}
                    className={cn(
                      "p-4 rounded-2xl border text-sm font-bold transition-all flex flex-col items-center gap-1",
                      localFrequency === 'daily'
                        ? 'bg-indigo-500 border-indigo-500 text-white shadow-lg shadow-indigo-500/25 scale-[1.02]'
                        : 'bg-background border-border hover:border-indigo-500/50'
                    )}
                  >
                    <span>Daily</span>
                    <span className="text-[10px] font-normal opacity-70">Once a day</span>
                  </button>
                  <button
                    onClick={() => handleFrequencyChange('hourly')}
                    className={cn(
                      "p-4 rounded-2xl border text-sm font-bold transition-all flex flex-col items-center gap-1",
                      localFrequency === 'hourly'
                        ? 'bg-indigo-500 border-indigo-500 text-white shadow-lg shadow-indigo-500/25 scale-[1.02]'
                        : 'bg-background border-border hover:border-indigo-500/50'
                    )}
                  >
                    <span>Hourly</span>
                    <span className="text-[10px] font-normal opacity-70">Window alerts</span>
                  </button>
                </div>
              </div>
            )}

            {/* Time Picker (Only for Daily) */}
            {reminderSettings.enabled && localFrequency === 'daily' && (
              <div className="space-y-3 animate-in fade-in slide-in-from-top-2 duration-300">
                <div className="text-[10px] font-bold uppercase tracking-widest opacity-40 px-1">Preferred Time</div>
                <div className="flex gap-2 p-1 bg-muted/30 rounded-2xl border border-border/50">
                  <div className="flex-1">
                    <Select
                      value={hourString}
                      onValueChange={(val) => updateTime(val, minuteString, currentAmpm)}
                    >
                      <SelectTrigger className="border-none bg-transparent shadow-none hover:bg-white/5 h-12 rounded-xl">
                        <SelectValue placeholder="Hour" />
                      </SelectTrigger>
                      <SelectContent className="rounded-xl">
                        {hoursOptions.map((h) => (
                          <SelectItem key={h} value={h} className="rounded-lg">{h}</SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="flex-1">
                    <Select
                      value={minuteString}
                      onValueChange={(val) => updateTime(hourString, val, currentAmpm)}
                    >
                      <SelectTrigger className="border-none bg-transparent shadow-none hover:bg-white/5 h-12 rounded-xl">
                        <SelectValue placeholder="Min" />
                      </SelectTrigger>
                      <SelectContent className="rounded-xl">
                        {minutesOptions.map((m) => (
                          <SelectItem key={m} value={m} className="rounded-lg">{m}</SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

                  <div className="w-24 px-1">
                    <Select
                      value={currentAmpm}
                      onValueChange={(val) => updateTime(hourString, minuteString, val)}
                    >
                      <SelectTrigger className="border-none bg-indigo-500/10 text-indigo-400 font-bold shadow-none hover:bg-indigo-500/20 h-10 mt-1 rounded-lg">
                        <SelectValue placeholder="AM/PM" />
                      </SelectTrigger>
                      <SelectContent className="rounded-xl">
                        <SelectItem value="AM" className="rounded-lg">AM</SelectItem>
                        <SelectItem value="PM" className="rounded-lg">PM</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              </div>
            )}

            {/* Hourly Alerts Window */}
            {reminderSettings.enabled && localFrequency === 'hourly' && (
              <div className="space-y-4 animate-in fade-in slide-in-from-top-2 duration-300">
                <div className="space-y-2">
                  <div className="text-[10px] font-bold uppercase tracking-widest opacity-40 px-1">Start Time</div>
                  <HourlyTimePicker
                    value={reminderSettings.hourlyStart || '09:00'}
                    onChange={async (newTime) => {
                      const [h, m] = newTime.split(':');
                      const end = (reminderSettings.hourlyEnd || '21:00').split(':');
                      const newSettings = { ...reminderSettings, hourlyStart: newTime, hourlyEnd: `${end[0]}:${m}` };
                      setReminderSettings(newSettings);
                      await saveReminderSettings(newSettings);
                    }}
                  />
                </div>

                <div className="space-y-2">
                  <div className="text-[10px] font-bold uppercase tracking-widest opacity-40 px-1">End Time</div>
                  <HourlyTimePicker
                    value={reminderSettings.hourlyEnd || '21:00'}
                    onChange={async (newTime) => {
                      const [h, m] = newTime.split(':');
                      const start = (reminderSettings.hourlyStart || '09:00').split(':');
                      const newSettings = { ...reminderSettings, hourlyEnd: newTime, hourlyStart: `${start[0]}:${m}` };
                      setReminderSettings(newSettings);
                      await saveReminderSettings(newSettings);
                    }}
                  />
                </div>

                <div className="flex items-center gap-2 p-3 bg-indigo-500/5 rounded-2xl border border-indigo-500/10">
                  <Sparkles className="h-4 w-4 text-indigo-400" />
                  <p className="text-[10px] text-indigo-400 uppercase font-black tracking-widest">Reminders every 60 minutes</p>
                </div>
              </div>
            )}

            {/* Notification Permission Sync */}
            {reminderSettings.enabled && isSupported && (
              <div className="pt-2">
                <Button
                  onClick={async () => {
                    const result = await requestPermission();
                    if (result === 'granted') {
                      try {
                        const res = await fetch('/api/notifications/test', { method: 'POST' });
                        if (res.ok) alert("Success! Push notifications active.");
                      } catch (err) { console.error(err); }
                    } else alert("Please enable notifications in settings.");
                  }}
                  className={cn(
                    "w-full h-12 rounded-2xl font-bold transition-all shadow-md group",
                    permission === 'granted'
                      ? 'bg-emerald-500/10 text-emerald-500 hover:bg-emerald-500/20'
                      : 'bg-emerald-600 text-white hover:bg-emerald-500 hover:scale-[1.02]'
                  )}
                >
                  <Bell className="mr-2 h-4 w-4 group-hover:animate-bounce" />
                  {permission === 'granted' ? 'Permissions Verified' : 'Enable Push Alerts'}
                </Button>
              </div>
            )}

            {permission === 'denied' && (
              <div className="p-4 bg-red-500/10 border border-red-500/20 rounded-2xl">
                <p className="text-xs text-red-500 text-center font-medium leading-relaxed">
                  Browser notifications are currently blocked. To get reminders, please update your site settings.
                </p>
              </div>
            )}
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
}
