"use client";

import Image from "next/image";
import { useEffect, useMemo, useRef, useState } from "react";
import { AlertCircle, ChevronDown, Loader2, MapPin, Store } from "lucide-react";
import {
  buildShippingPackageFromItems,
  formatPickupDeadline,
  formatShippingDeadline,
  formatShippingPrice,
  isPickupShippingOption,
  resolveProductionBusinessDays,
  sanitizePostalCode,
  type ShippingItemInput,
  type ShippingOption,
  type ShippingProviderResult,
  type ShippingSelection,
} from "@/lib/catalog-shipping";
import { getAccessibleAccent, getReadableTextColor, withAlpha } from "@/lib/color-contrast";

function formatMoney(value: number) {
  return new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(value);
}

function formatZip(value: string) {
  const digits = sanitizePostalCode(value);
  if (digits.length <= 5) return digits;
  return `${digits.slice(0, 5)}-${digits.slice(5)}`;
}

function optionKey(option: ShippingOption) {
  return `${option.provider}:${option.id}`;
}

type Props = {
  slug: string;
  items: ShippingItemInput[];
  primaryColor: string;
  initialZip?: string;
  selectedShipping?: ShippingSelection | null;
  onSelectShipping: (selection: ShippingSelection | null) => void;
  disabled?: boolean;
  compact?: boolean;
};

const CEP_SALVO_KEY = "ks_cep_entrega";

export default function CatalogShippingCalculator({
  slug,
  items,
  primaryColor,
  initialZip = "",
  selectedShipping = null,
  onSelectShipping,
  disabled = false,
  compact = false,
}: Props) {
  const packageResult = useMemo(() => buildShippingPackageFromItems(items), [items]);
  const [zip, setZip] = useState(formatZip(initialZip));
  const cotouSozinhoRef = useRef(false);
  const [loading, setLoading] = useState(false);
  const [statusLoading, setStatusLoading] = useState(true);
  const [configured, setConfigured] = useState<boolean | null>(null);
  const [pickupOptions, setPickupOptions] = useState<ShippingOption[]>([]);
  const [providerResults, setProviderResults] = useState<ShippingProviderResult[] | null>(null);
  const [selectedId, setSelectedId] = useState<string | null>(
    selectedShipping ? optionKey(selectedShipping.option) : null
  );
  const [error, setError] = useState("");
  const [statusError, setStatusError] = useState("");
  /* Escolhido o frete, a lista inteira vira ruido: fica so a linha escolhida e
     uma seta para reabrir. Comeca recolhido porque uma escolha vinda do
     carrinho ou da pagina do produto ja chega decidida. */
  const [optionsExpanded, setOptionsExpanded] = useState(false);
  const primaryTextColor = useMemo(() => getReadableTextColor(primaryColor), [primaryColor]);

  useEffect(() => {
    setZip((current) => {
      const next = formatZip(initialZip);
      if (!next) return current;
      return current || next;
    });
  }, [initialZip]);

  /* O CEP acompanha o cliente. Ele digitava na pagina do produto e tinha que
     digitar de novo no carrinho e no checkout, porque cada tela guardava o seu
     proprio. Agora o ultimo CEP consultado fica salvo no navegador. */
  useEffect(() => {
    setZip((current) => {
      if (current) return current;
      try {
        return formatZip(window.localStorage.getItem(CEP_SALVO_KEY) || "") || current;
      } catch {
        return current;
      }
    });
  }, []);

  useEffect(() => {
    if (!slug) return;
    let active = true;
    setStatusLoading(true);
    setStatusError("");
    fetch(`/api/catalog/shipping/status?slug=${encodeURIComponent(slug)}`, { cache: "no-store" })
      .then(async (response) => {
        const payload = (await response.json().catch(() => null)) as
          | { configured?: boolean; pickup_options?: ShippingOption[]; error?: string }
          | null;
        if (!active) return;
        if (!response.ok) {
          setConfigured(false);
          setPickupOptions([]);
          setStatusError(payload?.error || "Não foi possível validar as integrações de frete.");
          return;
        }
        setConfigured(Boolean(payload?.configured));
        setPickupOptions(Array.isArray(payload?.pickup_options) ? payload.pickup_options : []);
        setStatusError("");
      })
      .catch(() => {
        if (!active) return;
        setConfigured(false);
        setPickupOptions([]);
        setStatusError("Não foi possível validar as integrações de frete.");
      })
      .finally(() => {
        if (active) setStatusLoading(false);
      });
    return () => {
      active = false;
    };
  }, [slug]);

  useEffect(() => {
    if (!selectedShipping) {
      setSelectedId(null);
      return;
    }
    setSelectedId(optionKey(selectedShipping.option));
  }, [selectedShipping]);

  useEffect(() => {
    /*
      Retirada nao usa o pacote: uma loja que so entrega no balcao nao precisa
      ter peso e medidas cadastrados. Descartar a escolha aqui apagaria a
      selecao de retirada assim que um produto sem dados logisticos entrasse no
      carrinho.
    */
    if (selectedShipping && !isPickupShippingOption(selectedShipping.option) && !packageResult.ok) {
      onSelectShipping(null);
    }
  }, [onSelectShipping, packageResult.ok, selectedShipping]);

  const handleCalculate = async () => {
    if (disabled || loading) return;
    const normalizedZip = sanitizePostalCode(zip);
    if (normalizedZip.length !== 8) {
      setError("Informe um CEP válido.");
      return;
    }
    if (!packageResult.ok || !packageResult.packageMetrics) {
      setError(packageResult.reason);
      return;
    }

    setLoading(true);
    setError("");
    try {
      window.localStorage.setItem(CEP_SALVO_KEY, normalizedZip);
    } catch {}
    /* So a escolha de transportadora e descartada: a cotacao nao muda nada
       sobre os balcoes, entao uma retirada ja escolhida continua valendo. */
    if (selectedShipping && !isPickupShippingOption(selectedShipping.option)) {
      onSelectShipping(null);
      setSelectedId(null);
    }

    try {
      const response = await fetch("/api/catalog/shipping/calculate", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({
          slug,
          zip: normalizedZip,
          items,
        }),
      });
      const payload = (await response.json().catch(() => null)) as
        | {
            error?: string;
            providers?: ShippingProviderResult[];
          }
        | null;

      if (!response.ok || !Array.isArray(payload?.providers)) {
        throw new Error(payload?.error || "Não foi possível calcular o frete.");
      }

      setProviderResults(payload.providers);
      /* Cotou de novo: a escolha anterior de transportadora foi descartada
         acima, entao a lista precisa reaparecer para o cliente escolher. */
      setOptionsExpanded(true);
    } catch (fetchError) {
      const message = fetchError instanceof Error ? fetchError.message : "Não foi possível calcular o frete.";
      setProviderResults(null);
      setError(message);
    } finally {
      setLoading(false);
    }
  };

  const selectCarrierOption = (option: ShippingOption) => {
    if (!packageResult.ok || !packageResult.packageSignature) return;
    setSelectedId(optionKey(option));
    setOptionsExpanded(false);
    onSelectShipping({
      destination_zip: sanitizePostalCode(zip),
      option,
      package_signature: packageResult.packageSignature,
    });
  };

  const selectPickupOption = (option: ShippingOption) => {
    setSelectedId(optionKey(option));
    setOptionsExpanded(false);
    /*
      Sem CEP e sem assinatura de pacote de proposito: o preco da retirada vem
      do balcao cadastrado, entao ela nao caduca quando o carrinho muda nem
      exige que o cliente informe endereco de entrega.
    */
    onSelectShipping({
      destination_zip: "",
      option,
      package_signature: "",
    });
  };

  /* Com o CEP ja preenchido, cotar sozinho uma vez. Sem isso o cliente
     digitava o CEP na pagina do produto e, no carrinho, encontrava o campo
     preenchido mas nenhuma opcao — tinha que clicar OK de novo em cada tela. */
  useEffect(() => {
    if (cotouSozinhoRef.current) return;
    if (disabled || loading || statusLoading) return;
    if (configured === false) return;
    if (!packageResult.ok) return;
    if (selectedShipping) return;
    if (providerResults !== null) return;
    if (sanitizePostalCode(zip).length !== 8) return;
    cotouSozinhoRef.current = true;
    void handleCalculate();
  }, [configured, disabled, loading, packageResult.ok, providerResults, selectedShipping, statusLoading, zip]);

  /*
    O prazo do balcao e so a parte da loja: o cliente so pode buscar depois que
    o material fica pronto. Somar a producao aqui evita prometer retirada
    imediata de um produto que leva dias para ser feito.
  */
  const productionDays = useMemo(() => resolveProductionBusinessDays(items), [items]);

  /*
    O mesmo vale para a transportadora: o pacote so entra na esteira depois de
    produzido. Mostrar so o prazo do transporte prometia 2 dias num pedido que
    leva 2 de producao + 2 de estrada, e a retirada, que ja somava, aparecia
    com prazo maior que o frete expresso — contradicao na mesma tela.
  */
  const carrierOptions = useMemo(
    () =>
      (providerResults || [])
        .flatMap((provider) => provider.options)
        .map((option) => ({
          ...option,
          delivery_time: Math.max(0, Number(option.delivery_time) || 0) + productionDays,
        }))
        .sort((a, b) => a.price - b.price),
    [providerResults, productionDays]
  );

  const sortedPickupOptions = useMemo(
    () =>
      [...pickupOptions]
        .map((option) => ({
          ...option,
          delivery_time: Math.max(0, Number(option.delivery_time) || 0) + productionDays,
        }))
        .sort((a, b) => a.price - b.price),
    [pickupOptions, productionDays]
  );

  const hasPickup = sortedPickupOptions.length > 0;

  /* Sem peso e medidas cadastrados não há o que cotar. O cliente não precisa
     saber disso: o que ele precisa é do caminho que sobra. Antes lia um
     parágrafo explicando que a loja não informou o tamanho da embalagem —
     problema do lojista, escrito na cara de quem está comprando. */
  const semDadosParaCotar = !packageResult.ok && packageResult.missing_fields.length > 0;

  const recadoDaEntrega = useMemo(() => {
    const varios = packageResult.missing_items.length > 1;
    if (hasPickup) {
      return varios
        ? "Estes produtos estão disponíveis apenas para retirada na loja."
        : "Este produto está disponível apenas para retirada na loja.";
    }
    return "O frete deste pedido é a combinar com a loja.";
  }, [hasPickup, packageResult.missing_items.length]);
  const showGroupTitles = hasPickup && carrierOptions.length > 0;

  /*
    A opcao escolhida sai da propria selecao, nao da lista cotada: o carrinho
    pode ter herdado a escolha feita na pagina do produto e ainda nao ter
    cotado nada, e mesmo assim precisa mostrar qual frete esta valendo.
  */
  const collapsedSelection = !optionsExpanded && selectedShipping ? selectedShipping.option : null;

  const containerClass = compact
    ? "space-y-3"
    : "space-y-3 border-t border-slate-200 pt-5";

  /* O resumo tem layout proprio: a linha da lista tem 4 colunas lado a lado e,
     num celular de 360px, sobra tao pouco para o endereco do balcao que ele
     desce em dez linhas. Aqui o preco sobe para junto do titulo, o endereco
     ganha a largura toda com limite de 2 linhas e as instrucoes ficam para a
     lista expandida — o resumo cabe em 3 linhas em qualquer largura. */
  const renderSummaryRow = (option: ShippingOption) => {
    const pickup = isPickupShippingOption(option);
    const price = pickup ? formatShippingPrice(option.price) : formatMoney(option.price);
    const deadline = pickup
      ? formatPickupDeadline(option.delivery_time)
      : formatShippingDeadline(option.delivery_time);

    return (
      <button
        type="button"
        onClick={() => setOptionsExpanded(true)}
        aria-expanded={false}
        className="flex w-full items-center gap-2.5 py-3 text-left transition hover:bg-slate-50/80"
      >
        <span className="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-lg">
          {pickup ? (
            <span
              className="flex h-8 w-8 items-center justify-center rounded-lg"
              style={{ backgroundColor: withAlpha(primaryColor, 0.1), color: getAccessibleAccent(primaryColor) }}
            >
              <Store className="h-4 w-4" />
            </span>
          ) : option.logo_url ? (
            <Image
              src={option.logo_url}
              alt={option.name}
              width={32}
              height={32}
              className="h-8 w-8 object-contain"
              unoptimized
            />
          ) : (
            <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-100 text-slate-400">
              <MapPin className="h-4 w-4" />
            </span>
          )}
        </span>

        <span className="min-w-0 flex-1">
          <span className="flex flex-wrap items-baseline gap-x-1.5 text-sm font-semibold leading-5 text-slate-900">
            <span className="truncate">{option.service}</span>
            <span aria-hidden className="text-slate-300">
              ·
            </span>
            <span>{price}</span>
          </span>
          {/* Uma linha so: o resumo cabe em 3 linhas em qualquer largura e o
              endereco inteiro continua a um toque de distancia, no "Trocar". */}
          <span className="mt-0.5 block truncate text-xs leading-4 text-slate-500">{option.name}</span>
          <span className="mt-0.5 block truncate text-xs leading-4 text-slate-400">{deadline}</span>
        </span>

        <span className="flex shrink-0 items-center gap-0.5 self-center text-xs font-medium text-slate-500">
          Trocar
          <ChevronDown className="h-4 w-4" />
        </span>
      </button>
    );
  };

  const renderOptionRow = (option: ShippingOption) => {
    const key = optionKey(option);
    const selected = selectedId === key;
    const pickup = isPickupShippingOption(option);
    const instructions = pickup ? String(option.pickup?.instructions || "").trim() : "";

    return (
      <button
        key={key}
        type="button"
        onClick={() => (pickup ? selectPickupOption(option) : selectCarrierOption(option))}
        className="flex w-full items-start gap-2.5 py-3.5 text-left transition hover:bg-slate-50/80"
      >
        {/* Marcador de radio: numa lista sem cartoes e ele que diz onde clicar. */}
        <span
          className="mt-0.5 flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-full border transition"
          style={{
            borderColor: selected ? primaryColor : "#cbd5e1",
            borderWidth: selected ? 5 : 1,
          }}
        />

        <span className="flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-lg">
          {pickup ? (
            <span
              className="flex h-9 w-9 items-center justify-center rounded-lg"
              style={{ backgroundColor: withAlpha(primaryColor, 0.1), color: getAccessibleAccent(primaryColor) }}
            >
              <Store className="h-4 w-4" />
            </span>
          ) : option.logo_url ? (
            <Image
              src={option.logo_url}
              alt={option.name}
              width={36}
              height={36}
              className="h-9 w-9 object-contain"
              unoptimized
            />
          ) : (
            <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-100 text-slate-400">
              <MapPin className="h-4 w-4" />
            </span>
          )}
        </span>

        <span className="min-w-0 flex-1">
          {/* Preco na mesma linha do titulo: como coluna propria ele roubava a
              largura do endereco e jogava o balcao para dez linhas no celular. */}
          <span className="flex flex-wrap items-baseline gap-x-1.5 text-sm font-semibold leading-5 text-slate-900">
            <span className="truncate">{option.service}</span>
            <span aria-hidden className="text-slate-300">
              ·
            </span>
            <span>{pickup ? formatShippingPrice(option.price) : formatMoney(option.price)}</span>
          </span>
          <span className="mt-0.5 block line-clamp-2 text-xs leading-4 text-slate-500">{option.name}</span>
          <span className="mt-0.5 block truncate text-xs leading-4 text-slate-400">
            {pickup ? formatPickupDeadline(option.delivery_time) : formatShippingDeadline(option.delivery_time)}
          </span>
          {instructions ? (
            <span className="mt-0.5 block line-clamp-2 text-xs leading-4 text-slate-400">{instructions}</span>
          ) : null}
        </span>
      </button>
    );
  };

  return (
    <div className={containerClass}>
      <div className="space-y-1">
        <h3 className="text-base font-semibold text-slate-950">Consultar frete e prazo de entrega</h3>
      </div>

      <div className="mt-4 flex gap-0 overflow-hidden rounded-2xl border border-slate-200 bg-white">
        <div className="relative min-w-0 flex-1">
          <input
            value={zip}
            onChange={(event) => setZip(formatZip(event.target.value))}
            onKeyDown={(event) => {
              /* Enter consulta. Sem isso a tecla nao fazia absolutamente nada:
                 nem cotava, nem avisava, e parecia que a loja tinha travado. */
              if (event.key !== "Enter") return;
              event.preventDefault();
              void handleCalculate();
            }}
            placeholder="Digite seu CEP: 00000-000"
            maxLength={9}
            inputMode="numeric"
            /* Sem dados de logística o campo nem abre: digitar o CEP para
               ouvir que não dá para cotar é trabalho jogado fora. */
            disabled={disabled || loading || semDadosParaCotar}
            className="h-12 w-full border-0 bg-transparent px-4 pr-11 text-sm text-slate-900 outline-none placeholder:text-slate-400 disabled:cursor-not-allowed disabled:bg-slate-50"
          />
          <MapPin className="pointer-events-none absolute right-4 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
        </div>
        <button
          type="button"
          onClick={() => void handleCalculate()}
          disabled={disabled || loading || !packageResult.ok || statusLoading || (configured === false && !statusError)}
          className="inline-flex h-12 min-w-[72px] items-center justify-center px-5 text-sm font-bold transition disabled:cursor-not-allowed disabled:opacity-50"
          style={{ backgroundColor: primaryColor, color: primaryTextColor }}
        >
          {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : "OK"}
        </button>
      </div>

      {statusLoading ? (
        <div className="flex items-center gap-2 text-xs text-slate-500">
          <Loader2 className="h-3.5 w-3.5 animate-spin" />
          Verificando opções de entrega...
        </div>
      ) : null}

      {!statusLoading && semDadosParaCotar ? (
        <p className="text-sm text-slate-600">{recadoDaEntrega}</p>
      ) : null}

      {!statusLoading && configured === false && !statusError && packageResult.ok ? (
        <div className="text-sm text-amber-700">
          {hasPickup
            ? "Esta loja trabalha apenas com retirada no balcão."
            : "A loja ainda não configurou integrações de frete para este catálogo."}
        </div>
      ) : null}

      {statusError ? (
        <div className="flex items-start gap-2 text-sm text-rose-700">
          <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
          <span>{statusError}</span>
        </div>
      ) : null}

      {error ? (
        <div className="flex items-start gap-2 text-sm text-rose-700">
          <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
          <span>{error}</span>
        </div>
      ) : null}

      {collapsedSelection ? (
        <div className="pt-2">
          <div className="pb-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-slate-400">
            {isPickupShippingOption(collapsedSelection) ? "Retirada escolhida" : "Entrega escolhida"}
          </div>
          <div className="border-t border-slate-200/70">
            {renderSummaryRow(collapsedSelection)}
          </div>
        </div>
      ) : (
        <>
          {hasPickup ? (
            <div className="pt-2">
              {showGroupTitles ? (
                <div className="pb-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-slate-400">
                  Retirar na loja
                </div>
              ) : null}
              <div className="divide-y divide-slate-200/70 border-t border-slate-200/70">
                {sortedPickupOptions.map((option) => renderOptionRow(option))}
              </div>
            </div>
          ) : null}

          {carrierOptions.length > 0 ? (
            <div className="pt-2">
              {showGroupTitles ? (
                <div className="pb-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-slate-400">
                  Receber no endereço
                </div>
              ) : null}
              <div className="divide-y divide-slate-200/70 border-t border-slate-200/70">
                {carrierOptions.map((option) => renderOptionRow(option))}
              </div>
            </div>
          ) : providerResults ? (
            <div className="border-t border-slate-200 py-4 text-sm text-slate-500">
              {hasPickup
                ? "Nenhuma transportadora atende esse CEP. A retirada no balcão continua disponível."
                : "Nenhuma opção de entrega retornada para esse CEP."}
            </div>
          ) : null}
        </>
      )}
    </div>
  );
}