import Link from "next/link";
import AppointmentList from "./appointmentList";
import ClaimProfileSection from "./claim";
import DetailDoctor from "./detailDoctor";
import Share from "./detailDoctor/Share";
import CustomLoading from "@/app/component/loading/Custom";
import Faq from "@/components/specialties/detail/Faq";
import specialtiesData from "@/data/specialties.json";
import { splitSpecialties } from "@/lib/specialtyDisplay";
import { doctorTitle } from "@/helper";

// مقصد تمیز صفحهٔ فرود تخصص؛ اگر تخصص slug نداشت، لیست پزشکان با کوئری قدیمی.
const specialtyHref = (name) => {
  const slug = specialtiesData.find((s) => s.name === name && s.status === 1)?.slug;
  return slug ? `/specialties/${slug}` : `/doctors?specialty=${encodeURIComponent(name)}`;
};

function DoctorPage({ doctor, comments, rateAggregate, addresses, bookableAddressUuids = [], bookingLocations = [], bookingResources = [], slug, faq = [] }) {
  const { primary: primarySpecialty } = splitSpecialties(doctor?.specialties);

  return (
    <div className="pt-[92px] sm:pt-[120px] mt:pt-[148px] lg:pt-[176px] mt-[px] padding-responsive">
      <div className="flex items-center justify-between">
        <CustomLoading width={180} height={25}>
          <div className="flex items-center justify-start text-[14px] md:text-[16px] font-normal">
            {/* این خط یک breadcrumb است، نه فهرست تخصص. چاپ هر شش تخصص با
                text-nowrap در موبایل از عرض صفحه بیرون می‌زد. فهرست کامل چند خط
                پایین‌تر در Title.js می‌آید و آنجا می‌شکند. */}
            {primarySpecialty && (
              <h2 className="text-[#9B9B9B] text-nowrap flex items-center min-w-0">
                <Link
                  href={specialtyHref(primarySpecialty.name)}
                  className="hover:text-[#525252] truncate"
                >
                  {primarySpecialty.name}
                </Link>
                <span className="mx-1">{">"}</span>
              </h2>
            )}
            <p className="text-[#525252] text-nowrap mr-1">{doctorTitle(doctor?.name)}</p>
          </div>
        </CustomLoading>
        <div className="flex lg:hidden">
          <Share data={doctor} />
        </div>
      </div>
      <div className="flex items-start justify-center gap-6 mt-[30px]">
        <DetailDoctor
          doctor={doctor}
          comments={comments}
          rateAggregate={rateAggregate}
          addresses={addresses}
          bookableAddressUuids={bookableAddressUuids}
        />
        <AppointmentList
          doctor={doctor}
          doctorSlug={slug}
          bookingLocations={bookingLocations}
          bookingResources={bookingResources}
        />
      </div>
      <ClaimProfileSection doctor={doctor} />
      <Faq items={faq} />
    </div>
  );
}

export default DoctorPage;