import { useEffect, useState } from "react";
import { Button } from "../ui/button.tsx";
import { useAuthServiceContext } from "../../services";
import { useOrganizationOwnerService } from "../../services/OrganizationOwnerService.tsx";
import { referencesPractitioner } from "../OrganizationOwnerNotice/ownerReference";
import { requestSupportTicket, type SupportTicketOutcome } from "./supportTicketRequest.ts";

/**
 * Only the current practice owner can open help for a held invitation.
 * The reference carries no inbox, link or code; opening help sends nothing and leaves the invitation held.
 */
export const HeldInvitationHelp = ({ reference, opening }: { reference: string; opening: string }) => {
  const { currentUser, currentOrganization } = useAuthServiceContext();
  const { fetchOwner } = useOrganizationOwnerService();
  const viewer = currentUser?.fhir?.resourceType === "Practitioner" ? currentUser.fhir.id : undefined;
  const organizationId = currentOrganization?.id;
  const [owner, setOwner] = useState<{ key: string; isOwner: boolean } | undefined>();
  const [opened, setOpened] = useState<{ key: string; outcome: SupportTicketOutcome | "no-widget" | "waiting" } | undefined>();
  // Whatever is read or pressed belongs to this viewer, practice and reference; a stale answer is never shown.
  const key = `${viewer ?? ""}|${organizationId ?? ""}|${reference}|${opening}`;

  useEffect(() => {
    if (!viewer || !organizationId) return;
    let live = true;
    fetchOwner(organizationId)
      .then((state) => live && setOwner({ key, isOwner: state.status === "accepted" && referencesPractitioner(state.ownerPractitionerId, viewer) }))
      .catch(() => live && setOwner({ key, isOwner: false }));
    return () => {
      live = false;
    };
  }, [key, viewer, organizationId, fetchOwner]);

  const isOwner = owner?.key === key ? owner.isOwner : undefined;
  const pressed = opened?.key === key ? opened : undefined;

  return (
    <div className="mt-2 text-sm text-ink-muted" data-testid="held-invitation-help">
      <p>
        Reference for support: <span className="font-medium text-ink-strong">{reference}</span>
      </p>
      {isOwner === true && viewer && organizationId && (
        <Button
          type="button"
          variant="outline"
          size="sm"
          className="mt-2"
          onClick={() => {
            // Told only what the panel actually did, and only while this is still the same viewer, practice and reference.
            const pressedFor = key;
            setOpened({ key: pressedFor, outcome: "waiting" });
            const taken = requestSupportTicket({ reference, viewer, organizationId, opening }, (outcome) =>
              setOpened((current) => (current?.key === pressedFor ? { key: pressedFor, outcome } : current)));
            if (!taken) setOpened({ key: pressedFor, outcome: "no-widget" });
          }}
        >
          Request help
        </Button>
      )}
      {isOwner === false && <p className="mt-1">Your practice owner can ask us for help with this.</p>}
      {pressed?.outcome === "filled" && (
        <p className="mt-1">The help panel is open with this reference filled in. Nothing is sent until you send it there.</p>
      )}
      {pressed?.outcome === "existing-draft" && (
        <p className="mt-1">A ticket you started is already open in the help panel, so it was left as it was. Quote this reference in it.</p>
      )}
      {pressed?.outcome === "refused" && (
        <p className="mt-1">The help panel cannot open during a call. Afterwards, open the assistant, choose to submit a ticket, and quote this reference.</p>
      )}
      {pressed?.outcome === "no-widget" && (
        <p className="mt-1">Open the assistant, choose to submit a ticket, and quote this reference.</p>
      )}
    </div>
  );
};