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

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

  // Mock de dados detalhados
  const caminhao = {
    id: "1",
    modelo: "Volvo FH 540",
    placa: "ABC1D23",
    capacidade: "6.00",
    status: "Ativo",
    motorista: "João da Silva",
    localizacao: "Galpão Central",
    observacoes: "Veículo em ótimo estado. Última revisão há 30 dias.",
    imagem: "/assets/img/caminhao-demo.png",
  };

  const manutencoes = [
    { tipo: "Preventiva", descricao: "Troca de óleo", valor: 450.00, data: "15/03/2025" },
    { tipo: "Corretiva", descricao: "Substituição de pastilhas de freio", valor: 820.00, data: "04/04/2025" },
  ];

  const seguros = [
    { tipo: "Total", seguradora: "Porto Seguro", vigencia: "01/01/2025 até 31/12/2025", valor: "R$ 2.300,00" },
  ];

  const abastecimentos = [
    { tipo: "Diesel", data: "25/04/2025", litros: 90, valor_total: 630.00 },
    { tipo: "Diesel", data: "28/04/2025", litros: 100, valor_total: 700.00 },
  ];

  return (
    <div className="p-8 max-w-6xl mx-auto">
      <div className="mb-6 flex justify-between items-center">
        <h1 className="text-3xl font-bold">Visualização do Caminhão</h1>
        <Button onClick={() => router.push(`/caminhoes/edicao_caminhao?id=${caminhao.id}`)}>
          Editar Caminhão
        </Button>
      </div>

      <Card className="mb-6">
        <CardContent className="flex flex-col md:flex-row gap-6 p-6">
          <img
            src={caminhao.imagem}
            alt="Foto do Caminhão"
            className="w-full md:w-60 h-48 object-cover rounded-lg"
          />
          <div>
            <h2 className="text-2xl font-bold mb-2">{caminhao.modelo}</h2>
            <p><strong>Placa:</strong> {caminhao.placa}</p>
            <p><strong>Capacidade:</strong> {caminhao.capacidade} m³</p>
            <p><strong>Motorista:</strong> {caminhao.motorista}</p>
            <p><strong>Localização:</strong> {caminhao.localizacao}</p>
            <p><strong>Observações:</strong> {caminhao.observacoes}</p>
            <Badge className="mt-2 bg-green-200 text-green-800">{caminhao.status}</Badge>
          </div>
        </CardContent>
      </Card>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* Manutenções */}
        <Card>
          <CardContent className="p-6">
            <h3 className="text-xl font-bold mb-4">Manutenções</h3>
            {manutencoes.map((m, idx) => (
              <div key={idx} className="mb-3">
                <p><strong>Tipo:</strong> {m.tipo}</p>
                <p><strong>Descrição:</strong> {m.descricao}</p>
                <p><strong>Valor:</strong> R$ {m.valor.toFixed(2)}</p>
                <p><strong>Data:</strong> {m.data}</p>
                <hr className="my-2" />
              </div>
            ))}
          </CardContent>
        </Card>

        {/* Seguro */}
        <Card>
          <CardContent className="p-6">
            <h3 className="text-xl font-bold mb-4">Seguro</h3>
            {seguros.map((s, idx) => (
              <div key={idx} className="mb-3">
                <p><strong>Tipo:</strong> {s.tipo}</p>
                <p><strong>Seguradora:</strong> {s.seguradora}</p>
                <p><strong>Vigência:</strong> {s.vigencia}</p>
                <p><strong>Valor:</strong> {s.valor}</p>
                <hr className="my-2" />
              </div>
            ))}
          </CardContent>
        </Card>

        {/* Abastecimentos */}
        <Card className="md:col-span-2">
          <CardContent className="p-6">
            <h3 className="text-xl font-bold mb-4">Abastecimentos</h3>
            <table className="w-full text-left border border-gray-200">
              <thead>
                <tr className="bg-gray-100">
                  <th className="p-2">Tipo</th>
                  <th className="p-2">Data</th>
                  <th className="p-2">Litros</th>
                  <th className="p-2">Valor Total</th>
                </tr>
              </thead>
              <tbody>
                {abastecimentos.map((a, idx) => (
                  <tr key={idx} className="border-t">
                    <td className="p-2">{a.tipo}</td>
                    <td className="p-2">{a.data}</td>
                    <td className="p-2">{a.litros}</td>
                    <td className="p-2">R$ {a.valor_total.toFixed(2)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}
