// /pages/caminhoes/listagem_caminhoes.tsx
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { useRouter } from "next/router";

export default function ListagemCaminhoes() {
  const router = useRouter();

  // Exemplo de dados mockados
  const caminhoes = [
    {
      id: "1",
      placa: "ABC1D23",
      modelo: "Volvo FH 540",
      capacidade: "6.00",
      status: "Ativo",
      motorista: "João da Silva",
      localizacao: "Galpão Central",
      foto: "/assets/img/caminhao-demo.png", // Coloque uma imagem padrão ou um upload real
    },
    {
      id: "2",
      placa: "XYZ9K87",
      modelo: "Scania R 450",
      capacidade: "7.50",
      status: "Em manutenção",
      motorista: "Carlos Souza",
      localizacao: "Oficina 2",
      foto: "/assets/img/caminhao-demo.png",
    },
  ];

  const handleNovoCaminhao = () => {
    router.push("/caminhoes/cadastro_caminhao");
  };

  const handleVisualizar = (id: string) => {
    router.push(`/caminhoes/visualizacao_caminhao?id=${id}`);
  };

  return (
    <div className="p-8 max-w-7xl mx-auto">
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-3xl font-bold">Lista de Caminhões</h1>
        <Button onClick={handleNovoCaminhao} className="bg-green-600 hover:bg-green-700 text-white">
          + Novo Caminhão
        </Button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {caminhoes.map((caminhao) => (
          <Card key={caminhao.id} className="hover:shadow-lg transition">
            <CardContent className="p-4 flex flex-col">
              <img
                src={caminhao.foto}
                alt={caminhao.modelo}
                className="w-full h-48 object-cover rounded-lg mb-4"
              />
              <h2 className="text-xl font-bold mb-2">{caminhao.modelo}</h2>
              <p className="text-lg font-semibold text-gray-700">Placa: {caminhao.placa}</p>
              <p className="text-gray-600">Capacidade: {caminhao.capacidade} m³</p>
              <p className="text-gray-600">Motorista: {caminhao.motorista}</p>
              <p className="text-gray-600 mb-2">Localização: {caminhao.localizacao}</p>
              <Badge
                variant="outline"
                className={`mb-4 w-fit ${
                  caminhao.status === "Ativo" ? "bg-green-200 text-green-800" :
                  caminhao.status === "Em manutenção" ? "bg-yellow-200 text-yellow-800" :
                  "bg-red-200 text-red-800"
                }`}
              >
                {caminhao.status}
              </Badge>

              <Button
                variant="default"
                className="mt-auto"
                onClick={() => handleVisualizar(caminhao.id)}
              >
                Visualizar Detalhes
              </Button>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}
