import { useState } from "react";
import { isSaveRetired } from "../../../utils/saveOperation";
import type { RegistrationList, RegistrationListEntry, RegistrationReceipt } from "../../../services/registrationReceipt";

// The desk's own registrations, completed and unfinished, from the server: the one way back to a registration whose
// answer was lost. Check asks the server what it stored; it never sends the form again.

interface RegistrationRecoveryPanelProps {
  disabled: boolean;
  load: (cursor?: string) => Promise<RegistrationList>;
  check: (registrationId: string) => Promise<RegistrationReceipt>;
  onRecovered: (receipt: RegistrationReceipt) => void;
}

const statusOf = (entry: RegistrationListEntry): string => {
  if (!entry.readable) return "Could not be read";
  if (!entry.patientId) return "Not confirmed";
  return entry.settled ? "Complete" : "Patient record exists; some steps are still open";
};

export default function RegistrationRecoveryPanel({ disabled, load, check, onRecovered }: RegistrationRecoveryPanelProps) {
  const [open, setOpen] = useState(false);
  const [entries, setEntries] = useState<RegistrationListEntry[]>([]);
  const [cursor, setCursor] = useState<string | undefined>();
  const [complete, setComplete] = useState(true);
  const [busy, setBusy] = useState(false);
  const [notice, setNotice] = useState<string | undefined>();

  const read = async (from?: string) => {
    setBusy(true);
    setNotice(undefined);
    try {
      const page = await load(from);
      setEntries((known) => (from ? [...known, ...page.receipts] : page.receipts));
      setCursor(page.cursor);
      setComplete(page.complete);
    } catch (error) {
      if (isSaveRetired(error)) return;
      setNotice("Your registrations could not be read. This does not mean there are none.");
      setComplete(false);
    } finally {
      setBusy(false);
    }
  };

  const recover = async (registrationId: string) => {
    setBusy(true);
    setNotice(undefined);
    try {
      onRecovered(await check(registrationId));
    } catch (error) {
      if (isSaveRetired(error)) return;
      setNotice("We could not confirm that registration. Nothing was created again; try Check later.");
    } finally {
      setBusy(false);
    }
  };

  if (!open) {
    return (
      <div className="ahr-reg__receipts">
        <button type="button" className="btn btn-blue" disabled={disabled} onClick={() => { setOpen(true); void read(); }}>
          Your recent registrations
        </button>
      </div>
    );
  }

  return (
    <section className="ahr-reg__receipts" aria-label="Your recent registrations">
      <ul className="ahr-reg__receipt-list">
        {entries.map((entry) => (
          <li key={entry.registrationId} className="ahr-reg__receipt">
            <span>{entry.displayName ?? "Unreadable registration"}</span>
            <span>{new Date(entry.startedAt).toLocaleString()}</span>
            <span>{statusOf(entry)}</span>
            {entry.readable && (
              <button type="button" className="btn btn-blue" disabled={disabled || busy} onClick={() => void recover(entry.registrationId)}>
                Check
              </button>
            )}
          </li>
        ))}
      </ul>
      {busy && <p className="ahr-reg__note">Reading your registrations…</p>}
      {!busy && entries.length === 0 && complete && !notice && <p className="ahr-reg__note">You have no registrations at this practice.</p>}
      {!busy && !complete && !cursor && !notice && <p className="ahr-reg__note">Some registrations could not be read.</p>}
      {notice && <p className="ahr-reg__note" role="alert">{notice}</p>}
      {cursor && (
        <button type="button" className="btn btn-blue" disabled={disabled || busy} onClick={() => void read(cursor)}>
          Load more
        </button>
      )}
    </section>
  );
}