"use client";

import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { formatCop } from "@/data/products";
import { StatusPill } from "@/components/admin/NegocioShell";
import { GuideScannerInput } from "@/components/admin/GuideScannerInput";
import { useAdmin } from "@/context/AdminContext";
import { trackingUrlFor } from "@/lib/customer-orders";

type OtOrder = {
  id: string;
  display_id?: number;
  email?: string;
  total?: number;
  created_at?: string;
  status?: string;
  wompi_reference?: string | null;
  notes?: string;
  shipping_guide?: string | null;
  shipping_carrier?: string | null;
  shipping_tracking_url?: string | null;
  shipped_at?: string | null;
  shipping_address?: {
    first_name?: string;
    last_name?: string;
    phone?: string;
    address_1?: string;
    address_2?: string;
    city?: string;
    province?: string;
  } | null;
  items?: {
    id: string;
    title?: string;
    quantity?: number;
    variant_title?: string;
  }[];
};

type Counts = {
  por_alistar: number;
  alistado: number;
  despachado: number;
  all: number;
};

type Visits = {
  total: number;
  today: number;
  yesterday: number;
  week: { date: string; count: number }[];
  paths: { path: string; count: number }[];
};

const TABS: { id: string; label: string }[] = [
  { id: "por_alistar", label: "Por alistar" },
  { id: "alistado", label: "Alistados" },
  { id: "despachado", label: "Despachados" },
  { id: "all", label: "Todos" },
];

const STATUS_LABEL: Record<string, string> = {
  por_alistar: "Por alistar",
  alistado: "Alistado",
  despachado: "Despachado",
};

const CARRIERS = [
  "Servientrega",
  "Coordinadora",
  "Interrapidísimo",
  "Envía",
  "TCC",
  "Otra",
];

export default function NegocioPedidosPage() {
  const { authenticated, loading: authLoading } = useAdmin();
  const [tab, setTab] = useState("por_alistar");
  const [orders, setOrders] = useState<OtOrder[]>([]);
  const [counts, setCounts] = useState<Counts | null>(null);
  const [visits, setVisits] = useState<Visits | null>(null);
  const [loading, setLoading] = useState(false);
  const [busyId, setBusyId] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [info, setInfo] = useState<string | null>(null);
  const [shipDraft, setShipDraft] = useState<{
    id: string;
    guide: string;
    carrier: string;
    url: string;
  } | null>(null);
  const shipPanelRef = useRef<HTMLDivElement>(null);

  const load = useCallback(async (status: string) => {
    setLoading(true);
    const [ordersRes, visitsRes] = await Promise.all([
      fetch(`/api/ops/orders?status=${status}`, { cache: "no-store" }),
      fetch("/api/ops/visits", { cache: "no-store" }),
    ]);
    if (ordersRes.ok) {
      const orderData = (await ordersRes.json()) as {
        orders?: OtOrder[];
        counts?: Counts;
      };
      setOrders(orderData.orders || []);
      setCounts(orderData.counts || null);
    }
    if (visitsRes.ok) setVisits((await visitsRes.json()) as Visits);
    setLoading(false);
  }, []);

  useEffect(() => {
    if (authenticated) load(tab);
  }, [authenticated, load, tab]);

  const updateStatus = async (
    id: string,
    status: string,
    extra?: {
      shipping_guide?: string;
      shipping_carrier?: string;
      shipping_tracking_url?: string;
    }
  ) => {
    setBusyId(id);
    setError(null);
    setInfo(null);
    const res = await fetch(`/api/ops/orders/${id}/status`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ status, ...extra }),
    });
    const data = await res.json().catch(() => ({}));
    if (!res.ok) {
      setError(data.message || "No se pudo actualizar el estado");
    } else if (status === "despachado") {
      setInfo(
        `Guía ${extra?.shipping_guide || ""} registrada. El cliente ya puede ver “Seguir tu pedido” en su cuenta.`
      );
    }
    await load(tab);
    setBusyId(null);
    setShipDraft(null);
  };

  const openDespacho = (order: OtOrder) => {
    setError(null);
    setInfo(null);
    setShipDraft({
      id: order.id,
      guide: order.shipping_guide || "",
      carrier: order.shipping_carrier || "Servientrega",
      url: order.shipping_tracking_url || "",
    });
    requestAnimationFrame(() => {
      shipPanelRef.current?.scrollIntoView({
        behavior: "smooth",
        block: "start",
      });
    });
  };

  const confirmDespacho = () => {
    if (!shipDraft) return;
    const guide = shipDraft.guide.trim();
    if (!guide) {
      setError("Escanea o escribe el número de guía.");
      return;
    }
    const carrier = shipDraft.carrier.trim() || "Servientrega";
    const url =
      shipDraft.url.trim() || trackingUrlFor(carrier, guide) || "";
    void updateStatus(shipDraft.id, "despachado", {
      shipping_guide: guide,
      shipping_carrier: carrier,
      shipping_tracking_url: url,
    });
  };

  const maxWeek = useMemo(
    () => Math.max(1, ...(visits?.week.map((d) => d.count) || [1])),
    [visits]
  );

  if (authLoading || !authenticated) return null;

  return (
    <div className="space-y-8">
      <div className="flex flex-wrap items-center gap-3">
        <p className="ot-eyebrow">Fase A</p>
        <StatusPill status="activo" />
      </div>
      <div>
        <h1 className="font-serif text-4xl">Pedidos y alistado</h1>
        <p className="text-sm text-ot-muted mt-2 max-w-2xl">
          Flujo: Por alistar → Alistado → Despachado. Al despachar, escanea la
          guía: se actualiza sola en la cuenta del cliente (“Seguir tu pedido”).
        </p>
      </div>

      {error ? (
        <p className="text-sm text-red-700 border border-red-700/20 bg-red-700/[0.04] px-3 py-2">
          {error}
        </p>
      ) : null}
      {info ? (
        <p className="text-sm text-ot-green border border-ot-green/25 bg-ot-green/[0.04] px-3 py-2">
          {info}
        </p>
      ) : null}

      {shipDraft ? (
        <div
          ref={shipPanelRef}
          className="bg-white border border-ot-green/30 p-5 space-y-3 max-w-lg"
        >
          <h2 className="font-serif text-2xl">Registrar guía de envío</h2>
          <p className="text-sm text-ot-muted">
            Escanea el código de barras de la transportadora o pégalo. Al
            confirmar, el pedido pasa a Despachado y el cliente ve la guía en
            Mis pedidos.
          </p>
          <GuideScannerInput
            value={shipDraft.guide}
            autoFocus
            onChange={(guide) =>
              setShipDraft((d) => (d ? { ...d, guide } : d))
            }
            onScanComplete={(guide) => {
              setShipDraft((d) => (d ? { ...d, guide } : d));
            }}
          />
          <label className="block text-xs text-ot-muted">Transportadora</label>
          <select
            className="w-full border border-black/15 px-3 py-2.5 text-sm bg-white"
            value={shipDraft.carrier}
            onChange={(e) =>
              setShipDraft((d) =>
                d ? { ...d, carrier: e.target.value, url: "" } : d
              )
            }
          >
            {CARRIERS.map((c) => (
              <option key={c} value={c}>
                {c}
              </option>
            ))}
          </select>
          <input
            className="w-full border border-black/15 px-3 py-2.5 text-sm"
            placeholder="URL de seguimiento (opcional — se arma sola)"
            value={shipDraft.url}
            onChange={(e) =>
              setShipDraft((d) => (d ? { ...d, url: e.target.value } : d))
            }
          />
          {shipDraft.guide.trim() ? (
            <p className="text-xs text-ot-muted break-all">
              Link cliente:{" "}
              {trackingUrlFor(
                shipDraft.carrier,
                shipDraft.guide,
                shipDraft.url || null
              )}
            </p>
          ) : null}
          <div className="flex flex-wrap gap-2">
            <button
              type="button"
              className="ot-btn"
              disabled={busyId === shipDraft.id || !shipDraft.guide.trim()}
              onClick={confirmDespacho}
            >
              Confirmar despacho
            </button>
            <button
              type="button"
              className="ot-btn ot-btn-ghost"
              onClick={() => setShipDraft(null)}
            >
              Cancelar
            </button>
          </div>
        </div>
      ) : null}

      <section className="grid sm:grid-cols-2 lg:grid-cols-4 gap-3">
        <Stat label="Por alistar" value={counts?.por_alistar ?? "—"} />
        <Stat label="Alistados" value={counts?.alistado ?? "—"} />
        <Stat label="Despachados" value={counts?.despachado ?? "—"} />
        <Stat label="Pedidos totales" value={counts?.all ?? "—"} />
      </section>

      <section className="bg-white border border-black/10 p-5">
        <h2 className="font-serif text-2xl">Visitas (avance métricas)</h2>
        <div className="grid sm:grid-cols-3 gap-3 mt-4">
          <Stat label="Hoy" value={visits?.today ?? "—"} light />
          <Stat label="Ayer" value={visits?.yesterday ?? "—"} light />
          <Stat label="Acumuladas" value={visits?.total ?? "—"} light />
        </div>
        <div className="flex items-end gap-2 h-24 mt-6">
          {(visits?.week || []).map((d) => (
            <div key={d.date} className="flex-1 flex flex-col items-center gap-1">
              <div
                className="w-full bg-ot-green/80 min-h-[4px]"
                style={{ height: `${Math.round((d.count / maxWeek) * 100)}%` }}
              />
              <span className="text-[10px] text-ot-muted">{d.date.slice(5)}</span>
            </div>
          ))}
        </div>
      </section>

      <section>
        <div className="flex flex-wrap gap-2 mb-5">
          {TABS.map((t) => (
            <button
              key={t.id}
              onClick={() => setTab(t.id)}
              className={tab === t.id ? "ot-btn" : "ot-btn-ghost ot-btn"}
              type="button"
            >
              {t.label}
              {counts ? ` (${counts[t.id as keyof Counts] ?? 0})` : ""}
            </button>
          ))}
        </div>

        {loading ? (
          <p className="text-ot-muted">Cargando pedidos…</p>
        ) : !orders.length ? (
          <p className="text-ot-muted">No hay pedidos en esta bandeja.</p>
        ) : (
          <div className="space-y-4">
            {orders.map((order) => {
              const addr = order.shipping_address;
              const name = [addr?.first_name, addr?.last_name]
                .filter(Boolean)
                .join(" ");
              return (
                <article
                  key={order.id}
                  className="bg-white border border-black/10 p-5"
                >
                  <div className="flex flex-wrap justify-between gap-3">
                    <div>
                      <h3 className="font-serif text-2xl">
                        Pedido #{order.display_id || order.id.slice(-6)}
                      </h3>
                      <p className="text-sm text-ot-muted mt-1">
                        {formatCop(order.total || 0)} · {order.email}
                        {order.created_at
                          ? ` · ${new Date(order.created_at).toLocaleString("es-CO")}`
                          : ""}
                      </p>
                    </div>
                    <span className="text-xs tracking-[0.14em] uppercase border border-ot-gold text-ot-green px-3 py-1 h-fit">
                      {STATUS_LABEL[order.status || ""] || order.status}
                    </span>
                  </div>

                  <div className="grid md:grid-cols-2 gap-5 mt-4 text-sm">
                    <div>
                      <p className="text-[11px] tracking-[0.16em] uppercase text-ot-gold">
                        Entrega
                      </p>
                      <p className="mt-1 whitespace-pre-line leading-relaxed">
                        {[
                          name,
                          addr?.phone,
                          addr?.address_1,
                          addr?.address_2,
                          [addr?.city, addr?.province]
                            .filter(Boolean)
                            .join(", "),
                        ]
                          .filter(Boolean)
                          .join("\n") || "Sin dirección"}
                      </p>
                      {order.notes ? (
                        <p className="mt-2">Notas: {order.notes}</p>
                      ) : null}
                      {order.wompi_reference ? (
                        <p className="mt-2 text-ot-muted">
                          Wompi: {order.wompi_reference}
                        </p>
                      ) : null}
                      {order.shipping_guide ? (
                        <p className="mt-2">
                          Guía: <strong>{order.shipping_guide}</strong>
                          {order.shipping_carrier
                            ? ` · ${order.shipping_carrier}`
                            : ""}
                          {order.shipping_tracking_url ||
                          trackingUrlFor(
                            order.shipping_carrier,
                            order.shipping_guide
                          ) ? (
                            <>
                              {" · "}
                              <a
                                href={
                                  order.shipping_tracking_url ||
                                  trackingUrlFor(
                                    order.shipping_carrier,
                                    order.shipping_guide
                                  ) ||
                                  "#"
                                }
                                target="_blank"
                                rel="noreferrer"
                                className="underline"
                              >
                                Seguir envío
                              </a>
                            </>
                          ) : null}
                        </p>
                      ) : null}
                    </div>
                    <div>
                      <p className="text-[11px] tracking-[0.16em] uppercase text-ot-gold">
                        Prendas
                      </p>
                      <ul className="mt-1 list-disc pl-5 space-y-1">
                        {(order.items || []).map((item) => (
                          <li key={item.id}>
                            {item.quantity}× {item.title}
                            {item.variant_title
                              ? ` · ${item.variant_title}`
                              : ""}
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>

                  <div className="flex flex-wrap gap-2 mt-4">
                    {order.status === "por_alistar" ? (
                      <button
                        type="button"
                        className="ot-btn"
                        disabled={busyId === order.id}
                        onClick={() => updateStatus(order.id, "alistado")}
                      >
                        Marcar alistado
                      </button>
                    ) : null}
                    {order.status !== "despachado" ? (
                      <button
                        type="button"
                        className="ot-btn-ghost ot-btn"
                        disabled={busyId === order.id}
                        onClick={() => openDespacho(order)}
                      >
                        {order.shipping_guide
                          ? "Actualizar guía / despachar"
                          : "Escanear guía y despachar"}
                      </button>
                    ) : (
                      <button
                        type="button"
                        className="ot-btn-ghost ot-btn"
                        disabled={busyId === order.id}
                        onClick={() => openDespacho(order)}
                      >
                        Editar / reescanear guía
                      </button>
                    )}
                    {addr?.phone ? (
                      <a
                        className="ot-btn-ghost ot-btn"
                        href={`https://wa.me/57${String(addr.phone)
                          .replace(/\D/g, "")
                          .replace(/^57/, "")}`}
                        target="_blank"
                        rel="noreferrer"
                      >
                        WhatsApp cliente
                      </a>
                    ) : null}
                  </div>
                </article>
              );
            })}
          </div>
        )}
      </section>
    </div>
  );
}

function Stat({
  label,
  value,
  light,
}: {
  label: string;
  value: number | string;
  light?: boolean;
}) {
  return (
    <div
      className={
        light
          ? "bg-ot-cream-dark/40 p-4"
          : "bg-white border border-black/10 p-4"
      }
    >
      <p className="text-[11px] tracking-[0.16em] uppercase text-ot-muted">
        {label}
      </p>
      <p className="font-serif text-3xl mt-1">{value}</p>
    </div>
  );
}