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";
function DdmaOtpModal({ open, onClose, onSubmit, isSubmitting }) {
    const [otp, setOtp] = useState("");
    useEffect(() => {
        if (!open)
            setOtp("");
    }, [open]);
    if (!open)
        return null;
    const handleSubmit = async (e) => {
        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>);
}
export function DdmaEligibilityButton({ memberId, dateOfBirth, firstName, lastName, isFormIncomplete, autoTrigger, onAutoTriggered, onPdfReady, }) {
    const { toast } = useToast();
    const dispatch = useAppDispatch();
    const sessionIdRef = useRef(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 = 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) => {
                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) => {
                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) => {
                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) => {
                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) => {
                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) {
            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) => {
        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) {
            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 = false;
            return;
        }
        if (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}/>
    </>);
}