DentalManagementMH05/apps/Frontend/src/components/insurance-status/ddma-buton-modal.tsx

import { useEffect, useRef, useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { CheckCircle, LoaderCircleIcon, X } from "lucide-react";
import { useToast } from "@/hooks/use-toast";
import { apiRequest, queryClient } from "@/lib/queryClient";
import { useAppDispatch } from "@/redux/hooks";
import { setTaskStatus } from "@/redux/slices/seleniumTaskSlice";
import { formatLocalDate } from "@/utils/dateUtils";
import { socket } from "@/lib/socket";
import { QK_PATIENTS_BASE } from "@/components/patients/patient-table";

// ─── OTP Modal ────────────────────────────────────────────────────────────────

interface DdmaOtpModalProps {
  open: boolean;
  onClose: () => void;
  onSubmit: (otp: string) => Promise<void> | void;
  isSubmitting: boolean;
}

function DdmaOtpModal({ open, onClose, onSubmit, isSubmitting }: DdmaOtpModalProps) {
  const [otp, setOtp] = useState("");

  useEffect(() => {
    if (!open) setOtp("");
  }, [open]);

  if (!open) return null;

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!otp.trim()) return;
    await onSubmit(otp.trim());
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
      <div className="bg-white dark:bg-slate-900 rounded-xl shadow-lg w-full max-w-md p-6">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-lg font-semibold">Enter OTP</h2>
          <button type="button" onClick={onClose} className="text-slate-500 hover:text-slate-800">
            <X className="w-4 h-4" />
          </button>
        </div>
        <p className="text-sm text-slate-500 mb-4">
          We need the one-time password (OTP) sent by the Delta Dental MA portal to complete this
          eligibility check.
        </p>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="ddma-otp">OTP</Label>
            <Input
              id="ddma-otp"
              placeholder="Enter OTP code"
              value={otp}
              onChange={(e) => setOtp(e.target.value)}
              autoFocus
            />
          </div>
          <div className="flex justify-end gap-3">
            <Button type="button" variant="outline" onClick={onClose} disabled={isSubmitting}>
              Cancel
            </Button>
            <Button type="submit" disabled={isSubmitting || !otp.trim()}>
              {isSubmitting ? (
                <>
                  <LoaderCircleIcon className="w-4 h-4 mr-2 animate-spin" />
                  Submitting...
                </>
              ) : (
                "Submit OTP"
              )}
            </Button>
          </div>
        </form>
      </div>
    </div>
  );
}

// ─── Main component ───────────────────────────────────────────────────────────

interface DdmaEligibilityButtonProps {
  memberId: string;
  dateOfBirth: Date | null;
  firstName?: string;
  lastName?: string;
  isFormIncomplete: boolean;
  autoTrigger?: boolean;
  onAutoTriggered?: () => void;
  onPdfReady: (pdfId: number, fallbackFilename: string | null) => void;
}

export function DdmaEligibilityButton({
  memberId,
  dateOfBirth,
  firstName,
  lastName,
  isFormIncomplete,
  autoTrigger,
  onAutoTriggered,
  onPdfReady,
}: DdmaEligibilityButtonProps) {
  const { toast } = useToast();
  const dispatch = useAppDispatch();

  const sessionIdRef = useRef<string | null>(null);
  const autoTriggeredRef = useRef(false);

  const [otpModalOpen, setOtpModalOpen] = useState(false);
  const [isStarting, setIsStarting] = useState(false);
  const [isSubmittingOtp, setIsSubmittingOtp] = useState(false);

  // ── Socket event handlers ─────────────────────────────────────────────────

  const handleDdmaStart = async () => {
    if (!memberId || !dateOfBirth) {
      toast({
        title: "Missing fields",
        description: "Member ID and Date of Birth are required.",
        variant: "destructive",
      });
      return;
    }

    const formattedDob = formatLocalDate(dateOfBirth);
    const payload = {
      memberId,
      dateOfBirth: formattedDob,
      firstName,
      lastName,
      insuranceSiteKey: "DDMA",
    };

    setIsStarting(true);

    try {
      dispatch(
        setTaskStatus({
          key: "eligibilityCheck",
          status: "pending",
          message: "Starting DDMA eligibility check…",
        })
      );

      // 1) POST to backend — returns { status: "queued", jobId }
      const response = await apiRequest(
        "POST",
        "/api/insurance-status-ddma/ddma-eligibility",
        { data: JSON.stringify(payload), socketId: socket.id }
      );

      const result = await response.json();
      if (!response.ok || result.error) {
        throw new Error(result.error || `Server error (${response.status})`);
      }

      const jobId: string = result.jobId;
      if (!jobId) throw new Error("No jobId returned from server");

      dispatch(
        setTaskStatus({
          key: "eligibilityCheck",
          status: "pending",
          message: "DDMA job queued. Waiting for browser session to start…",
        })
      );

      // 2) Listen for job-lifecycle and DDMA-specific socket events.
      //    All events come through the shared app socket.

      // Handler: Python agent started a browser session → we now have session_id
      const onSessionStarted = (data: any) => {
        if (String(data?.jobId) !== String(jobId)) return;
        sessionIdRef.current = data.session_id ?? null;
        dispatch(
          setTaskStatus({
            key: "eligibilityCheck",
            status: "pending",
            message: "Browser session started. Waiting for OTP or result…",
          })
        );
      };

      // Handler: OTP is required by the DDMA portal
      const onOtpRequired = (data: any) => {
        if (String(data?.jobId) !== String(jobId)) return;
        // Update sessionId in case it arrives here first
        if (data.session_id) sessionIdRef.current = data.session_id;
        setOtpModalOpen(true);
        dispatch(
          setTaskStatus({
            key: "eligibilityCheck",
            status: "pending",
            message: "OTP required for Delta Dental MA. Please enter the code.",
          })
        );
      };

      // Handler: OTP accepted by Python agent (optional UX feedback)
      const onOtpSubmitted = (data: any) => {
        if (data?.session_id && data.session_id !== sessionIdRef.current) return;
        dispatch(
          setTaskStatus({
            key: "eligibilityCheck",
            status: "pending",
            message: "OTP submitted. Finishing DDMA eligibility check…",
          })
        );
      };

      // Handler: job completed or failed (from InProcessQueue)
      const onJobUpdate = (data: any) => {
        if (String(data?.jobId) !== String(jobId)) return;

        if (data.status === "active") {
          dispatch(
            setTaskStatus({
              key: "eligibilityCheck",
              status: "pending",
              message: data.message ?? "Selenium browser starting…",
            })
          );
          return;
        }

        // Terminal states
        cleanup();

        if (data.status === "completed") {
          dispatch(
            setTaskStatus({
              key: "eligibilityCheck",
              status: "success",
              message: "DDMA eligibility updated and PDF attached to patient documents.",
            })
          );
          toast({
            title: "DDMA eligibility complete",
            description: "Patient status was updated and the eligibility PDF was saved.",
          });

          queryClient.invalidateQueries({ queryKey: QK_PATIENTS_BASE });

          const pdfId = data.result?.pdfFileId;
          if (pdfId) {
            const filename =
              data.result?.pdfFilename ?? `eligibility_ddma_${memberId}.pdf`;
            onPdfReady(Number(pdfId), filename);
          }
        } else if (data.status === "failed") {
          const msg = data.error ?? "DDMA eligibility job failed.";
          dispatch(
            setTaskStatus({ key: "eligibilityCheck", status: "error", message: msg })
          );
          toast({ title: "DDMA selenium error", description: msg, variant: "destructive" });
        }

        setIsStarting(false);
        setOtpModalOpen(false);
      };

      // Attach listeners
      socket.on("selenium:ddma_session_started", onSessionStarted);
      socket.on("selenium:otp_required", onOtpRequired);
      socket.on("selenium:otp_submitted", onOtpSubmitted);
      socket.on("job:update", onJobUpdate);

      // Cleanup helper removes all listeners for this job
      function cleanup() {
        socket.off("selenium:ddma_session_started", onSessionStarted);
        socket.off("selenium:otp_required", onOtpRequired);
        socket.off("selenium:otp_submitted", onOtpSubmitted);
        socket.off("job:update", onJobUpdate);
      }

      // Safety timeout — clean up listeners if no terminal event in 6 min
      const safetyTimer = setTimeout(() => {
        cleanup();
        setIsStarting(false);
        setOtpModalOpen(false);
        dispatch(
          setTaskStatus({
            key: "eligibilityCheck",
            status: "error",
            message: "DDMA job timed out waiting for completion.",
          })
        );
      }, 6 * 60 * 1000);

      // Patch cleanup to also clear the timer
      const originalCleanup = cleanup;
      function cleanupWithTimer() {
        clearTimeout(safetyTimer);
        originalCleanup();
      }
      // Override the onJobUpdate cleanup reference
      socket.off("job:update", onJobUpdate);
      socket.on("job:update", (data: any) => {
        if (String(data?.jobId) !== String(jobId)) return;
        if (data.status === "active") {
          dispatch(
            setTaskStatus({
              key: "eligibilityCheck",
              status: "pending",
              message: data.message ?? "Selenium browser starting…",
            })
          );
          return;
        }
        cleanupWithTimer();
        if (data.status === "completed") {
          dispatch(
            setTaskStatus({
              key: "eligibilityCheck",
              status: "success",
              message: "DDMA eligibility updated and PDF attached to patient documents.",
            })
          );
          toast({
            title: "DDMA eligibility complete",
            description: "Patient status was updated and the eligibility PDF was saved.",
          });
          queryClient.invalidateQueries({ queryKey: QK_PATIENTS_BASE });
          const pdfId = data.result?.pdfFileId;
          if (pdfId) {
            onPdfReady(Number(pdfId), data.result?.pdfFilename ?? `eligibility_ddma_${memberId}.pdf`);
          }
        } else if (data.status === "failed") {
          const msg = data.error ?? "DDMA eligibility job failed.";
          dispatch(setTaskStatus({ key: "eligibilityCheck", status: "error", message: msg }));
          toast({ title: "DDMA selenium error", description: msg, variant: "destructive" });
        }
        setIsStarting(false);
        setOtpModalOpen(false);
      });

    } catch (err: any) {
      console.error("DdmaEligibilityButton error:", err);
      dispatch(
        setTaskStatus({
          key: "eligibilityCheck",
          status: "error",
          message: err?.message || "Failed to start DDMA eligibility",
        })
      );
      toast({
        title: "DDMA selenium error",
        description: err?.message || "Failed to start DDMA eligibility",
        variant: "destructive",
      });
      setIsStarting(false);
    }
  };

  // ── OTP submission ────────────────────────────────────────────────────────

  const handleSubmitOtp = async (otp: string) => {
    const sessionId = sessionIdRef.current;
    if (!sessionId) {
      toast({
        title: "Session not ready",
        description: "Cannot submit OTP — DDMA session ID is not available yet.",
        variant: "destructive",
      });
      return;
    }

    try {
      setIsSubmittingOtp(true);
      const resp = await apiRequest("POST", "/api/insurance-status-ddma/selenium/submit-otp", {
        session_id: sessionId,
        otp,
        socketId: socket.id,
      });
      const data = await resp.json();
      if (!resp.ok || data.error) {
        throw new Error(data.error || "Failed to submit OTP");
      }
      setOtpModalOpen(false);
    } catch (err: any) {
      console.error("handleSubmitOtp error:", err);
      toast({
        title: "Failed to submit OTP",
        description: err?.message || "Error forwarding OTP to selenium agent",
        variant: "destructive",
      });
    } finally {
      setIsSubmittingOtp(false);
    }
  };

  useEffect(() => {
    if (!autoTrigger || autoTriggeredRef.current || isFormIncomplete) return;
    autoTriggeredRef.current = true;
    onAutoTriggered?.();
    handleDdmaStart();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [autoTrigger, isFormIncomplete]);

  // ── Render ────────────────────────────────────────────────────────────────

  return (
    <>
      <Button
        className="w-full"
        variant="default"
        disabled={isFormIncomplete || isStarting}
        onClick={handleDdmaStart}
      >
        {isStarting ? (
          <>
            <LoaderCircleIcon className="h-4 w-4 mr-2 animate-spin" />
            Processing...
          </>
        ) : (
          <>
            <CheckCircle className="h-4 w-4 mr-2" />
            Delta MA
          </>
        )}
      </Button>

      <DdmaOtpModal
        open={otpModalOpen}
        onClose={() => setOtpModalOpen(false)}
        onSubmit={handleSubmitOtp}
        isSubmitting={isSubmittingOtp}
      />
    </>
  );
}