"use client";

import { Session } from "@/types/session/session";
import { useRouter } from "next/navigation";
import { Clock, Zap, CheckCircle2, XCircle, ParkingCircle } from "lucide-react";
import { isSessionIdleOngoing } from "@/modules/sessionModule/detail/sessionDetailUtils";

interface SessionCardProps {
  readonly session: Session;
  readonly onClick?: (session: Session) => void;
}

export default function SessionCard({ session, onClick }: SessionCardProps) {
  const router = useRouter();
  const isIdleOngoing = isSessionIdleOngoing(session);

  const getStatusColor = (status: string) => {
    if (isIdleOngoing) {
      return "bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400";
    }

    switch (status) {
      case "Ended":
        return "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400";
      case "Started":
        return "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400";
      case "Stopping":
        return "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400";
      case "Created":
        return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400";
      default:
        return "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400";
    }
  };

  const statusColor = getStatusColor(session.status);

  // Get display status text - show IDLE message when is_idle is true
  const getDisplayStatus = () => {
    if (isIdleOngoing) {
      return "IDLE - Ongoing";
    }
    return session.status;
  };

  const formatCurrency = (amount: number) => {
    const rounded = Math.round(amount);
    return `Rp${rounded.toLocaleString("id-ID", { maximumFractionDigits: 0 })}`;
  };

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString("en-US", {
      month: "short",
      day: "numeric",
      year: "numeric",
    });
  };

  const formatTime = (dateString: string) => {
    return new Date(dateString).toLocaleTimeString("en-US", {
      hour: "2-digit",
      minute: "2-digit",
    });
  };

  const handleClick = () => {
    if (onClick) {
      onClick(session);
    } else {
      // Navigate to session detail page
      router.push(`/sessions/${session._id}`);
    }
  };

  const energyUsed = (session.metrics?.energy_consumed ?? 0) / 1000;
  const totalCost = session.cost?.amount ?? 0;
  const sessionIdentifier = session.transaction_id ?? session._id;
  const sessionName = `Session #${sessionIdentifier}`;
  const stationName =
    session.chargepoint_name || session.location_name || "Failed to load station name";

  const renderStatusIcon = () => {
    const iconClass = getStatusColor(session.status);
    if (isIdleOngoing) {
      return <ParkingCircle className={iconClass} size={24} />;
    }

    switch (session.status) {
      case "Started":
        return <Zap className={iconClass} size={24} />;
      case "Stopping":
        return <Clock className={iconClass} size={24} />;
      case "Ended":
        return <CheckCircle2 className={iconClass} size={24} />;
      case "Cancelled":
        return <XCircle className={iconClass} size={24} />;
      case "Created":
      default:
        return <Clock className={iconClass} size={24} />;
    }
  };

  // Enhanced styling for IDLE and Started states to increase awareness
  const isStarted = session.status === "Started";
  const cardClassName = isIdleOngoing
    ? "w-full text-left bg-white dark:bg-gray-800 rounded-lg shadow-lg border-2 border-orange-400 dark:border-orange-500 hover:shadow-xl hover:border-orange-500 dark:hover:border-orange-400 transition-all cursor-pointer ring-2 ring-orange-200 dark:ring-orange-900/50 animate-pulse-subtle-orange"
    : isStarted
      ? "w-full text-left bg-white dark:bg-gray-800 rounded-lg shadow-lg border-2 border-blue-400 dark:border-blue-500 hover:shadow-xl hover:border-blue-500 dark:hover:border-blue-400 transition-all cursor-pointer ring-2 ring-blue-200 dark:ring-blue-900/50 animate-pulse-subtle-blue"
      : "w-full text-left bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md hover:border-gray-300 dark:hover:border-gray-600 transition-all cursor-pointer";

  return (
    <button type="button" onClick={handleClick} className={cardClassName}>
      <div className="p-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-4">
            {/* Session Icon */}
            <div
              className={`w-12 h-12 rounded-full flex items-center justify-center ${statusColor}`}
            >
              {renderStatusIcon()}
            </div>

            {/* Session Info */}
            <div>
              <h3 className="font-semibold text-gray-800 dark:text-white">{sessionName}</h3>
              <p className="text-sm text-gray-600 dark:text-gray-300">
                {formatDate(session.created_at)} • {formatTime(session.created_at)}
              </p>
              <p className="text-xs  text-gray-500 dark:text-gray-400">{stationName}</p>
            </div>
          </div>

          {/* Middle Info */}
          <div className="hidden sm:flex items-center space-x-8">
            <div className="text-center">
              <div className="text-sm font-medium text-gray-800 dark:text-gray-200">
                {energyUsed.toFixed(2)} kWh
              </div>
              <div className="text-xs text-gray-500 dark:text-gray-400">Energy</div>
            </div>

            <div className="text-center">
              <div className="text-sm font-medium text-gray-800 dark:text-gray-200">
                {formatCurrency(totalCost)}
              </div>
              <div className="text-xs text-gray-500 dark:text-gray-400">Total</div>
            </div>
          </div>

          {/* Right Side */}
          <div className="flex items-center space-x-3">
            <span
              className={`px-3 py-1 rounded-full text-xs font-medium ${statusColor} ${isIdleOngoing ? "font-semibold" : ""}`}
            >
              {getDisplayStatus()}
            </span>

            <svg
              className="w-5 h-5 text-gray-400"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
            </svg>
          </div>
        </div>

        {/* Mobile Info */}
        <div className="mt-3 space-y-2 text-sm sm:hidden">
          <div className="flex justify-between">
            <span className="text-gray-600 dark:text-gray-300">{energyUsed.toFixed(2)} kWh</span>
            <span className="font-medium text-gray-800 dark:text-gray-200">
              {formatCurrency(totalCost)}
            </span>
          </div>
        </div>
      </div>
    </button>
  );
}