import { Table, Tag, Typography, Badge, Space } from 'antd';
import type { TableColumnsType } from 'antd';
import { Link } from '@tanstack/react-router';
import type { PedidoSummary } from '@sar/api-interface';
import { useOrderList } from '../../lib/queries/orders';

const { Title } = Typography;

function hoursWaiting(createdAt: string): number {
  return Math.floor((Date.now() - new Date(createdAt).getTime()) / 3_600_000);
}

const columns: TableColumnsType<PedidoSummary> = [
  {
    title: 'Nº',
    dataIndex: 'numPedSar',
    width: 120,
    render: (num: string, row: PedidoSummary) => (
      <Link to="/pedidos/$id" params={{ id: row.id }}>
        {num}
      </Link>
    ),
  },
  {
    title: 'Representante',
    key: 'rep',
    width: 160,
    render: (_: unknown, row: PedidoSummary) => row.nomeVendedor ?? `Cód. ${row.codVendedor}`,
  },
  {
    title: 'Cliente',
    key: 'cliente',
    width: 200,
    render: (_: unknown, row: PedidoSummary) =>
      row.razaoCliente ?? row.nomeCliente ?? `Cód. ${row.idCliente}`,
  },
  {
    title: 'Total',
    dataIndex: 'total',
    width: 130,
    align: 'right',
    render: (v: string) =>
      Number(v).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }),
  },
  {
    title: 'Desc. %',
    dataIndex: 'descontoPerc',
    width: 90,
    align: 'right',
    render: (v: string) => `${v}%`,
  },
  {
    title: 'Aguardando',
    dataIndex: 'createdAt',
    width: 130,
    render: (v: string) => {
      const h = hoursWaiting(v);
      return <Tag color={h > 2 ? 'red' : 'orange'}>{h}h</Tag>;
    },
  },
  {
    title: '',
    width: 100,
    render: (_: unknown, row: PedidoSummary) => (
      <Link to="/pedidos/$id" params={{ id: row.id }}>
        <Tag color="blue" style={{ cursor: 'pointer' }}>
          Analisar
        </Tag>
      </Link>
    ),
  },
];

export function ApprovalQueuePage() {
  // situa=1 = Pendente de Aprovação
  const { data, isLoading } = useOrderList({ situa: 1, limit: 200 });

  const urgentCount = data?.data.filter((o) => hoursWaiting(o.createdAt) > 2).length ?? 0;

  return (
    <div style={{ padding: 24 }}>
      <Space align="center" style={{ marginBottom: 16 }}>
        <Title level={3} style={{ margin: 0 }}>
          Fila de Aprovações
        </Title>
        {urgentCount > 0 && (
          <Badge
            count={urgentCount}
            style={{ backgroundColor: '#cf1322' }}
            title={`${urgentCount} urgente(s) — mais de 2h aguardando`}
          />
        )}
      </Space>

      <Table<PedidoSummary>
        rowKey="id"
        columns={columns}
        dataSource={data?.data ?? []}
        loading={isLoading}
        rowClassName={(row) => (hoursWaiting(row.createdAt) > 2 ? 'row-urgent' : '')}
        pagination={false}
        locale={{ emptyText: 'Nenhum pedido aguardando aprovação.' }}
      />

      <style>{`.row-urgent td { background: #fff1f0 !important; }`}</style>
    </div>
  );
}