import type { LocationRow } from "@/lib/types";
import StatusPill from "@/components/StatusPill";

type LocationsTableProps = {
  rows: LocationRow[];
};

export default function LocationsTable({ rows }: LocationsTableProps) {
  const parseNumber = (value: string): number => {
    const normalized = value.replace(/[^0-9.-]/g, "");
    const parsed = Number(normalized);
    return Number.isFinite(parsed) ? parsed : 0;
  };

  const rankedRows = [...rows].sort((a, b) => parseNumber(b.sales) - parseNumber(a.sales));
  const maxSales = Math.max(1, ...rankedRows.map((row) => parseNumber(row.sales)));
  const maxMargin = Math.max(1, ...rankedRows.map((row) => parseNumber(row.margin)));
  const maxDeliveries = Math.max(1, ...rankedRows.map((row) => parseNumber(row.perfectDeliveries)));
  const maxTurnover = Math.max(1, ...rankedRows.map((row) => parseNumber(row.turnover)));

  return (
    <section aria-labelledby="locations-title" className="space-y-4">
      <h2 id="locations-title" className="text-h2 font-semibold">
        Comparación por sucursales
      </h2>
      <div className="grid grid-cols-1 gap-3">
        {rankedRows.map((row, index) => (
          <article key={row.id} className="rounded-xl border border-benell-stroke bg-benell-surface p-4">
            <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
              <h3 className="text-h3 font-semibold">
                #{index + 1} {row.location}
              </h3>
              <StatusPill status={row.status} />
            </div>

            <div className="grid grid-cols-1 gap-2 text-caption text-benell-text-soft md:grid-cols-2">
              <div>
                <p className="mb-1">Ventas: <span className="font-semibold text-benell-text">{row.sales}</span></p>
                <div className="h-1.5 rounded-full bg-benell-surface-muted">
                  <div className="h-1.5 rounded-full bg-benell-brown" style={{ width: `${(parseNumber(row.sales) / maxSales) * 100}%` }} />
                </div>
              </div>
              <div>
                <p className="mb-1">Margen: <span className="font-semibold text-benell-text">{row.margin}</span></p>
                <div className="h-1.5 rounded-full bg-benell-surface-muted">
                  <div className="h-1.5 rounded-full bg-benell-green" style={{ width: `${(parseNumber(row.margin) / maxMargin) * 100}%` }} />
                </div>
              </div>
              <div>
                <p className="mb-1">% Entregas perfectas: <span className="font-semibold text-benell-text">{row.perfectDeliveries}</span></p>
                <div className="h-1.5 rounded-full bg-benell-surface-muted">
                  <div className="h-1.5 rounded-full bg-benell-caramel" style={{ width: `${(parseNumber(row.perfectDeliveries) / maxDeliveries) * 100}%` }} />
                </div>
              </div>
              <div>
                <p className="mb-1">Rotación: <span className="font-semibold text-benell-text">{row.turnover}</span></p>
                <div className="h-1.5 rounded-full bg-benell-surface-muted">
                  <div className="h-1.5 rounded-full bg-benell-red" style={{ width: `${(parseNumber(row.turnover) / maxTurnover) * 100}%` }} />
                </div>
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}
