"use client";

import { useState } from "react";
import { supabase } from "@/lib/supabase";
import PageLayout from "@/components/layout/PageLayout";
import Card from "@/components/ui/Card";
import Input from "@/components/ui/Input";
import Button from "@/components/ui/Button";
import Badge from "@/components/ui/Badge";

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

const ESTADOS_NUEVOS = [
  { label: "En Bodega", key: "en bodega" },
  { label: "En Contenedor", key: "ingreso en el contenedor" },
  { label: "Llegó a Honduras", key: "llego a honduras" },
  { label: "En Ruta", key: "ruta de entrega" },
  { label: "Entregada", key: "entregada" },
];

function normalizarNumero(valor: string) {
  return String(valor || "").trim().toUpperCase().replace(/[^A-Z0-9]/g, "");
}

function formatearFecha(fecha: string | null | undefined) {
  if (!fecha) return null;

  const fechaConvertida = new Date(fecha);
  if (Number.isNaN(fechaConvertida.getTime())) return null;

  return fechaConvertida.toLocaleString("es-HN", {
    timeZone: "America/Tegucigalpa",
    dateStyle: "medium",
    timeStyle: "short",
  });
}

function obtenerEstadoKey(estado?: string | null) {
  return String(estado || "").trim().toLowerCase();
}

function obtenerInfoEstado(estado?: string | null) {
  const key = obtenerEstadoKey(estado);

  if (key.includes("recibida")) return { label: "Recibida", variante: "warning" as const, historico: true };
  if (key.includes("transito")) return { label: "En tránsito", variante: "info" as const, historico: true };

  if (key.includes("entregada")) return { label: "Entregada", variante: "success" as const, historico: false };
  if (key.includes("ruta")) return { label: "En Ruta", variante: "orange" as const, historico: false };
  if (key.includes("llego") || key.includes("honduras")) return { label: "Llegó a Honduras", variante: "purple" as const, historico: false };
  if (key.includes("contenedor")) return { label: "En Contenedor", variante: "info" as const, historico: false };
  if (key.includes("bodega")) return { label: "En Bodega", variante: "warning" as const, historico: false };

  return { label: estado || "Sin estado", variante: "default" as const, historico: true };
}

export default function RastreoPage() {
  const [numero, setNumero] = useState("");
  const [guia, setGuia] = useState<Guia | null>(null);
  const [mensaje, setMensaje] = useState("");
  const [buscando, setBuscando] = useState(false);

  async function rastrear(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();

    const numeroBuscado = normalizarNumero(numero);

    if (!numeroBuscado) {
      setGuia(null);
      setMensaje("Ingresa un número de guía.");
      return;
    }

    try {
      setBuscando(true);
      setGuia(null);
      setMensaje("");

      const { data, error } = await supabase.from("hce_guias").select("*");

      if (error) {
        console.error("ERROR BUSCANDO GUÍA:", error);
        setMensaje("Ocurrió un error al buscar la guía: " + error.message);
        return;
      }

      const guiaEncontrada = (data || []).find((item: Guia) => {
        const numero1 = normalizarNumero(item.numero || "");
        const numero2 = normalizarNumero(item.numero_guia || "");
        return numero1 === numeroBuscado || numero2 === numeroBuscado;
      });

      if (!guiaEncontrada) {
        setMensaje(`No encontramos ninguna guía con el número ${numeroBuscado}.`);
        return;
      }

      setGuia(guiaEncontrada);
    } catch (error: any) {
      console.error("ERROR GENERAL:", error);
      setMensaje(error?.message || "Ocurrió un error al buscar la guía.");
    } finally {
      setBuscando(false);
    }
  }

  const numeroGuia = guia?.numero || guia?.numero_guia || "";
  const fechaIngresoContenedor = formatearFecha(guia?.fecha_ingreso_contenedor);
  const fechaRegistro = formatearFecha(guia?.fecha || guia?.created_at);
  const infoEstado = obtenerInfoEstado(guia?.estado);

  return (
    <PageLayout>
      <section className="mb-4 lg:mb-5">
        <h1 className="text-xl font-black text-[var(--text-primary)] lg:text-2xl">
          Rastreo
        </h1>
        <p className="mt-0.5 text-xs text-[var(--text-muted)]">
          Ingresa tu número de guía para conocer el estado de tu paquete
        </p>
      </section>

      <Card padding="md" className="mx-auto max-w-2xl">
        <form onSubmit={rastrear} className="flex flex-col gap-2 sm:flex-row">
          <Input
            placeholder="Ejemplo: HCE000003"
            value={numero}
            onChange={(e) => setNumero(e.target.value.toUpperCase())}
            className="flex-1 uppercase"
            leftIcon={<IconLupa className="h-4 w-4" />}
          />
          <Button type="submit" disabled={buscando} size="sm" className="shrink-0">
            {buscando ? "Buscando..." : "Rastrear"}
          </Button>
        </form>
      </Card>

      {mensaje && (
        <Card className="mx-auto mt-4 max-w-2xl border-red-500/30 bg-red-500/10 p-4 text-center">
          <p className="text-sm text-red-500">{mensaje}</p>
        </Card>
      )}

      {guia && (
        <div className="mx-auto mt-4 max-w-2xl space-y-4">
          <Card padding="sm">
            <div className="text-center">
              <p className="text-[10px] font-black uppercase tracking-wider text-[var(--text-muted)]">
                Número de guía
              </p>
              <p className="mt-1 text-2xl font-black text-[var(--accent)]">{numeroGuia}</p>
            </div>
          </Card>

          <Card padding="sm">
            <div className="mb-4 text-center">
              <p className="text-[10px] font-black uppercase tracking-wider text-[var(--text-muted)]">
                Estado actual
              </p>
              <div className="mt-2 flex items-center justify-center gap-2">
                <Badge variant={infoEstado.variante} size="md">
                  {infoEstado.label}
                </Badge>
                {infoEstado.historico && (
                  <span className="text-[10px] text-[var(--text-muted)]">histórico</span>
                )}
              </div>
            </div>

            {/* Timeline */}
            <div className="relative mt-4 pl-3">
              <div className="absolute bottom-2 left-[11px] top-2 w-0.5 bg-[var(--border)]" />

              {ESTADOS_NUEVOS.map((estado, index) => {
                const activo = infoEstado.label === estado.label;
                const pasado =
                  ESTADOS_NUEVOS.findIndex((e) => e.label === infoEstado.label) > index;

                return (
                  <div key={estado.label} className="relative mb-3 flex items-center gap-3">
                    <div
                      className={`z-10 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 ${
                        activo || pasado
                          ? "border-[var(--accent)] bg-[var(--accent)] text-white"
                          : "border-[var(--border)] bg-[var(--card-bg)]"
                      }`}
                    >
                      {(activo || pasado) && <div className="h-1.5 w-1.5 rounded-full bg-white" />}
                    </div>
                    <span
                      className={`text-xs font-semibold ${
                        activo || pasado
                          ? "text-[var(--text-primary)]"
                          : "text-[var(--text-muted)]"
                      }`}
                    >
                      {estado.label}
                    </span>
                  </div>
                );
              })}
            </div>

            {obtenerEstadoKey(guia.estado).includes("contenedor") && fechaIngresoContenedor && (
              <div className="mt-4 rounded-lg border border-[var(--border)] bg-[var(--bg-primary)] p-3">
                <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
                  Fecha de ingreso al contenedor
                </p>
                <p className="mt-1 text-sm font-semibold text-[var(--accent)]">
                  {fechaIngresoContenedor}
                </p>
              </div>
            )}
          </Card>

          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
            <Card padding="sm">
              <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
                Cliente
              </p>
              <p className="mt-1 text-sm font-semibold text-[var(--text-primary)]">
                {guia.cliente || "No especificado"}
              </p>
            </Card>
            <Card padding="sm">
              <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
                Destino
              </p>
              <p className="mt-1 text-sm font-semibold text-[var(--text-primary)]">
                {guia.ciudad || "No especificado"}
              </p>
            </Card>
          </div>

          {fechaRegistro && (
            <Card padding="sm">
              <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
                Fecha de registro
              </p>
              <p className="mt-1 text-sm text-[var(--text-secondary)]">{fechaRegistro}</p>
            </Card>
          )}
        </div>
      )}
    </PageLayout>
  );
}

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>
  );
}