/* eslint-disable @next/next/no-img-element */
import React from "react";

type ServiceOption = {
  id: string;
  name: string;
  deliveryDate: string;
  price: number;
  currency: string;
  badge?: "Cheapest" | "Best Value" | "Fastest";
};

type ServiceCardProps = {
  logo: string; // URL or path to logo image
  carrierName: string;
  services: ServiceOption[];
  selectedServiceId: string | null;
  onSelect: (serviceId: string) => void;
  color: string; // Brand color for header
};

const ServiceCard: React.FC<ServiceCardProps> = ({
  logo,
  carrierName,
  services,
  selectedServiceId,
  onSelect,
  color,
}) => {
  const [isOpen, setIsOpen] = React.useState(true);

  return (
    <div className="card border-0 shadow-sm rounded-4 overflow-hidden">
      {/* Header */}
      <div
        className="p-3 d-flex align-items-center gap-3 cursor-pointer"
        style={{ backgroundColor: "aliceblue" }}
        onClick={() => setIsOpen(!isOpen)}
      >
        <div
          className="d-flex align-items-center justify-content-center rounded-3"
          style={{
            width: "50px",
            height: "50px",
            backgroundColor: color,
            color: "white",
            fontSize: "20px",
            fontWeight: "bold",
          }}
        >
          {/* Placeholder for logo if image fails or is not provided */}
          {logo ? (
            <img
              src={logo}
              alt={carrierName}
              style={{
                maxWidth: "100%",
                maxHeight: "100%",
                objectFit: "contain",
              }}
            />
          ) : (
            carrierName.substring(0, 2).toUpperCase()
          )}
        </div>
        <h6 className="font-16 font-700 mb-0">{carrierName}</h6>
        <i
          className={`ri-arrow-up-s-line ms-auto font-20 text-muted transition-all ${
            !isOpen ? "rotate-180" : ""
          }`}
        ></i>
      </div>

      {/* Services List */}
      {isOpen && (
        <div
          className="p-3 flex-grow-1"
          style={{ backgroundColor: "aliceblue" }}
        >
          <div className="d-flex flex-column gap-3">
            {services.map((service) => {
              const isSelected = selectedServiceId === service.id;
              return (
                <div
                  key={service.id}
                  className={`card p-3 cursor-pointer transition-all rounded-3 service-card-border ${
                    isSelected ? "selected-service" : ""
                  }`}
                  onClick={() => onSelect(service.id)}
                  style={{
                    backgroundColor: isSelected ? "#b8e6d9" : "white",
                    position: "relative",
                  }}
                >
                  <div className="d-flex justify-content-between align-items-start mb-2">
                    <div className="d-flex align-items-center gap-2">
                      <span className="font-14 font-700">{service.name}</span>
                      {service.badge && (
                        <span
                          className={`badge rounded-pill font-10 ${
                            service.badge === "Cheapest"
                              ? "bg-purple text-white"
                              : service.badge === "Best Value"
                              ? "bg-success text-white"
                              : "bg-danger text-white"
                          }`}
                          style={{ padding: "4px 8px" }}
                        >
                          {service.badge}
                        </span>
                      )}
                    </div>
                    {isSelected && (
                      <i className="ri-checkbox-circle-fill text-success font-20"></i>
                    )}
                    {!isSelected && (
                      <div
                        className="rounded-circle bg-light"
                        style={{ width: "20px", height: "20px" }}
                      ></div>
                    )}
                  </div>

                  <div className="d-flex justify-content-between align-items-end">
                    <div>
                      <div className="font-14 font-700 mb-0">
                        {service.deliveryDate}
                      </div>
                      <div className="font-10 text-muted">Delivery Date</div>
                    </div>
                    <div className="text-end">
                      <div className="font-16 font-700 text-danger">
                        {service.price.toFixed(3)}
                      </div>
                      <div className="font-10 text-muted">
                        {service.currency}
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      )}
      <style jsx>{`
        .bg-light-gray {
          background-color: #f8f9fa;
        }
        .bg-purple {
          background-color: #7b3f9b;
        }
        .cursor-pointer {
          cursor: pointer;
        }
        .transition-all {
          transition: all 0.2s ease-in-out;
        }
        .rotate-180 {
          transform: rotate(180deg);
        }
        .service-card-border {
          border: 1px solid #dee2e6 !important;
        }
      `}</style>
    </div>
  );
};

export default ServiceCard;