"use client";

import { useState } from "react";

function toToman(rials) {
  if (!rials) return null;
  return Math.round(rials / 10).toLocaleString("fa-IR");
}

// مرحلهٔ انتخاب سرویس (فقط حالت نوبت‌دهی سرویسی) — پیش از انتخاب روز.
function ServiceSelect({ services = [], onContinue }) {
  const [draft, setDraft] = useState([]);

  const toggle = (uuid) =>
    setDraft((prev) =>
      prev.includes(uuid) ? prev.filter((u) => u !== uuid) : [...prev, uuid]
    );

  const totalMinutes = services
    .filter((s) => draft.includes(s.uuid))
    .reduce((sum, s) => sum + (Number(s.duration_minutes) || 0), 0);

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

      {services.length === 0 ? (
        <p className="text-[14px] text-[#7A7A7A]">
          در حال حاضر سرویسی برای نوبت‌دهی آنلاین تعریف نشده است.
        </p>
      ) : (
        <div className="flex flex-col gap-2">
          {services.map((s) => {
            const active = draft.includes(s.uuid);
            const toman = toToman(s.price_rials);
            return (
              <button
                key={s.uuid}
                type="button"
                onClick={() => toggle(s.uuid)}
                className={`flex items-center justify-between gap-3 p-3 rounded-xl border text-right transition-colors ${
                  active
                    ? "border-[#5559CE] bg-[#5559CE]/5"
                    : "border-gray-200 bg-white hover:border-[#5559CE]"
                }`}
              >
                <span className="flex items-center gap-2 min-w-0">
                  <span
                    className={`w-4 h-4 rounded border shrink-0 grid place-items-center ${
                      active ? "border-[#5559CE] bg-[#5559CE]" : "border-gray-300"
                    }`}
                  >
                    {active && (
                      <span className="w-2 h-2 bg-white rounded-[2px]" />
                    )}
                  </span>
                  <span className="text-[14px] text-[#3B3B3B] truncate">
                    {s.name}
                  </span>
                </span>
                <span className="flex items-center gap-2 shrink-0 text-[12px] text-[#7A7A7A]">
                  {s.duration_minutes ? <span>{s.duration_minutes} دقیقه</span> : null}
                  {toman ? <span className="text-[#5559CE]">{toman} تومان</span> : null}
                </span>
              </button>
            );
          })}
        </div>
      )}

      {draft.length > 0 && (
        <div className="mt-4 text-[13px] text-[#7A7A7A]">
          مدت کل: <b className="text-[#3B3B3B]">{totalMinutes} دقیقه</b>
        </div>
      )}

      <button
        type="button"
        disabled={draft.length === 0}
        onClick={() => onContinue(draft)}
        className="mt-5 w-full h-[48px] rounded-xl bg-[#5559CE] text-white text-[15px] font-medium disabled:opacity-50"
      >
        انتخاب زمان
      </button>
    </div>
  );
}

export default ServiceSelect;