"use client";

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

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

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

const CAMPOS: { label: string; key: keyof Guia; accent?: boolean }[] = [
  { label: "Cliente", key: "cliente" },
  { label: "Teléfono", key: "telefono" },
  { label: "Correo", key: "correo" },
  { label: "Ciudad", key: "ciudad" },
  { label: "Dirección", key: "direccion" },
  { label: "Estado", key: "estado", accent: true },
  { label: "Fecha", key: "fecha" },
];

export default function DetalleGuiaPage() {
  const params = useParams();
  const id = Array.isArray(params?.id) ? params.id[0] : params?.id;

  const [guia, setGuia] = useState<Guia | null>(null);
  const [cajas, setCajas] = useState<Caja[]>([]);
  const [loading, setLoading] = useState(true);
  const [errorCarga, setErrorCarga] = useState("");

  useEffect(() => {
    if (!id) {
      setLoading(false);
      setErrorCarga("No se recibió un ID válido para la guía.");
      return;
    }
    cargarGuia();
  }, [id]);

  async function cargarGuia() {
    try {
      setLoading(true);
      setErrorCarga("");

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

      if (guiaError) throw new Error(guiaError.message);
      if (!guiaData) throw new Error(`No se encontró ninguna guía con el ID ${id}.`);

      setGuia(guiaData);

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

      if (cajasError) {
        console.warn("No se pudieron cargar las cajas:", cajasError.message);
        setCajas([]);
      } else {
        setCajas(cajasData || []);
      }
    } catch (error: any) {
      setErrorCarga(error?.message || "Ocurrió un error al cargar la guía.");
      setGuia(null);
      setCajas([]);
    } finally {
      setLoading(false);
    }
  }

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

  function obtenerFecha() {
    const fecha = guia?.fecha || guia?.created_at;
    if (!fecha) return "";
    try {
      return new Date(fecha).toLocaleString("es-HN");
    } catch {
      return fecha;
    }
  }

  function imprimirEtiqueta() {
    if (!guia) return;
    window.open(`/cargoerp/etiquetas/${guia.id}`, "_blank");
  }

  function enviarPorCorreo() {
    if (!guia) return;
    const numeroGuia = obtenerNumeroGuia();
    const correo = guia.correo || guia.email || "";

    if (!correo) {
      alert("Esta guía no tiene un correo electrónico registrado para el cliente.");
      return;
    }

    const asunto = encodeURIComponent(`Información de envío - ${numeroGuia}`);
    const mensaje = encodeURIComponent(
      `Hola ${guia.cliente || ""},\n\nLe compartimos la información de su envío con Honduras Cargo Express.\n\nNúmero de guía: ${numeroGuia}\nEstado: ${guia.estado || "Recibida"}\nCiudad: ${guia.ciudad || "-"}\nDirección: ${guia.direccion || "-"}\nTeléfono: ${guia.telefono || "-"}\n\nPuede comunicarse con nosotros para cualquier consulta sobre su envío.\n\nHonduras Cargo Express`
    );

    window.location.href = `mailto:${correo}?subject=${asunto}&body=${mensaje}`;
  }

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

  if (errorCarga || !guia) {
    return (
      <PageLayout>
        <div className="space-y-4">
          <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="mt-1 text-sm">{errorCarga || "No se encontró la guía."}</p>
            <Button size="sm" className="mt-3" onClick={cargarGuia}>
              Reintentar
            </Button>
          </Card>
        </div>
      </PageLayout>
    );
  }

  const numeroGuia = obtenerNumeroGuia();
  const correoCliente = guia.correo || guia.email || "";

  return (
    <PageLayout>
      {/* Header */}
      <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
        <div>
          <div className="flex items-center gap-2">
            <Link href="/guias">
              <Button variant="ghost" size="sm" leftIcon={<IconArrowLeft />}>
                Volver
              </Button>
            </Link>
            <h1 className="text-lg font-black text-[var(--text-primary)] sm:text-xl">
              {numeroGuia}
            </h1>
          </div>
          <p className="mt-0.5 text-xs text-[var(--text-muted)]">
            Detalle del envío
          </p>
        </div>

        <div className="flex flex-wrap gap-2">
          <Button size="sm" variant="outline" leftIcon={<IconMail />} onClick={enviarPorCorreo}>
            Correo
          </Button>
          <Button size="sm" variant="secondary" leftIcon={<IconTag />} onClick={imprimirEtiqueta}>
            Etiqueta
          </Button>
          <Link href={`/guias/${guia.id}/editar`}>
            <Button size="sm" leftIcon={<IconPencil />}>
              Editar
            </Button>
          </Link>
        </div>
      </div>

      {/* Información */}
      <Card className="mb-4" padding="sm">
        <h2 className="mb-3 text-xs font-black uppercase tracking-wider text-[var(--text-muted)]">
          Información del envío
        </h2>
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
          {CAMPOS.map((campo) => {
            const raw =
              campo.key === "fecha"
                ? obtenerFecha()
                : campo.key === "correo"
                ? correoCliente || "-"
                : (guia[campo.key] as string) || "-";
            return (
              <div key={campo.key}>
                <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
                  {campo.label}
                </p>
                <p
                  className={`mt-0.5 text-sm font-semibold ${
                    campo.accent ? "text-[var(--accent)]" : "text-[var(--text-primary)]"
                  }`}
                >
                  {raw}
                </p>
              </div>
            );
          })}
          <div>
            <p className="text-[10px] font-bold uppercase tracking-wider text-[var(--text-muted)]">
              Cajas
            </p>
            <p className="mt-0.5 text-sm font-semibold text-[var(--text-primary)]">{cajas.length}</p>
          </div>
        </div>
      </Card>

      {/* Cajas */}
      <Card padding="sm">
        <h2 className="mb-3 text-xs font-black uppercase tracking-wider text-[var(--text-muted)]">
          Cajas ({cajas.length})
        </h2>

        {cajas.length === 0 ? (
          <p className="text-sm text-[var(--text-muted)]">
            No hay cajas registradas para esta guía.
          </p>
        ) : (
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
            {cajas.map((caja, index) => {
              const numeroCaja = caja.numero_caja || index + 1;
              return (
                <div
                  key={String(caja.id)}
                  className="rounded-xl 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 #{numeroCaja}
                    </p>
                    <Badge variant="outline" size="sm">
                      {caja.largo || "-"}" × {caja.ancho || "-"}" × {caja.alto || "-"}"
                    </Badge>
                  </div>
                  <div className="grid grid-cols-2 gap-2 text-xs">
                    <div>
                      <span className="text-[var(--text-muted)]">Largo:</span>{" "}
                      <span className="font-semibold text-[var(--text-primary)]">
                        {caja.largo || "-"}"
                      </span>
                    </div>
                    <div>
                      <span className="text-[var(--text-muted)]">Ancho:</span>{" "}
                      <span className="font-semibold text-[var(--text-primary)]">
                        {caja.ancho || "-"}"
                      </span>
                    </div>
                    <div>
                      <span className="text-[var(--text-muted)]">Alto:</span>{" "}
                      <span className="font-semibold text-[var(--text-primary)]">
                        {caja.alto || "-"}"
                      </span>
                    </div>
                    <div>
                      <span className="text-[var(--text-muted)]">Peso:</span>{" "}
                      <span className="font-semibold text-[var(--text-primary)]">
                        {caja.peso || "-"}
                      </span>
                    </div>
                  </div>
                  {caja.descripcion && (
                    <p className="mt-2 text-xs text-[var(--text-secondary)]">
                      {caja.descripcion}
                    </p>
                  )}
                </div>
              );
            })}
          </div>
        )}
      </Card>
    </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>
  );
}

function IconMail() {
  return (
    <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
    </svg>
  );
}

function IconTag() {
  return (
    <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
    </svg>
  );
}

function IconPencil() {
  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.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
    </svg>
  );
}