"use client";

import { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import Link from "next/link";
import { supabase } from "@/lib/supabase";
import PageLayout from "@/components/layout/PageLayout";
import Button from "@/components/ui/Button";
import Input from "@/components/ui/Input";
import Select from "@/components/ui/Select";
import Card from "@/components/ui/Card";

type Guia = {
  id: string | number;
  numero?: string;
  cliente?: string;
  telefono?: string;
  correo?: string;
  ciudad?: string;
  direccion?: string;
  estado?: string;
};

type Caja = {
  id?: string | number;
  numero_caja?: number | string;
  largo: string;
  ancho: string;
  alto: string;
};

const ESTADOS = [
  { value: "Recibida", label: "Recibida" },
  { value: "EN_BODEGA", label: "En bodega" },
  { value: "EN_CONTENEDOR", label: "En contenedor" },
  { value: "En tránsito", label: "En tránsito" },
  { value: "LLEGO_HONDURAS", label: "Llegó a Honduras" },
  { value: "EN_RUTA", label: "En ruta" },
  { value: "ENTREGADA", label: "Entregada" },
];

export default function EditarGuiaPage() {
  const params = useParams();
  const router = useRouter();
  const id = params.id as string;

  const [guia, setGuia] = useState<Guia | null>(null);
  const [cajas, setCajas] = useState<Caja[]>([]);
  const [cajasEliminadas, setCajasEliminadas] = useState<Array<string | number>>([]);
  const [cargando, setCargando] = useState(true);
  const [guardando, setGuardando] = useState(false);
  const [error, setError] = useState("");

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

  async function cargarGuia() {
    try {
      setCargando(true);
      setError("");

      const { data: guiaData, error: guiaError } = await supabase
        .from("hce_guias")
        .select("*")
        .eq("id", id)
        .single();

      if (guiaError) throw guiaError;
      setGuia(guiaData as Guia);

      const { data: cajasData, error: cajasError } = await supabase
        .from("hce_cajas")
        .select("*")
        .eq("guia_id", id)
        .order("numero_caja", { ascending: true });

      if (cajasError) throw cajasError;

      setCajas(
        (cajasData || []).map((c: any) => ({
          id: c.id,
          numero_caja: c.numero_caja,
          largo: c.largo != null ? String(c.largo) : "",
          ancho: c.ancho != null ? String(c.ancho) : "",
          alto: c.alto != null ? String(c.alto) : "",
        }))
      );
    } catch (err: any) {
      console.error("Error cargando guía:", err);
      setError(err?.message || "Error cargando guía");
    } finally {
      setCargando(false);
    }
  }

  function cambiarCampo(campo: keyof Guia, valor: string) {
    setGuia((prev) => (prev ? { ...prev, [campo]: valor } : null));
  }

  function cambiarCaja(index: number, campo: keyof Caja, valor: string) {
    setCajas((prev) => {
      const copia = [...prev];
      copia[index] = { ...copia[index], [campo]: valor };
      return copia;
    });
  }

  function agregarCaja() {
    setCajas((prev) => [
      ...prev,
      { largo: "", ancho: "", alto: "" },
    ]);
  }

  function eliminarCaja(index: number) {
    const caja = cajas[index];
    if (!caja) return;

    const mensaje = caja.id
      ? `¿Eliminar la Caja #${index + 1}? Esta acción no se puede deshacer.`
      : `¿Quitar la Caja #${index + 1} del formulario?`;

    if (!window.confirm(mensaje)) return;

    setCajas((prev) => {
      const copia = [...prev];
      copia.splice(index, 1);
      return copia;
    });

    if (caja.id) {
      setCajasEliminadas((prev) => [...prev, caja.id!]);
    }
  }

  function esIdValido(id: unknown): id is string | number {
    if (id == null) return false;
    const numero = Number(id);
    return Number.isFinite(numero) && numero > 0;
  }

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

    for (let i = 0; i < cajas.length; i++) {
      const caja = cajas[i];
      const largo = Number(caja.largo);
      const ancho = Number(caja.ancho);
      const alto = Number(caja.alto);

      if (
        !Number.isFinite(largo) ||
        !Number.isFinite(ancho) ||
        !Number.isFinite(alto) ||
        largo <= 0 ||
        ancho <= 0 ||
        alto <= 0
      ) {
        setError(`Debes ingresar medidas válidas para la Caja #${i + 1}.`);
        return;
      }
    }

    setGuardando(true);
    setError("");

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

      if (guiaError) throw guiaError;

      if (cajasEliminadas.length > 0) {
        const { error: eliminarError } = await supabase
          .from("hce_cajas")
          .delete()
          .in("id", cajasEliminadas);

        if (eliminarError) throw eliminarError;
      }

      const cajasNuevas: Record<string, unknown>[] = [];

      for (let i = 0; i < cajas.length; i++) {
        const caja = cajas[i];
        const numero_caja = i + 1;
        const medidas = {
          numero_caja,
          largo: Number(caja.largo),
          ancho: Number(caja.ancho),
          alto: Number(caja.alto),
        };

        if (esIdValido(caja.id)) {
          const { error: updateError } = await supabase
            .from("hce_cajas")
            .update(medidas)
            .eq("id", caja.id);

          if (updateError) throw updateError;
        } else {
          cajasNuevas.push({
            guia_id: id,
            ...medidas,
          });
        }
      }

      if (cajasNuevas.length > 0) {
        const { error: insertError, data: insertData } = await supabase
          .from("hce_cajas")
          .insert(cajasNuevas)
          .select("id");

        if (insertError) {
          console.error("Error insertando cajas nuevas:", insertError);
          throw insertError;
        }

        console.log("Cajas nuevas insertadas:", insertData);
      }

      setCajasEliminadas([]);
      alert("Guía y cajas actualizadas correctamente");
      await cargarGuia();
    } catch (err: any) {
      console.error("Error guardando cambios:", err);
      setError(err?.message || "Error al guardar los cambios");
    } finally {
      setGuardando(false);
    }
  }

  if (cargando) {
    return (
      <PageLayout>
        <Card className="py-8 text-center text-sm text-[var(--text-muted)]">
          Cargando guía...
        </Card>
      </PageLayout>
    );
  }

  if (error || !guia) {
    return (
      <PageLayout>
        <div className="space-y-3">
          <Link href="/guias">
            <Button variant="secondary" size="sm" leftIcon={<IconArrowLeft />}>
              Volver a Guías
            </Button>
          </Link>
          <Card className="border-red-500/30 bg-red-500/10 text-red-500">
            <h2 className="font-bold">Error al cargar la guía</h2>
            <p className="text-sm">{error || "No se encontró la guía."}</p>
            <Button size="sm" className="mt-3" onClick={cargarGuia}>
              Reintentar
            </Button>
          </Card>
        </div>
      </PageLayout>
    );
  }

  return (
    <PageLayout>
      <div className="mb-4">
        <div className="flex items-center gap-2">
          <Link href={`/guias/${id}`}>
            <Button variant="ghost" size="sm" leftIcon={<IconArrowLeft />}>
              Volver
            </Button>
          </Link>
          <h1 className="text-lg font-black text-[var(--text-primary)] sm:text-xl">
            Editar Guía {guia.numero || id}
          </h1>
        </div>
      </div>

      {error && (
        <div className="mx-auto mb-4 max-w-5xl">
          <Card className="border-red-500/30 bg-red-500/10 text-red-500" padding="sm">
            <p className="text-sm font-medium">{error}</p>
          </Card>
        </div>
      )}

      <div className="mx-auto max-w-5xl space-y-3">
        <Card className="max-w-3xl" padding="sm">
          <h2 className="mb-3 text-xs font-black uppercase tracking-wider text-[var(--text-muted)]">
            Datos de la guía
          </h2>
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
            <Input label="Número de Guía" value={guia.numero || ""} disabled />
            <Input
              label="Cliente"
              value={guia.cliente || ""}
              onChange={(e) => cambiarCampo("cliente", e.target.value)}
            />
            <Input
              label="Teléfono"
              value={guia.telefono || ""}
              onChange={(e) => cambiarCampo("telefono", e.target.value)}
            />
            <Input
              label="Correo"
              type="email"
              value={guia.correo || ""}
              onChange={(e) => cambiarCampo("correo", e.target.value)}
            />
            <Input
              label="Ciudad"
              value={guia.ciudad || ""}
              onChange={(e) => cambiarCampo("ciudad", e.target.value)}
            />
            <div className="sm:col-span-2">
              <Input
                label="Dirección"
                value={guia.direccion || ""}
                onChange={(e) => cambiarCampo("direccion", e.target.value)}
              />
            </div>
            <div className="sm:col-span-2">
              <Select
                label="Estado"
                options={ESTADOS}
                value={guia.estado || ""}
                onChange={(e) => cambiarCampo("estado", e.target.value)}
              />
            </div>
          </div>
        </Card>

        <Card padding="sm">
          <div className="mb-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <h2 className="text-xs font-black uppercase tracking-wider text-[var(--text-muted)]">
              Cajas ({cajas.length})
            </h2>
            <Button type="button" size="sm" variant="secondary" onClick={agregarCaja}>
              + Agregar caja
            </Button>
          </div>

          {cajas.length === 0 ? (
            <p className="text-sm text-[var(--text-muted)]">
              No hay cajas registradas. Puedes agregar nuevas cajas a esta guía.
            </p>
          ) : (
            <div className="space-y-2">
              {cajas.map((caja, index) => (
                <div
                  key={caja.id ? String(caja.id) : `nueva-${index}`}
                  className="rounded-lg border border-[var(--border)] bg-[var(--bg-primary)] p-3"
                >
                  <div className="mb-2 flex items-center justify-between">
                    <p className="text-xs font-bold text-[var(--text-primary)]">
                      Caja #{index + 1}
                    </p>
                    <button
                      type="button"
                      onClick={() => eliminarCaja(index)}
                      className="text-xs font-semibold text-red-500 hover:text-red-400"
                    >
                      Eliminar
                    </button>
                  </div>

                  <div className="grid grid-cols-3 gap-2">
                    <Input
                      label="Largo"
                      type="number"
                      min="0"
                      step="any"
                      placeholder="Largo"
                      value={caja.largo}
                      onChange={(e) => cambiarCaja(index, "largo", e.target.value)}
                    />
                    <Input
                      label="Ancho"
                      type="number"
                      min="0"
                      step="any"
                      placeholder="Ancho"
                      value={caja.ancho}
                      onChange={(e) => cambiarCaja(index, "ancho", e.target.value)}
                    />
                    <Input
                      label="Alto"
                      type="number"
                      min="0"
                      step="any"
                      placeholder="Alto"
                      value={caja.alto}
                      onChange={(e) => cambiarCaja(index, "alto", e.target.value)}
                    />
                  </div>


                </div>
              ))}
            </div>
          )}
        </Card>

        <div className="flex gap-2">
          <Button onClick={guardarCambios} disabled={guardando}>
            {guardando ? "Guardando..." : "Guardar Cambios"}
          </Button>
          <Link href={`/guias/${id}`}>
            <Button variant="secondary">Cancelar</Button>
          </Link>
        </div>
      </div>
    </PageLayout>
  );
}

function IconArrowLeft() {
  return (
    <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
    </svg>
  );
}