import React from "react";
import { View } from "../types";
import icon from "../assets/icone.svg";

interface HeaderProps {
  user: { name: string; store: string };
  currentView: View;
  onNavigate: (view: View) => void;
  cartCount: number;
  onCartClick: () => void;
  onLogout?: () => void;
}

const Header: React.FC<HeaderProps> = ({
  user,
  onNavigate,
  cartCount,
  onCartClick,
  onLogout,
}) => {
  return (
    <header className="sticky top-0 z-40 w-full bg-white/95 lg:bg-white/80 backdrop-blur-md border-b border-slate-200 safe-area-top">
      <div className="max-w-[1600px] mx-auto px-3 lg:px-6 h-14 lg:h-16 flex items-center justify-between">
        <div
          className="flex items-center space-x-2 lg:space-x-3 cursor-pointer group"
          onClick={() => onNavigate(View.HOME_MENU)}
        >
          <div className="bg-[#ffffff] p-1.5 lg:p-2 rounded-xl transition-transform group-hover:scale-105">
            <img src={icon} alt="Jurunense Icon" className="w-5 h-5 lg:w-6 lg:h-6" />
          </div>
          <div className="flex flex-col">
            <span className="font-extrabold text-xs lg:text-base text-[#002147] leading-none tracking-tight">
              <span className="lg:hidden">VendaWeb</span>
              <span className="hidden lg:inline">Platforma VendaWeb</span>
            </span>
            <span className="text-[8px] lg:text-[9px] font-bold text-orange-500 uppercase tracking-[0.2em]">
              Jurunense
            </span>
          </div>
        </div>

        <div className="flex items-center space-x-2 lg:space-x-8">
          <div className="hidden lg:flex items-center space-x-4">
            <div className="h-8 w-[1px] bg-slate-200"></div>
            <div className="flex flex-col items-end">
              <span className="text-sm font-bold text-slate-800">
                {user.name}
              </span>
              <span className="text-[10px] font-medium text-slate-400 uppercase tracking-wider">
                Filial: {user.store}
              </span>
            </div>
          </div>

          <div className="flex items-center space-x-2 lg:space-x-4">
            <button
              onClick={onCartClick}
              className="relative p-3 lg:p-2.5 bg-slate-50 text-slate-600 rounded-xl hover:bg-[#002147] hover:text-white transition-all group touch-manipulation"
            >
              <svg
                className="w-6 h-6 lg:w-6 lg:h-6"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
                />
              </svg>
              {cartCount > 0 && (
                <span className="absolute -top-1.5 -right-1.5 min-w-[22px] h-[22px] bg-orange-500 text-white text-[10px] font-black flex items-center justify-center rounded-full border-2 border-white ring-2 ring-orange-500/20 animate-bounce-slow">
                  {cartCount}
                </span>
              )}
            </button>

            <button
              onClick={() => {
                if (onLogout) {
                  onLogout();
                } else {
                  onNavigate(View.LOGIN);
                }
              }}
              className="p-3 lg:p-2.5 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-xl transition-all touch-manipulation"
              title="Sair"
            >
              <svg
                className="w-6 h-6 lg:w-6 lg:h-6"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
                />
              </svg>
            </button>
          </div>
        </div>
      </div>
      <style>{`
        @keyframes bounce-slow {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-3px); }
        }
        .animate-bounce-slow { animation: bounce-slow 2s infinite ease-in-out; }
      `}</style>
    </header>
  );
};

export default Header;