'use client';
import { useParams } from 'next/navigation';
import Link from 'next/link';
import { CheckCircle2, Package } from 'lucide-react';
import { useApi } from '@/hooks/useApi';
import { storeService } from '@/services/store.service';
import { ordersService } from '@/services/orders.service';
import { OrderStatusBadge, PaymentStatusBadge } from '@/components/tables/StatusBadge';
import { LoadingState, EmptyState } from '@/components/ui/States';
import { formatCurrency } from '@/utils/formatCurrency';

export default function PedidoConfirmacaoPage() {
  const params = useParams();
  const slug = params.slug as string;
  const orderId = params.orderId as string;

  const { data: store } = useApi(() => storeService.getBySlug(slug), [slug]);
  const { data: order, loading } = useApi(
    () => (store ? ordersService.getById(store.id, orderId) : Promise.resolve(null)),
    [store?.id, orderId],
  );

  if (loading || !store) return <LoadingState />;
  if (!order) return <EmptyState title="Pedido não encontrado" />;

  return (
    <div className="py-10">
      <div className="mx-auto max-w-lg">
        <div className="rounded-2xl border border-ink-100 p-6 text-center">
          <div className="mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-full bg-emerald-50 text-emerald-600">
            <CheckCircle2 className="h-7 w-7" />
          </div>
          <h1 className="font-display text-2xl font-bold text-ink-900">Pedido recebido!</h1>
          <p className="mt-1 text-sm text-ink-500">
            Seu pedido <strong>{order.number}</strong> foi registrado com sucesso.
          </p>
          <div className="mt-4 flex justify-center gap-2">
            <OrderStatusBadge status={order.status} />
            <PaymentStatusBadge status={order.paymentStatus} />
          </div>

          <div className="mt-6 space-y-2 rounded-xl bg-ink-50 p-4 text-left text-sm">
            {order.items.map((it, i) => (
              <div key={i} className="flex justify-between text-ink-600">
                <span>{it.quantity}× {it.productName}{it.variationLabel ? ` (${it.variationLabel})` : ''}</span>
                <span>{formatCurrency(it.total)}</span>
              </div>
            ))}
            <div className="border-t border-ink-200 pt-2" />
            {order.discount > 0 && <div className="flex justify-between text-emerald-600"><span>Desconto</span><span>- {formatCurrency(order.discount)}</span></div>}
            <div className="flex justify-between text-ink-600"><span>Frete</span><span>{formatCurrency(order.shipping)}</span></div>
            <div className="flex justify-between font-semibold text-ink-900"><span>Total</span><span>{formatCurrency(order.total)}</span></div>
          </div>

          <div className="mt-4 rounded-xl border border-ink-100 p-4 text-left text-sm text-ink-600">
            <p className="flex items-center gap-2 font-medium text-ink-900"><Package className="h-4 w-4" /> Entrega</p>
            <p className="mt-1">{order.shippingAddress}</p>
          </div>

          <Link href={`/loja/${slug}`} className="mt-6 inline-block w-full rounded-lg py-3 text-sm font-medium text-white" style={{ background: 'var(--store-button)' }}>
            Voltar à loja
          </Link>
        </div>
        <p className="mt-4 text-center text-xs text-ink-400">
          Você receberá atualizações sobre o status do pedido por e-mail.
        </p>
      </div>
    </div>
  );
}