'use client';
import { Session } from "@/types/session/session";
import { ChargePoint } from "@/types/chargepoint/chargepoint";
import StationImage from "@/modules/chargepointModule/detail/components/StationImage";
import { ChargePointLocation } from "@/types/chargepoint/chargepoint-location";
import Image from "next/image";
import {
  getSessionConnectorLabel,
  getSessionLocationLabel,
  getSessionPowerTypeLabel,
  getSessionStationName,
} from "@/modules/sessionModule/detail/sessionDetailUtils";

interface SessionStationInfoProps {
  readonly session: Session;
  readonly chargepoint: ChargePoint | null;
  readonly location: ChargePointLocation | null;
}

interface RateComponent {
  rate_name: string;
  type: string;
  unit: string;
  unit_price: number;
  tax: number;
}

const SessionStationInfo = ({
  session,
  chargepoint,
  location,
}: SessionStationInfoProps) => {
  const imageUrl = chargepoint?.avatar_url || "/images/station/default_station.png";
  const isDefaultImage = !chargepoint?.avatar_url || imageUrl === "/images/station/default_station.png";
  const stationName = getSessionStationName(session, chargepoint);
  const locationLabel = getSessionLocationLabel(session, location);
  const connectorLabel = getSessionConnectorLabel(session, chargepoint);
  const powerTypeLabel = getSessionPowerTypeLabel(session);

  return (
    <div className="rounded-lg border border-stroke bg-white p-4 sm:p-6 shadow-default dark:bg-gray-800 dark:border-gray-700 overflow-hidden">
      <h3 className="mb-4 text-lg sm:text-xl font-semibold text-black dark:text-white">
        Location & Connector
      </h3>
      <div className="flex min-w-0 flex-col items-start gap-4 sm:flex-row sm:gap-6">
        {isDefaultImage ? (
          <div className="flex items-center justify-center w-16 h-16 sm:w-20 sm:h-20 rounded-lg bg-gray-100 dark:bg-gray-700 flex-shrink-0">
            <Image
              src={imageUrl}
              alt={stationName}
              width={56}
              height={56}
              className="w-10 h-10 sm:w-14 sm:h-14 object-contain"
              unoptimized
            />
          </div>
        ) : (
          <StationImage
            imageUrl={imageUrl}
            name={chargepoint?.name || ""}
            small
            className="h-16 w-16 sm:h-20 sm:w-20 rounded-lg object-cover flex-shrink-0"
          />
        )}
        <div className="min-w-0 flex-1 w-full">
          <p className="text-base sm:text-lg font-bold text-black dark:text-white break-words">
            {stationName}
          </p>
          <p className="text-sm text-slate-400 mt-1 break-words">
            {locationLabel}
          </p>
          <div className="my-4 border-t border-stroke dark:border-strokedark"></div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
            <div className="min-w-0">
              <p className="font-semibold text-slate-400 mb-1">Chargepoint</p>
              <p className="font-bold text-black dark:text-white break-words">
                {stationName}
              </p>
            </div>

            <div className="min-w-0">
              <p className="font-semibold text-slate-400 mb-1">Connector</p>
              <p className="font-bold text-black dark:text-white break-words">
                {connectorLabel}
              </p>
            </div>

            <div className="min-w-0">
              <p className="font-semibold text-slate-400 mb-1">Charger Type</p>
              <p className="font-bold text-black dark:text-white break-words">
                {powerTypeLabel}
              </p>
            </div>

            {/* Collapsible Rate Section */}
{/*             <div className="col-span-2">
              <button
                onClick={() => setRateOpen(!rateOpen)}
                className="flex w-full items-center justify-between font-semibold text-slate-400 hover:text-slate-600 transition-colors"
              >
                <span>Rate</span>
                {rateOpen ? (
                  <ChevronDown className="w-4 h-4 text-slate-500" />
                ) : (
                  <ChevronRight className="w-4 h-4 text-slate-500" />
                )}
              </button>

              <div
                className={`overflow-hidden transition-all duration-300 ease-in-out ${
                  rateOpen ? "max-h-96 opacity-100 mt-2" : "max-h-0 opacity-0"
                }`}
              >
                <RateMinimal
                  breakdown={session.cost?.breakdown || []}
                  currency={session.cost?.currency}
                  fallback=""
                />
              </div>
            </div> */}
          </div>
        </div>
      </div>
    </div>
  );
};

export default SessionStationInfo;