'use client';

import Image from 'next/image';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { PublicFlowNav } from '../public-flow-nav';
import {
  calculateCartPricing,
  createPublicOrder,
  createPublicPaymentIntent,
  defaultOrderState,
  fetchPublicPaymentStatus,
  fetchStorefront,
  formatCurrency,
  readOrderState,
  type Storefront,
  writeOrderState,
} from '../lib/public-order-store';

type IntentPayload = NonNullable<ReturnType<typeof readOrderState>['paymentIntent']>;

export default function PublicOrderPaymentPage() {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [intentLoading, setIntentLoading] = useState(true);
  const [error, setError] = useState('');
  const [pricing, setPricing] = useState({
    subtotal: 0,
    deliveryFee: 0,
    promotionDiscount: 0,
    couponDiscount: 0,
    discountAmount: 0,
    total: 0,
    appliedPromotion: null,
    appliedCoupon: null,
  } as ReturnType<typeof calculateCartPricing>);
  const [paymentMethod, setPaymentMethod] = useState('PIX');
  const [intent, setIntent] = useState<IntentPayload | null>(null);
  const [copied, setCopied] = useState(false);
  const [storefront, setStorefront] = useState<Storefront | null>(null);
  const [lastOrderId, setLastOrderId] = useState<string | null>(null);
  const [lastEtaMinutes, setLastEtaMinutes] = useState<number | null>(null);

  useEffect(() => {
    const loadState = async () => {
      try {
        const state = readOrderState();
        const nextStorefront = await fetchStorefront(state.restaurantSlug);
        const nextPricing = calculateCartPricing(state, nextStorefront);
        setStorefront(nextStorefront);
        setPricing(nextPricing);
        setPaymentMethod(state.checkout.paymentMethod);
        setIntent(state.paymentIntent ?? null);
        setLastOrderId(state.lastOrder?.id ?? null);
        setLastEtaMinutes(state.lastOrder?.etaMinutes ?? null);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Falha ao preparar pagamento.');
      } finally {
        setIntentLoading(false);
      }
    };

    void loadState();
  }, []);

  useEffect(() => {
    if (!intent?.pix || !lastOrderId) {
      return;
    }

    const interval = window.setInterval(() => {
      void (async () => {
        try {
          const status = await fetchPublicPaymentStatus(lastOrderId);
          if (status.intent) {
            setIntent(status.intent);
            const state = readOrderState();
            writeOrderState({ ...state, paymentIntent: status.intent });
          }

          if (status.approved) {
            const state = readOrderState();
            writeOrderState({
              ...defaultOrderState,
              restaurantSlug: state.restaurantSlug,
              checkout: state.checkout,
              cart: [],
              paymentIntent: null,
              lastOrder: {
                id: status.orderId,
                total: status.amount,
                etaMinutes: lastEtaMinutes ?? 35,
              },
            });
            router.push(`/public-order/order-confirmed?orderId=${status.orderId}&eta=${lastEtaMinutes ?? 35}&total=${status.amount}`);
          }
        } catch {
          // polling silencioso
        }
      })();
    }, 8000);

    return () => window.clearInterval(interval);
  }, [intent?.pix, lastEtaMinutes, lastOrderId, router]);

  const steps = ['Pagamento preparado', 'Pedido criado', 'Loja recebe', 'Entrega em andamento'];

  const providerLabel = intent?.provider ?? 'Chego Payments';
  const modeLabel =
    intent?.mode === 'ready'
      ? 'gateway pronto'
      : intent?.mode === 'sandbox'
        ? 'homologacao'
        : 'liquidacao direta';

  const copyPixCode = async () => {
    if (!intent?.pix?.qrCodeText) return;
    await navigator.clipboard.writeText(intent.pix.qrCodeText);
    setCopied(true);
    window.setTimeout(() => setCopied(false), 2500);
  };

  const submit = async () => {
    setLoading(true);
    setError('');
    try {
      const state = readOrderState();

      if (intent?.pix && lastOrderId) {
        const status = await fetchPublicPaymentStatus(lastOrderId);
        if (status.approved) {
          router.push(`/public-order/order-confirmed?orderId=${status.orderId}&eta=${lastEtaMinutes ?? 35}&total=${status.amount}`);
          return;
        }
        setError('Pagamento ainda nao foi confirmado. Assim que o PIX for aprovado esta tela avanca sozinha.');
        return;
      }

      if (state.cart.length === 0) {
        throw new Error('O carrinho esta vazio.');
      }

      const order = await createPublicOrder(state);
      const nextState = {
        ...state,
        lastOrder: { id: order.id, total: order.summary.total, etaMinutes: order.etaMinutes },
      };
      writeOrderState(nextState);
      setLastOrderId(order.id);
      setLastEtaMinutes(order.etaMinutes);

      if (state.checkout.paymentMethod === 'CASH') {
        writeOrderState({
          ...defaultOrderState,
          restaurantSlug: state.restaurantSlug,
          checkout: state.checkout,
          cart: [],
          paymentIntent: null,
          lastOrder: { id: order.id, total: order.summary.total, etaMinutes: order.etaMinutes },
        });
        router.push(`/public-order/order-confirmed?orderId=${order.id}&eta=${order.etaMinutes}&total=${order.summary.total}`);
        return;
      }

      const nextIntent = await createPublicPaymentIntent(nextState, order.summary.total);
      setIntent(nextIntent);
      writeOrderState({ ...nextState, paymentIntent: nextIntent });

      if (state.checkout.paymentMethod === 'CREDIT_CARD') {
        const checkoutUrl = nextIntent.card?.checkoutUrl ?? nextIntent.card?.sandboxCheckoutUrl;
        if (!checkoutUrl) {
          throw new Error('Checkout de cartao nao retornou URL valida.');
        }
        window.location.href = checkoutUrl;
        return;
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Falha ao criar pedido.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <main className="min-h-screen bg-[linear-gradient(180deg,#f5f7fa_0%,#eef2f6_45%,#f7f9fb_100%)] px-4 py-6 text-slate-950 lg:px-8 lg:py-8">
      <div className="mx-auto grid max-w-6xl gap-6 xl:grid-cols-[1.1fr_0.9fr]">
        <div className="xl:col-span-2">
          <PublicFlowNav />
        </div>

        <section className="rounded-[2rem] border border-slate-200 bg-white p-6 shadow-[0_14px_40px_rgba(15,23,42,0.08)]">
          <p className="text-[11px] font-black uppercase tracking-[0.24em] text-slate-500">Pagamento</p>
          <h1 className="mt-3 text-4xl font-black tracking-tight text-slate-950">Confirmar pedido</h1>

          <div className="mt-6 grid gap-4 lg:grid-cols-[1fr_0.9fr]">
            <div className="rounded-[1.6rem] border border-slate-200 bg-slate-50 p-5">
              <div className="flex items-start justify-between gap-4">
                <div>
                  <p className="text-xs font-black uppercase tracking-[0.18em] text-slate-500">Metodo</p>
                  <p className="mt-2 text-2xl font-black text-slate-950">{paymentMethod.replaceAll('_', ' ')}</p>
                  <p className="mt-2 text-sm text-slate-600">
                    Provedor <strong>{providerLabel}</strong> em <strong>{modeLabel}</strong>.
                  </p>
                </div>
                <div className="rounded-full border border-slate-200 bg-white px-4 py-2 text-[11px] font-black uppercase tracking-[0.18em] text-slate-700">
                  {intent?.mode === 'ready' ? 'Integrado' : intent?.mode === 'sandbox' ? 'Homologacao' : 'Direto'}
                </div>
              </div>

              <div className="mt-5 rounded-[1.4rem] border border-emerald-200 bg-emerald-50 p-5">
                <p className="text-sm font-black uppercase tracking-[0.18em] text-emerald-800">Valor total</p>
                <p className="mt-2 text-3xl font-black text-emerald-950">{formatCurrency(pricing.total)}</p>
                {pricing.discountAmount > 0 ? (
                  <p className="mt-2 text-sm text-emerald-800">
                    Desconto aplicado: {formatCurrency(pricing.discountAmount)}
                  </p>
                ) : null}
                {intent?.settlementPolicy ? (
                  <p className="mt-3 text-sm text-emerald-800">
                    <strong>Repasse:</strong> {intent.settlementPolicy.policyLabel}
                  </p>
                ) : null}
              </div>

              {intent?.pix ? (
                <div className="mt-5 rounded-[1.4rem] border border-slate-200 bg-white p-5">
                  <p className="text-sm font-black text-slate-900">PIX copia e cola</p>
                  <p className="mt-2 text-xs text-slate-500">Expira em {new Date(intent.pix.expiresAt).toLocaleTimeString('pt-BR')}</p>
                  <div className="mt-4 break-all rounded-[1rem] bg-slate-950 px-4 py-3 text-xs text-slate-100">
                    {intent.pix.qrCodeText}
                  </div>
                  <div className="mt-4 flex flex-wrap gap-3">
                    <button type="button" onClick={() => void copyPixCode()} className="rounded-full border border-slate-950 bg-slate-950 px-4 py-2 text-xs font-black uppercase tracking-[0.18em] text-white">
                      {copied ? 'Codigo copiado' : 'Copiar codigo PIX'}
                    </button>
                    <span className="inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-4 py-2 text-[11px] font-black uppercase tracking-[0.18em] text-amber-700">
                      {intent.mode === 'ready' ? 'Aguardando confirmacao real' : 'QRCode de homologacao'}
                    </span>
                  </div>
                </div>
              ) : null}

              {intent?.card ? (
                <div className="mt-5 rounded-[1.4rem] border border-slate-200 bg-white p-5">
                  <p className="text-sm font-black text-slate-900">Cartao</p>
                  <p className="mt-2 text-sm text-slate-600">
                    Checkout <strong>{intent.card.checkoutMode}</strong> via <strong>{intent.card.provider}</strong>.
                  </p>
                  {intent.card.checkoutUrl || intent.card.sandboxCheckoutUrl ? (
                    <a
                      href={intent.card.checkoutUrl ?? intent.card.sandboxCheckoutUrl ?? '#'}
                      target="_blank"
                      rel="noreferrer"
                      className="mt-4 inline-flex rounded-full border border-slate-950 bg-slate-950 px-4 py-2 text-xs font-black uppercase tracking-[0.18em] text-white"
                    >
                      Abrir checkout do cartao
                    </a>
                  ) : null}
                </div>
              ) : null}

              {intent?.wallet ? (
                <div className="mt-5 rounded-[1.4rem] border border-slate-200 bg-white p-5">
                  <p className="text-sm font-black text-slate-900">Carteira interna</p>
                  <p className="mt-2 text-sm text-slate-600">Liquidacao {intent.wallet.settlement}. Fluxo pronto para cashback, saldo e recorrencia.</p>
                </div>
              ) : null}

              {intent?.cash ? (
                <div className="mt-5 rounded-[1.4rem] border border-slate-200 bg-white p-5">
                  <p className="text-sm font-black text-slate-900">Pagamento na entrega</p>
                  <p className="mt-2 text-sm text-slate-600">Troco suportado: {intent.cash.changeSupported ? 'sim' : 'nao'}. Liquidacao {intent.cash.settlement}.</p>
                </div>
              ) : null}
            </div>

            <div className="rounded-[1.6rem] border border-slate-200 bg-[#0f172a] p-5 text-white">
              <p className="text-xs font-black uppercase tracking-[0.18em] text-slate-400">Camada visual</p>
              {intent?.pix?.qrCodeImageUrl ? (
                <div className="mt-4 overflow-hidden rounded-[1.5rem] border border-white/10 bg-white p-4">
                  <Image src={intent.pix.qrCodeImageUrl} alt="QR Code PIX" width={280} height={280} className="mx-auto h-auto w-full max-w-[280px]" unoptimized />
                </div>
              ) : (
                <div className="mt-4 rounded-[1.5rem] border border-white/10 bg-white/5 p-6">
                  <p className="text-sm text-slate-300">
                    Tela preparada para carregar QR real, checkout hospedado ou carteira interna conforme o metodo escolhido.
                  </p>
                </div>
              )}

              <div className="mt-5 grid gap-3">
                <div className="rounded-[1.2rem] border border-white/10 bg-white/5 px-4 py-3">
                  <p className="text-[11px] font-black uppercase tracking-[0.18em] text-slate-400">Resumo da cobranca</p>
                  <p className="mt-2 text-sm font-semibold text-white">
                    Produtos {formatCurrency(pricing.subtotal)} + entrega {formatCurrency(pricing.deliveryFee)}
                  </p>
                  {pricing.appliedPromotion ? (
                    <p className="mt-2 text-xs text-emerald-300">Promocao: {pricing.appliedPromotion.title}</p>
                  ) : null}
                  {pricing.appliedCoupon ? (
                    <p className="mt-1 text-xs text-emerald-300">Cupom: {pricing.appliedCoupon.code}</p>
                  ) : null}
                </div>
                <div className="rounded-[1.2rem] border border-white/10 bg-white/5 px-4 py-3">
                  <p className="text-[11px] font-black uppercase tracking-[0.18em] text-slate-400">Entrega</p>
                  <p className="mt-2 text-sm font-semibold text-white">
                    {storefront?.city ?? '--'} • {storefront?.neighborhood ?? 'Loja ativa'}
                  </p>
                </div>
              </div>
            </div>
          </div>

          {error ? <p className="mt-4 rounded-[1.2rem] border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">{error}</p> : null}
          {intentLoading ? <p className="mt-4 text-sm text-slate-500">Preparando intent de pagamento...</p> : null}
        </section>

        <aside className="rounded-[2rem] border border-slate-200 bg-white p-6 shadow-[0_24px_60px_rgba(15,23,42,0.08)]">
          <p className="text-[11px] font-black uppercase tracking-[0.24em] text-slate-500">Sequencia operacional</p>
          <div className="mt-4 rounded-[1.2rem] border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700">
            <div className="flex items-center justify-between"><span>Produtos</span><strong>{formatCurrency(pricing.subtotal)}</strong></div>
            <div className="mt-2 flex items-center justify-between"><span>Entrega</span><strong>{formatCurrency(pricing.deliveryFee)}</strong></div>
            {pricing.discountAmount > 0 ? <div className="mt-2 flex items-center justify-between text-emerald-700"><span>Desconto</span><strong>- {formatCurrency(pricing.discountAmount)}</strong></div> : null}
            <div className="mt-3 flex items-center justify-between border-t border-slate-200 pt-3"><span>Total</span><strong>{formatCurrency(pricing.total)}</strong></div>
          </div>
          <div className="mt-4 space-y-3">
            {steps.map((step, index) => (
              <div
                key={step}
                className={`rounded-[1.2rem] border px-4 py-3 ${index === 0 ? 'border-slate-950 bg-slate-950 text-white' : 'border-slate-200 bg-slate-50 text-slate-900'}`}
              >
                <p className="text-sm font-black">{step}</p>
              </div>
            ))}
          </div>
          <div className="mt-6 flex flex-col gap-3">
            <button
              type="button"
              onClick={() => void submit()}
              disabled={loading || intentLoading}
              className="inline-flex min-h-[3rem] items-center justify-center rounded-full bg-slate-950 px-4 text-xs font-black uppercase tracking-[0.18em] text-white disabled:opacity-60"
            >
              {loading
                ? 'Processando...'
                : intent?.pix && lastOrderId
                  ? 'Verificar pagamento PIX'
                  : 'Criar pedido e cobrar'}
            </button>
            <Link href="/public-order/checkout" className="inline-flex min-h-[3rem] items-center justify-center rounded-full border border-slate-200 bg-white px-4 text-xs font-black uppercase tracking-[0.18em] text-slate-800">
              Voltar ao checkout
            </Link>
          </div>
        </aside>
      </div>
    </main>
  );
}