'use client';
import { useParams } from 'next/navigation';
import { ArrowLeft } from 'lucide-react';
import Link from 'next/link';
import { useAuth } from '@/hooks/useAuth';
import { useApi } from '@/hooks/useApi';
import { ordersService } from '@/services/orders.service';
import { Card, CardHeader, CardBody } from '@/components/ui/Card';
import { Select } from '@/components/ui/Select';
import { OrderStatusBadge, PaymentStatusBadge } from '@/components/tables/StatusBadge';
import { PageHeader } from '@/components/layout/PageHeader';
import { LoadingState, EmptyState } from '@/components/ui/States';
import { formatCurrency } from '@/utils/formatCurrency';
import { formatDateTime } from '@/utils/formatDate';
import { orderStatusMeta } from '@/utils/statusHelpers';
import type { OrderStatus } from '@/types';

export default function PedidoDetalhePage() {
  const { storeId } = useAuth();
  const params = useParams();
  const id = params.id as string;
  const { data: order, loading, refetch } = useApi(
    () => (storeId ? ordersService.getById(storeId, id) : Promise.resolve(null)),
    [storeId, id],
  );

  async function changeStatus(status: OrderStatus) {
    await ordersService.updateStatus(id, status);
    refetch();
  }

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

  return (
    <>
      <Link href="/pedidos" 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 para pedidos
      </Link>
      <PageHeader
        title={`Pedido ${order.number}`}
        subtitle={`Criado em ${formatDateTime(order.createdAt)}`}
        action={<div className="flex gap-2"><OrderStatusBadge status={order.status} /><PaymentStatusBadge status={order.paymentStatus} /></div>}
      />

      <div className="grid gap-4 lg:grid-cols-3">
        <div className="space-y-4 lg:col-span-2">
          <Card>
            <CardHeader title="Itens do pedido" />
            <CardBody className="space-y-3">
              {order.items.map((it, i) => (
                <div key={i} className="flex items-center justify-between border-b border-ink-50 pb-3 last:border-0 last:pb-0">
                  <div>
                    <p className="font-medium text-ink-900">{it.productName}</p>
                    {it.variationLabel && <p className="text-xs text-ink-400">{it.variationLabel}</p>}
                    <p className="text-xs text-ink-400">{it.quantity} × {formatCurrency(it.unitPrice)}</p>
                  </div>
                  <p className="font-medium text-ink-900">{formatCurrency(it.total)}</p>
                </div>
              ))}
              <div className="space-y-1 border-t border-ink-100 pt-3 text-sm">
                <div className="flex justify-between text-ink-500"><span>Subtotal</span><span>{formatCurrency(order.subtotal)}</span></div>
                {order.discount > 0 && <div className="flex justify-between text-emerald-600"><span>Desconto {order.couponCode ? `(${order.couponCode})` : ''}</span><span>- {formatCurrency(order.discount)}</span></div>}
                <div className="flex justify-between text-ink-500"><span>Frete</span><span>{formatCurrency(order.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(order.total)}</span></div>
              </div>
            </CardBody>
          </Card>

          <Card>
            <CardHeader title="Histórico" />
            <CardBody className="space-y-3">
              {order.history.map((h, i) => (
                <div key={i} className="flex items-center gap-3 text-sm">
                  <span className="h-2 w-2 rounded-full bg-brand-500" />
                  <span className="text-ink-700">{orderStatusMeta[h.status].label}</span>
                  <span className="text-ink-400">{formatDateTime(h.date)}</span>
                  {h.note && <span className="text-ink-400">— {h.note}</span>}
                </div>
              ))}
            </CardBody>
          </Card>
        </div>

        <div className="space-y-4">
          <Card>
            <CardHeader title="Atualizar status" />
            <CardBody>
              <Select value={order.status} onChange={(e) => changeStatus(e.target.value as OrderStatus)}>
                {Object.entries(orderStatusMeta).map(([k, v]) => <option key={k} value={k}>{v.label}</option>)}
              </Select>
            </CardBody>
          </Card>
          <Card>
            <CardHeader title="Cliente" />
            <CardBody className="space-y-1 text-sm">
              <p className="font-medium text-ink-900">{order.customerName}</p>
              <p className="text-ink-500">{order.customerEmail}</p>
              <p className="text-ink-500">{order.customerPhone}</p>
            </CardBody>
          </Card>
          <Card>
            <CardHeader title="Entrega e pagamento" />
            <CardBody className="space-y-2 text-sm text-ink-600">
              <p>{order.shippingAddress}</p>
              <p className="text-ink-400">Entrega: {order.shippingMethod}</p>
              <p className="text-ink-400">Pagamento: {order.paymentMethod}</p>
              {order.notes && <p className="rounded-lg bg-ink-50 p-2 text-ink-500">Obs: {order.notes}</p>}
            </CardBody>
          </Card>
        </div>
      </div>
    </>
  );
}