"use client";
export const dynamic = "force-dynamic";
import { useEffect, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import Link from "next/link";
import Card from "@/components/ui/Card";
import Button from "@/components/ui/Button";

interface Registro {
  id: string;
  descripcion: string;
  observaciones: string | null;
  fechaRealizado: string;
  admin: { nombre: string };
  tipoServicio: { nombre: string } | null;
}

export default function HistorialPage() {
  const router = useRouter();
  const params = useSearchParams();
  const autoId = params.get("autoId");
  const [historial, setHistorial] = useState<Registro[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!autoId) { router.push("/cliente/dashboard"); return; }
    fetch(`/api/cliente/historial?autoId=${autoId}`)
      .then((r) => {
        if (r.status === 401) { router.push("/cliente"); return r; }
        return r;
      })
      .then((r) => r.json())
      .then((data) => { setHistorial(data); setLoading(false); })
      .catch(() => setLoading(false));
  }, [autoId, router]);

  return (
    <div className="flex flex-col gap-6">
      <div className="flex items-center gap-3">
        <Link href="/cliente/dashboard">
          <Button variant="ghost" className="px-2">← Volver</Button>
        </Link>
        <h1 className="text-2xl font-bold text-gray-800">Historial del auto</h1>
      </div>

      {loading ? (
        <div className="text-center py-10 text-gray-400">Cargando...</div>
      ) : historial.length === 0 ? (
        <Card>
          <p className="text-center text-gray-400 py-4">Este auto no tiene historial registrado todavía.</p>
        </Card>
      ) : (
        <div className="flex flex-col gap-3">
          {historial.map((reg) => (
            <Card key={reg.id}>
              <div className="flex flex-col gap-2">
                <div className="flex items-start justify-between gap-2 flex-wrap">
                  <div>
                    <p className="font-semibold text-gray-800">{reg.descripcion}</p>
                    {reg.tipoServicio && (
                      <span className="text-xs bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full">
                        {reg.tipoServicio.nombre}
                      </span>
                    )}
                  </div>
                  <p className="text-sm text-gray-400 shrink-0">
                    {new Date(reg.fechaRealizado).toLocaleDateString("es-AR", {
                      day: "2-digit", month: "long", year: "numeric",
                    })}
                  </p>
                </div>
                {reg.observaciones && (
                  <p className="text-sm text-gray-500 bg-gray-50 rounded-lg px-3 py-2">
                    {reg.observaciones}
                  </p>
                )}
                <p className="text-xs text-gray-400">Realizado por: {reg.admin.nombre}</p>
              </div>
            </Card>
          ))}
        </div>
      )}
    </div>
  );
}