import React, { useCallback, useEffect, useState } from 'react';
import { FileSignature } from 'lucide-react';
import { useAuthServiceContext } from '../../services';
import { environment } from '../../environments/environment';
import {
  acceptContractorTermsVersion,
  findAgencyAccessCause,
  type AgencyAccessCause,
} from '../../services/agencyAccessCause';
import { AgreementBlocks } from '../FirstSignInGate/AgreementBlocks';

/**
 * Agency staff refused their own profile at sign-in, while their token holds this practice's agency
 * grant. The refusal itself says nothing, so this asks the reads that stay open (agencyAccessCause.ts) and
 * says what they answer: contractor Terms owed, which can be accepted here; a practice that is shut, in its
 * own words; or neither. It keeps the session instead of ending it.
 */
export const AgencyTermsGate: React.FC = () => {
  const { logout, wpOrganization, getValidToken } = useAuthServiceContext();
  const practice = wpOrganization?.current?.name || 'this practice';
  const organizationId = wpOrganization?.current?.id;
  const [cause, setCause] = useState<AgencyAccessCause | 'checking'>('checking');
  const [busy, setBusy] = useState(false);
  const [note, setNote] = useState<string | undefined>();

  const check = useCallback(async () => {
    const token = await getValidToken?.().catch(() => null);
    setCause(token ? await findAgencyAccessCause(token, organizationId) : { kind: 'unreadable' });
  }, [getValidToken, organizationId]);

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

  const accept = async () => {
    if (cause === 'checking' || cause.kind !== 'terms-owed') return;
    setBusy(true);
    setNote(undefined);
    const token = await getValidToken?.().catch(() => null);
    const outcome = token ? await acceptContractorTermsVersion(token, cause.document.version) : 'failed';
    if (outcome === 'accepted') {
      window.location.reload();
      return;
    }
    setBusy(false);
    if (outcome === 'changed') {
      setNote('The Terms changed while this page was open. Read the current version below, then accept it.');
      await check();
    } else {
      setNote('We could not record your acceptance just now. Please try again.');
    }
  };

  const shut = cause !== 'checking' && cause.kind === 'practice-shut';
  const title = cause === 'checking'
    ? 'Checking why your account did not open'
    : cause.kind === 'terms-owed'
      ? 'Accept the contractor Terms to continue'
      : cause.kind === 'practice-shut'
        ? `${practice} cannot be used yet`
        : cause.kind === 'not-terms'
          ? `Your account did not open at ${practice}`
          : 'We could not check why your account did not open';

  return (
    <div className="flex min-h-screen items-center justify-center bg-background p-4">
      <div className="w-full max-w-xl rounded-lg border border-border bg-card p-6 shadow-sm">
        <div className="mb-4 flex items-center gap-3">
          <FileSignature className="w-6 h-6 text-secondary" aria-hidden="true" />
          <h1 className="text-lg font-bold">{title}</h1>
        </div>

        <p className="text-sm text-secondary">
          You work at {practice} through a contractor, and the practice did not open your account. You are still
          signed in here.
        </p>

        {note && <p role="alert" className="mt-2 text-sm text-secondary">{note}</p>}

        {cause !== 'checking' && cause.kind === 'terms-owed' && (
          <>
            <p className="mt-2 text-sm text-secondary">
              Akashic has published contractor Terms ({cause.document.version}) that you have not accepted yet.
              Read them and accept to continue.
            </p>
            <div className="mt-3 max-h-[40vh] space-y-3 overflow-y-auto rounded border border-border bg-muted p-4 text-sm text-foreground">
              <AgreementBlocks blocks={cause.document.blocks} />
            </div>
          </>
        )}

        {shut && <p className="mt-2 text-sm text-secondary">{cause.message}</p>}

        {cause !== 'checking' && cause.kind === 'not-terms' && (
          <p className="mt-2 text-sm text-secondary">
            It is not the contractor Terms: yours are in order. Ask {practice}&apos;s administrator to check the role
            your contractor was given, then try again.
          </p>
        )}

        {cause !== 'checking' && cause.kind === 'unreadable' && (
          <p className="mt-2 text-sm text-secondary">
            Could not check whether your contractor account owes anything. Try again in a moment, or check the contractors console.
          </p>
        )}

        <div className="mt-6 flex flex-col gap-2 sm:flex-row-reverse sm:flex-wrap">
          {cause !== 'checking' && cause.kind === 'terms-owed' && (
            <button type="button" className="btn btn-blue" onClick={() => void accept()} disabled={busy}>
              {busy ? 'Accepting...' : 'Accept and continue'}
            </button>
          )}
          {(cause === 'checking' || cause.kind !== 'terms-owed') && (
            <a
              className={(shut ? 'btn btn-blue' : 'btn btn-blue-ghost') + ' text-center'}
              href={environment.contractorsConsoleUrl}
              target="_blank"
              rel="noopener noreferrer"
            >
              Open the contractors console
            </a>
          )}
          <button type="button" className="btn btn-blue-ghost" onClick={() => window.location.reload()}>
            Try again
          </button>
          <button type="button" className="btn btn-red-ghost" onClick={() => logout()}>
            Sign out
          </button>
        </div>
      </div>
    </div>
  );
};

export default AgencyTermsGate;