import Link from "next/link";
import { getChargePointsAction } from "@/modules/chargepointModule/list/actions/chargepoint.action";
import type { ChargePoint } from "@/types/chargepoint/chargepoint";
import StationImage from "@/modules/chargepointModule/detail/components/StationImage";
import { Card } from "@/components/ui/card";
import { getConnectorAvailability, selectAvailableStations } from "./availableStationPresentation";

const StationWidget = async () => {
  // Fetch charge points from the v1 backend. Fetch more than the display limit
  // because the widget filters for online, available stations locally.
  const res = await getChargePointsAction({ backend: "v1", paginate_limit: 20 });
  const chargePoints = res.success ? (res.data ?? []) : [];

  // v1 currently does not embed connectors in the chargepoint list response.
  // Use the station-level status until connector data is available.
  const availableChargePoints = selectAvailableStations(chargePoints as ChargePoint[]);

  return (
    <Card className="flex h-full flex-col">
      <div className="flex items-center justify-between border-b border-gray-200/50 p-5 dark:border-gray-700/50">
        <h2 className="text-lg font-semibold text-gray-800 dark:text-white">Available Stations</h2>
        <Link
          href="/stations"
          className="text-sm font-medium text-brand-500 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300"
        >
          View All
        </Link>
      </div>

      <div
        className="flex-grow overflow-y-auto p-4"
        style={{ scrollbarWidth: "thin", scrollbarColor: "rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.1)" }}
      >
        {availableChargePoints.length > 0 ? (
          <div className="space-y-2">
            {availableChargePoints.map((cp) => {
              const connectorAvailability = getConnectorAvailability(cp);
              return (
                <Link
                  href={`/stations/${cp.id}`}
                  key={cp.id}
                  className="flex items-center space-x-4 rounded-lg p-2 transition-all hover:bg-gray-100 dark:hover:bg-gray-700"
                >
                  <div className="relative h-16 w-16 flex-shrink-0">
                    <StationImage
                      imageUrl={cp.meta_data?.image_url}
                      name={cp.name}
                      small
                      className="rounded-md object-cover"
                    />
                  </div>

                  <div className="flex-grow">
                    <div className="font-medium text-gray-900 dark:text-white">{cp.name}</div>
                    <div className="text-sm text-gray-500 dark:text-gray-400">
                      {cp.online ? "Online" : "Offline"} - {cp.status || ""}
                    </div>
                  </div>

                  <div className="flex-shrink-0 text-right pr-0.5">
                    <div className="text-sm font-medium text-green-600 dark:text-green-400">
                      {connectorAvailability.primary}
                    </div>
                    {connectorAvailability.secondary && (
                      <div className="text-xs text-gray-500 dark:text-gray-400">
                        {connectorAvailability.secondary}
                      </div>
                    )}
                  </div>
                </Link>
              );
            })}
          </div>
        ) : (
          <div className="py-8 text-center text-gray-500 dark:text-gray-400">
            No available stations at the moment.
          </div>
        )}
      </div>
    </Card>
  );
};

export default StationWidget;