import { useState, useRef, useEffect } from "react";
import {
  Bot,
  X,
  ChevronRight,
  Stethoscope,
  Calendar,
  FileText,
  MessageSquare,
  Send,
  Loader2,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { useLocation } from "wouter";
import { cn } from "@/lib/utils";
import { apiRequest } from "@/lib/queryClient";

type Step =
  | "menu"
  | "eligibility-input"
  | "eligibility-confirm"
  | "ai-loading"
  | "patient-found";

interface Message {
  id: number;
  role: "bot" | "user";
  text: string;
  isLoading?: boolean;
}

interface PatientResult {
  id: number;
  firstName: string;
  lastName: string;
  insuranceId: string | null;
  insuranceProvider: string | null;
  dateOfBirth: string | null;
}

interface EligibilityData {
  memberId: string;
  dob: string;
  dobISO: string;
}

let msgCounter = 0;
function makeMsg(role: "bot" | "user", text: string, isLoading = false): Message {
  return { id: ++msgCounter, role, text, isLoading };
}

function getAutoCheck(dobISO: string): "mh" | "cmsp" {
  const [y, m, d] = dobISO.split("-").map(Number);
  const today = new Date();
  let age = today.getFullYear() - (y ?? 0);
  const monthDiff = today.getMonth() + 1 - (m ?? 0);
  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < (d ?? 0))) age--;
  return age >= 21 ? "mh" : "cmsp";
}

function parseEligibilityInput(
  raw: string
): { memberId: string; display: string; iso: string } | null {
  const dateMatch = raw.match(/\b(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})\b/);
  if (!dateMatch) return null;
  const m = dateMatch[1];
  const d = dateMatch[2];
  const y = dateMatch[3];
  if (!m || !d || !y) return null;
  const month = parseInt(m, 10);
  const day = parseInt(d, 10);
  const year = parseInt(y, 10);
  if (month < 1 || month > 12 || day < 1 || day > 31 || year < 1900) return null;

  const withoutDate = raw.replace(dateMatch[0], "");
  const memberId = (withoutDate.match(/[a-zA-Z0-9]/g) ?? []).join("");
  if (!memberId) return null;

  return {
    memberId,
    display: `${m.padStart(2, "0")}/${d.padStart(2, "0")}/${y}`,
    iso: `${y}-${m.padStart(2, "0")}-${d.padStart(2, "0")}`,
  };
}

const INITIAL_MESSAGES: Message[] = [
  makeMsg("bot", "Hi! What can I help you with today?"),
];

export function ChatbotButton() {
  const [open, setOpen] = useState(false);
  const [step, setStep] = useState<Step>("menu");
  const [messages, setMessages] = useState<Message[]>(INITIAL_MESSAGES);
  const [pasteInput, setPasteInput] = useState("");
  const [parseError, setParseError] = useState("");
  const [eligibilityData, setEligibilityData] = useState<EligibilityData | null>(null);
  const [freeTextInput, setFreeTextInput] = useState("");
  const [patientResult, setPatientResult] = useState<PatientResult | null>(null);
  const [, setLocation] = useLocation();
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const pasteRef = useRef<HTMLTextAreaElement>(null);
  const freeTextRef = useRef<HTMLTextAreaElement>(null);

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages, step]);

  useEffect(() => {
    if (step === "eligibility-input") {
      setTimeout(() => pasteRef.current?.focus(), 50);
    }
    if (step === "menu") {
      setTimeout(() => freeTextRef.current?.focus(), 50);
    }
  }, [step]);

  const addMsg = (role: "bot" | "user", text: string, isLoading = false) =>
    setMessages((prev) => [...prev, makeMsg(role, text, isLoading)]);

  const replaceLastMsg = (text: string) =>
    setMessages((prev) => {
      const next = [...prev];
      const last = next[next.length - 1];
      if (last) next[next.length - 1] = { ...last, text, isLoading: false };
      return next;
    });

  const reset = () => {
    setStep("menu");
    setMessages([makeMsg("bot", "Hi! What can I help you with today?")]);
    setPasteInput("");
    setParseError("");
    setEligibilityData(null);
    setFreeTextInput("");
    setPatientResult(null);
  };

  const handleClose = () => {
    setOpen(false);
    reset();
  };

  const handleOptionSelect = (option: "eligibility" | "schedule" | "claims") => {
    if (option === "schedule") {
      addMsg("user", "Schedule an appointment");
      addMsg("bot", "Opening the appointments page...");
      setTimeout(() => { setLocation("/appointments"); setOpen(false); reset(); }, 600);
    } else if (option === "claims") {
      addMsg("user", "View claims");
      addMsg("bot", "Opening the claims page...");
      setTimeout(() => { setLocation("/claims"); setOpen(false); reset(); }, 600);
    } else if (option === "eligibility") {
      addMsg("user", "Check Eligibility");
      addMsg("bot", "Please enter the patient's Member ID and Date of Birth:");
      setStep("eligibility-input");
    }
  };

  const handleEligibilitySubmit = () => {
    const parsed = parseEligibilityInput(pasteInput);
    if (!parsed) {
      setParseError("Couldn't find both a Member ID and a date. Try: 123456789  01/15/1985");
      return;
    }
    setParseError("");
    const data: EligibilityData = { memberId: parsed.memberId, dob: parsed.display, dobISO: parsed.iso };
    setEligibilityData(data);
    addMsg("user", pasteInput.trim());
    addMsg("bot", `Ready to check MassHealth eligibility for:\n• Member ID: ${parsed.memberId}\n• Date of Birth: ${parsed.display}\n\nShall I proceed?`);
    setStep("eligibility-confirm");
  };

  const handleConfirm = () => {
    if (!eligibilityData) return;
    addMsg("user", "Yes, check now");
    addMsg("bot", "Opening the eligibility check page with this patient...");
    sessionStorage.setItem("chatbot_eligibility", JSON.stringify({
      memberId: eligibilityData.memberId,
      dob: eligibilityData.dobISO,
      autoCheck: getAutoCheck(eligibilityData.dobISO),
    }));
    window.dispatchEvent(new CustomEvent("chatbot:eligibility-prefill"));
    setTimeout(() => { setLocation("/insurance-status"); setOpen(false); reset(); }, 600);
  };

  const handleEligibilityFromPatient = () => {
    if (!patientResult) return;
    addMsg("user", "Check eligibility now");
    addMsg("bot", "Opening the eligibility check page...");
    if (patientResult.insuranceId && patientResult.dateOfBirth) {
      sessionStorage.setItem("chatbot_eligibility", JSON.stringify({
        memberId: patientResult.insuranceId,
        dob: patientResult.dateOfBirth,
        autoCheck: getAutoCheck(patientResult.dateOfBirth),
      }));
      window.dispatchEvent(new CustomEvent("chatbot:eligibility-prefill"));
    }
    setTimeout(() => { setLocation("/insurance-status"); setOpen(false); reset(); }, 600);
  };

  const handleFreeTextSubmit = async () => {
    const text = freeTextInput.trim();
    if (!text || step === "ai-loading") return;
    setFreeTextInput("");
    addMsg("user", text);
    addMsg("bot", "Thinking...", true);
    setStep("ai-loading");

    try {
      const res = await apiRequest("POST", "/api/ai/internal-chat", { message: text });
      const data = await res.json();

      replaceLastMsg(data.reply ?? "Sorry, I couldn't process that.");

      if (data.action === "navigate" && data.actionData?.url) {
        setTimeout(() => { setLocation(data.actionData.url); setOpen(false); reset(); }, 800);
        return;
      }

      if (
        (data.action === "check_eligibility_prefill" || data.action === "show_patient") &&
        data.actionData?.patient
      ) {
        setPatientResult(data.actionData.patient);
        setStep("patient-found");
        return;
      }

      setStep("menu");
    } catch {
      replaceLastMsg("Sorry, something went wrong. Please try again.");
      setStep("menu");
    }
  };

  const handleFreeTextKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      handleFreeTextSubmit();
    }
  };

  const showFreeTextInput = step === "menu" || step === "ai-loading";

  return (
    <>
      <Button
        variant="ghost"
        size="sm"
        className="relative h-8 w-8 rounded-full p-0"
        title="Open Assistant"
        onClick={() => setOpen(true)}
      >
        <Bot className="h-5 w-5 text-primary" />
      </Button>

      {open && (
        <>
          {/* Backdrop */}
          <div className="fixed inset-0 z-40" onClick={handleClose} aria-hidden />

          {/* Chat panel */}
          <div className="fixed top-16 right-0 z-50 w-80 h-[calc(100vh-4rem)] bg-white border-l shadow-2xl flex flex-col">
            {/* Header */}
            <div className="flex items-center justify-between px-4 py-3 bg-primary text-white shrink-0">
              <div className="flex items-center gap-2">
                <Bot className="h-4 w-4" />
                <span className="font-semibold text-sm">Assistant</span>
              </div>
              <button
                onClick={handleClose}
                className="hover:opacity-70 transition-opacity rounded"
                aria-label="Close"
              >
                <X className="h-4 w-4" />
              </button>
            </div>

            {/* Messages */}
            <div className="flex-1 overflow-y-auto p-4 space-y-3">
              {messages.map((msg) => (
                <div
                  key={msg.id}
                  className={cn("flex", msg.role === "user" ? "justify-end" : "justify-start")}
                >
                  <div
                    className={cn(
                      "max-w-[85%] rounded-2xl px-3 py-2 text-sm whitespace-pre-line leading-relaxed",
                      msg.role === "user"
                        ? "bg-primary text-white rounded-tr-sm"
                        : "bg-gray-100 text-gray-800 rounded-tl-sm"
                    )}
                  >
                    {msg.isLoading ? (
                      <span className="flex items-center gap-1.5">
                        <Loader2 className="h-3 w-3 animate-spin" />
                        Thinking...
                      </span>
                    ) : (
                      msg.text
                    )}
                  </div>
                </div>
              ))}

              {/* Quick-action buttons (menu step) */}
              {step === "menu" && (
                <div className="grid grid-cols-2 gap-2 pt-1">
                  <button
                    onClick={() => handleOptionSelect("eligibility")}
                    className="flex items-center gap-2 p-3 rounded-xl border border-primary/30 hover:bg-primary/5 text-sm text-left transition-colors"
                  >
                    <Stethoscope className="h-4 w-4 text-primary shrink-0" />
                    <span>Check Eligibility</span>
                  </button>
                  <button
                    onClick={() => handleOptionSelect("schedule")}
                    className="flex items-center gap-2 p-3 rounded-xl border border-blue-300 hover:bg-blue-50 text-sm text-left transition-colors"
                  >
                    <Calendar className="h-4 w-4 text-blue-500 shrink-0" />
                    <span>Schedule</span>
                  </button>
                  <button
                    onClick={() => handleOptionSelect("claims")}
                    className="flex items-center gap-2 p-3 rounded-xl border border-orange-300 hover:bg-orange-50 text-sm text-left transition-colors col-span-2"
                  >
                    <FileText className="h-4 w-4 text-orange-500 shrink-0" />
                    <span>Claims</span>
                  </button>
                </div>
              )}

              {/* Eligibility manual input */}
              {step === "eligibility-input" && (
                <div className="space-y-2 bg-gray-50 rounded-xl p-3 border">
                  <Label className="text-xs text-gray-600">Paste Member ID and Date of Birth</Label>
                  <textarea
                    ref={pasteRef}
                    rows={3}
                    placeholder={"e.g. 123456789  01/15/1985\nor  01/15/1985  123456789"}
                    value={pasteInput}
                    onChange={(e) => { setPasteInput(e.target.value); setParseError(""); }}
                    className={cn(
                      "w-full rounded-md border bg-white px-3 py-2 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-ring",
                      parseError && "border-red-400"
                    )}
                  />
                  {parseError && <p className="text-xs text-red-500">{parseError}</p>}
                  <div className="flex gap-2">
                    <Button
                      size="sm"
                      className="flex-1 h-8 text-xs"
                      onClick={handleEligibilitySubmit}
                      disabled={!pasteInput.trim()}
                    >
                      Continue <ChevronRight className="h-3 w-3 ml-1" />
                    </Button>
                    <Button size="sm" variant="ghost" className="h-8 text-xs" onClick={reset}>
                      Cancel
                    </Button>
                  </div>
                </div>
              )}

              {/* Eligibility confirm */}
              {step === "eligibility-confirm" && (
                <div className="flex gap-2">
                  <Button size="sm" className="flex-1 h-8 text-xs" onClick={handleConfirm}>
                    Yes, Check Now
                  </Button>
                  <Button
                    size="sm"
                    variant="outline"
                    className="h-8 text-xs"
                    onClick={() => {
                      setStep("eligibility-input");
                      setMessages((prev) => prev.slice(0, -2));
                    }}
                  >
                    Edit
                  </Button>
                </div>
              )}

              {/* AI-found patient card */}
              {step === "patient-found" && patientResult && (
                <div className="bg-blue-50 border border-blue-200 rounded-xl p-3 space-y-2">
                  <p className="text-xs font-semibold text-blue-800">
                    {patientResult.firstName} {patientResult.lastName}
                  </p>
                  {patientResult.insuranceProvider && (
                    <p className="text-xs text-blue-600">{patientResult.insuranceProvider}</p>
                  )}
                  {patientResult.insuranceId && (
                    <p className="text-xs text-gray-500">ID: {patientResult.insuranceId}</p>
                  )}
                  {patientResult.dateOfBirth && (
                    <p className="text-xs text-gray-500">DOB: {patientResult.dateOfBirth}</p>
                  )}
                  <div className="flex gap-2 pt-1">
                    {patientResult.insuranceId && (
                      <Button
                        size="sm"
                        className="flex-1 h-8 text-xs bg-primary hover:bg-primary/90"
                        onClick={handleEligibilityFromPatient}
                      >
                        <Stethoscope className="h-3 w-3 mr-1" />
                        Check Eligibility
                      </Button>
                    )}
                    <Button size="sm" variant="ghost" className="h-8 text-xs" onClick={reset}>
                      Done
                    </Button>
                  </div>
                </div>
              )}

              <div ref={messagesEndRef} />
            </div>

            {/* Persistent free-text input */}
            {showFreeTextInput && (
              <div className="shrink-0 border-t bg-white px-3 py-2">
                <div className="flex items-end gap-2">
                  <textarea
                    ref={freeTextRef}
                    rows={2}
                    placeholder='e.g. "check MARIA GONZALES" or "open claims"'
                    value={freeTextInput}
                    onChange={(e) => setFreeTextInput(e.target.value)}
                    onKeyDown={handleFreeTextKeyDown}
                    disabled={step === "ai-loading"}
                    className="flex-1 resize-none rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50"
                  />
                  <Button
                    size="sm"
                    className="h-9 w-9 p-0 shrink-0"
                    onClick={handleFreeTextSubmit}
                    disabled={!freeTextInput.trim() || step === "ai-loading"}
                  >
                    {step === "ai-loading" ? (
                      <Loader2 className="h-4 w-4 animate-spin" />
                    ) : (
                      <Send className="h-4 w-4" />
                    )}
                  </Button>
                </div>
                <p className="text-[10px] text-gray-400 mt-1 pl-1">Enter to send · Shift+Enter for new line</p>
              </div>
            )}
          </div>
        </>
      )}
    </>
  );
}