"use client";

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

type Tramo = {
  Id_detalle_tipo_caneria: number;
  precio_metro_cubico: number;
  cargo_fijo_caneria: number;
  alcantarillado: number;
  inicio1: number;
  inicio2: number;
  inicio3: number;
  sobreconsumo1: number;
  sobreconsumo2: number;
  sobreconsumo3: number;
  multa_atraso: number;
  corte_reposicion: number;
  corte_matriz: number;
};

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

  const [tramos, setTramos] = useState<Tramo[]>([]);
  const [selectedId, setSelectedId] = useState<number | null>(null);

  const selected = useMemo(() => tramos.find((t) => t.Id_detalle_tipo_caneria === selectedId) || null, [tramos, selectedId]);

  const [form, setForm] = useState<any>(null);

  const cargar = async () => {
    setLoading(true);
    setMensaje(null);
    try {
      const res = await fetch("/api/mantenedores/tramos");
      const data = await res.json();
      if (!res.ok) throw new Error(data?.error || "Error al cargar tramos");
      setTramos(data);
      if (data?.length && selectedId === null) setSelectedId(data[0].Id_detalle_tipo_caneria);
    } catch (e: any) {
      setMensaje({ tipo: "error", texto: e?.message || "Error al cargar tramos" });
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    void cargar();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    if (!selected) {
      setForm(null);
      return;
    }
    setForm({
      id: selected.Id_detalle_tipo_caneria,
      precioMetroCubico: selected.precio_metro_cubico,
      cargoFijo: selected.cargo_fijo_caneria,
      alcantarillado: selected.alcantarillado,
      inicio1: selected.inicio1,
      inicio2: selected.inicio2,
      inicio3: selected.inicio3,
      sobreconsumo1: selected.sobreconsumo1,
      sobreconsumo2: selected.sobreconsumo2,
      sobreconsumo3: selected.sobreconsumo3,
      multaAtraso: selected.multa_atraso,
      corteReposicion: selected.corte_reposicion,
      corteMatriz: selected.corte_matriz,
    });
  }, [selectedId, selected]);

  const guardar = async () => {
    if (!form?.id) return;

    setWorking(true);
    setMensaje(null);
    try {
      const res = await fetch("/api/mantenedores/tramos", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          ...form,
          precioMetroCubico: Number(form.precioMetroCubico),
          cargoFijo: Number(form.cargoFijo),
          alcantarillado: Number(form.alcantarillado),
          inicio1: Number(form.inicio1),
          inicio2: Number(form.inicio2),
          inicio3: Number(form.inicio3),
          sobreconsumo1: Number(form.sobreconsumo1),
          sobreconsumo2: Number(form.sobreconsumo2),
          sobreconsumo3: Number(form.sobreconsumo3),
          multaAtraso: Number(form.multaAtraso),
          corteReposicion: Number(form.corteReposicion),
          corteMatriz: Number(form.corteMatriz),
        }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data?.error || "Error al guardar tramo");
      setMensaje({ tipo: "success", texto: data?.message || "Tramo actualizado" });
      await cargar();
    } catch (e: any) {
      setMensaje({ tipo: "error", texto: e?.message || "Error al guardar tramo" });
    } finally {
      setWorking(false);
    }
  };

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-gray-900">Tramos</h1>
        <p className="mt-1 text-sm text-gray-500">Tarifas y rangos de consumo.</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="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <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>
            <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={working}
            >
              <RefreshCw className={`h-4 w-4 mr-2 ${working ? "animate-spin" : ""}`} />
              Recargar
            </button>
          </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-right text-xs font-medium text-gray-500 uppercase tracking-wider">Precio m3</th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {tramos.map((t) => (
                  <tr
                    key={t.Id_detalle_tipo_caneria}
                    className={
                      t.Id_detalle_tipo_caneria === selectedId
                        ? "bg-indigo-50"
                        : "hover:bg-gray-50"
                    }
                    onClick={() => setSelectedId(t.Id_detalle_tipo_caneria)}
                    style={{ cursor: "pointer" }}
                  >
                    <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-700">{t.Id_detalle_tipo_caneria}</td>
                    <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-700 text-right">
                      ${Number(t.precio_metro_cubico || 0).toLocaleString("es-CL")}
                    </td>
                  </tr>
                ))}
                {!loading && tramos.length === 0 && (
                  <tr>
                    <td colSpan={2} className="px-4 py-10 text-center text-gray-500">
                      No hay tramos.
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </div>

        <div className="bg-white shadow sm:rounded-lg p-4 lg:col-span-2">
          <div className="flex items-center">
            <h2 className="text-lg font-semibold text-gray-900">Editar</h2>
            <button
              className="ml-auto 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 guardar()}
              disabled={working || !form}
            >
              <Save className="h-4 w-4 mr-2" />
              Guardar
            </button>
          </div>

          {!form && <div className="mt-4 text-sm text-gray-500">Seleccione un tramo.</div>}

          {form && (
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
              <Field label="Precio metro cúbico" value={form.precioMetroCubico} onChange={(v) => setForm({ ...form, precioMetroCubico: v })} disabled={working} />
              <Field label="Cargo fijo" value={form.cargoFijo} onChange={(v) => setForm({ ...form, cargoFijo: v })} disabled={working} />
              <Field label="Alcantarillado" value={form.alcantarillado} onChange={(v) => setForm({ ...form, alcantarillado: v })} disabled={working} />

              <Field label="Inicio 1" value={form.inicio1} onChange={(v) => setForm({ ...form, inicio1: v })} disabled={working} />
              <Field label="Inicio 2" value={form.inicio2} onChange={(v) => setForm({ ...form, inicio2: v })} disabled={working} />
              <Field label="Inicio 3" value={form.inicio3} onChange={(v) => setForm({ ...form, inicio3: v })} disabled={working} />

              <Field label="Sobreconsumo 1" value={form.sobreconsumo1} onChange={(v) => setForm({ ...form, sobreconsumo1: v })} disabled={working} />
              <Field label="Sobreconsumo 2" value={form.sobreconsumo2} onChange={(v) => setForm({ ...form, sobreconsumo2: v })} disabled={working} />
              <Field label="Sobreconsumo 3" value={form.sobreconsumo3} onChange={(v) => setForm({ ...form, sobreconsumo3: v })} disabled={working} />

              <Field label="Multa atraso" value={form.multaAtraso} onChange={(v) => setForm({ ...form, multaAtraso: v })} disabled={working} />
              <Field label="Corte reposición" value={form.corteReposicion} onChange={(v) => setForm({ ...form, corteReposicion: v })} disabled={working} />
              <Field label="Corte matriz" value={form.corteMatriz} onChange={(v) => setForm({ ...form, corteMatriz: v })} disabled={working} />
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function Field({
  label,
  value,
  onChange,
  disabled,
}: {
  label: string;
  value: any;
  onChange: (v: string) => void;
  disabled: boolean;
}) {
  return (
    <div>
      <label className="block text-sm font-medium text-gray-700">{label}</label>
      <input
        className="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
        value={value ?? ""}
        onChange={(e) => onChange(e.target.value)}
        disabled={disabled}
        inputMode="numeric"
      />
    </div>
  );
}