import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { TriangleAlert } from 'lucide-react';
import type { ProviderReadiness } from '../../utils/practitionerBookingReadiness';
import { blockerCopy } from '../../utils/booking/bookabilityCopy';
import { formatFhirHumanName } from '../../utils/fhirHumanName';

export type ProviderReadinessAlertProps = {
  providers: ProviderReadiness[];
  /** The services could not be verified, so some providers' readiness is not known: said once, with Retry. */
  servicesUnverified?: boolean;
  onRetry?: () => void;
};

// Copy comes from the shared module so the alert, the authoring consequence lines and the why-not panel all
// say the SAME sentence for the same cause - two phrasings read as two different problems. The first blocker
// is the one to fix first, so it is the one shown.
// THE BLOCKER IS CONSULTED FIRST, and the comment above used to describe behaviour this function did not
// have. `hasAnySchedule` was tested BEFORE the blocker list, so a provider missing both a seat and a
// schedule was told about the schedule - the one thing that would not help. A seat is band 1 precisely
// because fixing anything below it changes nothing.
const gapLabel = (provider: ProviderReadiness): string => {
  const [first] = provider.blockers;
  if (first) return blockerCopy(first);
  if (!provider.hasAnySchedule) return 'No schedule set up yet';
  return 'Not bookable';
};

const ProviderReadinessAlert = ({ providers, servicesUnverified, onRetry }: ProviderReadinessAlertProps) => {
  const navigate = useNavigate();
  const [open, setOpen] = useState(false);

  if (providers.length === 0 && !servicesUnverified) return null;

  return (
    <div className="mb-3 rounded-md border border-amber-200 bg-amber-50 p-2 text-sm text-amber-900">
      {servicesUnverified && (
        <p className="flex items-center justify-between gap-2" role="status">
          <span>We could not check this practice’s services, so whether some providers can take appointments is not known yet.</span>
          {onRetry && <button type="button" className="btn btn-blue shrink-0" onClick={onRetry}>Retry</button>}
        </p>
      )}
      {providers.length > 0 && (<>
      <button
        type="button"
        className="flex w-full items-center justify-between gap-2 text-left font-medium"
        onClick={() => setOpen((v) => !v)}
      >
        <span className="flex items-center gap-1.5">
          {/* "can't take appointments" — NOT "can't be booked". This alert lists only providers with a real
              gap; a provider the practice deliberately keeps staff-book-only never reaches here. */}
          {/* 🚨 CARD 285 — AN ICON, NOT A LITERAL `⚠`. WordPress core's emoji script walks the DOM AFTER we
              render and rewrites that character into a 120px <img> fetched from s.w.org. It destroyed this
              card's layout (ten of eleven setup tasks pushed outside a 260px box) and put a third-party
              request on a page rendering PHI. ⛔ Do not "restore" the character. The portal now dequeues
              core's emoji printers as well, but that is defence in depth — this is the fix. */}
          <TriangleAlert className="h-4 w-4 shrink-0" aria-hidden />
          {providers.length} {providers.length === 1 ? 'provider' : 'providers'} can’t take appointments yet
        </span>
        <span aria-hidden>{open ? '▾' : '▸'}</span>
      </button>
      {open && (
        <ul className="mt-2 flex flex-col gap-2">
          {providers.map((p) => (
            <li key={p.practitioner.id} className="flex items-center justify-between gap-2">
              <span className="min-w-0">
                <span className="block truncate font-medium">
                  {formatFhirHumanName(p.practitioner.name) || 'Provider'}
                </span>
                <span className="block text-xs text-amber-800">{gapLabel(p)}</span>
              </span>
              <button
                type="button"
                className="btn btn-blue shrink-0"
                onClick={() => p.practitioner.id && navigate(`/dashboard/staff/${p.practitioner.id}/services`)}
              >
                Fix
              </button>
            </li>
          ))}
        </ul>
      )}
      </>)}
    </div>
  );
};

export default ProviderReadinessAlert;