import React, { ReactNode, useState, useEffect } from 'react'
import Link from 'next/link'
import { mdiMenu, mdiClose, mdiLogin, mdiAccountPlus, mdiMagnify } from '@mdi/js'
import { useAppSelector } from '../stores/hooks'
import { useRouter } from 'next/router'
import BaseIcon from '../components/BaseIcon'

type Props = {
  children: ReactNode
}

export default function LayoutGuest({ children }: Props) {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const [scrolled, setScrolled] = useState(false)
  const { token } = useAppSelector((state) => state.auth)
  const router = useRouter()

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 20)
    }
    window.addEventListener('scroll', handleScroll)
    return () => window.removeEventListener('scroll', handleScroll)
  }, [])

  const navLinks = [
    { label: 'Find Services', href: '/search' },
    { label: 'Categories', href: '/categories' },
    { label: 'Verify Business', href: '/register' },
    { label: 'Support', href: '/contact-form' },
  ]

  return (
    <div className="min-h-screen bg-white dark:bg-slate-950 flex flex-col font-sans selection:bg-emerald-500/30">
      {/* Navigation */}
      <nav 
        className={`fixed top-0 left-0 right-0 z-[100] transition-all duration-300 ${
          scrolled 
            ? 'bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl border-b border-slate-200 dark:border-slate-800 py-4 shadow-sm' 
            : 'bg-transparent py-6'
        }`}
      >
        <div className="max-w-7xl mx-auto px-6 flex items-center justify-between">
          <Link href="/" className="flex items-center group">
            <div className="w-10 h-10 bg-emerald-500 rounded-xl flex items-center justify-center mr-3 shadow-lg shadow-emerald-500/20 group-hover:scale-110 transition-transform">
              <BaseIcon path={mdiMagnify} size={24} className="text-slate-900" />
            </div>
            <span className="text-xl font-black tracking-tight dark:text-white">Crafted Network<span className="text-emerald-500 italic">™</span></span>
          </Link>

          {/* Desktop Nav */}
          <div className="hidden md:flex items-center space-x-8">
            {navLinks.map((link) => (
              <Link 
                key={link.href} 
                href={link.href}
                className="text-sm font-bold text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors"
              >
                {link.label}
              </Link>
            ))}
          </div>

          <div className="hidden md:flex items-center space-x-4">
            {token ? (
              <Link 
                href="/dashboard" 
                className="bg-slate-900 dark:bg-emerald-500 text-white dark:text-slate-900 px-6 py-2.5 rounded-xl text-sm font-bold hover:opacity-90 transition-all shadow-lg"
              >
                Go to Dashboard
              </Link>
            ) : (
              <>
                <Link 
                  href="/login" 
                  className="text-sm font-bold text-slate-600 dark:text-slate-400 hover:text-emerald-600 transition-colors px-4 py-2"
                >
                  Log In
                </Link>
                <Link 
                  href="/register" 
                  className="bg-emerald-500 text-slate-900 px-6 py-2.5 rounded-xl text-sm font-bold hover:shadow-lg hover:shadow-emerald-500/20 transition-all active:scale-95"
                >
                  Join the Network
                </Link>
              </>
            )}
          </div>

          {/* Mobile Toggle */}
          <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>

        {/* Mobile Menu */}
        {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-800 dark:text-slate-200"
                onClick={() => setIsMenuOpen(false)}
              >
                {link.label}
              </Link>
            ))}
            <div className="pt-6 border-t border-slate-100 dark:border-slate-800 flex flex-col gap-4">
              <Link 
                href="/login" 
                className="flex items-center justify-center gap-2 p-4 rounded-xl border border-slate-200 dark:border-slate-700 font-bold"
                onClick={() => setIsMenuOpen(false)}
              >
                <BaseIcon path={mdiLogin} size={20} /> Log In
              </Link>
              <Link 
                href="/register" 
                className="flex items-center justify-center gap-2 p-4 rounded-xl bg-emerald-500 text-slate-900 font-bold shadow-lg"
                onClick={() => setIsMenuOpen(false)}
              >
                <BaseIcon path={mdiAccountPlus} size={20} /> Join Now
              </Link>
            </div>
          </div>
        )}
      </nav>

      {/* Main Content */}
      <main className="flex-grow pt-16">
        {children}
      </main>

      {/* Footer */}
      <footer className="bg-slate-900 text-white pt-24 pb-12">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
            <div className="col-span-1 md:col-span-2 space-y-6">
              <div className="flex items-center">
                <div className="w-8 h-8 bg-emerald-500 rounded-lg flex items-center justify-center mr-3">
                  <BaseIcon path={mdiMagnify} size={20} className="text-slate-900" />
                </div>
                <span className="text-2xl font-bold tracking-tight dark:text-white text-white">Crafted Network™</span>
              </div>
              <p className="text-slate-400 max-w-sm leading-relaxed">
                The most reliable platform for finding verified service professionals and businesses across all industries.
              </p>
            </div>
            <div>
              <h4 className="font-bold mb-6 text-white uppercase text-xs tracking-widest">Platform</h4>
              <ul className="space-y-4 text-slate-400 text-sm">
                <li><Link href="/search" className="hover:text-emerald-400 transition-colors">Find Services</Link></li>
                <li><Link href="/categories" className="hover:text-emerald-400 transition-colors">Categories</Link></li>
                <li><Link href="/register" className="hover:text-emerald-400 transition-colors">Register Business</Link></li>
              </ul>
            </div>
            <div>
              <h4 className="font-bold mb-6 text-white uppercase text-xs tracking-widest">Legal</h4>
              <ul className="space-y-4 text-slate-400 text-sm">
                <li><Link href="/privacy-policy" className="hover:text-emerald-400 transition-colors">Privacy Policy</Link></li>
                <li><Link href="/terms-of-use" className="hover:text-emerald-400 transition-colors">Terms of Use</Link></li>
                <li><Link href="/contact-form" className="hover:text-emerald-400 transition-colors">Contact Support</Link></li>
              </ul>
            </div>
          </div>
          <div className="pt-12 border-t border-slate-800 text-center text-slate-500 text-sm">
            © 2026 Crafted Network™. Built with Trust & Transparency.
          </div>
        </div>
      </footer>
    </div>
  )
}