import { ArrowRightLeft } from "lucide-react";
import type { PractitionerRecommendation } from "../../../../../utils/booking/matchPractitionerSuggestions";

interface PractitionerRecommendationCalloutProps {
  recommendations: PractitionerRecommendation[];
  onSelect: (rec: PractitionerRecommendation) => void;
  // "your reason" is written to the person the visit is FOR. The front desk is booking on somebody
  // else's behalf, so the same sentence there addresses the wrong person. One component with one
  // overridable line, rather than a second copy of this that drifts.
  label?: string;
}

// "Recommended for your reason" - the practitioner-matching counterpart to "Find my
// service" suggestion cards (reason-for-visit -> suggested service, see PatientBookAppointment.tsx's
// `suggestions.map(...)` block). Same idiom: a ranked, tappable card with a one-line "why", mirrored
// here for PRACTITIONER recommendations instead of services. Purely presentational - the whole row
// IS the button (no separate "switch" control); the parent (Task 7) owns location-filter/select-state
// side effects when it handles onSelect. Fails open to null on an empty list (leaf-level, never blocks
// the manual practitioner picker it sits above).
//
// A practitioner can reach this list with no specialty recorded - a patient who asks for somebody by
// name gets them whether or not the practice ever filled that field in - so the specialty line and its
// separator are rendered only when there is one.
const PractitionerRecommendationCallout = ({
  recommendations,
  onSelect,
  label = "Recommended for your reason",
}: PractitionerRecommendationCalloutProps) => {
  if (recommendations.length === 0) {
    return null;
  }

  const [primary, ...rest] = recommendations;

  const renderLocation = (rec: PractitionerRecommendation) =>
    rec.crossLocation ? (
      <span className="inline-flex items-center gap-1 text-amber-700">
        <ArrowRightLeft className="h-3 w-3 shrink-0" aria-hidden="true" />
        <span>{`at ${rec.locationDisplay} — switch`}</span>
      </span>
    ) : (
      <span>{rec.locationDisplay}</span>
    );

  return (
    /* A group, not a label: what follows is a set of suggestion BUTTONS, and a <label> over a button
 binds to nothing. `aria-labelledby` is what makes a screen reader say why these are being
 offered - which on this control is the whole point, because the reason they were suggested is
 the thing that makes them trustworthy. */
    <div className="w-full space-y-2" role="group" aria-labelledby="practitioner-recommendation-label">
      <p id="practitioner-recommendation-label" className="block text-xs font-medium text-ink-muted">
        {label}
      </p>

      <button
        type="button"
        onClick={() => onSelect(primary)}
        className="w-full text-left rounded border border-blue-200 bg-blue-50/50 px-3 py-2 text-sm transition-colors hover:border-blue-600 hover:bg-blue-50"
      >
        <div className="font-medium">{primary.display}</div>
        {primary.specialtyDisplay && (
          <div className="text-muted-foreground">{primary.specialtyDisplay}</div>
        )}
        <div className="text-muted-foreground">{primary.rationale}</div>
        <div className="text-xs mt-1">{renderLocation(primary)}</div>
      </button>

      {rest.length > 0 && (
        <div className="space-y-1.5">
          {rest.map((rec) => (
            <button
              key={rec.practitionerRoleId}
              type="button"
              onClick={() => onSelect(rec)}
              className="w-full text-left rounded border border-gray-200 px-3 py-1.5 text-sm transition-colors hover:border-blue-600 hover:bg-blue-50"
            >
              <div className="font-medium">{rec.display}</div>
              <div className="text-muted-foreground text-xs">
                {rec.specialtyDisplay ? `${rec.specialtyDisplay} · ` : ''}
                {rec.rationale}
              </div>
              <div className="text-xs">{renderLocation(rec)}</div>
            </button>
          ))}
        </div>
      )}
    </div>
  );
};

export default PractitionerRecommendationCallout;