import { Badge } from "@/components/ui/badge";
import { countTravelerStepDecisions, getTravelerStepDecisions } from "@/services/stepValidationSummary";
import type { StepValidation, StepValidationStatus, TripMember } from "@/types";

const labels: Record<StepValidationStatus, string> = {
  approved: "Approuvé",
  rejected: "Refusé",
  pending: "En attente",
};

const styles: Record<StepValidationStatus, string> = {
  approved: "status-success",
  rejected: "border-red-200 bg-red-50 text-red-700",
  pending: "border-slate-200 bg-slate-50 text-slate-600",
};

export function PlannerStepValidations({ validations, members, showSummary = true }: {
  validations?: StepValidation[];
  members?: TripMember[];
  showSummary?: boolean;
}) {
  const decisions = getTravelerStepDecisions(validations, members);
  if (decisions.length === 0) return null;
  const counts = countTravelerStepDecisions(decisions);

  return (
    <div className="mt-3 rounded-md border bg-muted/30 p-3 text-left" aria-label="Avis des Voyageurs sur cette étape">
      {showSummary !== false && <p className="text-xs font-medium">
        {counts.approved} approuvé · {counts.rejected} refusé · {counts.pending} en attente
      </p>}
      <ul className="mt-2 flex flex-wrap gap-2">
        {decisions.map((decision) => (
          <li key={decision.travelerId} className="flex items-center gap-2 text-xs">
            <span>{decision.name || decision.email}</span>
            <Badge variant="outline" className={styles[decision.status]}>{labels[decision.status]}</Badge>
          </li>
        ))}
      </ul>
    </div>
  );
}