Dados

'use client';

import { useMemo } from 'react';
import type { ColumnDef } from '@tanstack/react-table';
import {
  IGRPDataTable,
  IGRPDataTableHeaderSortToggle,
  IGRPDataTableCellBadge,
  IGRPDataTableCellAmount,
  IGRPDataTableCellDate,
  IGRPDataTableFilterInput,
  IGRPDataTableFilterFaceted,
  IGRPDataTableFacetedFilterFn,
  type IGRPDataTableAction,
} from '@igrp/igrp-framework-react-design-system';

type Pedido = { id: string; cliente: string; estado: string; valor: number; data: string };

export function PedidosTable({ pedidos }: { pedidos: Pedido[] }) {
  const columns = useMemo<ColumnDef<Pedido>[]>(() => [
    {
      accessorKey: 'cliente',
      header: ({ column }) => <IGRPDataTableHeaderSortToggle column={column} title="Cliente" />,
    },
    {
      accessorKey: 'estado',
      header: 'Estado',
      filterFn: IGRPDataTableFacetedFilterFn,
      cell: ({ row }) => (
        <IGRPDataTableCellBadge
          label={row.getValue('estado')}
          color={row.getValue('estado') === 'Pago' ? 'success' : 'warning'}
          variant="soft"
        />
      ),
    },
    {
      accessorKey: 'valor',
      header: 'Valor',
      cell: ({ row }) => <IGRPDataTableCellAmount field={String(row.getValue('valor'))} currency="EUR" />,
    },
    {
      accessorKey: 'data',
      header: 'Data',
      cell: ({ row }) => <IGRPDataTableCellDate date={row.getValue('data')} />,
    },
  ], []);

  const actions: IGRPDataTableAction<Pedido>[] = [
    { type: 'link', label: 'Ver', icon: 'Eye', href: (row) => `/pedidos/${row.original.id}` },
    {
      type: 'alert',
      label: 'Anular',
      icon: 'Trash2',
      title: 'Anular pedido?',
      description: 'Esta ação não pode ser desfeita.',
      onConfirm: async (row) => { /* chamar a API */ },
    },
  ];

  return (
    <IGRPDataTable
      columns={columns}
      data={pedidos}
      actions={actions}
      showFilter
      clientFilters={[
        { columnId: 'cliente', component: ({ column }) => <IGRPDataTableFilterInput column={column} placeholder="Procurar cliente" /> },
        {
          columnId: 'estado',
          component: ({ column }) => (
            <IGRPDataTableFilterFaceted
              column={column}
              placeholder="Estado"
              options={[{ label: 'Pago', value: 'Pago' }, { label: 'Pendente', value: 'Pendente' }]}
            />
          ),
        },
      ]}
      showPagination
    />
  );
}

<IGRPVerticalBarChart
  title="Pedidos por mês"
  data={[
    { mes: 'Jan', pagos: 120, pendentes: 30 },
    { mes: 'Fev', pagos: 98, pendentes: 41 },
  ]}
  categoryKey="mes"
  bars={[
    { dataKey: 'pagos', name: 'Pagos' },
    { dataKey: 'pendentes', name: 'Pendentes' },
  ]}
  legendPosition="bottom"
  showGrid
/>

<IGRPCard>
  <IGRPCardHeader>
    <IGRPCardTitle>Resumo</IGRPCardTitle>
    <IGRPCardDescription>Últimos 30 dias</IGRPCardDescription>
  </IGRPCardHeader>
  <IGRPCardContent>…</IGRPCardContent>
  <IGRPCardFooter>
    <IGRPButton variant="outline">Ver tudo</IGRPButton>
  </IGRPCardFooter>
</IGRPCard>

<IGRPStatsCard
  title="Pedidos pendentes"
  value={42}
  iconName="Clock"
  iconVariant="warning"
  showIconBackground
  iconBackground="rounded"
  cardVariant="warning"
  cardBorderPosition="left"
/>

<IGRPInfoCard
  title="Dados do pedido"
  columns={2}
  sections={[
    {
      items: [
        { label: 'Cliente', text: 'Ana Silva', icon: 'User', showIcon: true },
        { label: 'Estado', text: 'Pendente' },
        { label: 'Data', text: '12/03/2026' },
      ],
    },
  ]}
/>

<IGRPBadge color="success" variant="soft" dot>Ativo</IGRPBadge>