import React, { ReactNode } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { mdiShieldCheck, mdiMenu, mdiClose, mdiMagnify } from '@mdi/js';
import { useAppSelector } from '../stores/hooks';
import BaseIcon from '../components/BaseIcon';
import Logo from '../components/Logo';

type Props = {
  children: ReactNode
}

export default function LayoutGuest({ children }: Props) {
  const darkMode = useAppSelector((state) => state.style.darkMode);
  const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
  const { currentUser } = useAppSelector((state) => state.auth);
  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
  const router = useRouter();

  const navLinks = [
    { href: '/search', label: 'Find Services' },
    { href: '/register', label: 'List Business' },
  ];

  return (
    <div className={`${darkMode ? 'dark' : ''} min-h-screen flex flex-col`}>
      {/* Dynamic Header */}
      <header className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-lg border-b border-slate-200/60 dark:bg-slate-900/80 dark:border-slate-800">
        <div className="container mx-auto px-6 h-20 flex items-center justify-between">
          <Link href="/" className="flex items-center gap-3 group">
            <Logo className="h-10 w-auto" />
          </Link>

          <nav className="hidden md:flex items-center gap-10">
            {navLinks.map((link) => (
              <Link 
                key={link.href} 
                href={link.href} 
                className={`text-sm font-bold uppercase tracking-widest hover:text-emerald-500 transition-colors ${router.pathname === link.href ? 'text-emerald-500' : 'text-slate-600 dark:text-slate-400'}`}
              >
                {link.label}
              </Link>
            ))}
            <div className="h-6 w-px bg-slate-200 dark:bg-slate-800"></div>
            {currentUser ? (
              <Link href="/dashboard" className="bg-slate-900 text-white dark:bg-white dark:text-slate-900 px-6 py-3 rounded-xl text-sm font-bold hover:shadow-xl transition-all">
                Go to Dashboard
              </Link>
            ) : (
              <div className="flex items-center gap-4">
                <Link href="/login" className="text-sm font-bold text-slate-600 hover:text-emerald-500 transition-colors">
                  Login
                </Link>
                <Link href="/register" className="bg-emerald-500 text-white px-6 py-3 rounded-xl text-sm font-bold hover:bg-emerald-600 shadow-lg shadow-emerald-500/20 transition-all">
                  Join Now
                </Link>
              </div>
            )}
          </nav>

          <button className="md:hidden p-2 text-slate-600 dark:text-slate-400" onClick={() => setIsMenuOpen(!isMenuOpen)}>
            <BaseIcon path={isMenuOpen ? mdiClose : mdiMenu} size={28} />
          </button>
        </div>

        {isMenuOpen && (
          <div className="md:hidden bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 p-6 space-y-6 animate-fade-in">
            {navLinks.map((link) => (
              <Link key={link.href} href={link.href} className="block text-lg font-bold text-slate-700 dark:text-slate-300" onClick={() => setIsMenuOpen(false)}>
                {link.label}
              </Link>
            ))}
            <div className="pt-6 border-t border-slate-100 dark:border-slate-800 flex flex-col gap-4">
              {currentUser ? (
                <Link href="/dashboard" className="w-full bg-slate-900 text-white py-4 rounded-xl text-center font-bold" onClick={() => setIsMenuOpen(false)}>Dashboard</Link>
              ) : (
                <>
                  <Link href="/login" className="w-full text-center py-4 font-bold text-slate-600" onClick={() => setIsMenuOpen(false)}>Login</Link>
                  <Link href="/register" className="w-full bg-emerald-500 text-white py-4 rounded-xl text-center font-bold" onClick={() => setIsMenuOpen(false)}>Join Now</Link>
                </>
              )}
            </div>
          </div>
        )}
      </header>

      <main className={`flex-grow ${bgColor} dark:bg-slate-800 dark:text-slate-100`}>
        {children}
      </main>

      <footer className="bg-white border-t border-slate-200 py-12 dark:bg-slate-900 dark:border-slate-800">
        <div className="container mx-auto px-6">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <div className="flex items-center mb-6 md:mb-0">
              <Logo className="h-10 w-auto" />
            </div>
            <div className="flex gap-8 text-slate-500 font-medium dark:text-slate-400">
              <Link href="/search" className="hover:text-emerald-500">Find Help</Link>
              <Link href="/register" className="hover:text-emerald-500">List Business</Link>
              <Link href="/privacy-policy" className="hover:text-emerald-500">Privacy</Link>
              <Link href="/terms-of-use" className="hover:text-emerald-500">Terms</Link>
            </div>
          </div>
          <div className="mt-12 pt-8 border-t border-slate-100 dark:border-slate-800 text-center text-slate-400 text-sm">
            © 2026 Fix-It-Local™. Built with Trust & Transparency.
          </div>
        </div>
      </footer>
    </div>
  )
}