import { Loader2 } from "lucide-react";
import clsx from "clsx";
import { Switch } from "../../components/ui/switch";
import { useMyProxies } from "../../hooks/useMyProxies.tsx";
import type { ActingAsTarget } from "../../services/AuthService.tsx";
import { TierChoices } from "./TierChoices";
import { BILLING_DEPENDENCY_NOTE, CHANGE_TIER_DESCRIPTIONS } from "./tierWords";
import "./careAccess.css";

interface OwnLinkAccessProps {
  /** The link the signed-in person is acting through; the card on screen is this link. */
  link: ActingAsTarget;
  showHead?: boolean;
}

// A switched-in helper reading their own link. The grants read is the account owner's, so the helper's
// own effective authority comes from their own /my-proxies row, read-only.
const OwnLinkAccess = ({ link, showHead = true }: OwnLinkAccessProps) => {
  const { proxies, isLoading, error, refetch } = useMyProxies();
  const own = proxies.find(
    (proxy) => proxy.relatedPersonId === link.relatedPersonId && proxy.subjectPatientId === link.subjectPatientId,
  );
  // A missing or unresolved row has no tier to show; careTier then is only a fail-closed default. A row
  // kept from before a failed refresh is stale.
  const shown = own && !own.tierUnresolved && !error ? own : undefined;
  const subject = link.subjectName || "this person";
  const problem = isLoading
    ? null
    : error || !own
      ? "We couldn't load what you may do for " + subject + "."
      : own.tierUnresolved
        ? "Your access for " + subject + " is still being set up, so it can't be shown yet."
        : null;
  const spinner = isLoading && <Loader2 className="size-4 animate-spin care-access-spinner" aria-hidden="true" />;
  const id = link.relatedPersonId;

  return (
    <section className={clsx("care-access", !showHead && "care-access--pane")} aria-label="What you can do">
      {showHead && (
        <div className="care-access-head">
          <p className="care-access-title">What you can do{spinner}</p>
        </div>
      )}
      <div className="care-access-card">
        {!showHead && <p className="care-access-group">What you may do{spinner}</p>}

        {problem && (
          <div role="alert" className="care-access-alert">
            <p className="care-access-alert-text">{problem}</p>
            <button type="button" className="btn btn-blue-ghost-sm" onClick={() => void refetch()}>
              Try again
            </button>
          </div>
        )}

        <TierChoices
          name={"own-access-" + id}
          value={shown?.careTier}
          descriptions={CHANGE_TIER_DESCRIPTIONS}
          onChange={() => undefined}
          disabled
        />

        {shown && (
          <div className="care-access-separately">
            <p className="care-access-group">Separately</p>
            {shown.careTier === "assist-only" && (
              <div className="care-access-toggle">
                <label htmlFor={"own-messaging-" + id} className="care-access-check-label">
                  Message the practice for them
                </label>
                <Switch id={"own-messaging-" + id} checked={shown.allowMessaging === true} disabled />
              </div>
            )}
            <div className="care-access-toggle">
              <label htmlFor={"own-billing-view-" + id} className="care-access-check-label">
                See invoices
              </label>
              <Switch id={"own-billing-view-" + id} checked={shown.allowBillingView === true} disabled />
            </div>
            <div className="care-access-toggle">
              <label htmlFor={"own-billing-pay-" + id} className="care-access-check-label">
                Pay invoices
              </label>
              <Switch id={"own-billing-pay-" + id} checked={shown.allowBillingPay === true} disabled />
            </div>
            <p className="care-access-note">{BILLING_DEPENDENCY_NOTE}</p>
          </div>
        )}

        <p className="care-access-note">This is your own access. It can't be changed here.</p>
      </div>
    </section>
  );
};

export default OwnLinkAccess;