import { useCallback, useEffect, useState } from "react";
import { Button } from "../../../../components/ui/button.tsx";
import { useScribeServiceContext } from "../../../../services/ScribeService.tsx";
import { useAuthServiceContext } from "../../../../services/AuthService.tsx";

/**
 * THE PATIENT SIDE OF THE RECORDING CONSENT. The server has admitted a patient to this decision all
 * along and no screen ever asked them, so the only door was staff attesting in the room.
 */
export const ProviderRecordingConsent = ({ orgId }: { orgId: string }) => {
  const { getConsent, recordConsent } = useScribeServiceContext();
  const { currentUser } = useAuthServiceContext();
  const fhir = currentUser?.fhir;
  const patientId = fhir?.resourceType === "Patient" ? fhir.id : undefined;

  const [permitted, setPermitted] = useState<boolean | null>(null);
  const [failed, setFailed] = useState(false);
  const [busy, setBusy] = useState(false);

  const load = useCallback(async () => {
    if (!patientId) return;
    try {
      const status = await getConsent(patientId, undefined, orgId);
      setPermitted(status.governedBy === "none" ? null : status.permitted);
      setFailed(false);
    } catch {
      setFailed(true);
    }
  }, [getConsent, orgId, patientId]);

  useEffect(() => { void load(); }, [load]);

  const decide = async (decision: "permit" | "deny") => {
    setBusy(true);
    try {
      await recordConsent({ decision }, orgId);
      // Show what was just written, as the staff control does. Re-reading here returned the OLD answer for
      // ~30 s (the search lags the write), so a patient who withdrew was told they had agreed.
      setPermitted(decision === "permit");
      setFailed(false);
    } catch {
      setFailed(true);
    } finally {
      setBusy(false);
    }
  };

  if (!patientId) return null;

  return (
    <div className="py-3">
      <p className="text-sm font-medium">Recording visits to help write the note</p>
      {failed && (
        <p className="text-sm text-secondary">We could not read this just now, so nothing here has changed.</p>
      )}
      {!failed && (
        <p className="text-sm text-secondary">
          {permitted === null && "Nobody has asked you about this yet."}
          {permitted === true && "You have agreed that this practice may record your visits."}
          {permitted === false && "You have said this practice may not record your visits."}
        </p>
      )}
      <div className="mt-2 flex gap-2">
        {permitted !== true && (
          <Button className="btn btn-blue" disabled={busy} onClick={() => void decide("permit")}>Allow recording</Button>
        )}
        {permitted === true && (
          <Button className="btn btn-red" disabled={busy} onClick={() => void decide("deny")}>Withdraw</Button>
        )}
      </div>
    </div>
  );
};