"use client";

import { useEffect, useState } from "react";
import { CUSTOMER_URL } from "./meshkee";

function CartIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M3 4h2l2.2 11.2a2 2 0 0 0 2 1.6h7.6a2 2 0 0 0 2-1.5L21 7H6" />
      <circle cx="10" cy="20" r="1.3" />
      <circle cx="17" cy="20" r="1.3" />
    </svg>
  );
}

function UserIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <circle cx="12" cy="8" r="4" />
      <path d="M4 21c1.6-4.2 4.2-6.3 8-6.3s6.4 2.1 8 6.3" />
    </svg>
  );
}

export default function HeaderTools() {
  const [cart, setCart] = useState([]);
  const [user, setUser] = useState(null);
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    const loadCart = () => {
      try {
        setCart(JSON.parse(localStorage.getItem("asphp_cart") || "[]"));
      } catch {
        setCart([]);
      }
    };

    const loadUser = async () => {
      const token = localStorage.getItem("meshkee_token") || localStorage.getItem("asphp_token");
      const savedUser = localStorage.getItem("meshkee_user");
      if (savedUser) {
        try {
          setUser(JSON.parse(savedUser));
        } catch {}
      }
      if (!token) return;
      try {
        const response = await fetch("/api/auth/me", { headers: { Authorization: `Bearer ${token}` } });
        if (response.ok) {
          const data = await response.json();
          setUser(data.user || data);
        }
      } catch {}
    };

    loadCart();
    loadUser();
    window.addEventListener("asphp-cart-change", loadCart);
    return () => window.removeEventListener("asphp-cart-change", loadCart);
  }, []);

  const count = cart.reduce((sum, item) => sum + Number(item.quantity || 1), 0);
  const displayName = user?.firstName || user?.name || user?.fullName || user?.mobile || user?.cellNumber;
  const isAdmin = user?.isAdmin || user?.role === "admin" || user?.type === "admin";

  const logout = () => {
    localStorage.removeItem("meshkee_token");
    localStorage.removeItem("asphp_token");
    localStorage.removeItem("meshkee_user");
    setUser(null);
  };

  return (
    <div className="header-tools">
      {displayName ? (
        <details className="user-menu">
          <summary><UserIcon /> {displayName} عزیز</summary>
          <div>
            <a href={`${CUSTOMER_URL}/profile`}>پروفایل من</a>
            {isAdmin ? <a href="https://business.asphp.ir">مدیریت وبسایت</a> : null}
            <button type="button" onClick={logout}>خروج</button>
          </div>
        </details>
      ) : (
        <a className="login user-login" href={CUSTOMER_URL} aria-label="ورود">
          <UserIcon />
          ورود
        </a>
      )}

      <details className="cart-menu" open={isOpen} onToggle={(event) => setIsOpen(event.currentTarget.open)}>
        <summary aria-label="سبد خرید">
          <CartIcon />
          {count > 0 ? <span className="cart-badge">{count}</span> : null}
        </summary>
        <div className="cart-popup">
          <h3>سبد خرید</h3>
          {cart.length ? (
            <>
              {cart.map((item) => (
                <div className="cart-line" key={item.id}>
                  <span>{item.title}</span>
                  <strong>{item.quantity}</strong>
                </div>
              ))}
              <a className="cart-continue" href={`${CUSTOMER_URL}/cart`}>ادامه خرید</a>
            </>
          ) : (
            <p>سبد خرید شما خالی است.</p>
          )}
        </div>
      </details>
    </div>
  );
}