canina/frontend/application/components/Header.tsx

"use client";
import React, { useState, useRef, useEffect } from "react";
import { Search, ChevronDown, Menu, X, Pill, ShieldCheck, HeartPulse, Sparkles, ShoppingBag, User, PlusCircle, Check, Building2, LogIn, Wallet, LogOut, MapPin, FileHeart, Dog, Cat, BookOpen, FileText, Video, Award, PhoneCall, HelpCircle, Activity } from "lucide-react";
import { motion, AnimatePresence } from "motion/react";
import Link from "next/link";
import { useCartStore } from "../lib/store/cartStore";
import { usePetStore } from "../lib/store/usePetStore";
import { useUserStore } from "../lib/store/userStore";
import { useSettingsStore } from "../lib/store/settingsStore";
import { toast } from "sonner";
import HeaderButton from "./HeaderButton";
import AuthModal from "./AuthModal";
import PrescriptionUploadModal from "./PrescriptionUploadModal";
import { cn } from "../lib/utils";
import { productService } from "../lib/services/productService";

const MENU_ICONS: Record<string, React.ReactNode> = {
  joints: <Pill className="w-5 h-5" />,
  immune: <ShieldCheck className="w-5 h-5" />,
  energy: <HeartPulse className="w-5 h-5" />,
  "special-care": <Sparkles className="w-5 h-5" />,
};

export default function Header({
  onNavigate = () => {},
  onShopNavigate = () => {},
  currentView = 'home',
  onCartOpen = () => {},
  onSearch = () => {},
  onB2BOpen = () => {}
}: {
  onNavigate?: (v: any) => void;
  onShopNavigate?: (c?: string, s?: string) => void;
  currentView?: string;
  onCartOpen?: () => void;
  onSearch?: (q: string) => void;
  onB2BOpen?: () => void;
}) {
  const [isMegaMenuOpen, setIsMegaMenuOpen] = useState(false);
  const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
  const [isSearchFocused, setIsSearchFocused] = useState(false);
  const [isAuthModalOpen, setIsAuthModalOpen] = useState(false);
  const [isPrescriptionModalOpen, setIsPrescriptionModalOpen] = useState(false);
  const [isPetSwitcherOpen, setIsPetSwitcherOpen] = useState(false);
  const [searchQuery, setSearchQuery] = useState("");
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  const [menuItems, setMenuItems] = useState<{
    id: string;
    title: string;
    icon: React.ReactNode;
    solutions: string[];
  }[]>([
    {
      id: "joints",
      title: "مفاصل و استخوان",
      icon: MENU_ICONS["joints"],
      solutions: ["لنگیدن", "سختی در بلند شدن", "درد مفاصل", "رشد سریع توله‌سگ", "پاهای پرانتزی", "ضعف تاندون"]
    },
    {
      id: "immune",
      title: "تقویت سیستم ایمنی و گوارش",
      icon: MENU_ICONS["immune"],
      solutions: ["ضعف بعد از بیماری", "بی‌اشتهایی", "بعد از زایمان", "اسهال", "مشکلات گوارشی"]
    },
    {
      id: "energy",
      title: "ویتامین‌ها و انرژی‌بخش‌ها",
      icon: MENU_ICONS["energy"],
      solutions: ["نفس‌نفس زدن", "خستگی", "سن بالا", "بی‌حالی"]
    },
    {
      id: "special-care",
      title: "مراقبت‌های ویژه (پوست، دندان و چشم)",
      icon: MENU_ICONS["special-care"],
      solutions: ["ریزش مو", "خشکی پوست", "خارش", "جرم دندان", "سوزش چشم"]
    }
  ]);

  const petMenuRef = useRef<HTMLDivElement>(null);
  const [isMounted, setIsMounted] = useState(false);
  useEffect(() => {
    setIsMounted(true);
  }, []);
  const { getTotalItems } = useCartStore();
  const { pets, activePetId, setActivePet, getActivePet } = usePetStore();
  const { role, isLoggedIn, logout, profile } = useUserStore();
  const activePet = getActivePet();
  const getText = useSettingsStore(state => state.getText);

  useEffect(() => {
    const loadNavFilters = async () => {
      try {
        const data = await productService.getNavigationFilters();
        if (data && data.length > 0) {
          const mapped = data.map(item => ({
            id: item.slug,
            title: item.name,
            icon: MENU_ICONS[item.slug] || <Pill className="w-5 h-5" />,
            solutions: item.symptoms || []
          }));
          setMenuItems(mapped);
        }
      } catch (e) {
        console.error("Failed to load navigation filters:", e);
      }
    };
    loadNavFilters();
  }, []);

  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (petMenuRef.current && !petMenuRef.current.contains(event.target as Node)) {
        setIsPetSwitcherOpen(false);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    if (searchQuery.trim()) {
      onSearch(searchQuery);
      setIsSearchFocused(false);
    }
  };

  return (
    <>
      <AuthModal isOpen={isAuthModalOpen} onClose={() => setIsAuthModalOpen(false)} />
      <PrescriptionUploadModal isOpen={isPrescriptionModalOpen} onClose={() => setIsPrescriptionModalOpen(false)} />

      <div className="sticky top-0 z-50 w-full shadow-md font-vazir" dir="rtl">
        {/* Top Free Shipping Notice */}
        <div className="bg-canina-gold text-canina-dark text-xs font-black py-1.5 text-center tracking-wider flex items-center justify-center gap-2">
          <span>🚚</span>
          <span>{getText('shipping_notice', "ارسال رایگان برای سفارش‌های بالای ۱۵۰ هزار تومان — گارانتی اصالت کانینا آلمان")}</span>
        </div>

        <header className="bg-white border-b border-medical-gray-200">
          {/* TOP ROW: Logo + Search + Primary Actions */}
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 flex items-center justify-between gap-4">
            
            {/* Mobile Menu Toggle & Logo */}
            <div className="flex items-center gap-3">
              <button
                onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
                className="lg:hidden p-2 rounded-xl text-medical-gray-600 hover:bg-medical-gray-100 transition-all"
                aria-label="منو"
              >
                {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
              </button>

              <Link href="/" className="flex items-center gap-3 group">
                <div className="w-10 h-10 sm:w-12 sm:h-12 bg-canina-blue rounded-2xl flex items-center justify-center text-white font-bold text-xl sm:text-2xl group-hover:bg-medical-gray-900 transition-all shadow-md italic">C</div>
                <div className="flex flex-col justify-center">
                  <span className="text-canina-blue font-black text-lg sm:text-2xl tracking-tighter italic font-sans flex items-center gap-1 leading-none">
                    Canina 
                    <span className="text-xs sm:text-sm not-italic font-medium border-r border-medical-gray-300 pr-1.5 font-vazir text-medical-gray-700">
                      {getText('brand_name_fa', "ایران")}
                    </span>
                  </span>
                  <span className="text-[9px] text-medical-gray-400 font-bold uppercase tracking-wider leading-tight mt-0.5">
                    نماینده رسمی CANINA PHARMA GMBH GERMANY
                  </span>
                </div>
              </Link>
            </div>

            {/* Center Search Input (Desktop) */}
            <div className="hidden md:flex flex-1 max-w-md mx-4">
              <form onSubmit={handleSearch} className="w-full relative">
                <input
                  type="text"
                  placeholder="جستجوی محصول، ترکیب دارویی یا بیماری پت..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="w-full bg-medical-gray-50 border border-medical-gray-200 rounded-2xl py-2.5 pr-10 pl-4 text-xs font-bold text-medical-gray-900 focus:outline-none focus:ring-2 focus:ring-canina-blue/20 focus:bg-white transition-all"
                />
                <button type="submit" className="absolute right-3 top-1/2 -translate-y-1/2 text-medical-gray-400 hover:text-canina-blue">
                  <Search className="w-4 h-4" />
                </button>
              </form>
            </div>

            {/* Left Action Buttons */}
            <div className="flex items-center gap-2 sm:gap-3">
              {/* Prescription Upload Button */}
              <button
                onClick={() => setIsPrescriptionModalOpen(true)}
                className="hidden sm:flex items-center gap-1.5 px-3 py-2 bg-emerald-50 text-emerald-700 border border-emerald-200 hover:bg-emerald-100 rounded-xl text-xs font-black transition-all shadow-xs"
              >
                <FileHeart className="w-4 h-4 text-emerald-600" />
                <span>ثبت نسخه دامپزشک</span>
              </button>

              {/* User Account Button */}
              {isLoggedIn ? (
                <Link
                  href="/dashboard"
                  className="flex items-center gap-2 px-3 py-2 bg-medical-gray-50 hover:bg-medical-gray-100 border border-medical-gray-200 rounded-xl text-xs font-black text-medical-gray-900 transition-all"
                >
                  <User className="w-4 h-4 text-canina-blue" />
                  <span className="hidden sm:inline">{profile.firstName || 'حساب کاربری'}</span>
                </Link>
              ) : (
                <button
                  onClick={() => setIsAuthModalOpen(true)}
                  className="flex items-center gap-2 px-3.5 py-2 bg-medical-gray-900 text-white hover:bg-canina-blue rounded-xl text-xs font-black transition-all shadow-xs"
                >
                  <LogIn className="w-4 h-4" />
                  <span>ورود / ثبت‌نام</span>
                </button>
              )}

              {/* Shopping Cart Button */}
              <button
                onClick={onCartOpen}
                className="relative px-3.5 py-2 bg-canina-blue text-white rounded-xl text-xs font-black hover:bg-medical-gray-900 transition-all flex items-center gap-2 shadow-sm"
              >
                <ShoppingBag className="w-4 h-4" />
                <span className="hidden sm:inline">سبد خرید</span>
                {isMounted && getTotalItems() > 0 && (
                  <span className="w-5 h-5 bg-canina-gold text-canina-dark rounded-full text-[10px] font-black flex items-center justify-center">
                    {getTotalItems()}
                  </span>
                )}
              </button>
            </div>
          </div>

          {/* BOTTOM ROW: Clean Organized Dropdown Navigation Bar (Desktop) */}
          <div className="hidden lg:block border-t border-medical-gray-100 bg-medical-gray-50/50">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center gap-1 py-1 text-xs font-black">
              
              {/* Dropdown 1: Category Mega-Menu */}
              <div
                className="relative group py-2"
                onMouseEnter={() => setIsMegaMenuOpen(true)}
                onMouseLeave={() => setIsMegaMenuOpen(false)}
              >
                <button className={`flex items-center gap-1.5 px-3 py-2 rounded-xl transition-all ${isMegaMenuOpen ? 'bg-canina-blue text-white' : 'text-medical-gray-700 hover:bg-medical-gray-100 hover:text-canina-blue'}`}>
                  <Pill className="w-4 h-4" />
                  <span>دسته‌بندی درمانی محصولات</span>
                  <ChevronDown className={`w-3.5 h-3.5 transition-transform ${isMegaMenuOpen ? 'rotate-180' : ''}`} />
                </button>

                <AnimatePresence>
                  {isMegaMenuOpen && (
                    <motion.div
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: 10 }}
                      className="absolute top-full right-0 w-[640px] bg-white border border-medical-gray-200 shadow-2xl rounded-2xl p-6 grid grid-cols-2 gap-6 z-50"
                    >
                      {menuItems.map((item, idx) => (
                        <div key={idx} className="group/item">
                          <Link
                            href={`/shop?category=${item.id}`}
                            onClick={() => setIsMegaMenuOpen(false)}
                            className="flex items-center gap-3 mb-3 cursor-pointer"
                          >
                            <div className="p-2 bg-canina-blue/10 rounded-xl text-canina-blue group-hover/item:bg-canina-blue group-hover/item:text-white transition-all">
                              {item.icon}
                            </div>
                            <h4 className="font-black text-medical-gray-900 text-sm">{item.title}</h4>
                          </Link>
                          <div className="flex flex-wrap gap-1 border-r-2 border-medical-gray-100 pr-2">
                            {item.solutions.slice(0, 6).map((sol, sIdx) => (
                              <Link
                                key={sIdx}
                                href={`/shop?category=${item.id}&symptom=${encodeURIComponent(sol)}`}
                                className="inline-block px-2 py-0.5 rounded-md text-[10px] font-bold bg-medical-gray-50 hover:bg-canina-blue hover:text-white transition-all text-medical-gray-600"
                                onClick={() => setIsMegaMenuOpen(false)}
                              >
                                {sol}
                              </Link>
                            ))}
                          </div>
                        </div>
                      ))}
                    </motion.div>
                  )}
                </AnimatePresence>
              </div>

              {/* Dropdown 2: Products & Catalog */}
              <div
                className="relative group py-2"
                onMouseEnter={() => setActiveDropdown('products')}
                onMouseLeave={() => setActiveDropdown(null)}
              >
                <button className="flex items-center gap-1.5 px-3 py-2 rounded-xl text-medical-gray-700 hover:bg-medical-gray-100 hover:text-canina-blue transition-all">
                  <span>محصولات و کاتالوگ</span>
                  <ChevronDown className="w-3.5 h-3.5" />
                </button>
                {activeDropdown === 'products' && (
                  <div className="absolute top-full right-0 w-52 bg-white border border-medical-gray-200 shadow-xl rounded-xl p-2 z-50 space-y-1 text-xs">
                    <Link href="/shop" className="block px-3 py-2 hover:bg-canina-blue/5 hover:text-canina-blue rounded-lg font-bold">
                      کاتالوگ جامع محصولات
                    </Link>
                    <Link href="/catalog" className="block px-3 py-2 hover:bg-canina-blue/5 hover:text-canina-blue rounded-lg font-bold">
                      کاتالوگ آنلاین و دوز مصرفی
                    </Link>
                  </div>
                )}
              </div>

              {/* Dropdown 3: Science & Academy */}
              <div
                className="relative group py-2"
                onMouseEnter={() => setActiveDropdown('science')}
                onMouseLeave={() => setActiveDropdown(null)}
              >
                <button className="flex items-center gap-1.5 px-3 py-2 rounded-xl text-medical-gray-700 hover:bg-medical-gray-100 hover:text-canina-blue transition-all">
                  <span>دانشنامه و آکادمی</span>
                  <ChevronDown className="w-3.5 h-3.5" />
                </button>
                {activeDropdown === 'science' && (
                  <div className="absolute top-full right-0 w-56 bg-white border border-medical-gray-200 shadow-xl rounded-xl p-2 z-50 space-y-1 text-xs">
                    <Link href="/wiki" className="flex items-center gap-2 px-3 py-2 hover:bg-canina-blue/5 hover:text-canina-blue rounded-lg font-bold">
                      <BookOpen className="w-4 h-4 text-canina-blue" />
                      دانشنامه علمی کانینا
                    </Link>
                    <Link href="/blog" className="flex items-center gap-2 px-3 py-2 hover:bg-canina-blue/5 hover:text-canina-blue rounded-lg font-bold">
                      <FileText className="w-4 h-4 text-canina-blue" />
                      مجله سلامت پت (وبلاگ)
                    </Link>
                    <Link href="/videos" className="flex items-center gap-2 px-3 py-2 hover:bg-canina-blue/5 hover:text-canina-blue rounded-lg font-bold">
                      <Video className="w-4 h-4 text-canina-blue" />
                      آکادمی ویدئویی و مشاوره دامپزشک
                    </Link>
                  </div>
                )}
              </div>

              {/* Dropdown 4: Smart Tools & Pet Profile */}
              <div
                className="relative group py-2"
                onMouseEnter={() => setActiveDropdown('tools')}
                onMouseLeave={() => setActiveDropdown(null)}
              >
                <button className="flex items-center gap-1.5 px-3 py-2 rounded-xl text-medical-gray-700 hover:bg-medical-gray-100 hover:text-canina-blue transition-all">
                  <span>ابزارهای هوشمند</span>
                  <ChevronDown className="w-3.5 h-3.5" />
                </button>
                {activeDropdown === 'tools' && (
                  <div className="absolute top-full right-0 w-56 bg-white border border-medical-gray-200 shadow-xl rounded-xl p-2 z-50 space-y-1 text-xs">
                    <Link href="/profile" className="flex items-center gap-2 px-3 py-2 hover:bg-canina-blue/5 hover:text-canina-blue rounded-lg font-bold">
                      <Dog className="w-4 h-4 text-canina-blue" />
                      شناسنامه و سوابق سلامت پت
                    </Link>
                    <Link href="/dashboard" className="flex items-center gap-2 px-3 py-2 hover:bg-canina-blue/5 hover:text-canina-blue rounded-lg font-bold">
                      <Activity className="w-4 h-4 text-canina-blue" />
                      پایش هوشمند مصرف مکمل‌ها
                    </Link>
                  </div>
                )}
              </div>

              {/* Dropdown 5: Company & B2B */}
              <div
                className="relative group py-2"
                onMouseEnter={() => setActiveDropdown('company')}
                onMouseLeave={() => setActiveDropdown(null)}
              >
                <button className="flex items-center gap-1.5 px-3 py-2 rounded-xl text-medical-gray-700 hover:bg-medical-gray-100 hover:text-canina-blue transition-all">
                  <span>درباره کانینا و تماس</span>
                  <ChevronDown className="w-3.5 h-3.5" />
                </button>
                {activeDropdown === 'company' && (
                  <div className="absolute top-full right-0 w-56 bg-white border border-medical-gray-200 shadow-xl rounded-xl p-2 z-50 space-y-1 text-xs">
                    <Link href="/about" className="flex items-center gap-2 px-3 py-2 hover:bg-canina-blue/5 hover:text-canina-blue rounded-lg font-bold">
                      <Award className="w-4 h-4 text-canina-blue" />
                      درباره کمپانی کانینا آلمان
                    </Link>
                    <button
                      onClick={onB2BOpen}
                      className="w-full text-right flex items-center gap-2 px-3 py-2 hover:bg-canina-blue/5 hover:text-canina-blue rounded-lg font-bold"
                    >
                      <Building2 className="w-4 h-4 text-canina-blue" />
                      درخواست نمایندگی B2B
                    </button>
                    <Link href="/contact" className="flex items-center gap-2 px-3 py-2 hover:bg-canina-blue/5 hover:text-canina-blue rounded-lg font-bold">
                      <PhoneCall className="w-4 h-4 text-canina-blue" />
                      تماس با مرکز پشتیبانی
                    </Link>
                  </div>
                )}
              </div>

            </div>
          </div>
        </header>

        {/* Mobile Navigation Drawer */}
        <AnimatePresence>
          {isMobileMenuOpen && (
            <motion.div
              initial={{ opacity: 0, height: 0 }}
              animate={{ opacity: 1, height: "auto" }}
              exit={{ opacity: 0, height: 0 }}
              className="lg:hidden bg-white border-b border-medical-gray-200 px-4 py-6 space-y-4"
            >
              <form onSubmit={handleSearch} className="relative mb-4">
                <input
                  type="text"
                  placeholder="جستجو در محصولات..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="w-full bg-medical-gray-50 border border-medical-gray-200 rounded-xl py-3 pr-10 pl-4 text-xs font-bold"
                />
                <Search className="w-4 h-4 text-medical-gray-400 absolute right-3 top-1/2 -translate-y-1/2" />
              </form>

              <div className="space-y-2 text-sm font-black">
                <Link href="/shop" onClick={() => setIsMobileMenuOpen(false)} className="block p-3 rounded-xl bg-medical-gray-50 text-medical-gray-900">
                  🛒 محصولات تخصصی کانینا
                </Link>
                <Link href="/catalog" onClick={() => setIsMobileMenuOpen(false)} className="block p-3 rounded-xl hover:bg-medical-gray-50 text-medical-gray-800">
                  📑 کاتالوگ آنلاین و دوز مصرفی
                </Link>
                <Link href="/wiki" onClick={() => setIsMobileMenuOpen(false)} className="block p-3 rounded-xl hover:bg-medical-gray-50 text-medical-gray-800">
                  🧬 دانشنامه علمی
                </Link>
                <Link href="/blog" onClick={() => setIsMobileMenuOpen(false)} className="block p-3 rounded-xl hover:bg-medical-gray-50 text-medical-gray-800">
                  📰 مجله سلامت پت
                </Link>
                <Link href="/videos" onClick={() => setIsMobileMenuOpen(false)} className="block p-3 rounded-xl hover:bg-medical-gray-50 text-medical-gray-800">
                  🎥 آکادمی ویدئویی و مشاوره دامپزشک
                </Link>
                <Link href="/profile" onClick={() => setIsMobileMenuOpen(false)} className="block p-3 rounded-xl hover:bg-medical-gray-50 text-medical-gray-800">
                  🐾 شناسنامه و سوابق سلامت پت
                </Link>
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </>
  );
}