"use client";

import { useEffect, useState } from "react";
import PageLayout from "@/components/layout/PageLayout";
import Input from "@/components/ui/Input";
import Card from "@/components/ui/Card";
import Badge from "@/components/ui/Badge";

type Cliente = {
  id: number | string;
  nombre: string;
  telefono?: string | null;
  correo?: string | null;
  ciudad?: string | null;
  direccion?: string | null;
  total_envios?: number | null;
};

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

export default function ServicioClientePage() {
  const [busqueda, setBusqueda] = useState("");
  const [clientes, setClientes] = useState<Cliente[]>([]);
  const [guias, setGuias] = useState<Guia[]>([]);
  const [cargando, setCargando] = useState(false);
  const [buscado, setBuscado] = useState(false);

  async function buscar() {
    const q = busqueda.trim();

    if (q.length < 2) {
      setClientes([]);
      setGuias([]);
      setBuscado(false);
      return;
    }

    setCargando(true);
    setBuscado(true);

    try {
      const response = await fetch(
        `/cargoerp/api/servicio-cliente?q=${encodeURIComponent(q)}`
      );
      const data = await response.json();

      if (!response.ok) {
        console.error(data.error || "Error en la búsqueda");
        setClientes([]);
        setGuias([]);
      } else {
        setClientes(data.clientes || []);
        setGuias(data.guias || []);
      }
    } catch (error) {
      console.error("Error buscando:", error);
      setClientes([]);
      setGuias([]);
    } finally {
      setCargando(false);
    }
  }

  useEffect(() => {
    const timeout = setTimeout(() => {
      buscar();
    }, 400);

    return () => clearTimeout(timeout);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [busqueda]);

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

  function guiasDeCliente(cliente: Cliente) {
    return guias.filter((g) => {
      const coincideNombre =
        cliente.nombre &&
        g.cliente &&
        g.cliente.toLowerCase() === cliente.nombre.toLowerCase();
      const coincideTelefono =
        cliente.telefono && g.telefono === cliente.telefono;
      return coincideNombre || coincideTelefono;
    });
  }

  return (
    <PageLayout>
      <div className="mb-5">
        <h1 className="text-xl font-black text-[var(--text-primary)] sm:text-2xl">
          Servicio al Cliente
        </h1>
        <p className="text-sm text-[var(--text-muted)]">
          Consulta clientes, guías y estados de envío
        </p>
      </div>

      <Card className="mb-5">
        <Input
          label="Buscar cliente, teléfono, ciudad, guía..."
          placeholder="Ejemplo: María, Olanchito, 9999, HCE000123..."
          value={busqueda}
          onChange={(e) => setBusqueda(e.target.value)}
          leftIcon={<IconSearch />}
        />
      </Card>

      {cargando && (
        <p className="py-6 text-center text-sm text-[var(--text-muted)]">
          Buscando...
        </p>
      )}

      {!cargando && buscado && clientes.length === 0 && guias.length === 0 && (
        <Card>
          <p className="text-center text-sm text-[var(--text-muted)]">
            No se encontraron resultados para "{busqueda}".
          </p>
        </Card>
      )}

      <div className="grid gap-4 lg:grid-cols-2">
        {clientes.map((cliente) => (
          <Card key={cliente.id}>
            <div className="mb-3 flex items-start justify-between gap-3">
              <div>
                <h2 className="text-base font-bold text-[var(--text-primary)]">
                  {cliente.nombre}
                </h2>
                <p className="text-xs text-[var(--text-muted)]">
                  {cliente.ciudad || "Sin ciudad"} {cliente.telefono && `· ${cliente.telefono}`}
                </p>
              </div>
              <Badge variant="info" size="sm">
                Cliente
              </Badge>
            </div>

            <div className="mb-4 space-y-1 text-sm text-[var(--text-secondary)]">
              {cliente.telefono && (
                <p>
                  <span className="text-[var(--text-muted)]">Teléfono:</span> {cliente.telefono}
                </p>
              )}
              {cliente.correo && (
                <p>
                  <span className="text-[var(--text-muted)]">Correo:</span> {cliente.correo}
                </p>
              )}
              {cliente.direccion && (
                <p>
                  <span className="text-[var(--text-muted)]">Dirección:</span> {cliente.direccion}
                </p>
              )}
            </div>

            <div>
              <h3 className="mb-2 text-xs font-bold uppercase tracking-wider text-[var(--text-muted)]">
                Guías
              </h3>
              {guiasDeCliente(cliente).length === 0 ? (
                <p className="text-sm text-[var(--text-muted)]">
                  No hay guías registradas para este cliente.
                </p>
              ) : (
                <div className="space-y-2">
                  {guiasDeCliente(cliente).map((guia) => (
                    <div
                      key={guia.id}
                      className="flex items-center justify-between rounded-lg border border-[var(--border)] bg-[var(--bg-primary)] p-2"
                    >
                      <div>
                        <p className="text-sm font-semibold text-[var(--text-primary)]">
                          {numeroGuia(guia)}
                        </p>
                        <p className="text-xs text-[var(--text-muted)]">
                          {guia.ciudad || "-"}
                        </p>
                      </div>
                      <Badge variant={varianteEstado(guia.estado)} size="sm">
                        {guia.estado || "Registrada"}
                      </Badge>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </Card>
        ))}

        {guias
          .filter((guia) => !clientes.some((c) => c.nombre === guia.cliente))
          .map((guia) => (
            <Card key={guia.id}>
              <div className="mb-3 flex items-start justify-between gap-3">
                <div>
                  <h2 className="text-base font-bold text-[var(--text-primary)]">
                    {numeroGuia(guia)}
                  </h2>
                  <p className="text-xs text-[var(--text-muted)]">
                    {guia.cliente || "Cliente no identificado"}
                  </p>
                </div>
                <Badge variant={varianteEstado(guia.estado)} size="sm">
                  {guia.estado || "Registrada"}
                </Badge>
              </div>

              <div className="space-y-1 text-sm text-[var(--text-secondary)]">
                {guia.telefono && (
                  <p>
                    <span className="text-[var(--text-muted)]">Teléfono:</span> {guia.telefono}
                  </p>
                )}
                {guia.ciudad && (
                  <p>
                    <span className="text-[var(--text-muted)]">Ciudad:</span> {guia.ciudad}
                  </p>
                )}
                {guia.direccion && (
                  <p>
                    <span className="text-[var(--text-muted)]">Dirección:</span> {guia.direccion}
                  </p>
                )}
                {guia.created_at && (
                  <p>
                    <span className="text-[var(--text-muted)]">Fecha:</span>{" "}
                    {new Date(guia.created_at).toLocaleString("es-HN")}
                  </p>
                )}
              </div>
            </Card>
          ))}
      </div>
    </PageLayout>
  );
}

function varianteEstado(estado?: string): any {
  const e = String(estado || "").toLowerCase();
  if (e.includes("entregada")) return "success";
  if (e.includes("ruta") || e.includes("en_ruta")) return "orange";
  if (e.includes("honduras") || e.includes("llego")) return "purple";
  if (e.includes("contenedor") || e.includes("transito")) return "info";
  if (e.includes("bodega")) return "warning";
  return "default";
}

function IconSearch() {
  return (
    <svg className="h-4 w-4" 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>
  );
}