"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { createBrowserClient } from "@supabase/ssr";
import { type User } from "@supabase/supabase-js";
import { Rocket, Menu, X, User as UserIcon, LogOut } from "lucide-react";
import { Button } from "@/components/ui/button";

interface NavbarClientProps {
  user: User | null;
}

export function NavbarClient({ user }: NavbarClientProps) {
  const router = useRouter();
  const [currentUser, setCurrentUser] = useState<User | null>(user);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [open, setOpen] = useState(false);

  // Supabase URL & Anon Key auslesen (für Browser-Client)
  const supabaseUrl = process.env.SUPABASE_URL || process.env.NEXT_PUBLIC_SUPABASE_URL;
  const supabaseAnonKey = process.env.SUPABASE_ANON_KEY || process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY || process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

  // Supabase URL Auflösung inline
  let resolvedUrl = supabaseUrl;
  if (resolvedUrl && typeof window !== "undefined") {
    try {
      const parsed = new URL(resolvedUrl);
      if (parsed.hostname === "supabase-kong" || parsed.hostname === "kong") {
        parsed.hostname = window.location.hostname;
        resolvedUrl = parsed.toString().replace(/\/$/, "");
      }
    } catch {
      resolvedUrl = resolvedUrl
        .replace("//supabase-kong", `//${window.location.hostname}`)
        .replace("//kong", `//${window.location.hostname}`);
    }
  }

  // Browser Client inline erstellen
  const supabase = createBrowserClient(
    resolvedUrl!,
    supabaseAnonKey!,
    {
      cookieOptions: {
        name: "webshop-auth-token",
      },
    }
  );

  // Auf Auth-Statusänderungen reagieren
  useEffect(() => {
    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((event, session) => {
      setCurrentUser(session?.user ?? null);
    });

    return () => {
      subscription.unsubscribe();
    };
  }, [supabase]);

  useEffect(() => {
    const checkBanner = () => {
      const disabled = localStorage.getItem('demo_banner_disabled') === 'true';
      const banner = document.getElementById('demo-banner');
      if (banner) banner.style.display = disabled ? 'none' : 'block';
    };
    
    checkBanner();
    window.addEventListener('storage_demo_changed', checkBanner);
    return () => window.removeEventListener('storage_demo_changed', checkBanner);
  }, []);

  const handleSignOut = async () => {
    await supabase.auth.signOut();
    setCurrentUser(null);
    setIsMobileMenuOpen(false);
    router.refresh();
    router.push("/");
  };

  return (
    <>
      <header className="px-4 lg:px-6 h-16 flex items-center justify-between border-b border-white/5 backdrop-blur-md sticky top-0 z-50 bg-[#020617]/85">
        <Link className="flex items-center justify-center gap-2 group" href="/">
          <span className="font-bold text-xl tracking-tighter text-white">CASPOS Store</span>
          <span className="text-[10px] bg-amber-500/20 text-amber-400 px-2 py-0.5 rounded-full font-semibold uppercase tracking-wider border border-amber-500/30">
            Demo
          </span>
        </Link>

        {/* Desktop Navigation */}
        <nav className="hidden md:flex gap-6 items-center">
          <Link className="text-sm font-medium text-slate-300 hover:text-primary transition-colors" href="/order">
            Bestellen
          </Link>
          <Link
            className="text-sm font-medium text-slate-300 hover:text-primary transition-colors"
            href="https://wiki.caspos.de"
            target="_blank"
            rel="noopener noreferrer"
          >
            Wiki
          </Link>
          <Link
            className="text-sm font-medium text-slate-300 hover:text-primary transition-colors"
            href="https://support.caspos.de"
            target="_blank"
            rel="noopener noreferrer"
          >
            Support
          </Link>

          <div className="h-4 w-px bg-white/10 mx-2" />

          {currentUser ? (
            <div className="relative">
              <Button
                variant="outline"
                onClick={() => setOpen(!open)}
                className="border-white/10 hover:bg-white/5 gap-2 text-white"
              >
                <UserIcon className="w-4 h-4 text-primary" />
                <span className="max-w-[120px] truncate">{currentUser.email}</span>
              </Button>
              {open && (
                <div className="absolute right-0 mt-2 w-48 rounded-xl border p-2 shadow-xl z-50 bg-white text-slate-900 border-slate-200 dark:bg-slate-950 dark:text-white dark:border-white/10">
                  <div className="px-3 py-1.5 text-[11px] truncate border-b text-slate-400 border-slate-100 dark:border-white/5 mb-1">
                    {currentUser.email}
                  </div>
                  <Link
                    href="/account-kunden"
                    onClick={() => setOpen(false)}
                    className="block px-3 py-2 text-sm rounded-lg font-medium hover:bg-slate-100 dark:hover:bg-white/5"
                  >
                    Account Einstellungen
                  </Link>
                  <Link
                    href="/my-customers"
                    onClick={() => setOpen(false)}
                    className="block px-3 py-2 text-sm rounded-lg font-medium hover:bg-slate-100 dark:hover:bg-white/5"
                  >
                    Kundenliste
                  </Link>
                  <hr className="my-1 border-slate-100 dark:border-white/5" />
                  <button
                    onClick={handleSignOut}
                    className="w-full text-left px-3 py-2 text-sm font-bold text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 rounded-lg"
                  >
                    Abmelden
                  </button>
                </div>
              )}

            </div>
          ) : (
            <Button asChild className="bg-primary hover:bg-primary/95 text-white dark:text-blue-500">
              <Link href="/login">Anmelden</Link>
            </Button>
          )}
        </nav>

        {/* Mobile Hamburger Trigger */}
        <button
          className="md:hidden p-2 text-slate-300 hover:text-white focus:outline-none"
          onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
        >
          {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
        </button>
      </header>

      {/* Mobile Menu Panel */}
      {isMobileMenuOpen && (
        <div className="md:hidden fixed inset-x-0 top-16 bg-[#020617] border-b border-white/5 z-40 py-4 px-6 flex flex-col gap-4 animate-in slide-in-from-top duration-200">
          <Link
            className="text-lg font-medium text-slate-300 hover:text-white transition-colors py-2"
            href="/order"
            onClick={() => setIsMobileMenuOpen(false)}
          >
            Bestellen
          </Link>
          <Link
            className="text-lg font-medium text-slate-300 hover:text-white transition-colors py-2"
            href="https://caspos.de"
            target="_blank"
            rel="noopener noreferrer"
            onClick={() => setIsMobileMenuOpen(false)}
          >
            Wiki
          </Link>
          <Link
            className="text-lg font-medium text-slate-300 hover:text-white transition-colors py-2"
            href="https://caspos.de"
            target="_blank"
            rel="noopener noreferrer"
            onClick={() => setIsMobileMenuOpen(false)}
          >
            Support
          </Link>

          {currentUser && (
            <>
              <div className="h-px bg-white/5 my-1" />
              <div className="text-xs text-slate-500 px-1">Mein Account ({currentUser.email})</div>
              <Link
                className="text-lg font-medium text-slate-300 hover:text-white transition-colors py-2"
                href="/my-customers"
                onClick={() => setIsMobileMenuOpen(false)}
              >
                Account Kunden
              </Link>
            </>
          )}

          <div className="h-px bg-white/5 my-1" />

          {currentUser ? (
            <Button
              variant="destructive"
              className="w-full flex items-center justify-center gap-2"
              onClick={handleSignOut}
            >
              <LogOut className="w-4 h-4" /> Abmelden
            </Button>
          ) : (
            <Button asChild className="w-full bg-primary hover:bg-primary/95 text-white dark:text-blue-500" onClick={() => setIsMobileMenuOpen(false)}>
              <Link href="/login">Anmelden</Link>
            </Button>
          )}
        </div>
      )}
    </>
  );
}