"use client";

import { useEffect, useMemo } from "react";
import { AlertTriangle } from "lucide-react";

import { Modal } from "@/components/ui/modal";
import { formatCurrency } from "@/lib/utils.client";
import Timer from "@/modules/sessionModule/detail/components/Timer";
import { resolveBreakdownLabel } from "@/modules/sessionModule/detail/utils/costBreakdown";
import { isSessionIdleOngoing } from "@/modules/sessionModule/detail/sessionDetailUtils";
import { CostBreakdown, IdleCostEstimate, Session } from "@/types/session/session";

interface IdleWarningModalProps {
  isOpen: boolean;
  onClose: () => void;
  session: Session;
  idleCostEstimate: IdleCostEstimate | null;
}

export const IdleWarningModal = ({
  isOpen,
  onClose,
  session,
  idleCostEstimate,
}: IdleWarningModalProps) => {
  useEffect(() => {
    if (isOpen && !isSessionIdleOngoing(session)) {
      onClose();
    }
  }, [isOpen, session, onClose]);

  const idleCostBreakdown = useMemo(
    () =>
      session.cost?.breakdown?.filter((item) =>
        ["idle", "parking_time"].includes(item.type.toLowerCase()),
      ) || [],
    [session.cost?.breakdown],
  );

  const idleStartedAt = useMemo(() => {
    const finishingActivity = session.charging_activity
      ?.slice()
      .reverse()
      .find((activity) => activity.status.toLowerCase() === "finishing");

    return (
      finishingActivity?.start_time ||
      session.metrics?.charging_stop ||
      session.updated_at ||
      session.created_at
    );
  }, [session]);

  return (
    <Modal isOpen={isOpen} onClose={onClose} className="max-w-[600px] p-6 lg:p-8">
      <div className="space-y-6">
        <div className="space-y-3 text-center">
          <div className="flex justify-center">
            <div className="rounded-full bg-orange-100 p-3 dark:bg-orange-900/30">
              <AlertTriangle className="h-8 w-8 text-orange-600 dark:text-orange-400" />
            </div>
          </div>
          <h3 className="text-2xl font-bold text-gray-900 dark:text-white">IDLE Session Warning</h3>
          <p className="text-sm text-gray-600 dark:text-gray-400">
            Please unplug your vehicle to stop the IDLE fee from increasing.
          </p>
        </div>

        <div className="rounded-xl border border-gray-200 bg-gray-50 p-6 dark:border-gray-700 dark:bg-gray-800/50">
          <div className="space-y-3 text-center">
            <p className="text-sm font-medium text-gray-700 dark:text-gray-300">IDLE Duration</p>
            <Timer startTime={idleStartedAt} endTime="" />
            {idleCostEstimate && (
              <p className="text-xs text-gray-500 dark:text-gray-400">
                Billable from {new Date(idleCostEstimate.billable_start_at).toLocaleString("id-ID")}
              </p>
            )}
          </div>
        </div>

        {idleCostBreakdown.length > 0 && (
          <div className="space-y-3">
            <h4 className="text-lg font-semibold text-gray-900 dark:text-white">IDLE Rate</h4>
            {idleCostBreakdown.map((item: CostBreakdown, index: number) => (
              <div
                key={`${item.type}-${index}`}
                className="flex items-center justify-between rounded-lg border border-gray-200 bg-white p-4 text-sm dark:border-gray-700 dark:bg-gray-800"
              >
                <span className="text-gray-700 dark:text-gray-300">
                  {resolveBreakdownLabel(item, undefined, {
                    rateFees: session.fee_details?.rate_fees,
                    breakdown: idleCostBreakdown,
                    index,
                  })}
                </span>
                <span className="font-semibold text-gray-900 dark:text-white">
                  {formatCurrency(item.unit_price)}/{item.unit || "hour"}
                </span>
              </div>
            ))}
          </div>
        )}

        <div className="rounded-lg border border-orange-200 bg-orange-50 p-4 dark:border-orange-800 dark:bg-orange-900/20">
          <div className="flex items-center justify-between gap-4">
            <span className="text-sm font-semibold text-orange-900 dark:text-orange-200">
              Current IDLE Cost (Est.)
            </span>
            <span className="text-xl font-bold text-orange-700 dark:text-orange-300">
              {idleCostEstimate ? formatCurrency(idleCostEstimate.amount) : "Calculating…"}
            </span>
          </div>
        </div>

        <div className="flex justify-end pt-4">
          <button
            onClick={onClose}
            className="rounded-lg bg-orange-600 px-6 py-2.5 font-medium text-white transition-colors hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600"
          >
            Mengerti
          </button>
        </div>
      </div>
    </Modal>
  );
};