"use client";

import { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { supabase } from "../../../../lib/supabase";

export default function EditarGuia() {
  const params = useParams();
  const router = useRouter();

  const id = params.id as string;

  const [guia, setGuia] = useState<any>(null);
  const [guardando, setGuardando] = useState(false);

  useEffect(() => {
    cargarGuia();
  }, []);

  async function cargarGuia() {
    const { data, error } = await supabase
      .from("guias")
      .select("*")
      .eq("id", id)
      .single();

    if (!error) {
      setGuia(data);
    } else {
      console.error("Error cargando guía:", error);
    }
  }

  function cambiarCampo(campo: string, valor: string) {
    setGuia({
      ...guia,
      [campo]: valor,
    });
  }

  async function guardarCambios() {
    if (!guia) return;

    setGuardando(true);

    const { error } = await supabase
      .from("guias")
      .update({
        cliente: guia.cliente,
        telefono: guia.telefono,
        ciudad: guia.ciudad,
        direccion: guia.direccion,
        estado: guia.estado,
      })
      .eq("id", id);

    setGuardando(false);

    if (!error) {
      alert("Guía actualizada correctamente");
      router.push(`/guias/${id}`);
    } else {
      console.error("Error actualizando guía:", error);
      alert("Error al actualizar la guía");
    }
  }

  if (!guia) {
    return (
      <main className="min-h-screen bg-slate-950 p-10 text-white">
        Cargando guía...
      </main>
    );
  }

  return (
    <main className="min-h-screen bg-slate-950 p-10 text-white">
      <h1 className="mb-8 text-4xl font-bold">
        ✏️ Editar Guía {guia.numero}
      </h1>

      <div className="max-w-3xl space-y-5 rounded-2xl bg-slate-900 p-8">
        <div>
          <label className="mb-2 block">
            Número de Guía
          </label>

          <input
            value={guia.numero || ""}
            disabled
            className="w-full rounded-lg bg-slate-800 p-3"
          />
        </div>

        <div>
          <label className="mb-2 block">
            Cliente
          </label>

          <input
            value={guia.cliente || ""}
            onChange={(e) =>
              cambiarCampo("cliente", e.target.value)
            }
            className="w-full rounded-lg bg-slate-800 p-3"
          />
        </div>

        <div>
          <label className="mb-2 block">
            Teléfono
          </label>

          <input
            value={guia.telefono || ""}
            onChange={(e) =>
              cambiarCampo("telefono", e.target.value)
            }
            className="w-full rounded-lg bg-slate-800 p-3"
          />
        </div>

        <div>
          <label className="mb-2 block">
            Ciudad
          </label>

          <input
            value={guia.ciudad || ""}
            onChange={(e) =>
              cambiarCampo("ciudad", e.target.value)
            }
            className="w-full rounded-lg bg-slate-800 p-3"
          />
        </div>

        <div>
          <label className="mb-2 block">
            Dirección
          </label>

          <input
            value={guia.direccion || ""}
            onChange={(e) =>
              cambiarCampo("direccion", e.target.value)
            }
            className="w-full rounded-lg bg-slate-800 p-3"
          />
        </div>

        <div>
          <label className="mb-2 block">
            Estado
          </label>

          <input
            value={guia.estado || ""}
            onChange={(e) =>
              cambiarCampo("estado", e.target.value)
            }
            className="w-full rounded-lg bg-slate-800 p-3"
          />
        </div>

        <button
          type="button"
          onClick={guardarCambios}
          disabled={guardando}
          className="rounded-xl bg-orange-500 px-8 py-3 font-bold hover:bg-orange-600 disabled:opacity-50"
        >
          {guardando
            ? "Guardando..."
            : "💾 Guardar Cambios"}
        </button>
      </div>
    </main>
  );
}