'use client';

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useCart } from '@/context/CartContext';
import SearchAutocomplete from '@/components/layout/SearchAutocomplete';

const I = {
  home: (
    <svg className="ic" viewBox="0 0 24 24">
      <path d="M4 10.5 12 4l8 6.5V20h-5v-6H9v6H4z" />
    </svg>
  ),
  menu: (
    <svg className="ic" viewBox="0 0 24 24">
      <rect x="4" y="4" width="6.5" height="6.5" rx="1.5" />
      <rect x="13.5" y="4" width="6.5" height="6.5" rx="1.5" />
      <rect x="4" y="13.5" width="6.5" height="6.5" rx="1.5" />
      <rect x="13.5" y="13.5" width="6.5" height="6.5" rx="1.5" />
    </svg>
  ),
  cart: (
    <svg className="ic" viewBox="0 0 24 24">
      <path d="M6 7h12l-1 13H7L6 7z" />
      <path d="M9 7a3 3 0 0 1 6 0" />
    </svg>
  ),
  search: (
    <svg className="ic" viewBox="0 0 24 24">
      <circle cx="11" cy="11" r="7" />
      <path d="M20 20l-3.5-3.5" />
    </svg>
  ),
};

export default function MobileTabBar() {
  const pathname = usePathname();
  const { itemCount, openCart, closeCart } = useCart();
  const [isSearchOpen, setIsSearchOpen] = useState(false);

  useEffect(() => {
    const handleOpen = () => setIsSearchOpen(true);
    window.addEventListener('open-mobile-search', handleOpen);
    return () => window.removeEventListener('open-mobile-search', handleOpen);
  }, []);

  useEffect(() => {
    setIsSearchOpen(false);
  }, [pathname]);

  const openMenu = () => {
    closeCart();
    setIsSearchOpen(false);
    window.dispatchEvent(new CustomEvent('open-mobile-menu'));
  };

  const handleOpenSearch = () => {
    closeCart();
    setIsSearchOpen(true);
  };

  const handleOpenCart = () => {
    setIsSearchOpen(false);
    openCart();
  };

  return (
    <>
      <nav className="bnav" aria-label="মোবাইল নেভিগেশন">
        <Link href="/" data-tab="home" className={pathname === '/' ? 'on' : ''}>
          {I.home}
          Home
        </Link>
        <button type="button" data-tab="menu" onClick={openMenu} aria-label="মেনু খুলুন">
          {I.menu}
          Menu
        </button>
        <button type="button" data-tab="cart" onClick={handleOpenCart} aria-label="কার্ট খুলুন">
          {I.cart}
          Cart
          <span className="cnt" data-n={itemCount}>
            {itemCount}
          </span>
        </button>
        <button type="button" data-tab="search" onClick={handleOpenSearch} aria-label="সার্চ">
          {I.search}
          Search
        </button>
      </nav>

      {/* Mobile Search Overlay */}
      {isSearchOpen && (
        <div className="searchpane open" role="dialog" aria-modal="true">
          <div className="sp-top">
            <div style={{ flex: 1 }}>
              <SearchAutocomplete
                placeholder="মধু, অশ্বগন্ধা, চিয়া সীড খুঁজুন…"
                autoFocus={true}
                onItemSelect={() => setIsSearchOpen(false)}
              />
            </div>
            <button
              type="button"
              className="sp-close"
              onClick={() => setIsSearchOpen(false)}
              aria-label="Close search"
              style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '15px' }}
            >
              Cancel
            </button>
          </div>
          <div className="sp-body">
            <h4>Popular right now</h4>
            <div className="sp-tags">
              <Link href="/shop?q=honey" onClick={() => setIsSearchOpen(false)}>
                Honey
              </Link>
              <Link href="/shop?q=ashwagandha" onClick={() => setIsSearchOpen(false)}>
                Ashwagandha
              </Link>
              <Link href="/shop?q=chia" onClick={() => setIsSearchOpen(false)}>
                Chia seed
              </Link>
            </div>
          </div>
        </div>
      )}
    </>
  );
}