sar/apps/web/src/cockpits/rep/ClientsPage.tsx

import { useState } from 'react';
import { Badge, Input, Select, Space, Table, Typography } from 'antd';
import type { TableColumnsType } from 'antd';
import { useNavigate } from '@tanstack/react-router';
import type { ActivityStatus, ClientSummary } from '@sar/api-interface';
import { useClientList } from '../../lib/queries/clients';

const { Title } = Typography;
const { Search } = Input;

// ─── Badge configs ────────────────────────────────────────────────────────────

const ACTIVITY_CONFIG: Record<ActivityStatus, { color: string; label: string }> = {
  active: { color: 'success', label: 'Ativo' },
  alert: { color: 'warning', label: 'Em alerta' },
  inactive: { color: 'error', label: 'Inativo' },
};

// ─── Columns ──────────────────────────────────────────────────────────────────

function buildColumns(navigate: ReturnType<typeof useNavigate>): TableColumnsType<ClientSummary> {
  return [
    {
      title: 'Cliente',
      dataIndex: 'nome',
      key: 'nome',
      render: (nome: string, record: ClientSummary) => (
        <Space orientation="vertical" size={0}>
          <Typography.Link
            strong
            onClick={() =>
              navigate({ to: '/clientes/$id', params: { id: String(record.idCliente) } })
            }
          >
            {nome}
          </Typography.Link>
          {record.razao && (
            <Typography.Text type="secondary" style={{ fontSize: 12 }}>
              {record.razao}
            </Typography.Text>
          )}
        </Space>
      ),
      sorter: true,
    },
    {
      title: 'CNPJ / CPF',
      dataIndex: 'cgcpf',
      key: 'cgcpf',
      width: 160,
      render: (v: string | null) => (
        <Typography.Text className="tabular-nums" style={{ fontSize: 13 }}>
          {v ?? '—'}
        </Typography.Text>
      ),
    },
    {
      title: 'Atividade',
      dataIndex: 'activityStatus',
      key: 'activityStatus',
      width: 120,
      render: (v: ActivityStatus) => {
        const cfg = ACTIVITY_CONFIG[v];
        return <Badge status={cfg.color as 'success' | 'warning' | 'error'} text={cfg.label} />;
      },
    },
    {
      title: 'Última compra',
      dataIndex: 'dtUltimaCompra',
      key: 'dtUltimaCompra',
      width: 140,
      render: (v: string | null) => {
        if (!v) return <Typography.Text type="secondary">—</Typography.Text>;
        return (
          <Typography.Text className="tabular-nums">
            {new Date(v).toLocaleDateString('pt-BR')}
          </Typography.Text>
        );
      },
    },
  ];
}

// ─── Page ─────────────────────────────────────────────────────────────────────

export function ClientsPage() {
  const navigate = useNavigate();
  const [q, setQ] = useState('');
  const [search, setSearch] = useState('');
  const [activityFilter, setActivityFilter] = useState<ActivityStatus | undefined>();
  const [page, setPage] = useState(1);
  const limit = 50;

  const { data, isLoading, isFetching } = useClientList({
    q: search || undefined,
    status: activityFilter,
    page,
    limit,
  });

  const columns = buildColumns(navigate);

  return (
    <Space orientation="vertical" size={24} style={{ width: '100%' }}>
      {/* Cabeçalho */}
      <Space orientation="vertical" size={4}>
        <Title level={2} style={{ margin: 0 }}>
          Carteira de Clientes
        </Title>
        <Typography.Text type="secondary">
          {data ? `${data.total} cliente${data.total !== 1 ? 's' : ''} na sua carteira` : ' '}
        </Typography.Text>
      </Space>

      {/* Filtros */}
      <Space wrap>
        <Search
          placeholder="Buscar por nome, razão social ou CNPJ…"
          value={q}
          onChange={(e) => setQ(e.target.value)}
          onSearch={(v) => {
            setSearch(v);
            setPage(1);
          }}
          allowClear
          style={{ width: 320 }}
        />
        <Select<ActivityStatus | undefined>
          placeholder="Atividade"
          allowClear
          style={{ width: 140 }}
          value={activityFilter}
          onChange={(v) => {
            setActivityFilter(v);
            setPage(1);
          }}
          options={[
            { value: 'active', label: 'Ativo' },
            { value: 'alert', label: 'Em alerta' },
            { value: 'inactive', label: 'Inativo' },
          ]}
        />
      </Space>

      {/* Tabela */}
      <Table<ClientSummary>
        columns={columns}
        dataSource={data?.data ?? []}
        rowKey="idCliente"
        loading={isLoading || isFetching}
        pagination={{
          current: page,
          pageSize: limit,
          total: data?.total ?? 0,
          showSizeChanger: false,
          showTotal: (total) => `${total} clientes`,
          onChange: (p) => setPage(p),
        }}
        scroll={{ x: 700 }}
        size="middle"
        onRow={(record) => ({
          style: { cursor: 'pointer' },
          onClick: () =>
            navigate({ to: '/clientes/$id', params: { id: String(record.idCliente) } }),
        })}
      />
    </Space>
  );
}