import React, { cache } from "react";
import Link from "next/link";
import { formatCurrency } from "@/lib/utils";
import type { Session } from "@/types/session/session";
import { getChargePointByIdAction } from "../../../chargepointModule/list/actions/chargepoint.action";
import type { ChargePoint } from "@/types/chargepoint/chargepoint";
import { Card } from "@/components/ui/card";
import { Clock3, MapPin, Plug, Timer, Zap } from "lucide-react";
import { formatSessionDuration, limitRecentSessions } from "./recentSessionPresentation";

const StatusBadge = ({ status }: { status: Session["status"] | string }) => {
  let colorClasses = "";
  let label = status;
  switch (status) {
    case "Started":
      colorClasses = "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300";
      label = "Started";
      break;
    case "Stopping":
      colorClasses = "bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300";
      label = "Stopping";
      break;
    case "Ended":
      colorClasses = "bg-brand-100 text-brand-800 dark:bg-brand-900 dark:text-brand-300";
      label = "Ended";
      break;
    case "Cancelled":
      colorClasses = "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300";
      label = "Cancelled";
      break;
    case "Created":
      colorClasses = "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300";
      label = "Created";
      break;
    default:
      colorClasses = "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300";
  }
  return (
    <span className={`px-2.5 py-0.5 rounded-full text-xs font-medium ${colorClasses}`}>
      {label}
    </span>
  );
};

// Cache per-request untuk menghindari refetch chargepoint dengan ID yang sama
const getChargePointByIdCached = cache(async (id: string): Promise<ChargePoint | null> => {
  const res = await getChargePointByIdAction(id);
  if (!res.success) return null;
  return res.data ?? null;
});

export default async function SessionWidget({
  initialSessions = [] as Session[],
  userId = "",
  accessToken = "",
  orgCode = "",
}: {
  initialSessions?: Session[];
  userId?: string;
  accessToken?: string;
  orgCode?: string;
}) {
  const latestSessions: Session[] = limitRecentSessions(initialSessions);

  // Deduplikasi ID chargepoint dan fetch detail secara paralel (cached)
  const uniqueChargePointIds = Array.from(
    new Set(latestSessions.map((s) => s.chargepoint).filter(Boolean)),
  );

  const chargePoints = await Promise.all(
    uniqueChargePointIds.map(async (id) => ({ id, data: await getChargePointByIdCached(id) })),
  );
  const chargePointMap = new Map<string, ChargePoint | null>(
    chargePoints.map(({ id, data }) => [id, data]),
  );

  const formatSessionDateTime = (isoString: string) => {
    if (!isoString) return "N/A";
    return new Date(isoString).toLocaleString("en-US", {
      month: "short",
      day: "numeric",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
      hour12: false,
    });
  };

  return (
    <Card className="flex flex-col h-full">
      <div className="p-5 border-b border-gray-200/50 dark:border-gray-700/50 flex justify-between items-center">
        <h2 className="text-lg font-semibold text-gray-800 dark:text-white">Recent Sessions</h2>

        {accessToken !== "" && (
          <Link
            href="/sessions"
            className="text-brand-600 hover:text-brand-800 dark:text-brand-400 dark:hover:text-brand-300 text-sm font-medium"
          >
            View All
          </Link>
        )}
      </div>

      <div className="flex-grow">
        <div className="divide-y divide-gray-200 dark:divide-gray-700">
          {accessToken === "" ? (
            <div className="p-4 text-center text-gray-500 dark:text-gray-400">
              Please sign in to view your recent sessions.
            </div>
          ) : latestSessions.length > 0 ? (
            latestSessions.map((session) => {
              const activity = session.charging_activity?.[0];
              const durationStart = session.metrics?.charging_start || activity?.start_time;
              const durationEnd = session.metrics?.charging_stop || activity?.end_time;
              const energyUsed = (session.metrics?.energy_consumed ?? 0) / 1000;
              const totalCost = session.cost?.amount ?? 0;

              return (
                <Link
                  key={session._id}
                  href={`/sessions/${session._id}`}
                  className="block p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
                >
                  <div className="space-y-3">
                    <div className="flex justify-between items-start gap-3">
                      <div className="flex min-w-0 items-start gap-3">
                        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-brand-100 text-brand-700 dark:bg-brand-900/40 dark:text-brand-300">
                          {session.status === "Started" ? (
                            <Zap className="h-5 w-5" />
                          ) : (
                            <Clock3 className="h-5 w-5" />
                          )}
                        </div>
                        <div className="min-w-0">
                          <div className="truncate font-medium text-gray-900 dark:text-white">
                            {chargePointMap.get(session.chargepoint)?.name ||
                              session.chargepoint_name ||
                              session.chargepoint}
                          </div>
                          <div className="mt-1 flex items-center gap-1 truncate text-xs text-gray-500 dark:text-gray-400">
                            <MapPin className="h-3.5 w-3.5 shrink-0" />
                            {session.location_name || "Location unavailable"}
                          </div>
                        </div>
                      </div>
                      <StatusBadge status={session.status} />
                    </div>

                    <div className="grid grid-cols-3 gap-2 rounded-lg bg-gray-50 p-3 dark:bg-gray-800/70">
                      <div className="min-w-0">
                        <div className="text-xs text-gray-500 dark:text-gray-400">Energy</div>
                        <div className="mt-1 truncate text-sm font-semibold text-gray-900 dark:text-white">
                          {energyUsed.toFixed(2)} kWh
                        </div>
                      </div>
                      <div className="min-w-0">
                        <div className="text-xs text-gray-500 dark:text-gray-400">Total</div>
                        <div className="mt-1 truncate text-sm font-semibold text-gray-900 dark:text-white">
                          {formatCurrency(totalCost)}
                        </div>
                      </div>
                      <div className="min-w-0">
                        <div className="text-xs text-gray-500 dark:text-gray-400">Duration</div>
                        <div className="mt-1 flex items-center gap-1 truncate text-sm font-semibold text-gray-900 dark:text-white">
                          <Timer className="h-3.5 w-3.5 shrink-0" />
                          {formatSessionDuration(durationStart, durationEnd)}
                        </div>
                      </div>
                    </div>

                    <div className="flex items-center justify-between gap-3 text-xs text-gray-500 dark:text-gray-400">
                      <div className="flex items-center gap-1">
                        <Clock3 className="h-3.5 w-3.5" />
                        {formatSessionDateTime(durationStart || session.created_at)}
                      </div>
                      <div className="flex items-center gap-1">
                        <Plug className="h-3.5 w-3.5" />
                        Connector {session.connector_number ?? session.connector ?? "N/A"}
                      </div>
                    </div>
                  </div>
                </Link>
              );
            })
          ) : (
            <div className="p-4 text-center text-gray-500 dark:text-gray-400">
              No recent sessions found.
            </div>
          )}
        </div>
      </div>

      <div className="p-4 mt-auto border-t border-gray-200/50 dark:border-gray-700/50">
        {accessToken === "" ? (
          <Link
            href="/signin"
            className="block w-full bg-brand-600 hover:bg-brand-700 text-white text-center py-2 px-4 rounded-md transition-colors"
          >
            Sign In to Start a New Session
          </Link>
        ) : (
          <Link
            href="/scan"
            className="block w-full bg-brand-600 hover:bg-brand-700 text-white text-center py-2 px-4 rounded-md transition-colors"
          >
            Start New Session
          </Link>
        )}
      </div>
    </Card>
  );
}