'use client';

import React from 'react';
import { useTranslation } from 'react-i18next';
import { InstallationRequestStatus } from '@/models/teltoinstall/_index';

type StatusStyle = {
  /** Classes du badge pilule (fond + texte + bordure). */
  badge: string;
  /** Classe de la bordure gauche colorée de la carte. */
  border: string;
};

/**
 * Libellés et couleurs des statuts côté app installateur. On les pilote ici
 * (et non via `status_label`/`status_color` du backend, partagés avec l'admin)
 * pour coller à la maquette : « Nouvelle » en bleu, « En attente client » en
 * ambre, « Confirmée » en vert, « Dates refusées » en rouge.
 */
export const REQUEST_STATUS_STYLES: Record<InstallationRequestStatus, StatusStyle> = {
  pending: { badge: 'bg-blue-50 text-blue-700 border-blue-200', border: 'border-l-blue-500' },
  dates_proposed: { badge: 'bg-amber-50 text-amber-700 border-amber-200', border: 'border-l-amber-400' },
  in_progress: { badge: 'bg-indigo-50 text-indigo-700 border-indigo-200', border: 'border-l-indigo-500' },
  scheduled: { badge: 'bg-emerald-50 text-emerald-700 border-emerald-200', border: 'border-l-emerald-500' },
  client_counter: { badge: 'bg-rose-50 text-rose-700 border-rose-200', border: 'border-l-rose-500' },
  cancelled: { badge: 'bg-slate-100 text-slate-600 border-slate-200', border: 'border-l-slate-400' },
};

export default function RequestStatusBadge({ status }: { status: InstallationRequestStatus }) {
  const { t } = useTranslation();
  const style = REQUEST_STATUS_STYLES[status] ?? REQUEST_STATUS_STYLES.pending;
  return (
    <span
      className={`inline-flex items-center text-xs font-semibold px-2.5 py-1 rounded-full border whitespace-nowrap ${style.badge}`}
    >
      {t(`requests.status.${status}`)}
    </span>
  );
}