"use client";

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

type Sector = {
  Id_sector: number;
  nombre_sector: string;
  socios_sector?: number;
};

export default function SectoresPage() {
  const [loading, setLoading] = useState(true);
  const [working, setWorking] = useState(false);
  const [mensaje, setMensaje] = useState<{ tipo: "error" | "success"; texto: string } | null>(null);

  const [sectores, setSectores] = useState<Sector[]>([]);
  const [nombreNuevo, setNombreNuevo] = useState("");

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

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

  const crear = async () => {
    setWorking(true);
    setMensaje(null);
    try {
      if (!nombreNuevo.trim()) {
        setMensaje({ tipo: "error", texto: "Nombre requerido" });
        return;
      }

      const res = await fetch("/api/mantenedores/sectores", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ nombre: nombreNuevo.trim() }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data?.error || "Error al crear sector");
      setMensaje({ tipo: "success", texto: data?.message || "Sector creado" });
      setNombreNuevo("");
      await cargar();
    } catch (e: any) {
      setMensaje({ tipo: "error", texto: e?.message || "Error al crear sector" });
    } finally {
      setWorking(false);
    }
  };

  const guardarNombre = async (id: number, nombre: string) => {
    setWorking(true);
    setMensaje(null);
    try {
      const res = await fetch("/api/mantenedores/sectores", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ id, nombre: nombre.trim() }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data?.error || "Error al actualizar sector");
      setMensaje({ tipo: "success", texto: data?.message || "Sector actualizado" });
      await cargar();
    } catch (e: any) {
      setMensaje({ tipo: "error", texto: e?.message || "Error al actualizar sector" });
    } finally {
      setWorking(false);
    }
  };

  const eliminar = async (id: number) => {
    const ok = confirm("¿Eliminar sector?");
    if (!ok) return;

    setWorking(true);
    setMensaje(null);
    try {
      const res = await fetch(`/api/mantenedores/sectores?id=${id}`, { method: "DELETE" });
      const data = await res.json();
      if (!res.ok) throw new Error(data?.error || "Error al eliminar sector");
      setMensaje({ tipo: "success", texto: data?.message || "Sector eliminado" });
      await cargar();
    } catch (e: any) {
      setMensaje({ tipo: "error", texto: e?.message || "Error al eliminar sector" });
    } finally {
      setWorking(false);
    }
  };

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-gray-900">Sectores</h1>
        <p className="mt-1 text-sm text-gray-500">Mantenedor de sectores.</p>
      </div>

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

      <div className="bg-white shadow sm:rounded-lg p-4">
        <h2 className="text-lg font-semibold text-gray-900">Nuevo sector</h2>
        <div className="mt-3 flex gap-2">
          <input
            className="flex-1 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
            value={nombreNuevo}
            onChange={(e) => setNombreNuevo(e.target.value)}
            disabled={working}
          />
          <button
            className="inline-flex items-center px-3 py-2 rounded-md text-sm bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50"
            onClick={() => void crear()}
            disabled={working}
          >
            <Plus className="h-4 w-4 mr-2" />
            Crear
          </button>
          <button
            className="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={working}
          >
            <RefreshCw className={`h-4 w-4 mr-2 ${working ? "animate-spin" : ""}`} />
            Recargar
          </button>
        </div>
      </div>

      <div className="bg-white shadow sm:rounded-lg overflow-hidden">
        <div className="px-4 py-3 border-b border-gray-200 flex items-center">
          <h2 className="text-lg font-semibold text-gray-900">Listado</h2>
          {loading && <span className="ml-3 text-sm text-gray-500">Cargando...</span>}
        </div>
        <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">Nombre</th>
                <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Socios</th>
                <th className="px-4 py-3"></th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {sectores.map((s) => (
                <SectorRow
                  key={s.Id_sector}
                  sector={s}
                  disabled={working}
                  onSave={(nombre) => void guardarNombre(s.Id_sector, nombre)}
                  onDelete={() => void eliminar(s.Id_sector)}
                />
              ))}
              {!loading && sectores.length === 0 && (
                <tr>
                  <td colSpan={4} className="px-4 py-10 text-center text-gray-500">
                    No hay sectores.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function SectorRow({
  sector,
  disabled,
  onSave,
  onDelete,
}: {
  sector: Sector;
  disabled: boolean;
  onSave: (nombre: string) => void;
  onDelete: () => void;
}) {
  const [nombre, setNombre] = useState(sector.nombre_sector || "");

  useEffect(() => {
    setNombre(sector.nombre_sector || "");
  }, [sector.nombre_sector]);

  const changed = nombre.trim() !== (sector.nombre_sector || "").trim();

  return (
    <tr>
      <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-700">{sector.Id_sector}</td>
      <td className="px-4 py-3 whitespace-nowrap">
        <input
          className="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
          value={nombre}
          onChange={(e) => setNombre(e.target.value)}
          disabled={disabled}
        />
      </td>
      <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-700 text-right">
        {Number(sector.socios_sector || 0).toLocaleString("es-CL")}
      </td>
      <td className="px-4 py-3 whitespace-nowrap text-right">
        <div className="inline-flex gap-2">
          <button
            className="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 disabled:opacity-50"
            onClick={() => onSave(nombre)}
            disabled={disabled || !changed || !nombre.trim()}
          >
            <Save className="h-4 w-4 mr-2" />
            Guardar
          </button>
          <button
            className="inline-flex items-center px-3 py-2 rounded-md text-sm bg-white border border-red-200 text-red-700 hover:bg-red-50 disabled:opacity-50"
            onClick={onDelete}
            disabled={disabled}
          >
            <Trash2 className="h-4 w-4 mr-2" />
            Eliminar
          </button>
        </div>
      </td>
    </tr>
  );
}