"use client";

import { useState } from "react";
import { Popover } from "@mui/material";
import { splitSpecialties } from "@/lib/specialtyDisplay";

/**
 * تخصص اصلی + شمارندهٔ بقیه در کارت پزشک.
 *
 * پیش از این همهٔ نام‌ها پشت‌سرهم چاپ می‌شدند و کارتِ پزشکِ شش‌تخصصی در موبایل
 * چند برابر بقیه بلند می‌شد و شبکه را به‌هم می‌ریخت.
 *
 * جدا از ItemDoctor است تا مرز client فقط همین‌جا باشد؛ کارت از کامپوننت‌های
 * سروری هم رندر می‌شود.
 */
function SpecialtyChips({ specialties }) {
  const [anchorEl, setAnchorEl] = useState(null);
  const { primary, rest } = splitSpecialties(specialties);

  if (!primary) return null;

  const open = Boolean(anchorEl);

  // کارت داخل <Link> است؛ بدون این دو، هر کلیک روی شمارنده صفحهٔ پزشک را باز می‌کند.
  const handleOpen = (event) => {
    event.preventDefault();
    event.stopPropagation();
    setAnchorEl(event.currentTarget);
  };

  const handleClose = (event) => {
    event?.preventDefault?.();
    event?.stopPropagation?.();
    setAnchorEl(null);
  };

  return (
    <span className="flex items-center gap-1.5 min-w-0">
      <span className="text-[#616161] text-[14px] font-normal truncate">
        تخصص: {primary.name}
      </span>

      {rest.length > 0 && (
        <>
          <button
            type="button"
            onClick={handleOpen}
            aria-label={`نمایش ${rest.length} تخصص دیگر`}
            className="shrink-0 p-1 bg-[#F8F8FF] rounded-[4px] text-[#616161] text-[12px] font-medium leading-none"
          >
            +{rest.length}
          </button>

          <Popover
            open={open}
            anchorEl={anchorEl}
            onClose={handleClose}
            anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
            transformOrigin={{ vertical: "top", horizontal: "right" }}
          >
            <ul
              dir="rtl"
              className="p-3 flex flex-col gap-1.5 max-w-[260px] bg-[#FFF]"
            >
              {[primary, ...rest].map((item) => (
                <li
                  key={item.id ?? item.name}
                  className="text-[#616161] text-[13px] font-normal"
                >
                  {item.name}
                </li>
              ))}
            </ul>
          </Popover>
        </>
      )}
    </span>
  );
}

export default SpecialtyChips;