import React, { useState } from 'react'
import { Link, useLocation } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import { Sparkles, Menu, X } from 'lucide-react'
import i18n from '@/i18n/i18n'

export const PublicLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const { t } = useTranslation()
  const location = useLocation()
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
  const currentLang = i18n.language?.startsWith('fr') ? 'fr' : 'en'

  const isActive = (path: string) => location.pathname.startsWith(path)

  const setLang = (lang: string) => {
    i18n.changeLanguage(lang)
  }

  const LangToggle = ({ size = 'md' }: { size?: 'sm' | 'md' }) =>  (
    <div className="flex items-center border border-gray-200 rounded-lg overflow-hidden text-xs font-semibold">
      <button
        onClick={() => setLang('fr')}
        className={`${size === 'sm' ? 'px-2 py-1' : 'px-2.5 py-1.5'} transition-colors ${currentLang === 'fr' ? 'bg-primary-600 text-white' : 'text-gray-500 hover:bg-gray-50'}`}
      >
        FR
      </button>
      <button
        onClick={() => setLang('en')}
        className={`${size === 'sm' ? 'px-2 py-1' : 'px-2.5 py-1.5'} transition-colors ${currentLang === 'en' ? 'bg-primary-600 text-white' : 'text-gray-500 hover:bg-gray-50'}`}
      >
        EN
      </button>
    </div>
  )

  return (
    <div className="min-h-screen bg-gray-50">
      <nav className="bg-white border-b border-gray-200 sticky top-0 z-50">
        <div className="max-w-6xl mx-auto px-4 sm:px-6">
          <div className="flex items-center justify-between h-14">
            {/* Logo */}
            <Link to="/" className="flex items-center gap-2 group">
              <div className="w-8 h-8 bg-gradient-to-br from-primary-500 to-primary-700 rounded-lg flex items-center justify-center
                shadow-sm group-hover:shadow-md transition-shadow">
                <Sparkles className="w-4 h-4 text-white" />
              </div>
              <span className="font-bold text-gray-900 text-lg tracking-tight">Contexta</span>
            </Link>

            {/* Desktop nav links */}
            <div className="hidden md:flex items-center gap-6">
              <Link
                to="/marketplace"
                className={`text-sm font-medium transition-colors ${
                  isActive('/marketplace') ? 'text-primary-600' : 'text-gray-600 hover:text-gray-900'
                }`}
              >
                {t('nav.marketplace')}
              </Link>
              <Link
                to="/pricing"
                className={`text-sm font-medium transition-colors ${
                  isActive('/pricing') ? 'text-primary-600' : 'text-gray-600 hover:text-gray-900'
                }`}
              >
                {t('nav.pricing')}
              </Link>
            </div>

            {/* Desktop right side */}
            <div className="hidden md:flex items-center gap-3">
              <LangToggle />
              <Link to="/login" className="text-sm text-gray-600 hover:text-gray-900 font-medium px-3 py-1.5 transition-colors">
                {t('nav.signin')}
              </Link>
              <Link
                to="/signup"
                className="bg-primary-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-primary-700 font-semibold transition-all shadow-sm"
              >
                {t('nav.get_started')}
              </Link>
            </div>

            {/* Mobile controls */}
            <div className="md:hidden flex items-center gap-2">
              <LangToggle size="sm" />
              <button
                className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                aria-label="Toggle menu"
              >
                {mobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
              </button>
            </div>
          </div>

          {/* Mobile menu */}
          {mobileMenuOpen && (
            <div className="md:hidden border-t border-gray-100 py-3 space-y-1 animate-fade-in-down">
              <Link
                to="/marketplace"
                className="block px-3 py-2 text-sm text-gray-700 font-medium rounded-lg hover:bg-gray-50"
                onClick={() => setMobileMenuOpen(false)}
              >
                {t('nav.marketplace')}
              </Link>
              <Link
                to="/pricing"
                className="block px-3 py-2 text-sm text-gray-700 font-medium rounded-lg hover:bg-gray-50"
                onClick={() => setMobileMenuOpen(false)}
              >
                {t('nav.pricing')}
              </Link>
              <hr className="border-gray-100 my-2" />
              <Link
                to="/login"
                className="block px-3 py-2 text-sm text-gray-700 font-medium rounded-lg hover:bg-gray-50"
                onClick={() => setMobileMenuOpen(false)}
              >
                {t('nav.signin')}
              </Link>
              <Link
                to="/signup"
                className="block mx-3 bg-primary-600 text-white text-sm px-4 py-2.5 rounded-lg font-semibold text-center"
                onClick={() => setMobileMenuOpen(false)}
              >
                {t('nav.get_started')}
              </Link>
            </div>
          )}
        </div>
      </nav>

      <main>{children}</main>
    </div>
  )
}