import React, { useState } from 'react';
import { Page } from '../types';
import { Session } from '@supabase/supabase-js';
import { supabase } from '../supabaseClient';

interface NavbarProps {
  currentPage: Page;
  setPage: (page: Page) => void;
  session: Session | null;
}

const Navbar: React.FC<NavbarProps> = ({ currentPage, setPage, session }) => {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  const navLinks = [
    { label: 'Home', value: Page.HOME },
    { label: 'Das Buch', value: Page.BOOK },
    { label: 'Retreat', value: Page.RETREAT },
    { label: 'Blog', value: Page.BLOG },
    { label: 'Kontakt', value: Page.CONTACT },
  ];

  return (
    <nav className="fixed w-full z-50 top-0 glass-effect border-b border-slate-200/50 dark:border-white/10 transition-all duration-300">
      <div className="max-w-7xl mx-auto px-6 h-24 flex items-center justify-between">
        <div
          className="flex items-center gap-4 cursor-pointer"
          onClick={() => setPage(Page.HOME)}
        >
          <img
            alt="Riboneo Logo"
            className="h-10 w-auto object-contain transition-all dark:hidden block"
            src="/logo-black.png"
          />
          <img
            alt="Riboneo Logo"
            className="h-10 w-auto object-contain transition-all hidden dark:block"
            src="/logo-white.png"
          />
          <div className="flex flex-col -space-y-1">
            <span className="font-display text-2xl tracking-[0.2em] uppercase font-medium text-slate-900 dark:text-white">Riboneo</span>
            <span className="text-[10px] tracking-[0.4em] uppercase font-light text-slate-500 dark:text-slate-400">By Roberto de Marco</span>
          </div>
        </div>

        <div className="hidden md:flex items-center gap-6">
          <div className="flex gap-6 mr-4">
            {navLinks.map((link) => (
              <button
                key={link.value}
                onClick={() => setPage(link.value)}
                className={`text-xs tracking-widest uppercase font-medium hover:text-primary transition-colors ${currentPage === link.value ? 'text-primary font-bold' : 'text-slate-600 dark:text-slate-300'
                  }`}
              >
                {link.label}
              </button>
            ))}
          </div>

          <div className="flex items-center gap-4 pl-6 border-l border-slate-200 dark:border-white/10">
            {!session ? (
              <>
                <button
                  onClick={() => setPage(Page.LOGIN)}
                  className="text-xs tracking-widest uppercase font-bold text-slate-900 dark:text-white hover:text-primary transition-colors"
                >
                  Einloggen
                </button>
                <button
                  onClick={() => setPage(Page.REGISTER)}
                  className="px-5 py-2 bg-primary text-white text-xs tracking-widest uppercase font-bold rounded-full hover:bg-opacity-90 transition-all shadow-lg shadow-primary/20"
                >
                  Anmelden
                </button>
              </>
            ) : (
              <div className="flex items-center gap-4">
                <span
                  onClick={() => setPage(Page.DASHBOARD)}
                  className="text-xs tracking-widest uppercase font-bold text-slate-900 dark:text-white hover:text-primary cursor-pointer transition-colors"
                >
                  Hallo, {session.user.user_metadata.first_name || 'User'}
                </span>
                <button
                  onClick={async () => {
                    await supabase.auth.signOut();
                    setPage(Page.HOME);
                  }}
                  className="px-5 py-2 bg-secondary/20 text-primary text-xs tracking-widest uppercase font-bold rounded-full hover:bg-secondary/30 transition-all"
                >
                  Ausloggen
                </button>
              </div>
            )}
            <button
              className="p-2 ml-2 rounded-full hover:bg-slate-100 dark:hover:bg-white/10 transition-all"
              onClick={() => document.documentElement.classList.toggle('dark')}
            >
              <span className="material-symbols-outlined block dark:hidden text-slate-600">dark_mode</span>
              <span className="material-symbols-outlined hidden dark:block text-yellow-400">light_mode</span>
            </button>
          </div>
        </div>

        <button
          className="md:hidden p-2"
          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
        >
          <span className="material-symbols-outlined">menu</span>
        </button>
      </div>

      {/* Mobile Menu */}
      {mobileMenuOpen && (
        <div className="md:hidden absolute top-24 left-0 w-full bg-white dark:bg-background-dark border-b border-slate-200 dark:border-slate-800 p-6 flex flex-col space-y-4 shadow-xl">
          {navLinks.map((link) => (
            <button
              key={link.value}
              onClick={() => {
                setPage(link.value);
                setMobileMenuOpen(false);
              }}
              className="text-sm tracking-widest uppercase font-medium hover:text-primary text-left py-2 text-slate-900 dark:text-white"
            >
              {link.label}
            </button>
          ))}
          {!session ? (
            <>
              <button
                onClick={() => {
                  setPage(Page.LOGIN);
                  setMobileMenuOpen(false);
                }}
                className="text-sm tracking-widest uppercase font-medium hover:text-primary text-left py-2 text-slate-900 dark:text-white"
              >
                Einloggen
              </button>
              <button
                onClick={() => {
                  setPage(Page.REGISTER);
                  setMobileMenuOpen(false);
                }}
                className="text-sm tracking-widest uppercase font-bold text-primary text-left py-2"
              >
                Konto erstellen
              </button>
            </>
          ) : (
            <>
              <button
                onClick={() => {
                  setPage(Page.DASHBOARD);
                  setMobileMenuOpen(false);
                }}
                className="text-sm tracking-widest uppercase font-medium hover:text-primary text-left py-2 text-slate-900 dark:text-white"
              >
                Hallo, {session.user.user_metadata.first_name || 'User'} (Dashboard)
              </button>
              <button
                onClick={async () => {
                  await supabase.auth.signOut();
                  setPage(Page.HOME);
                  setMobileMenuOpen(false);
                }}
                className="text-sm tracking-widest uppercase font-bold text-primary text-left py-2"
              >
                Ausloggen
              </button>
            </>
          )}
        </div>
      )}
    </nav>
  );
};

export default Navbar;