import { router, usePage } from "@inertiajs/react";
import { formatFCFA, sortByDrawOrder, slugify } from "@/lib/loto-data";
import { LotoBall } from "./LotoBall";
import { UploadDrawModal } from "./UploadDrawModal";
import { AddDrawModal } from "./AddDrawModal";

export function RecentDraws({ dbDraws }: { dbDraws?: any[] }) {
  const { auth } = usePage<any>().props;
  const isAdmin = auth?.user?.role === 'admin';
  const navigate = (url: string) => router.visit(url);

  return (
    <div className="overflow-hidden rounded-xl border border-border/50 bg-card shadow-sm">
      <div className="flex items-center justify-between border-b border-border/50 px-6 py-4">
        <div>
          <h3 className="font-display text-lg font-bold">Tirages du jour</h3>
          <p className="text-sm text-muted-foreground">Résultats des tirages d'aujourd'hui</p>
        </div>
        <div className="flex items-center gap-2">
          {isAdmin && (
            <>
              <UploadDrawModal />
              <AddDrawModal />
            </>
          )}
        </div>
      </div>

      <div className="mt-4 overflow-x-auto">
        <table className="w-full min-w-[640px] border-collapse text-sm">
          <thead>
            <tr className="text-left text-xs uppercase tracking-wider text-muted-foreground">
              <th className="pb-3 pl-6 pr-4 font-medium">Tirage</th>
              <th className="pb-3 px-4 font-medium">Date</th>
              <th className="pb-3 px-4 font-medium">Numéros Gagnants</th>
              <th className="pb-3 pr-6 pl-4 font-medium">Numéros Machine</th>
            </tr>
          </thead>
          <tbody>
            {sortByDrawOrder(dbDraws || [], (draw) => draw.name).map((draw) => {
              const dateStr = draw.draw_date ? new Date(draw.draw_date).toLocaleDateString('fr-FR') : draw.date;
              const winningNumbers = Array.isArray(draw.first) ? draw.first : (draw.winning_numbers || draw.numbers || []);
              const machineNumbers = Array.isArray(draw.second) ? draw.second : (draw.machine_numbers || []);
              const routeId = draw.slug || draw.id;

              return (
              <tr
                key={draw.id}
                className="cursor-pointer border-t border-border/60 transition-colors hover:bg-muted/40"
                onClick={() => navigate(`/loto/${slugify(draw.name)}`)}
              >
                <td className="py-3 pl-6 pr-4">
                  <span className="font-display font-semibold text-primary hover:underline">{draw.name}</span>
                </td>
                <td className="py-3 px-4 text-muted-foreground">{dateStr}</td>
                <td className="py-3 px-4">
                  <div className="flex gap-1.5">
                    {winningNumbers.map((n: number, idx: number) => (
                      <LotoBall key={`win-${n}-${idx}`} value={n} variant="ghost" size="sm" />
                    ))}
                  </div>
                </td>
                <td className="py-3 pr-6 pl-4">
                  <div className="flex gap-1.5">
                    {machineNumbers.map((n: number, idx: number) => (
                      <LotoBall key={`mac-${n}-${idx}`} value={n} variant="machine" size="sm" />
                    ))}
                  </div>
                </td>
              </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}