import { useEffect, useRef, useState } from "react";
import { AlertCircle, FlaskConical, Loader2 } from "lucide-react";
import { Alert, AlertDescription } from "../../../components/ui/alert.tsx";
import { Button } from "../../../components/ui/button.tsx";
import { EmptyState } from "../../../components/ui/empty-state.tsx";
import { useStaffPermissionServiceContext } from "../../../services";
import { newOperationId, offers, useHeldLabResults, type HeldLabResult } from "../../../hooks/useHeldLabResults.ts";
import type { ListOwner } from "../../../hooks/useListOwner.ts";
import { relayServerFailure } from "../../../utils/fetchFailureMessage";
import { formatDateTime } from "../../../utils/dateUtils";
import { heldReasonWords, labStatusWords, orderReadWords } from "./heldLabResultWords.ts";
import MatchHeldResultDialog from "./MatchHeldResultDialog.tsx";
import SetAsideHeldResultDialog from "./SetAsideHeldResultDialog.tsx";
import "./HeldLabResultsPage.css";

// Lab results that came back and could not be matched to an order on their own, each shown as the laboratory sent it:
// what test, its own status and time, who it is about, and why it waits. Never its values, which belong to the order
// it is matched to and reach a patient only when released. Seeing the list needs `view`; matching or setting aside
// needs `manage`, the split the API makes.

const HeldLabResultsPage = () => {
  const { canManage } = useStaffPermissionServiceContext();
  const mayAct = canManage("diagnostics");
  const { items, loading, error, more, reload, loadMore, candidates, resolve, dismiss, readAgain, owner, authority, opening, live } = useHeldLabResults();
  const [matching, setMatching] = useState<HeldLabResult>();
  const [settingAside, setSettingAside] = useState<HeldLabResult>();
  // Read again, per item and per opening: one operation kept across a retry of the same ask, what is in flight, and
  // what was answered. A request the server names as unconfirmed is retried under its own operation after a reload.
  const operations = useRef(new WeakMap<ListOwner, Map<string, string>>());
  const operationsOf = (of: ListOwner) => {
    let held = operations.current.get(of);
    if (!held) operations.current.set(of, (held = new Map()));
    return held;
  };
  const [asking, setAsking] = useState<Set<string>>(new Set());
  const [answers, setAnswers] = useState<Record<string, { failed: boolean; words: string }>>({});
  // Another viewer, practice or authority: nothing asked or answered under the last one is shown.
  useEffect(() => {
    setAsking(new Set());
    setAnswers({});
  }, [owner, authority]);

  const askAgain = async (item: HeldLabResult) => {
    if (asking.has(item.id)) return;
    // Owned by this setup, viewer and authority: answered, failed or finished only while all three still stand.
    const of = opening();
    const here = () => live(of);
    const held = operationsOf(of.owner);
    const operationId = item.pendingRead?.operationId ?? held.get(item.id) ?? newOperationId();
    held.set(item.id, operationId);
    setAsking((now) => new Set(now).add(item.id));
    try {
      const answer = await readAgain(item.id, operationId, of);
      // Only an unconfirmed ask keeps its operation, so its retry is recognised, not repeated.
      if (answer?.queued !== "unknown") held.delete(item.id);
      if (!here()) return;
      setAnswers((now) => ({ ...now, [item.id]: { failed: answer?.queued === "unknown", words: answer?.message ?? "Asked to be read again." } }));
    } catch (failure) {
      if (!here()) return;
      setAnswers((now) => ({ ...now, [item.id]: { failed: true, words: relayServerFailure(failure, "We could not confirm the request was sent. Try again.") } }));
    } finally {
      if (here()) setAsking((now) => { const next = new Set(now); next.delete(item.id); return next; });
    }
  };

  // An open match or set-aside closes as soon as `manage` is taken away; the hook refuses at send as well.
  useEffect(() => {
    if (mayAct) return;
    setMatching(undefined);
    setSettingAside(undefined);
  }, [mayAct]);

  return (
    <div className="held-lab-results">
      <header className="held-lab-results-header">
        <h1 className="ak-page-title">Laboratory results to match</h1>
        <p>
          These came back from a laboratory this practice orders from electronically, and could not be matched to an
          order on their own. Match each to the order it answers, or set it aside.
        </p>
      </header>

      {error ? (
        <Alert variant="destructive">
          <AlertCircle className="size-4" />
          <AlertDescription>
            {error} <Button variant="link" onClick={() => void reload()}>Try again</Button>
          </AlertDescription>
        </Alert>
      ) : null}

      {loading && items.length === 0 ? (
        <p className="held-lab-results-loading"><Loader2 className="size-4 animate-spin" aria-hidden /> Loading…</p>
      ) : !error && items.length === 0 ? (
        <EmptyState icon={FlaskConical} title="No laboratory results are waiting to be matched" />
      ) : (
        <ul className="held-lab-results-list" aria-label="Laboratory results waiting to be matched">
          {items.map((item) => (
            <li key={item.id} className="held-lab-result-row">
              {item.kind === "order-read" ? (
                <div className="held-lab-result-summary">
                  <p className="held-lab-result-test">Results for an order could not be searched for</p>
                  <p className="held-lab-result-reason">{orderReadWords(item.reason)}</p>
                  <p className="held-lab-result-received">Since {formatDateTime(item.receivedAt)}</p>
                </div>
              ) : (
              <div className="held-lab-result-summary">
                <p className="held-lab-result-test">{item.report?.code ?? (item.unreadable ? "Could not be read back as received" : "Not named")}</p>
                {item.unreadable ? (
                  <p className="held-lab-result-note">What the laboratory sent is kept but could not be read back as received, so it is not shown.</p>
                ) : (
                  <p className="held-lab-result-meta">
                    {[labStatusWords(item.report?.status), item.report?.issued ? `issued ${formatDateTime(item.report.issued)}` : undefined,
                      item.report?.subject?.display ? `at the laboratory: ${item.report.subject.display}` : undefined]
                      .filter(Boolean).join(" · ")}
                  </p>
                )}
                <p className="held-lab-result-reason">{heldReasonWords(item.heldReason)}</p>
                <p className="held-lab-result-received">Received {formatDateTime(item.receivedAt)}</p>
                {item.readAgain === "queued" ? <p className="held-lab-result-note">Asked to be read again. It stays here until the laboratory answers.</p> : null}
              </div>
              )}
              {answers[item.id] ? (
                <p className={answers[item.id].failed ? "held-lab-result-note held-lab-result-warning" : "held-lab-result-note"} role="status">{answers[item.id].words}</p>
              ) : null}
              {mayAct ? (
                <div className="held-lab-result-actions">
                  {offers(item, "resolve") ? <Button onClick={() => setMatching(item)} disabled={item.unreadable}>Match to an order</Button> : null}
                  {offers(item, "read-again") ? (
                    <Button variant="outline" onClick={() => void askAgain(item)} disabled={asking.has(item.id)}>
                      {asking.has(item.id) ? <Loader2 className="size-4 animate-spin" aria-hidden /> : null}
                      Read again
                    </Button>
                  ) : null}
                  {offers(item, "dismiss") ? <Button variant="outline" onClick={() => setSettingAside(item)}>Set aside</Button> : null}
                </div>
              ) : null}
            </li>
          ))}
        </ul>
      )}

      {more ? (
        <Button variant="outline" onClick={() => void loadMore()} disabled={loading}>
          {loading ? <Loader2 className="size-4 animate-spin" aria-hidden /> : null}
          Show more
        </Button>
      ) : null}

      <MatchHeldResultDialog
        item={matching}
        onClose={() => setMatching(undefined)}
        onDone={() => setMatching(undefined)}
        candidates={candidates}
        resolve={resolve}
      />
      <SetAsideHeldResultDialog
        item={settingAside}
        onClose={() => setSettingAside(undefined)}
        onDone={() => setSettingAside(undefined)}
        dismiss={dismiss}
      />
    </div>
  );
};

export default HeldLabResultsPage;