'use client';
import { useParams } from 'next/navigation';
import Link from 'next/link';
import { ArrowLeft } from 'lucide-react';
import { useAuth } from '@/hooks/useAuth';
import { useApi } from '@/hooks/useApi';
import { customersService } from '@/services/customers.service';
import { Card, CardHeader, CardBody } from '@/components/ui/Card';
import { PageHeader } from '@/components/layout/PageHeader';
import { LoadingState, EmptyState } from '@/components/ui/States';
import { formatDate } from '@/utils/formatDate';

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

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

  return (
    <>
      <Link href="/clientes" 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
      </Link>
      <PageHeader title={c.name} subtitle={`Cliente desde ${formatDate(c.createdAt)}`} />
      <div className="grid gap-4 lg:grid-cols-2">
        <Card>
          <CardHeader title="Dados" />
          <CardBody className="space-y-2 text-sm text-ink-600">
            <p>E-mail: {c.email}</p>
            <p>Telefone: {c.phone}</p>
            <p>Documento: {c.document}</p>
            <p>Total de pedidos: {c.totalOrders}</p>
          </CardBody>
        </Card>
        <Card>
          <CardHeader title="Endereços" />
          <CardBody className="space-y-3 text-sm">
            {c.addresses.length === 0 && <p className="text-ink-400">Nenhum endereço cadastrado.</p>}
            {c.addresses.map((a) => (
              <div key={a.id} className="rounded-lg border border-ink-100 p-3 text-ink-600">
                {a.label && <p className="font-medium text-ink-900">{a.label}</p>}
                <p>{a.street}, {a.number}{a.complement ? ` - ${a.complement}` : ''}</p>
                <p>{a.district}, {a.city}/{a.state} · {a.zipCode}</p>
              </div>
            ))}
          </CardBody>
        </Card>
      </div>
    </>
  );
}