import { useEffect, useRef, useState } from 'react'
import { Link } from 'react-router-dom'
import { useAuth } from '../context/AuthContext'
import { useCartStore, selectCartSummary } from '../stores/cartStore'
import { formatCurrency } from '../utils/format'
import logoImg from '../assets/logo.png'
import { FaRightFromBracket } from 'react-icons/fa6'

// Cart dropdown content component
function CartDropdownContent() {
  const items = useCartStore((state) => state.items)
  const removeItem = useCartStore((state) => state.removeItem)
  const { totalValue } = useCartStore(selectCartSummary)

  // Show max 4 items in preview
  const displayItems = items.slice(0, 4)
  const hiddenCount = items.length - displayItems.length

  return (
    <div>
      <div className="p-3 border-b border-gray-100">
        <p className="text-sm font-semibold text-gray-700">Carrinho</p>
      </div>
      <div className="max-h-64 overflow-y-auto">
        {displayItems.map((item) => (
          <div key={item.id} className="flex items-center gap-3 p-3 hover:bg-gray-50 border-b border-gray-50">
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium text-gray-800 truncate">{item.name}</p>
              <p className="text-xs text-gray-500">{item.quantity}x • R$ {formatCurrency(item.unitPrice)}</p>
            </div>
            <button
              onClick={(e) => {
                e.preventDefault()
                e.stopPropagation()
                removeItem(item.id)
              }}
              className="text-red-500 hover:text-red-700 p-1"
              title="Remover"
            >
              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
        ))}
        {hiddenCount > 0 && (
          <div className="p-2 text-center text-xs text-gray-500">
            +{hiddenCount} {hiddenCount === 1 ? 'item' : 'itens'}
          </div>
        )}
      </div>
      <div className="p-3 border-t border-gray-100 bg-gray-50">
        <div className="flex justify-between items-center mb-3">
          <span className="text-sm text-gray-600">Total:</span>
          <span className="text-lg font-bold text-medicalBlue">R$ {formatCurrency(totalValue)}</span>
        </div>
        <Link
          to="/cart"
          className="block w-full text-center bg-medicalBlue text-white py-2 rounded-lg text-sm font-semibold hover:bg-blue-700 transition-colors"
        >
          Ver carrinho completo
        </Link>
      </div>
    </div>
  )
}

export function Shell({ children }: { children: React.ReactNode }) {
  const { user, logout } = useAuth()
  const [isProfileOpen, setIsProfileOpen] = useState(false)
  const profileMenuRef = useRef<HTMLDivElement | null>(null)
  const { totalItems: cartCount } = useCartStore(selectCartSummary)

  const isOwner = user?.role === 'owner' || user?.role === 'seller'
  const isAdmin = user?.role === 'admin'
  const profilePath = isAdmin ? '/dashboard/profile' : '/meu-perfil'
  const settingsPath = isOwner ? '/company' : '/dashboard/profile'

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (profileMenuRef.current && !profileMenuRef.current.contains(event.target as Node)) {
        setIsProfileOpen(false)
      }
    }

    document.addEventListener('mousedown', handleClickOutside)
    return () => {
      document.removeEventListener('mousedown', handleClickOutside)
    }
  }, [])

  return (
    <div className="min-h-screen bg-gray-100">
      <header style={{ backgroundColor: '#0F4C81' }} className="text-white shadow-md">
        <div className="mx-auto max-w-7xl px-6">
          <div className="flex h-16 items-center justify-between">
            <div className="flex items-center gap-3">
              <img src={logoImg} alt="SaveInMed" className="h-10 w-auto" />
              <span className="text-xl font-bold">SaveInMed</span>
            </div>
            <nav className="flex items-center gap-4 text-sm font-medium">
              {isAdmin && (
                <Link to="/dashboard" className="hover:underline">
                  Admin
                </Link>
              )}
              {isOwner && (
                <>
                  <Link to="/seller" className="hover:underline whitespace-nowrap">
                    Dashboard
                  </Link>
                  <Link to="/inventory" className="hover:underline whitespace-nowrap">
                    Estoque
                  </Link>
                  <Link to="/search" className="hover:underline whitespace-nowrap">
                    Buscar Produtos
                  </Link>
                  <Link to="/orders" className="hover:underline whitespace-nowrap">
                    Pedidos
                  </Link>
                  <Link to="/wallet" className="hover:underline whitespace-nowrap">
                    Carteira
                  </Link>
                  <Link to="/team" className="hover:underline whitespace-nowrap">
                    Equipe
                  </Link>
                  <Link to="/shipping-settings" className="hover:underline whitespace-nowrap">
                    Config. Entrega
                  </Link>
                </>
              )}
              {/* Cart with hover dropdown */}
              <div className="relative group">
                <Link
                  to="/cart"
                  className="relative hover:bg-white/10 p-2 rounded-lg transition-colors block"
                  title="Carrinho"
                >
                  <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
                  </svg>
                  {cartCount > 0 && (
                    <span className="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-xs font-bold">
                      {cartCount > 99 ? '99+' : cartCount}
                    </span>
                  )}
                </Link>

                {/* Dropdown on hover */}
                <div className="invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-all duration-200 absolute right-0 top-full z-50 mt-2 w-80 rounded-lg bg-white shadow-xl border border-gray-100">
                  {cartCount === 0 ? (
                    <div className="p-6 text-center">
                      <svg className="mx-auto h-12 w-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
                      </svg>
                      <p className="mt-2 text-sm font-medium text-gray-600">Seu carrinho está vazio</p>
                      <p className="text-xs text-gray-400">Adicione produtos para começar</p>
                    </div>
                  ) : (
                    <CartDropdownContent />
                  )}
                </div>
              </div>
              {user && (
                <div className="flex items-center gap-2">
                  {/* Profile dropdown */}
                  <div className="relative flex items-center" ref={profileMenuRef}>
                    <button
                      type="button"
                      onClick={() => setIsProfileOpen((prev) => !prev)}
                      className="flex items-center gap-2 rounded bg-white/10 px-3 py-2 text-left text-xs font-semibold hover:bg-white/20 whitespace-nowrap"
                      aria-haspopup="true"
                      aria-expanded={isProfileOpen}
                    >
                      <div className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 text-[11px] font-bold">
                        {user.name.charAt(0).toUpperCase()}
                      </div>
                      <div className="flex flex-col items-start leading-tight">
                        <span className="text-sm font-semibold">{user.name}</span>
                        <span className="text-[10px] uppercase text-white/80">{user.role}</span>
                      </div>
                      <svg className="h-3 w-3 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                      </svg>
                    </button>
                    {isProfileOpen && (
                      <div className="absolute right-0 top-full z-50 mt-2 w-52 rounded-md bg-white py-2 text-sm text-gray-700 shadow-lg">
                        <Link
                          to={profilePath}
                          className="block px-4 py-2 hover:bg-gray-100"
                          onClick={() => setIsProfileOpen(false)}
                        >
                          Ver Perfil
                        </Link>
                        <Link
                          to={settingsPath}
                          className="block px-4 py-2 hover:bg-gray-100"
                          onClick={() => setIsProfileOpen(false)}
                        >
                          Configurações
                        </Link>
                        <button
                          type="button"
                          onClick={logout}
                          className="block w-full px-4 py-2 text-left text-red-600 hover:bg-red-50"
                        >
                          Sair
                        </button>
                      </div>
                    )}
                  </div>
                </div>
              )}
            </nav>
          </div>
        </div>
      </header>
      <main className="mx-auto max-w-7xl px-6 py-6">{children}</main>
    </div>
  )
}