import { useEffect, useRef, useState } from "react";
import { Inbox } from "lucide-react";
import { useHttpService } from "../../../services/HttpService.tsx";
import { environment } from "../../../environments/environment.ts";
import { relayServerFailure } from "../../../utils/fetchFailureMessage";
import { Alert, AlertDescription } from "../../../components/ui/alert.tsx";

type Pending = { sender?: string; sentAt: string; expiresAt: string };

/** A failed read is tried again this often, this many times, while its error is shown. */
export const PENDING_RETRY_MS = 10_000;
export const PENDING_RETRIES = 3;

// Referrals another practice sent to this one before it joined. Who sent them and when is all the
// server gives: the patient and reason arrive with the claim code, which the sender hands over.
// Read again whenever `refreshKey` moves, since a claim takes a referral off this list. Only the newest
// read for this practice (`scope`) may change what is shown, and nothing is read or retried once it is gone.
const PendingBeforeJoining = ({ refreshKey = 0, scope }: { refreshKey?: number; scope?: string }) => {
  const { get } = useHttpService();
  const [pending, setPending] = useState<Pending[]>([]);
  const [error, setError] = useState<string>();
  const latest = useRef(0);
  const shownFor = useRef(scope);

  useEffect(() => {
    if (shownFor.current !== scope) {
      shownFor.current = scope;
      setPending([]);
      setError(undefined);
    }
    const ticket = ++latest.current;
    let retry: ReturnType<typeof setTimeout> | undefined;
    const read = (failures: number) => {
      get<{ pending?: Pending[] }>(`${environment.fhirBaseApi}/referral-pending-for-us`)
        .then((response) => {
          if (ticket !== latest.current) return;
          setPending(response?.pending ?? []);
          setError(undefined);
        })
        .catch((err) => {
          if (ticket !== latest.current) return;
          setError(relayServerFailure(err, "Could not check for referrals sent before you joined."));
          if (failures < PENDING_RETRIES) {
            retry = setTimeout(() => { if (ticket === latest.current) read(failures + 1); }, PENDING_RETRY_MS);
          }
        });
    };
    read(0);
    return () => {
      latest.current += 1;
      clearTimeout(retry);
    };
  }, [get, refreshKey, scope]);

  if (error) {
    return (
      <Alert variant="destructive">
        <AlertDescription>{error}</AlertDescription>
      </Alert>
    );
  }
  if (pending.length === 0) return null;

  return (
    <Alert>
      <Inbox className="h-4 w-4" aria-hidden="true" />
      <AlertDescription>
        <p>
          {pending.length === 1 ? "A referral was" : `${pending.length} referrals were`} sent to your practice
          before you joined Akashic.
        </p>
        <ul className="mt-1 list-disc pl-5">
          {pending.map((p) => (
            <li key={`${p.sender}-${p.sentAt}`}>
              From {p.sender ?? "a practice on Akashic"}, sent {new Date(p.sentAt).toLocaleDateString()}
            </li>
          ))}
        </ul>
        <p className="mt-1">Ask them for the claim code, then choose Enter a claim code.</p>
      </AlertDescription>
    </Alert>
  );
};

export default PendingBeforeJoining;