"use client";

import moment from "moment-jalaali";

function nextAvailableLabel(timestamp) {
  if (!timestamp) return null;
  return `اولین نوبت آزاد: ${moment.unix(timestamp).format("jD jMMMM")}`;
}

/**
 * انتخاب محل نوبت‌دهی — پیش از انتخاب سرویس و روز.
 *
 * فهرست از سمت سرور بر اساس زودترین نوبت آزاد مرتب شده، پس اولین آیتم پیش‌فرض
 * درست است و اینجا دوباره مرتب نمی‌شود.
 */
function LocationSelect({ locations = [], selected, onSelect }) {
  const anyOpen = locations.some((l) => l.available_on_date !== false);

  return (
    <div className="w-full max-w-[520px] mx-auto">
      <h2 className="text-[16px] font-bold text-[#3B3B3B] mb-4">۱. انتخاب محل نوبت‌دهی</h2>

      {!anyOpen && locations.length > 0 && (
        <p className="mb-3 text-[13px] text-[#B4541F]">
          در روز انتخاب‌شده هیچ‌کدام از محل‌ها نوبت‌دهی ندارند. روز دیگری را انتخاب کنید.
        </p>
      )}

      <div className="flex flex-col gap-2">
        {locations.map((location) => {
          const key = location.clinic_uuid ?? location.location_uuid ?? "personal";
          const active =
            (selected?.clinic_uuid ?? null) === (location.clinic_uuid ?? null);
          const nextLabel = nextAvailableLabel(location.next_available_at);
          // null یعنی روزی انتخاب نشده؛ فقط false به معنی «این روز بسته است».
          const closed = location.available_on_date === false;

          return (
            <button
              key={key}
              type="button"
              disabled={closed}
              onClick={() => !closed && onSelect(location)}
              className={`w-full text-right p-[16px] rounded-[8px] border border-solid transition-colors ${
                closed
                  ? "border-[#EFEFEF] bg-[#FAFAFA] opacity-60 cursor-not-allowed"
                  : active
                    ? "border-[#5559CE] bg-[rgba(85,89,206,0.06)]"
                    : "border-[#EFEFEF] bg-[#FFF] hover:border-[#C7C9EC]"
              }`}
            >
              <div className="flex items-center justify-between gap-[8px]">
                <p className="text-[14px] md:text-[16px] font-bold text-[#3B3B3B]">
                  {location.title}
                </p>
                {location.type === "clinic" && (
                  <span className="text-[11px] text-[#5559CE] bg-[rgba(85,89,206,0.10)] rounded-[4px] px-[6px] py-[2px]">
                    کلینیک
                  </span>
                )}
              </div>

              {location.address && (
                <p className="mt-[6px] text-[13px] text-[#616161] font-normal">
                  {location.address}
                </p>
              )}

              <p
                className={`mt-[8px] text-[12px] ${
                  closed ? "text-[#B4541F]" : nextLabel ? "text-[#009D79]" : "text-[#A1A1A1]"
                }`}
              >
                {closed
                  ? "در این روز نوبت ندارد"
                  : nextLabel ?? "فعلاً نوبت خالی ندارد"}
              </p>
            </button>
          );
        })}
      </div>
    </div>
  );
}

export default LocationSelect;