import { useState } from "react";
import { useNavigate } from "react-router-dom";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "../ui/dialog.tsx";
import { DismissibleAlert } from "../ui/dismissible-alert";
import { initialsOf } from "../ui/org-badge.tsx";
import { PortalDepartureCard } from "../PortalDeparture/PortalDepartureCard";
import { TaskStatusRow } from "./TaskStatusRow";
import { useMyOrganizations } from "../../hooks/useMyOrganizations";
import { getPatientPortalUrl } from "../../utils/patientPortalUrl";
import { relayServerFailure } from "../../utils/fetchFailureMessage";
import {
  patientMayMarkBooked,
  referralDay,
  type PatientReferral,
} from "../../utils/patientReferrals";
import "./TaskDialog.css";

const INVITE_PATH = "/dashboard/collaboration-teams";

/** The collaboration invite, with the recipient's NPI ready to look up when the order carries one. */
export const referralInvitePath = (referral: PatientReferral): string =>
  referral.recipientNpi ? `${INVITE_PATH}?invite=${encodeURIComponent(referral.recipientNpi)}` : INVITE_PATH;

/**
 * A referral the patient has to book, drawn as the deck's referral card
 * (`mockups/patient-portal/packets-checklists-and-referrals.html`, the three referral frames and the
 * one where the recipient is still being chosen). Its actions live here, not on the list row.
 */
export interface PatientReferralDialogProps {
  referral: PatientReferral | undefined;
  onClose: () => void;
  onMarkBooked: (referralId: string) => Promise<void>;
  onDeclineInvite: (referralId: string) => Promise<void>;
}

const statusOf = (referral: PatientReferral): { label: string; tone: "open" | "done" } => {
  if (referral.stage === "booked") return { label: "Booked", tone: "done" };
  if (referral.stage === "choosing") return { label: "Being arranged", tone: "open" };
  return { label: "To book", tone: "open" };
};

const headlineOf = (referral: PatientReferral): string | undefined => {
  if (referral.bookedByPatientAt) return `You marked this booked, ${referralDay(referral.bookedByPatientAt)}`;
  if (referral.stage === "booked") return "Booked";

  const day = referralDay(referral.authoredOn);
  const lead = referral.stage === "choosing" ? "From" : "Referred by";
  if (referral.referredBy) return day ? `${lead} ${referral.referredBy}, ${day}` : `${lead} ${referral.referredBy}`;
  return day ? `Referred ${day}` : undefined;
};

const noteOf = (referral: PatientReferral): string | undefined => {
  if (referral.stage !== "book") return undefined;
  if (referral.onAkashic) return "Book through Akashic. This item is marked complete when you book.";
  const how = referral.phone ? "Call" : "Contact";
  return `${how} ${referral.practice} to book, then mark this item complete. Their schedule is not available in Akashic.`;
};

const reasonLine = (reason: string): string =>
  `Referred for ${reason.charAt(0).toLowerCase()}${reason.slice(1).replace(/\.$/, "")}.`;

const telHref = (phone: string): string => `tel:${phone.replace(/[^\d+]/g, "")}`;

/** The practice's own portal, when it is one of the patient's practices and publishes one. */
const TheirPortal = ({ organizationId }: { organizationId: string }) => {
  const { organizations } = useMyOrganizations();
  const portalUrl = getPatientPortalUrl(organizations.find((organization) => organization.id === organizationId));

  return portalUrl ? <PortalDepartureCard portalUrl={portalUrl} /> : null;
};

export const PatientReferralDialog = ({ referral, onClose, onMarkBooked, onDeclineInvite }: PatientReferralDialogProps) => {
  const navigate = useNavigate();
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string>();

  if (!referral) return null;

  const status = statusOf(referral);
  // Until a recipient is named, the mark is the referring practice's, the last part of "Dr. Ellis, Great River".
  const markName = referral.practice ?? referral.referredBy?.split(", ").pop() ?? referral.title;
  const note = noteOf(referral);
  const invitee = referral.practitioner ?? referral.practice;
  const showInvite = referral.stage === "booked" && !referral.onAkashic && Boolean(invitee) && !referral.inviteDeclinedAt;

  const close = () => {
    if (busy) return;
    setError(undefined);
    onClose();
  };

  const markBooked = async () => {
    setBusy(true);
    setError(undefined);
    try {
      await onMarkBooked(referral.id);
    } catch (failure: unknown) {
      setError(relayServerFailure(failure, "That could not be saved. Please try again."));
    } finally {
      setBusy(false);
    }
  };

  const notNow = async () => {
    setBusy(true);
    setError(undefined);
    try {
      await onDeclineInvite(referral.id);
      onClose();
    } catch (failure: unknown) {
      setError(relayServerFailure(failure, "That could not be saved. Please try again."));
    } finally {
      setBusy(false);
    }
  };

  return (
    <Dialog open onOpenChange={(next) => { if (!next) close(); }}>
      <DialogContent showCloseButton={false} className="ahr-referral-dialog max-h-[85vh] overflow-y-auto pt-4">
        <DialogHeader className="sr-only">
          <DialogTitle>Your referral</DialogTitle>
          <DialogDescription>A referral from your practice.</DialogDescription>
        </DialogHeader>

        <div className="space-y-4 py-2" data-testid="patient-referral">
          <TaskStatusRow label={status.label} tone={status.tone} onClose={close} />
          <h2 className="ahr-task-title ak-overlay__title">{referral.title}</h2>

          <div className="ahr-referral-card ak-card ak-card--panel">
            <div className="ahr-referral-head">
              <span aria-hidden="true" className="ak-org-mark">
                {initialsOf(markName)}
              </span>
              <span className="ahr-referral-name">
                <b>{referral.practice ?? referral.title}</b>
                {headlineOf(referral) && <span>{headlineOf(referral)}</span>}
              </span>
            </div>

            {referral.practitioner && (
              <div className="ahr-referral-person">
                <b>{referral.practitioner}</b>
              </div>
            )}

            {referral.address && (
              <div className="ahr-referral-meta" data-testid="referral-where">
                <span className="ahr-referral-label">Where</span>
                <span>{referral.address}</span>
              </div>
            )}

            {referral.phone && (
              <div className="ahr-referral-meta" data-testid="referral-phone">
                <span className="ahr-referral-label">Phone</span>
                <a className="ahr-referral-tel" href={telHref(referral.phone)}>{referral.phone}</a>
              </div>
            )}

            {referral.stage === "choosing" && (
              <div className="ahr-referral-pending">
                <b>Your practice is finding you a specialist</b>
                <span>We&apos;ll notify you when your practice has chosen one, with details for booking.</span>
              </div>
            )}

            {note && <p className="ahr-referral-note">{note}</p>}

            {referral.reason && referral.stage !== "booked" && (
              <p className="ahr-referral-note ahr-referral-note--quiet">{reasonLine(referral.reason)}</p>
            )}

            {showInvite && (
              <div data-testid="referral-invite">
                <p className="ahr-referral-note">
                  <b>Would you like {invitee} to see your record?</b> They are not on Akashic. You can
                  invite them &mdash; they get their own free account, not one inside your practice, and
                  they see only what you share.
                </p>
                <div className="ahr-referral-invite">
                  <span className="ahr-referral-label">If you invite them they can</span>
                  <ul>
                    <li>Read the record you share with them</li>
                    <li>Message you directly</li>
                    <li>Join the care team around you</li>
                  </ul>
                </div>
                <p className="ahr-referral-note ahr-referral-note--quiet">
                  Only you can do this, and you can take it back at any time. Nobody is added to your
                  record without you.
                </p>
              </div>
            )}

            {error && (
              <DismissibleAlert status="error" onDismiss={() => setError(undefined)}>
                {error}
              </DismissibleAlert>
            )}

            {referral.stage === "book" && referral.onAkashic && referral.practiceOrganizationId && (
              <TheirPortal organizationId={referral.practiceOrganizationId} />
            )}

            {patientMayMarkBooked(referral) && (
              <div className="ahr-referral-actions">
                {referral.phone && (
                  <a className="btn btn-blue" href={telHref(referral.phone)}>Call them</a>
                )}
                <button
                  type="button"
                  className={`btn btn-green-ghost${busy ? " btn-busy" : ""}`}
                  onClick={() => { void markBooked(); }}
                  disabled={busy}
                >
                  I have booked it
                </button>
              </div>
            )}

            {showInvite && (
              <div className="ahr-referral-actions">
                <button type="button" className="btn btn-blue" onClick={() => navigate(referralInvitePath(referral))} disabled={busy}>
                  Invite {invitee}
                </button>
                <button
                  type="button"
                  className={`btn btn-blue-ghost${busy ? " btn-busy" : ""}`}
                  onClick={() => { void notNow(); }}
                  disabled={busy}
                >
                  Not now
                </button>
              </div>
            )}
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
};

export default PatientReferralDialog;