import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Leaf, Download, Wifi, WifiOff } from "lucide-react";
import { useToast } from "@/hooks/use-toast";
import { useOfflineStatus } from "@/hooks/useOfflineStatus";
import logoImage from "@assets/ChatGPT Image Jun 6, 2025, 02_19_36 PM.png";

export default function PWAHeader() {
  const [deferredPrompt, setDeferredPrompt] = useState<any>(null);
  const { toast } = useToast();
  const isOffline = useOfflineStatus();

  useEffect(() => {
    const handleBeforeInstallPrompt = (e: any) => {
      e.preventDefault();
      setDeferredPrompt(e);
    };

    window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
    return () => {
      window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
    };
  }, []);

  const handleInstallPrompt = async () => {
    if (deferredPrompt) {
      deferredPrompt.prompt();
      const { outcome } = await deferredPrompt.userChoice;
      if (outcome === 'accepted') {
        toast({
          title: "App Installed!",
          description: "Prithvi Guardian AI is now available on your device.",
        });
      }
      setDeferredPrompt(null);
    } else {
      toast({
        title: "Already Installed",
        description: "The app is already installed or not available for installation.",
      });
    }
  };

  return (
    <header className="bg-gradient-to-r from-orange-50 via-white to-green-50 shadow-xl border-b-4 border-gradient-to-r from-saffron via-white to-deep-green sticky top-0 z-50 backdrop-blur-sm">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center py-4">
          <div className="flex items-center space-x-3">
            <div className="w-12 h-12 bg-white rounded-full flex items-center justify-center shadow-lg p-1">
              <img 
                src={logoImage} 
                alt="Prithvi Guardian AI Logo" 
                className="w-full h-full object-cover rounded-full"
              />
            </div>
            <div>
              <h1 className="text-2xl font-poppins font-bold text-deep-charcoal">Prithvi Guardian AI</h1>
              <p className="text-sm text-warm-gray">Environmental Engineering Assistant</p>
              <p className="text-xs text-gray-500 font-medium">A Product Of VBharat AI</p>
            </div>
          </div>
          
          <div className="flex items-center space-x-4">
            <Badge 
              variant="secondary" 
              className={`flex items-center space-x-2 ${
                isOffline 
                  ? 'bg-yellow-50 text-yellow-700 border-yellow-200' 
                  : 'bg-emerald-50 text-emerald-700 border-emerald-200'
              }`}
            >
              {isOffline ? (
                <WifiOff className="w-3 h-3" />
              ) : (
                <Wifi className="w-3 h-3 animate-pulse" />
              )}
              <span className="text-sm font-medium">
                {isOffline ? 'Offline Mode' : 'Offline Ready'}
              </span>
            </Badge>
            
            <Button 
              onClick={handleInstallPrompt}
              className="bg-navy-blue text-white hover:bg-blue-800 transition-colors duration-200"
              size="sm"
            >
              <Download className="w-4 h-4 mr-2" />
              <span className="hidden sm:inline">Install App</span>
            </Button>
          </div>
        </div>
      </div>
    </header>
  );
}