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

export default function PedidosPage() {
  const { storeId } = useAuth();
  const [filter, setFilter] = useState<OrderStatus | 'todos'>('todos');
  const { data, loading } = useApi(
    () => (storeId ? ordersService.list(storeId) : Promise.resolve([])),
    [storeId],
  );

  const orders = (data ?? []).filter((o) => filter === 'todos' || o.status === filter);

  return (
    <>
      <PageHeader title="Pedidos" subtitle="Acompanhe e atualize seus pedidos" />
      <div className="mb-4 max-w-xs">
        <Select value={filter} onChange={(e) => setFilter(e.target.value as OrderStatus | 'todos')}>
          <option value="todos">Todos os status</option>
          <option value="novo">Novo</option>
          <option value="aguardando_pagamento">Aguardando pagamento</option>
          <option value="pago">Pago</option>
          <option value="em_separacao">Em separação</option>
          <option value="enviado">Enviado</option>
          <option value="entregue">Entregue</option>
          <option value="cancelado">Cancelado</option>
        </Select>
      </div>
      <Card>
        {loading ? <LoadingState /> : orders.length === 0 ? (
          <EmptyState title="Nenhum pedido" description="Quando você receber pedidos, eles aparecerão aqui." />
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-ink-100 text-left text-xs uppercase tracking-wide text-ink-400">
                  <th className="px-4 py-3 font-medium">Pedido</th>
                  <th className="px-4 py-3 font-medium">Cliente</th>
                  <th className="px-4 py-3 font-medium">Data</th>
                  <th className="px-4 py-3 font-medium">Pagamento</th>
                  <th className="px-4 py-3 font-medium">Status</th>
                  <th className="px-4 py-3 font-medium">Total</th>
                  <th className="px-4 py-3" />
                </tr>
              </thead>
              <tbody>
                {orders.map((o) => (
                  <tr key={o.id} className="border-b border-ink-50 last:border-0 hover:bg-ink-50/50">
                    <td className="px-4 py-3 font-medium text-ink-900">{o.number}</td>
                    <td className="px-4 py-3 text-ink-700">{o.customerName}</td>
                    <td className="px-4 py-3 text-ink-500">{formatDate(o.createdAt)}</td>
                    <td className="px-4 py-3"><PaymentStatusBadge status={o.paymentStatus} /></td>
                    <td className="px-4 py-3"><OrderStatusBadge status={o.status} /></td>
                    <td className="px-4 py-3 font-medium text-ink-900">{formatCurrency(o.total)}</td>
                    <td className="px-4 py-3 text-right">
                      <Link href={`/pedidos/${o.id}`} className="inline-flex items-center gap-1 text-brand-600 hover:underline">
                        <Eye className="h-4 w-4" /> Ver
                      </Link>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </Card>
    </>
  );
}