'use client';
import { useState } from 'react';
import { useParams, useRouter, useSearchParams } from 'next/navigation';
import Link from 'next/link';
import { ArrowLeft, Copy, Check, QrCode } from 'lucide-react';
import { useApi } from '@/hooks/useApi';
import { storeService } from '@/services/store.service';
import { couponsService } from '@/services/coupons.service';
import { checkoutService } from '@/services/checkout.service';
import { useCart } from '@/hooks/useCart';
import { Input } from '@/components/ui/Input';
import { Select } from '@/components/ui/Select';
import { EmptyState, LoadingState } from '@/components/ui/States';
import { formatCurrency } from '@/utils/formatCurrency';
import type { CheckoutPayload, PixCharge, ShippingMethod, PaymentMethod } from '@/types';

export default function CheckoutPage() {
  const params = useParams();
  const router = useRouter();
  const search = useSearchParams();
  const slug = params.slug as string;
  const { items, subtotal, clear } = useCart();
  const { data: store } = useApi(() => storeService.getBySlug(slug), [slug]);

  const [form, setForm] = useState({
    name: '', email: '', phone: '', document: '',
    zipCode: '', street: '', number: '', complement: '', district: '', city: '', state: '',
  });
  const [shippingMethod, setShippingMethod] = useState<ShippingMethod>('correios');
  const [paymentMethod, setPaymentMethod] = useState<PaymentMethod>('pix');
  const [submitting, setSubmitting] = useState(false);
  const [pix, setPix] = useState<PixCharge | null>(null);
  const [orderId, setOrderId] = useState<string | null>(null);
  const [copied, setCopied] = useState(false);

  const cupom = search.get('cupom');
  const { data: couponRes } = useApi(
    () => (store && cupom ? couponsService.validate(store.id, cupom, subtotal) : Promise.resolve(null)),
    [store?.id, cupom, subtotal],
  );

  if (!store) return <LoadingState />;
  if (items.length === 0 && !pix) {
    return <div className="py-16"><EmptyState title="Carrinho vazio" action={<Link href={`/loja/${slug}`} className="text-brand-600 hover:underline">Voltar à loja</Link>} /></div>;
  }

  const discount = couponRes?.valid ? couponRes.discount : 0;
  const shipping = shippingMethod === 'retirada' ? 0 : 20;
  const total = Math.max(0, subtotal - discount) + shipping;

  function set(key: keyof typeof form, value: string) {
    setForm((f) => ({ ...f, [key]: value }));
  }

  async function submit() {
    if (!store) return;
    if (!form.name || !form.email || !form.street) {
      alert('Preencha os dados obrigatórios (nome, e-mail e endereço).');
      return;
    }
    setSubmitting(true);
    const payload: CheckoutPayload = {
      customer: { name: form.name, email: form.email, phone: form.phone, document: form.document },
      address: {
        zipCode: form.zipCode, street: form.street, number: form.number,
        complement: form.complement, district: form.district, city: form.city, state: form.state,
      },
      shippingMethod, paymentMethod, couponCode: couponRes?.valid ? cupom ?? undefined : undefined,
    };
    const orderItems = items.map((it) => ({
      productId: it.productId, productName: it.name, variationLabel: it.variationLabel,
      quantity: it.quantity, unitPrice: it.unitPrice, total: it.unitPrice * it.quantity, imageUrl: it.imageUrl,
    }));
    const order = await checkoutService.submit(store.id, payload, orderItems, { subtotal, discount, shipping, total });
    setOrderId(order.id);

    if (paymentMethod === 'pix') {
      const charge = await checkoutService.createPixCharge(total);
      setPix(charge);
    } else {
      clear();
      router.push(`/loja/${slug}/pedido/${order.id}`);
      return;
    }
    clear();
    setSubmitting(false);
  }

  function copyPix() {
    if (!pix) return;
    navigator.clipboard?.writeText(pix.copyPasteCode);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  }

  // Tela de pagamento Pix
  if (pix) {
    return (
      <div className="py-10">
        <div className="mx-auto max-w-md rounded-2xl border border-ink-100 p-6 text-center">
          <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full" style={{ background: 'var(--store-primary)', color: '#fff' }}>
            <QrCode className="h-6 w-6" />
          </div>
          <h1 className="font-display text-xl font-bold text-ink-900">Pague com Pix</h1>
          <p className="mt-1 text-sm text-ink-500">Escaneie o QR Code ou copie o código abaixo.</p>
          <div className="my-5 flex justify-center">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src={pix.qrCodeImage} alt="QR Code Pix" className="h-48 w-48 rounded-xl border border-ink-100" />
          </div>
          <p className="text-2xl font-bold text-ink-900">{formatCurrency(pix.amount)}</p>
          <button onClick={copyPix} className="mt-4 inline-flex w-full items-center justify-center gap-2 rounded-lg border border-ink-200 px-4 py-3 text-sm font-medium text-ink-700 hover:bg-ink-50">
            {copied ? <><Check className="h-4 w-4 text-emerald-600" /> Copiado!</> : <><Copy className="h-4 w-4" /> Copiar código Pix</>}
          </button>
          <p className="mt-3 text-xs text-ink-400">Pagamento simulado para demonstração.</p>
          <Link href={`/loja/${slug}/pedido/${orderId}`} className="mt-5 inline-block w-full rounded-lg py-3 text-sm font-medium text-white" style={{ background: 'var(--store-button)' }}>
            Já paguei, ver pedido
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="py-6">
      <Link href={`/loja/${slug}/carrinho`} className="mb-4 inline-flex items-center gap-1 text-sm text-ink-500 hover:text-ink-900">
        <ArrowLeft className="h-4 w-4" /> Voltar ao carrinho
      </Link>
      <h1 className="mb-6 font-display text-2xl font-bold text-ink-900">Finalizar compra</h1>

      <div className="grid gap-6 lg:grid-cols-3">
        <div className="space-y-6 lg:col-span-2">
          <section className="rounded-xl border border-ink-100 p-5">
            <h2 className="mb-4 font-semibold text-ink-900">Seus dados</h2>
            <div className="grid gap-4 sm:grid-cols-2">
              <Input label="Nome completo" value={form.name} onChange={(e) => set('name', e.target.value)} />
              <Input label="E-mail" type="email" value={form.email} onChange={(e) => set('email', e.target.value)} />
              <Input label="Telefone" value={form.phone} onChange={(e) => set('phone', e.target.value)} />
              <Input label="CPF" value={form.document} onChange={(e) => set('document', e.target.value)} />
            </div>
          </section>

          <section className="rounded-xl border border-ink-100 p-5">
            <h2 className="mb-4 font-semibold text-ink-900">Endereço de entrega</h2>
            <div className="grid gap-4 sm:grid-cols-2">
              <Input label="CEP" value={form.zipCode} onChange={(e) => set('zipCode', e.target.value)} />
              <Input label="Rua" value={form.street} onChange={(e) => set('street', e.target.value)} />
              <Input label="Número" value={form.number} onChange={(e) => set('number', e.target.value)} />
              <Input label="Complemento" value={form.complement} onChange={(e) => set('complement', e.target.value)} />
              <Input label="Bairro" value={form.district} onChange={(e) => set('district', e.target.value)} />
              <Input label="Cidade" value={form.city} onChange={(e) => set('city', e.target.value)} />
              <Input label="Estado" value={form.state} onChange={(e) => set('state', e.target.value)} />
            </div>
          </section>

          <section className="rounded-xl border border-ink-100 p-5">
            <h2 className="mb-4 font-semibold text-ink-900">Entrega e pagamento</h2>
            <div className="grid gap-4 sm:grid-cols-2">
              <Select label="Forma de entrega" value={shippingMethod} onChange={(e) => setShippingMethod(e.target.value as ShippingMethod)}>
                <option value="correios">Correios (R$ 20,00)</option>
                <option value="entrega_local">Entrega local (R$ 20,00)</option>
                <option value="retirada">Retirada na loja (grátis)</option>
              </Select>
              <Select label="Forma de pagamento" value={paymentMethod} onChange={(e) => setPaymentMethod(e.target.value as PaymentMethod)}>
                <option value="pix">Pix</option>
                <option value="na_entrega">Pagar na entrega</option>
              </Select>
            </div>
          </section>
        </div>

        <div>
          <div className="rounded-xl border border-ink-100 p-5">
            <h2 className="mb-3 font-semibold text-ink-900">Resumo</h2>
            <div className="space-y-2 text-sm">
              {items.map((it, i) => (
                <div key={i} className="flex justify-between text-ink-600">
                  <span className="line-clamp-1">{it.quantity}× {it.name}</span>
                  <span>{formatCurrency(it.unitPrice * it.quantity)}</span>
                </div>
              ))}
              <div className="border-t border-ink-100 pt-2" />
              <div className="flex justify-between text-ink-600"><span>Subtotal</span><span>{formatCurrency(subtotal)}</span></div>
              {discount > 0 && <div className="flex justify-between text-emerald-600"><span>Desconto ({cupom})</span><span>- {formatCurrency(discount)}</span></div>}
              <div className="flex justify-between text-ink-600"><span>Frete</span><span>{formatCurrency(shipping)}</span></div>
              <div className="flex justify-between border-t border-ink-100 pt-2 text-base font-semibold text-ink-900"><span>Total</span><span>{formatCurrency(total)}</span></div>
            </div>
            <button onClick={submit} disabled={submitting} className="mt-4 w-full rounded-lg py-3 text-sm font-medium text-white disabled:opacity-50" style={{ background: 'var(--store-button)' }}>
              {submitting ? 'Processando...' : paymentMethod === 'pix' ? 'Gerar Pix' : 'Confirmar pedido'}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}