DentalManagementMH05/apps/Frontend/src/components/insurance-status/united-sco-button-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 UnitedSCOOtpModalProps {
  open: boolean;
  onClose: () => void;
  onSubmit: (otp: string) => Promise<void> | void;
  isSubmitting: boolean;
}

function UnitedSCOOtpModal({ open, onClose, onSubmit, isSubmitting }: UnitedSCOOtpModalProps) {
  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 verification code sent to your phone or email to complete this check.
        </p>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="united-sco-otp">Verification Code</Label>
            <Input
              id="united-sco-otp"
              placeholder="Enter verification 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 Code"
              )}
            </Button>
          </div>
        </form>
      </div>
    </div>
  );
}

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

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

export function UnitedSCOEligibilityButton({
  memberId,
  dateOfBirth,
  firstName,
  lastName,
  isFormIncomplete,
  onPdfReady,
}: UnitedSCOEligibilityButtonProps) {
  const { toast } = useToast();
  const dispatch = useAppDispatch();

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

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

  const handleStart = 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: "UNITED_SCO",
    };

    setIsStarting(true);

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

      const response = await apiRequest(
        "POST",
        "/api/insurance-status-unitedsco/unitedsco-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: "United SCO job queued. Waiting for browser session…",
        })
      );

      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 verification code or result…",
          })
        );
      };

      const onOtpRequired = (data: any) => {
        if (String(data?.jobId) !== String(jobId)) return;
        if (data.session_id) sessionIdRef.current = data.session_id;
        setOtpModalOpen(true);
        dispatch(
          setTaskStatus({
            key: "eligibilityCheck",
            status: "pending",
            message: "Verification code required. Please enter the code.",
          })
        );
      };

      const onOtpSubmitted = (data: any) => {
        if (data?.session_id && data.session_id !== sessionIdRef.current) return;
        dispatch(
          setTaskStatus({
            key: "eligibilityCheck",
            status: "pending",
            message: "Code submitted. Finishing eligibility check…",
          })
        );
      };

      socket.on("selenium:unitedsco_session_started", onSessionStarted);
      socket.on("selenium:otp_required", onOtpRequired);
      socket.on("selenium:otp_submitted", onOtpSubmitted);

      function cleanup() {
        clearTimeout(safetyTimer);
        socket.off("selenium:unitedsco_session_started", onSessionStarted);
        socket.off("selenium:otp_required", onOtpRequired);
        socket.off("selenium:otp_submitted", onOtpSubmitted);
        socket.off("job:update", onJobUpdate);
      }

      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;
        }

        cleanup();

        if (data.status === "completed") {
          dispatch(
            setTaskStatus({
              key: "eligibilityCheck",
              status: "success",
              message: "United SCO eligibility updated and PDF attached to patient documents.",
            })
          );
          toast({
            title: "United SCO 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_unitedsco_${memberId}.pdf`);
          }
        } else if (data.status === "failed") {
          const msg = data.error ?? "United SCO eligibility job failed.";
          dispatch(setTaskStatus({ key: "eligibilityCheck", status: "error", message: msg }));
          toast({ title: "United SCO selenium error", description: msg, variant: "destructive" });
        }

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

      socket.on("job:update", onJobUpdate);

      const safetyTimer = setTimeout(() => {
        cleanup();
        setIsStarting(false);
        setOtpModalOpen(false);
        dispatch(
          setTaskStatus({
            key: "eligibilityCheck",
            status: "error",
            message: "United SCO job timed out waiting for completion.",
          })
        );
      }, 6 * 60 * 1000);

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

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

    try {
      setIsSubmittingOtp(true);
      const resp = await apiRequest("POST", "/api/insurance-status-unitedsco/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 code");
      }
      setOtpModalOpen(false);
    } catch (err: any) {
      console.error("handleSubmitOtp error:", err);
      toast({
        title: "Failed to submit code",
        description: err?.message || "Error forwarding code to selenium agent",
        variant: "destructive",
      });
    } finally {
      setIsSubmittingOtp(false);
    }
  };

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

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