"use client";

import { useEffect, useState } from "react";
import { AlertCircle, RefreshCw } from "lucide-react";

type Row = {
  id: number;
  nombre_banco: string;
};

export default function BancosPage() {
  const [loading, setLoading] = useState(true);
  const [mensaje, setMensaje] = useState<string | null>(null);
  const [rows, setRows] = useState<Row[]>([]);

  const cargar = async () => {
    setLoading(true);
    setMensaje(null);
    try {
      const res = await fetch("/api/mantenedores/bancos");
      const data = await res.json();
      if (!res.ok) throw new Error(data?.error || "Error al cargar bancos");
      setRows(data);
    } catch (e: any) {
      setMensaje(e?.message || "Error al cargar bancos");
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    void cargar();
  }, []);

  return (
    <div className="space-y-6">
      <div className="flex items-center">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Bancos</h1>
          <p className="mt-1 text-sm text-gray-500">Listado de bancos.</p>
        </div>
        <button
          className="ml-auto inline-flex items-center px-3 py-2 rounded-md text-sm bg-white border border-gray-200 text-gray-700 hover:bg-gray-50"
          onClick={() => void cargar()}
          disabled={loading}
        >
          <RefreshCw className={`h-4 w-4 mr-2 ${loading ? "animate-spin" : ""}`} />
          Recargar
        </button>
      </div>

      {mensaje && (
        <div className="rounded-md p-4 border bg-red-50 border-red-200">
          <div className="flex">
            <div className="flex-shrink-0">
              <AlertCircle className="h-5 w-5 text-red-400" />
            </div>
            <div className="ml-3">
              <p className="text-sm text-red-700">{mensaje}</p>
            </div>
          </div>
        </div>
      )}

      <div className="bg-white shadow sm:rounded-lg overflow-hidden">
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Banco</th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {rows.map((r) => (
                <tr key={r.id}>
                  <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-700">{r.id}</td>
                  <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-700">{r.nombre_banco}</td>
                </tr>
              ))}
              {!loading && rows.length === 0 && (
                <tr>
                  <td colSpan={2} className="px-4 py-10 text-center text-gray-500">No hay datos.</td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}