"use client";

import Image from "next/image";
import { withCDN } from "@/src/lib/utils";
import { transformClasses } from "@/src/lib/utils/classesMapper";
import { getFeeBasisPriceLabel } from "@/src/lib/utils/registrationPricing";

interface ClassDetailCardProps {
  classDetails: any;
}

export default function ClassDetailCard({ classDetails }: ClassDetailCardProps) {
  if (!classDetails) {
    return null;
  }

  // Transform the single class detail to match ClassListing format
  const transformedClasses = transformClasses([classDetails]);
  const item = transformedClasses[0];

  if (!item) {
    return null;
  }

  // Safely extract additional details directly from the API response
  const instructorName = classDetails?.instructors?.[0]?.name || "To be announced";
  
  return (
    <div className="w-full flex items-center justify-center my-8">
      {/* Matched max-w to keep it centered but sized like the listing desktop card */}
      <div
        className="relative rounded-[30px] border-2 bg-white px-5 flex items-center w-full max-w-[650px] md:h-[300px] gap-4 overflow-hidden shadow-lg"
        style={{ borderColor: item.borderColor }}
      >
        {/* Ribbon - Exact match to ClassListing */}
        <div
          className="
          relative w-[98px] md:w-[120px]
          xl:w-[98px] min-[1600px]:!w-[100px] h-[290px]
          flex items-start justify-start flex-col
          overflow-hidden ribbon-class flex-shrink-0
          "
          style={{
            backgroundImage: `url(${item.ribbon})`,
            backgroundSize: "cover",
            backgroundPosition: "center bottom",
            top: "-9px",
          }}
        >
          <div className="relative w-[68px] h-[68px] rounded-[50%] my-[10px] bg-white mx-auto shadow-sm">
            <Image
              src={item.iconSrc}
              alt={item.title}
              fill
              className="object-contain w-[38px] h-[48px] p-1"
            />
          </div>
          
          <div className="mb-[10px] px-3 w-full">
            <p className="font-regular text-[#fff] text-[12px] leading-[14px]">Age:</p>
            <p className="text-[#fff] text-[16px] font-bold">{item.age}</p>
          </div>
          <div className="mb-[10px] px-3 w-full">
            <p className="font-regular text-[#fff] text-[12px] leading-[14px]">Number of lesson:</p>
            <p className="text-[#fff] text-[16px] font-bold">{item.lessons}</p>
          </div>
          <div className="mb-[10px] px-3 w-full">
            <p className="font-regular text-[#fff] text-[12px] leading-[14px]">
              {item.priceLabel || `${getFeeBasisPriceLabel(classDetails?.fee_basis)}:`}
            </p>
            <p className="text-[#fff] text-[16px] font-bold"> {item.price}</p>
          </div>
        </div>

        <div className="relative w-full py-4 xl:w-[400px]">
          {/* Header */}
          <div className="flex items-center justify-between border-b border-[#D9D9D9] pb-3 mb-4">
            <div className="relative w-full">
              <h3
                className="text-[30px] uppercase font-bold leading-tight"
                style={{ color: item.borderColor }}
              >
                {item.title}
              </h3>
              <p className="text-[16px] text-[#58585A] uppercase">{item.groupName}</p>
              
              <div className="flex items-center gap-1 my-[10px]">
                <Image
                  src={withCDN("/class-registration/Google_Maps_icon_(2020)%201.png")}
                  alt="map"
                  width={21}
                  height={21}
                  className="object-contain w-[21px] h-[21px]"
                />
                <a
                  href={item.mapUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-[14px] text-[#828282] font-semibold underline truncate max-w-[170px] md:max-w-[200px] block"
                >
                  {item.address}
                </a>
                <a href={item.mapUrl} target="_blank" rel="noopener noreferrer">
                  <Image
                    src={withCDN("/class-registration/icon_open_in_new.png")}
                    alt="open"
                    width={21}
                    height={21}
                    className="object-contain w-[21px] h-[21px]"
                  />
                </a>
              </div>
            </div>
          </div>

          {/* Content Grid - 2x2 layout matching listing typography */}
          <div className="grid grid-cols-12 gap-3 text-sm text-gray-700">
            <div className="col-span-6 mb-[10px]">
              <span className="font-regular text-[#828282] text-[12px]">Study period:</span><br />
              <span className="text-[#58585A] text-[14px] font-semibold">{item.period}</span>
            </div>
            
            <div className="col-span-6 mb-[10px] border-l border-[#d9d9d9] pl-[10px]">
              <span className="font-regular text-[#828282] text-[12px]">Class time:</span><br />
              <span className="text-[#58585A] text-[14px] font-semibold">{item.time}</span>
            </div>

            <div className="col-span-6 mb-[10px]">
              <span className="font-regular text-[#828282] text-[12px]">Days:</span><br />
              <span className="text-[#58585A] text-[14px] font-semibold capitalize">{item.days}</span>
            </div>

            <div className="col-span-6 mb-[10px] border-l border-[#d9d9d9] pl-[10px]">
              <span className="font-regular text-[#828282] text-[12px]">Instructor:</span><br />
              <span className="text-[#58585A] text-[14px] font-semibold capitalize truncate block pr-2">
                {instructorName}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}