"use client";

import { useState } from "react";
import Timer from "@/modules/sessionModule/detail/components/Timer";
import { Session } from "@/types/session/session";
import { useSession } from "@/modules/sessionModule/detail/hooks/useSession";
import { PlayCircle, Clock, CheckCircle, XCircle, Radio, AlertTriangle } from "lucide-react";
import { IdleWarningModal } from "@/modules/sessionModule/detail/components/IdleWarningModal";
import { isSessionIdleOngoing } from "@/modules/sessionModule/detail/sessionDetailUtils";
import {
  getSessionTimerStart,
  shouldShowCompletedSessionDetails,
} from "@/modules/sessionModule/detail/sessionPresentation";

export const SessionHeader = ({ session }: { session: Session }) => {
  const { session: liveSession, idleCostEstimate } = useSession(session._id, session);
  const data = liveSession ?? session;
  const [isIdleModalOpen, setIsIdleModalOpen] = useState(false);

  const isIdleOngoing = isSessionIdleOngoing(data);
  const isFinished = shouldShowCompletedSessionDetails(data?.status);
  const timerStart = getSessionTimerStart(data) ?? data?.created_at ?? "";

  const getStatusConfig = (status: string, idleOngoing: boolean) => {
    if (idleOngoing) {
      return {
        icon: <AlertTriangle className="w-5 h-5" />,
        bg: "bg-orange-100 dark:bg-orange-900/30",
        text: "text-orange-800 dark:text-orange-300",
        border: "border-orange-300 dark:border-orange-700",
        displayText: "IDLE ongoing",
      };
    }

    switch (status) {
      case "Started":
        return {
          icon: <PlayCircle className="w-5 h-5" />,
          bg: "bg-green-100 dark:bg-green-900/30",
          text: "text-green-800 dark:text-green-300",
          border: "border-green-300 dark:border-green-700",
          displayText: status,
        };
      case "Created":
        return {
          icon: <Clock className="w-5 h-5" />,
          bg: "bg-blue-100 dark:bg-blue-900/30",
          text: "text-blue-800 dark:text-blue-300",
          border: "border-blue-300 dark:border-blue-700",
          displayText: status,
        };
      case "Stopping":
        return {
          icon: <Clock className="w-5 h-5" />,
          bg: "bg-amber-100 dark:bg-amber-900/30",
          text: "text-amber-800 dark:text-amber-300",
          border: "border-amber-300 dark:border-amber-700",
          displayText: "Stopping",
        };
      case "Ended":
        return {
          icon: <CheckCircle className="w-5 h-5" />,
          bg: "bg-gray-100 dark:bg-gray-800",
          text: "text-gray-800 dark:text-gray-300",
          border: "border-gray-300 dark:border-gray-700",
          displayText: status,
        };
      case "Cancelled":
        return {
          icon: <XCircle className="w-5 h-5" />,
          bg: "bg-red-100 dark:bg-red-900/30",
          text: "text-red-800 dark:text-red-300",
          border: "border-red-300 dark:border-red-700",
          displayText: status,
        };
      default:
        return {
          icon: <Clock className="w-5 h-5" />,
          bg: "bg-gray-100 dark:bg-gray-800",
          text: "text-gray-800 dark:text-gray-300",
          border: "border-gray-300 dark:border-gray-700",
          displayText: status,
        };
    }
  };

  const statusConfig = getStatusConfig(data?.status || "", isIdleOngoing);
  const isLive = data?.status === "Started" && !isIdleOngoing;

  const handleStatusClick = () => {
    if (isIdleOngoing) {
      setIsIdleModalOpen(true);
    }
  };

  return (
    <>
      <div className="text-center space-y-4">
        <div>
          <p className="text-lg font-medium text-slate-600 dark:text-slate-400">Charging Session</p>
          <p className="text-xs text-slate-400 dark:text-slate-500 mt-1">
            ID: {data?._id?.slice(0, 8)}...
          </p>
        </div>

        <div className="mt-6">
          <div className="text-center">
            {/* Use Timer component for live timing */}
            <Timer
              startTime={timerStart}
              endTime={
                isFinished
                  ? data.metrics?.charging_stop || data.updated_at
                  : data.status === "Created"
                    ? data.updated_at
                    : ""
              }
            />
            <p className="text-sm text-slate-500 dark:text-slate-400 mt-2">
              {isFinished ? "Total Duration" : "Current Duration"}
            </p>
          </div>

          <div className="mt-4 flex flex-col items-center gap-2">
            {/* Status Badge - More Prominent */}
            <button
              onClick={handleStatusClick}
              disabled={!isIdleOngoing}
              className={`
                inline-flex items-center gap-2 rounded-full px-4 py-2 text-base font-semibold border-2
                ${statusConfig.bg} ${statusConfig.text} ${statusConfig.border}
                transition-all duration-200
                ${
                  isIdleOngoing
                    ? "cursor-pointer hover:scale-105 hover:shadow-lg animate-pulse ring-2 ring-orange-400 dark:ring-orange-600 ring-opacity-50"
                    : data.status.toLowerCase() === "created"
                      ? "cursor-default animate-pulse ring-2 ring-blue-400 dark:ring-blue-600 ring-opacity-50"
                      : "cursor-default"
                }
                ${isIdleOngoing ? "focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2" : ""}
              `}
            >
              {statusConfig.icon}
              <span>{statusConfig.displayText}</span>
            </button>
            {data.status.toLowerCase() === "created" && (
              <div className="text-sm text-slate-500 dark:text-slate-400 mt-2">
                <p>Your Session is requested wait for a while</p>
                <p>If not started, maybe there is an issue with the connector</p>
              </div>
            )}

            {/* Live Indicator */}
            {isLive && (
              <div className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-emerald-100 dark:bg-emerald-900/30 border border-emerald-300 dark:border-emerald-700">
                <Radio className="w-3 h-3 text-emerald-600 dark:text-emerald-400 animate-pulse" />
                <span className="text-xs font-medium text-emerald-700 dark:text-emerald-300">
                  Live
                </span>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* IDLE Warning Modal */}
      <IdleWarningModal
        isOpen={isIdleModalOpen}
        onClose={() => setIsIdleModalOpen(false)}
        session={data}
        idleCostEstimate={idleCostEstimate}
      />
    </>
  );
};