"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
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 Badge from "@/components/ui/Badge";
import Card from "@/components/ui/Card";

type Guia = {
  id: number | string;
  numero?: string;
  numero_guia?: string;
  cliente?: string;
  ciudad?: string;
  estado?: string;
  fecha?: string;
  created_at?: string;
  telefono?: string;
};

const NUEVOS_ESTADOS = [
  { value: "EN_BODEGA", label: "En bodega", variant: "warning" as const },
  { value: "EN_CONTENEDOR", label: "En contenedor", variant: "info" as const },
  { value: "LLEGO_HONDURAS", label: "Llegó a Honduras", variant: "purple" as const },
  { value: "EN_RUTA", label: "En ruta", variant: "orange" as const },
  { value: "ENTREGADA", label: "Entregada", variant: "success" as const },
];

const ESTADOS_HISTORICOS = ["Recibida", "En tránsito"];

const ESTADOS_OPCIONES = [
  { value: "", label: "Todos los estados" },
  ...NUEVOS_ESTADOS.map((e) => ({ value: e.value, label: e.label })),
  { value: "HISTORICO", label: "Histórico" },
];

const ESTADO_SELECT_OPCIONES = [
  { value: "", label: "Cambiar estado...", disabled: true },
  ...NUEVOS_ESTADOS.map((e) => ({ value: e.value, label: e.label })),
];

function obtenerNumeroGuia(guia: Guia) {
  return guia.numero_guia || guia.numero || `HCE-${guia.id}`;
}

function obtenerFecha(guia: Guia) {
  return guia.fecha || guia.created_at || "";
}

function formatearFecha(fecha: string) {
  if (!fecha) return "-";
  const fechaConvertida = new Date(fecha);
  if (Number.isNaN(fechaConvertida.getTime())) return "-";

  return fechaConvertida.toLocaleString("es-HN", {
    day: "2-digit",
    month: "short",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  });
}

function esEstadoNuevo(estado?: string) {
  return NUEVOS_ESTADOS.some((e) => e.value === estado);
}

function esEstadoHistorico(estado?: string) {
  const normalizado = (estado || "").trim();
  return ESTADOS_HISTORICOS.some(
    (h) => h.toLowerCase() === normalizado.toLowerCase()
  );
}

function obtenerInfoEstado(estado?: string) {
  const encontrado = NUEVOS_ESTADOS.find((e) => e.value === estado);
  if (encontrado) return encontrado;
  return { value: estado || "", label: estado || "Sin estado", variant: "default" as const };
}

export default function GuiasPage() {
  const [guias, setGuias] = useState<Guia[]>([]);
  const [loading, setLoading] = useState(true);
  const [errorCarga, setErrorCarga] = useState("");
  const [busqueda, setBusqueda] = useState("");
  const [filtroEstado, setFiltroEstado] = useState("");

  const cargarGuias = useCallback(async () => {
    setLoading(true);
    setErrorCarga("");

    try {
      const consulta = supabase.from("hce_guias").select("*");
      const timeout = new Promise<never>((_, reject) => {
        setTimeout(() => {
          reject(
            new Error("La consulta tardó demasiado tiempo. Revisa la conexión con Supabase.")
          );
        }, 10000);
      });

      const resultado = await Promise.race([consulta, timeout]);
      const { data, error } = resultado;

      if (error) throw new Error(error.message);

      const guiasRecibidas: Guia[] = Array.isArray(data) ? data : [];
      const guiasOrdenadas = [...guiasRecibidas].sort((a, b) => {
        const fechaA = new Date(obtenerFecha(a) || 0).getTime();
        const fechaB = new Date(obtenerFecha(b) || 0).getTime();
        return fechaB - fechaA;
      });

      setGuias(guiasOrdenadas);
    } catch (error: unknown) {
      console.error("ERROR CARGANDO GUIAS:", error);
      const mensaje = error instanceof Error ? error.message : "Ocurrió un error desconocido.";
      setErrorCarga(mensaje);
      setGuias([]);
    } finally {
      setLoading(false);
    }
  }, []);

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

  async function cambiarEstado(id: number | string, nuevoEstado: string) {
    if (!nuevoEstado) return;

    const estadoAnterior = guias.find((guia) => String(guia.id) === String(id))?.estado;

    setGuias((actuales) =>
      actuales.map((guia) =>
        String(guia.id) === String(id) ? { ...guia, estado: nuevoEstado } : guia
      )
    );

    const { error } = await supabase
      .from("hce_guias")
      .update({ estado: nuevoEstado })
      .eq("id", id);

    if (error) {
      console.error("Error actualizando estado:", error);
      setGuias((actuales) =>
        actuales.map((guia) =>
          String(guia.id) === String(id) ? { ...guia, estado: estadoAnterior } : guia
        )
      );
      alert("No se pudo actualizar el estado: " + error.message);
    }
  }

  async function eliminarGuia(id: number | string, numero: string) {
    const confirmar = window.confirm(`¿Seguro que deseas eliminar la guía ${numero}?`);
    if (!confirmar) return;

    try {
      const respuesta = await fetch(`/cargoerp/api/guias/${id}`, {
        method: "DELETE",
        credentials: "same-origin",
      });

      let resultado: { success?: boolean; error?: string } = {};
      try {
        resultado = await respuesta.json();
      } catch {
        throw new Error(
          respuesta.status >= 500
            ? `Error del servidor (${respuesta.status}). Intenta nuevamente.`
            : `Error inesperado (${respuesta.status}). Contacta al administrador.`
        );
      }

      if (!respuesta.ok || !resultado.success) {
        throw new Error(resultado.error || `Error al eliminar la guía (${respuesta.status}).`);
      }

      setGuias((actuales) => actuales.filter((guia) => String(guia.id) !== String(id)));
    } catch (error: unknown) {
      const mensaje = error instanceof Error ? error.message : "Error desconocido";
      alert("No se pudo eliminar la guía: " + mensaje);
    }
  }

  const guiasFiltradas = useMemo(() => {
    const termino = busqueda.trim().toLowerCase();

    return guias.filter((guia) => {
      const coincideBusqueda =
        !termino ||
        obtenerNumeroGuia(guia).toLowerCase().includes(termino) ||
        (guia.cliente || "").toLowerCase().includes(termino) ||
        (guia.ciudad || "").toLowerCase().includes(termino) ||
        (guia.telefono || "").toLowerCase().includes(termino);

      const coincideEstado =
        !filtroEstado ||
        (filtroEstado === "HISTORICO"
          ? !esEstadoNuevo(guia.estado)
          : guia.estado === filtroEstado);

      return coincideBusqueda && coincideEstado;
    });
  }, [guias, busqueda, filtroEstado]);

  return (
    <PageLayout>
      {/* Header de página */}
      <section className="mb-3 flex flex-col gap-2 lg:mb-4 lg:flex-row lg:items-center lg:justify-between">
        <div>
          <h1 className="text-base font-black text-[var(--text-primary)] lg:text-lg">
            Guías
          </h1>
          <p className="mt-0 text-[11px] text-[var(--text-muted)]">
            Administración de envíos de Honduras Cargo Express
          </p>
        </div>

        <Link href="/guias/nueva">
          <Button size="sm" leftIcon={<IconPlus className="h-4 w-4" />} className="w-full sm:w-auto">
            Nueva guía
          </Button>
        </Link>
      </section>

      {/* Error */}
      {errorCarga && (
        <div className="mb-3 rounded-xl border border-red-500/40 bg-red-500/10 p-2.5 text-xs font-medium text-red-400">
          <div className="flex items-start gap-2">
            <svg className="mt-0.5 h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
            <div className="min-w-0 flex-1">
              <strong className="text-xs">Error al cargar las guías</strong>
              <p className="mt-0.5 break-words">{errorCarga}</p>
              <Button variant="danger" size="sm" onClick={cargarGuias} className="mt-1.5 h-7 px-2.5 text-[11px]">
                Reintentar
              </Button>
            </div>
          </div>
        </div>
      )}

      {/* Filtros */}
      <Card className="mb-3" padding="sm">
        <div className="flex flex-col gap-2 md:flex-row md:items-end">
          <div className="flex-1">
            <Input
              placeholder="Buscar por guía, cliente o ciudad..."
              value={busqueda}
              onChange={(e) => setBusqueda(e.target.value)}
              leftIcon={<IconLupa className="h-4 w-4" />}
              className="text-sm"
            />
          </div>
          <div className="w-full md:w-48">
            <Select
              options={ESTADOS_OPCIONES}
              value={filtroEstado}
              onChange={(e) => setFiltroEstado(e.target.value)}
              className="text-sm"
            />
          </div>
        </div>
      </Card>

      {/* Loading */}
      {loading && (
        <Card className="flex items-center gap-2.5 p-3">
          <div className="h-6 w-6 animate-spin rounded-full border-2 border-[var(--border)] border-t-[var(--accent)]" />
          <div>
            <p className="text-xs font-bold text-[var(--text-primary)]">Cargando guías...</p>
            <p className="text-[10px] text-[var(--text-muted)]">Consultando Honduras Cargo Express</p>
          </div>
        </Card>
      )}

      {/* Desktop: Tabla */}
      {!loading && !errorCarga && guiasFiltradas.length > 0 && (
        <Card className="hidden overflow-hidden p-0 lg:block" padding="none">
          <div className="overflow-x-auto">
            <table className="w-full min-w-[680px] text-left">
              <thead className="bg-[var(--bg-secondary)] text-[10px] font-black uppercase tracking-wider text-[var(--text-secondary)]">
                <tr>
                  <th className="whitespace-nowrap px-3 py-2">Guía</th>
                  <th className="min-w-0 px-3 py-2">Cliente</th>
                  <th className="whitespace-nowrap px-3 py-2">Ciudad</th>
                  <th className="whitespace-nowrap px-3 py-2">Estado</th>
                  <th className="whitespace-nowrap px-3 py-2">Fecha</th>
                  <th className="whitespace-nowrap px-3 py-2 text-center">Acciones</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-[var(--border)] text-xs">
                {guiasFiltradas.map((guia) => {
                  const numeroGuia = obtenerNumeroGuia(guia);
                  const infoEstado = obtenerInfoEstado(guia.estado);
                  const historico = !esEstadoNuevo(guia.estado);

                  return (
                    <tr
                      key={String(guia.id)}
                      className="transition hover:bg-[var(--bg-secondary)]/50"
                    >
                      <td className="whitespace-nowrap px-3 py-2 text-xs font-black text-[var(--accent)]">
                        {numeroGuia}
                      </td>
                      <td className="max-w-[160px] truncate px-3 py-2 text-xs text-[var(--text-primary)]">
                        {guia.cliente || "-"}
                      </td>
                      <td className="whitespace-nowrap px-3 py-2 text-xs text-[var(--text-secondary)]">
                        {guia.ciudad || "-"}
                      </td>
                      <td className="whitespace-nowrap px-3 py-2">
                        <div className="flex flex-col gap-1">
                          {historico && (
                            <div className="flex items-center gap-1.5">
                              <Badge variant="default" size="sm">{guia.estado || "Sin estado"}</Badge>
                              <span className="text-[9px] text-[var(--text-muted)]">histórico</span>
                            </div>
                          )}
                          {!historico && <Badge variant={infoEstado.variant} size="sm">{infoEstado.label}</Badge>}
                          <div className="w-32">
                            <Select
                              options={ESTADO_SELECT_OPCIONES}
                              value={guia.estado || ""}
                              onChange={(e) => cambiarEstado(guia.id, e.target.value)}
                              className="text-xs"
                            />
                          </div>
                        </div>
                      </td>
                      <td className="whitespace-nowrap px-3 py-2 text-[11px] text-[var(--text-muted)]">
                        {formatearFecha(obtenerFecha(guia))}
                      </td>
                      <td className="px-2 py-2">
                        <div className="flex items-center justify-center gap-1">
                          <Link href={`/guias/${guia.id}`}>
                            <Button variant="secondary" size="sm" leftIcon={<IconOjo className="h-3 w-3" />} className="h-7 px-2 text-[11px]">
                              Ver
                            </Button>
                          </Link>
                          <Link href={`/guias/${guia.id}/editar`}>
                            <Button variant="outline" size="sm" leftIcon={<IconEditar className="h-3 w-3" />} className="h-7 px-2 text-[11px]">
                              Editar
                            </Button>
                          </Link>
                          <Button
                            variant="danger"
                            size="sm"
                            leftIcon={<IconBorrar className="h-3 w-3" />}
                            onClick={() => eliminarGuia(guia.id, numeroGuia)}
                            className="h-7 px-2 text-[11px]"
                          >
                            Eliminar
                          </Button>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </Card>
      )}

      {/* Mobile: Cards */}
      {!loading && !errorCarga && guiasFiltradas.length > 0 && (
        <div className="grid gap-2 lg:hidden">
          {guiasFiltradas.map((guia) => {
            const numeroGuia = obtenerNumeroGuia(guia);
            const infoEstado = obtenerInfoEstado(guia.estado);
            const historico = !esEstadoNuevo(guia.estado);

            return (
              <Card key={String(guia.id)} padding="sm" className="py-3">
                <div className="mb-2 flex items-start justify-between gap-2">
                  <div className="min-w-0">
                    <p className="text-[9px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
                      Guía
                    </p>
                    <p className="text-sm font-black text-[var(--accent)]">{numeroGuia}</p>
                  </div>
                  {historico ? (
                    <div className="shrink-0 text-right">
                      <Badge variant="default" size="sm">{guia.estado || "Sin estado"}</Badge>
                      <p className="mt-0 text-[9px] text-[var(--text-muted)]">Histórico</p>
                    </div>
                  ) : (
                    <Badge variant={infoEstado.variant} size="sm">{infoEstado.label}</Badge>
                  )}
                </div>

                <div className="mb-2">
                  <Select
                    options={ESTADO_SELECT_OPCIONES}
                    value={guia.estado || ""}
                    onChange={(e) => cambiarEstado(guia.id, e.target.value)}
                    className="text-xs"
                  />
                </div>

                <div className="mb-2 grid gap-1.5">
                  <div>
                    <p className="text-[9px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
                      Cliente
                    </p>
                    <p className="text-xs font-semibold text-[var(--text-primary)]">{guia.cliente || "-"}</p>
                  </div>
                  <div className="grid grid-cols-2 gap-2">
                    <div>
                      <p className="text-[9px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
                        Ciudad
                      </p>
                      <p className="text-[11px] text-[var(--text-secondary)]">{guia.ciudad || "-"}</p>
                    </div>
                    <div>
                      <p className="text-[9px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
                        Fecha
                      </p>
                      <p className="text-[11px] text-[var(--text-secondary)]">
                        {formatearFecha(obtenerFecha(guia))}
                      </p>
                    </div>
                  </div>
                </div>

                <div className="grid grid-cols-3 gap-1">
                  <Link href={`/guias/${guia.id}`} className="contents">
                    <Button variant="secondary" size="sm" fullWidth leftIcon={<IconOjo className="h-3 w-3" />} className="h-8 text-[10px]">
                      Ver
                    </Button>
                  </Link>
                  <Link href={`/guias/${guia.id}/editar`} className="contents">
                    <Button variant="outline" size="sm" fullWidth leftIcon={<IconEditar className="h-3 w-3" />} className="h-8 text-[10px]">
                      Editar
                    </Button>
                  </Link>
                  <Button
                    variant="danger"
                    size="sm"
                    fullWidth
                    leftIcon={<IconBorrar className="h-3 w-3" />}
                    onClick={() => eliminarGuia(guia.id, numeroGuia)}
                    className="h-8 text-[10px]"
                  >
                    Eliminar
                  </Button>
                </div>
              </Card>
            );
          })}
        </div>
      )}

      {/* Empty state */}
      {!loading && !errorCarga && guiasFiltradas.length === 0 && (
        <Card className="p-5 text-center" padding="sm">
          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-[var(--bg-secondary)] text-2xl text-[var(--text-muted)]">
            📭
          </div>
          <h3 className="mt-3 text-sm font-black text-[var(--text-primary)]">
            No se encontraron guías
          </h3>
          <p className="mt-0.5 text-[11px] text-[var(--text-muted)]">
            {guias.length === 0
              ? "Cuando registres una nueva guía aparecerá aquí."
              : "Ajusta los filtros o la búsqueda para ver resultados."}
          </p>
          {guias.length === 0 && (
            <Link href="/guias/nueva" className="mt-3 inline-block">
              <Button size="sm" leftIcon={<IconPlus className="h-4 w-4" />}>Registrar nueva guía</Button>
            </Link>
          )}
        </Card>
      )}
    </PageLayout>
  );
}

/* =============================================================
   ICONOS
============================================================= */

function IconPlus({ className = "h-5 w-5" }: { className?: string }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M12 4v16m8-8H4" />
    </svg>
  );
}

function IconLupa({ className = "h-5 w-5" }: { className?: string }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
    </svg>
  );
}

function IconOjo({ className = "h-4 w-4" }: { className?: string }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
    </svg>
  );
}

function IconEditar({ className = "h-4 w-4" }: { className?: string }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.433-4.433l1.434-1.434a2 2 0 000-2.828l-1.172-1.172a2 2 0 00-2.828 0L15 6.586M17 15l-5.707-5.707" />
    </svg>
  );
}

function IconBorrar({ className = "h-4 w-4" }: { className?: string }) {
  return (
    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
    </svg>
  );
}