import { doctorTitle } from "@/helper";
import CircularLoading from "@/app/component/loading/Circular";
import CustomLoading from "@/app/component/loading/Custom";
import TextLoading from "@/app/component/loading/Text";
import LikeDI from "@/components/icons/LikeDI";
import StarDI from "@/components/icons/StarDI";
import TickCircle from "@/components/icons/TickCircle";
import DoctorAvatar from "@/app/component/DoctorAvatar";
import Instagram from "@/components/icons/Instagram";
import Telegram from "@/components/icons/Telegram";
import Aparat from "@/components/icons/Aparat";
import Youtube from "@/components/icons/Youtube";
import Linkedin from "@/components/icons/Linkedin";

const SOCIAL_ICONS = {
  instagram: Instagram,
  telegram: Telegram,
  aparat: Aparat,
  youtube: Youtube,
  linkedin: Linkedin,
};

function Title({ doctor }) {
  const isUnclaimed = doctor?.owner_status !== "claimed";
  const hasRating = Number(doctor?.point) > 0;
  return (
    <div className="flex flex-col lg:flex-row items-center justify-start gap-[8px] lg:gap-[32px]">
      <CircularLoading width={100} height={100}>
        <DoctorAvatar
          doctor={doctor}
          size={164}
          className=" w-[40px] sm:w-[81px] md:w-[123px] lg:w-[164px] h-[40px] sm:h-[81px] md:h-[123px] lg:h-[164px] "
        />
      </CircularLoading>
      <div className="flex flex-col items-center lg:items-start gap-[8px] lg:gap-[16px]">
        <TextLoading width={90} height={20}>
          <div className="flex items-center gap-2">
            <h1 className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
              {doctorTitle(doctor?.name)}
            </h1>
            {isUnclaimed && (
              <span className="text-[#737373] bg-[#F5F5F5] border border-[#E5E5E5] rounded-full px-2 py-0.5 text-[10px] md:text-[12px] font-medium whitespace-nowrap">
                پروفایل تأییدنشده
              </span>
            )}
          </div>
        </TextLoading>
        <TextLoading width={100} height={20}>
          <h2 className="text-[#525252] text-[14px] md:text-[16px] font-medium">
            تخصص:
            {doctor?.specialties?.map(
              (item, idx) =>
                `${item.name} ${doctor.specialties.length === idx + 1 ? "" : "|"} `
            )}
          </h2>
        </TextLoading>
        <div className="flex items-center justify-start gap-11">
          {Number(doctor?.experience) > 0 && (
            <TextLoading width={60} height={20}>
              <p className="text-[#525252] text-[16px] font-medium">
                {doctor?.experience} سال تجربه
              </p>
            </TextLoading>
          )}
          <div className="flex items-center gap-1">
            {!isUnclaimed && (
              <div className="hidden lg:flex">
                <TickCircle />
              </div>
            )}
            <TextLoading width={120} height={20}>
              <p className="text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-medium">
                کد نظام پزشکی: {doctor?.medical_system_code}
              </p>
            </TextLoading>
          </div>
        </div>
        {hasRating && (
          <CustomLoading width={160} height={25}>
            <div className="flex items-center justify-start gap-2">
              <div className="flex p-1 gap-0.5 items-start justify-center">
                <StarDI />
                <p className="text-[#616161] text-[12px] md:text-[14px] font-normal">
                  امتیاز: {doctor?.point}
                </p>
              </div>
              <div className="flex p-1 items-start gap-0.5">
                <LikeDI />
                <p className="text-[#616161] text-[12px] md:text-[14px] font-normal">
                  {doctor?.satisfaction}% رضایت کاربران
                </p>
              </div>
            </div>
          </CustomLoading>
        )}
        {doctor?.social_media && Object.values(doctor.social_media).some(Boolean) && (
          <div className="flex items-center gap-2">
            {Object.entries(doctor.social_media).map(([key, url]) => {
              if (!url) return null;
              const Icon = SOCIAL_ICONS[key];
              if (!Icon) return null;
              return (
                <a
                  key={key}
                  href={url}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label={key}
                  className="flex items-center justify-center p-1.5 rounded-full bg-[#F8F8FF]"
                >
                  <Icon />
                </a>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}

export default Title;