import {
  Button,
  Descriptions,
  Grid,
  Tag,
  Table,
  Typography,
  Spin,
  Alert,
  Space,
  Divider,
  Modal,
  Tooltip,
  message,
  Badge,
} from 'antd';
import { useState } from 'react';
import type { TableColumnsType } from 'antd';
import { CopyOutlined, UserAddOutlined } from '@ant-design/icons';
import { Link, useNavigate, useParams } from '@tanstack/react-router';
import type { CtrTitulo, NotaFiscal, PedidoSummary, TopProduto } from '@sar/api-interface';
import { SITUA_LABEL } from '@sar/api-interface';
import {
  useClientDetail,
  useClientCtr,
  useClientCtrList,
  useClientNotasFiscais,
  useClientOrdersHistory,
  useClientTopProdutos,
} from '../../lib/queries/clients';
import { ClientContacts } from '../../components/contacts/ClientContacts';

const { useBreakpoint } = Grid;

const { Title, Text } = Typography;

const ACTIVITY_COLOR: Record<string, string> = {
  active: 'success',
  alert: 'warning',
  inactive: 'default',
};
const ACTIVITY_LABEL: Record<string, string> = {
  active: 'Ativo',
  alert: 'Alerta',
  inactive: 'Inativo',
};

const SITUA_COLOR: Record<number, string> = {
  0: 'default',
  1: 'warning',
  2: 'processing',
  3: 'error',
  4: 'success',
};

function orderColumns(withFonte: boolean): TableColumnsType<PedidoSummary> {
  const cols: TableColumnsType<PedidoSummary> = [
    {
      title: 'Nº Pedido',
      dataIndex: 'numPedSar',
      render: (num: string, row: PedidoSummary) => (
        <Link to="/pedidos/$id" params={{ id: row.id }}>
          {num}
        </Link>
      ),
    },
    {
      title: 'Status',
      dataIndex: 'situa',
      width: 130,
      render: (s: number) => (
        <Tag color={SITUA_COLOR[s] ?? 'default'}>{SITUA_LABEL[s] ?? String(s)}</Tag>
      ),
    },
    {
      title: 'Total',
      dataIndex: 'total',
      width: 130,
      align: 'right' as const,
      render: (v: string) =>
        Number(v).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }),
    },
    {
      title: 'Data',
      dataIndex: 'dtPedido',
      width: 110,
      render: (v: string) => new Date(v).toLocaleDateString('pt-BR'),
    },
  ];

  if (withFonte) {
    cols.push({
      title: 'Origem',
      dataIndex: 'fonte',
      width: 70,
      render: (f: string) => (
        <Tag color={f === 'sar' ? 'blue' : 'default'} style={{ fontSize: 11 }}>
          {f === 'sar' ? 'SAR' : 'ERP'}
        </Tag>
      ),
    });
  }

  return cols;
}

export function ClientDetailPage() {
  const { id } = useParams({ from: '/clientes/$id' });
  const idNum = Number(id);
  const navigate = useNavigate();
  const screens = useBreakpoint();
  const isMobile = !screens.md;
  const [addContactOpen, setAddContactOpen] = useState(false);
  const [ordersModalOpen, setOrdersModalOpen] = useState(false);
  const [produtosModalOpen, setProdutosModalOpen] = useState(false);
  const [notasModalOpen, setNotasModalOpen] = useState(false);

  const { data: client, isLoading: clientLoading, error: clientError } = useClientDetail(idNum);
  const { data: ctr } = useClientCtr(idNum);
  const { data: ctrList = [], isLoading: ctrListLoading } = useClientCtrList(idNum, 60);
  const { data: orders = [], isLoading: ordersLoading } = useClientOrdersHistory(idNum, 50);
  const { data: topProdutos = [], isLoading: produtosLoading } = useClientTopProdutos(idNum, 30);
  const { data: notas = [], isLoading: notasLoading } = useClientNotasFiscais(idNum, 30);

  const [msgApi, msgCtx] = message.useMessage();

  if (clientLoading) return <Spin style={{ display: 'block', marginTop: 64 }} />;
  if (clientError || !client)
    return <Alert type="error" title="Cliente não encontrado." style={{ margin: 24 }} />;

  const today: string = new Date().toISOString().slice(0, 10);
  const ordersPreview = orders.slice(0, 5);
  const produtosPreview = topProdutos.slice(0, 5);
  const notasPreview = notas.slice(0, 5);
  const ctrPreview = ctrList.slice(0, 8);

  const notaColumns: TableColumnsType<NotaFiscal> = [
    {
      title: 'NF',
      dataIndex: 'numero',
      width: 90,
      render: (v: number, r: NotaFiscal) => `${v}-${r.serie}`,
    },
    {
      title: 'Emissão',
      dataIndex: 'dtEmissao',
      width: 100,
      render: (v: string) => new Date(v + 'T12:00:00').toLocaleDateString('pt-BR'),
    },
    {
      title: 'Valor',
      dataIndex: 'vlNf',
      width: 130,
      align: 'right' as const,
      render: (v: number) => v.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }),
    },
    {
      title: 'Chave NF-e',
      dataIndex: 'chaveAcessoNfe',
      render: (chave: string | null) =>
        chave ? (
          <Space size={4}>
            <Text
              style={{ fontSize: 11, fontFamily: 'monospace', color: '#666' }}
              ellipsis={{ tooltip: chave }}
            >
              {chave}
            </Text>
            <Tooltip title="Copiar chave">
              <Button
                type="text"
                size="small"
                icon={<CopyOutlined />}
                onClick={() =>
                  void navigator.clipboard
                    .writeText(chave)
                    .then(() => void msgApi.success('Chave copiada!'))
                }
              />
            </Tooltip>
          </Space>
        ) : (
          '—'
        ),
    },
  ];

  const produtoColumns: TableColumnsType<TopProduto> = [
    {
      title: 'Produto',
      dataIndex: 'descricao',
      ellipsis: true,
    },
    {
      title: 'Qtd Total',
      dataIndex: 'qtdTotal',
      width: 100,
      align: 'right' as const,
      render: (v: number, r: TopProduto) =>
        `${v.toLocaleString('pt-BR', { maximumFractionDigits: 0 })} ${r.unidade ?? ''}`.trim(),
    },
    {
      title: 'Pedidos',
      dataIndex: 'numPedidos',
      width: 80,
      align: 'center' as const,
    },
    {
      title: 'Último Preço',
      dataIndex: 'ultimoPreco',
      width: 120,
      align: 'right' as const,
      render: (v: number) =>
        v > 0 ? v.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }) : '—',
    },
    {
      title: 'Última Compra',
      dataIndex: 'ultimaCompra',
      width: 120,
      render: (v: string) => new Date(v + 'T12:00:00').toLocaleDateString('pt-BR'),
    },
  ];

  return (
    <div style={{ padding: 24, maxWidth: '100%', overflowX: 'hidden' }}>
      <Space align="center" style={{ marginBottom: 16 }} wrap>
        <Link to="/clientes">← Clientes</Link>
        <Title level={3} style={{ margin: 0 }}>
          {client.razao ?? client.nome}
        </Title>
        <Tag color={ACTIVITY_COLOR[client.activityStatus]}>
          {ACTIVITY_LABEL[client.activityStatus]}
        </Tag>
        <Button icon={<UserAddOutlined />} onClick={() => setAddContactOpen(true)}>
          Novo Contato
        </Button>
        <Button
          type="primary"
          onClick={() => void navigate({ to: '/pedidos/novo', search: { clientId: id } })}
        >
          Novo Pedido
        </Button>
      </Space>

      <Descriptions bordered size="small" column={isMobile ? 1 : 2} style={{ marginBottom: 24 }}>
        <Descriptions.Item label="Razão Social">{client.nome}</Descriptions.Item>
        <Descriptions.Item label="CNPJ / CPF">{client.cgcpf ?? '—'}</Descriptions.Item>
        <Descriptions.Item label="E-mail">{client.email ?? '—'}</Descriptions.Item>
        <Descriptions.Item label="Telefone">
          {client.ddd ? `(${client.ddd}) ` : ''}
          {client.telefone ?? '—'}
        </Descriptions.Item>
        {client.endereco && (
          <Descriptions.Item label="Endereço" span={isMobile ? 1 : 2}>
            {client.endereco}
            {client.numEndereco ? `, ${client.numEndereco}` : ''}
            {client.bairro ? ` — ${client.bairro}` : ''}
            {client.cep ? ` — CEP ${client.cep}` : ''}
          </Descriptions.Item>
        )}
        <Descriptions.Item label="Limite de Crédito">
          {client.limiteCreditoStr
            ? Number(client.limiteCreditoStr).toLocaleString('pt-BR', {
                style: 'currency',
                currency: 'BRL',
              })
            : '—'}
        </Descriptions.Item>
        <Descriptions.Item label="Última Compra">
          {client.dtUltimaCompra
            ? new Date(client.dtUltimaCompra).toLocaleDateString('pt-BR')
            : '—'}
        </Descriptions.Item>
      </Descriptions>

      {/* ── CTR + NF-e lado a lado ── */}
      {msgCtx}
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: 16,
          marginBottom: 24,
        }}
      >
        {/* ── Contas a Receber ── */}
        {/* minWidth: 0 — track 1fr tem min-width auto; sem isto a tabela com
            scroll x 'max-content' estoura a coluna e engole a vizinha (NF-e). */}
        <div style={{ minWidth: 0 }}>
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              marginBottom: 6,
            }}
          >
            <Space size={8}>
              <Text strong style={{ fontSize: 14 }}>
                Contas a Receber
              </Text>
              {ctr && ctr.qtdAberto > 0 && (
                <Tag color={ctr.qtdVencido > 0 ? 'error' : 'warning'}>
                  {ctr.qtdAberto} título{ctr.qtdAberto > 1 ? 's' : ''} —{' '}
                  {ctr.totalAberto.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })}
                </Tag>
              )}
            </Space>
          </div>
          <Divider style={{ margin: '0 0 10px' }} />
          <Table<CtrTitulo>
            rowKey="idCtr"
            size="small"
            pagination={false}
            loading={ctrListLoading}
            dataSource={ctrPreview}
            locale={{ emptyText: 'Nenhum título em aberto.' }}
            scroll={{ x: 'max-content', y: ctrList.length > 8 ? 260 : undefined }}
            style={{ maxWidth: '100%' }}
            columns={[
              {
                title: 'Título / Parcela',
                dataIndex: 'numero',
                render: (num: string, r: CtrTitulo) => (
                  <Space size={4}>
                    <Text style={{ fontSize: 12 }}>
                      {r.prefixo}-{num}
                    </Text>
                    {r.dtVencimento < today ? (
                      <Badge
                        status="error"
                        text={
                          <Text type="danger" style={{ fontSize: 11 }}>
                            {Math.ceil(
                              (new Date(today).getTime() - new Date(r.dtVencimento).getTime()) /
                                86400000,
                            )}
                            d atraso
                          </Text>
                        }
                      />
                    ) : (
                      <Badge
                        status="warning"
                        text={
                          <Text type="warning" style={{ fontSize: 11 }}>
                            a vencer
                          </Text>
                        }
                      />
                    )}
                  </Space>
                ),
              },
              {
                title: 'Vencimento',
                dataIndex: 'dtVencimento',
                width: 100,
                render: (v: string) => (
                  <Text type={v < today ? 'danger' : undefined} style={{ fontSize: 12 }}>
                    {new Date(v + 'T12:00:00').toLocaleDateString('pt-BR')}
                  </Text>
                ),
              },
              {
                title: 'Saldo',
                dataIndex: 'saldo',
                width: 110,
                align: 'right' as const,
                render: (v: number) => (
                  <Text strong style={{ fontSize: 12 }}>
                    {v.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })}
                  </Text>
                ),
              },
            ]}
            footer={
              ctrList.length > 8
                ? () => (
                    <Text type="secondary" style={{ fontSize: 12 }}>
                      Exibindo 8 de {ctrList.length}
                      {ctrList.length === 60 ? '+' : ''} títulos • total em aberto:{' '}
                      {ctr?.totalAberto.toLocaleString('pt-BR', {
                        style: 'currency',
                        currency: 'BRL',
                      })}
                    </Text>
                  )
                : undefined
            }
          />
        </div>

        {/* ── Notas Fiscais ── */}
        <div style={{ minWidth: 0 }}>
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              marginBottom: 6,
            }}
          >
            <Text strong style={{ fontSize: 14 }}>
              Notas Fiscais
            </Text>
            {notas.length > 5 && (
              <Button size="small" type="link" onClick={() => setNotasModalOpen(true)}>
                Ver todas ({notas.length}
                {notas.length === 30 ? '+' : ''})
              </Button>
            )}
          </div>
          <Divider style={{ margin: '0 0 10px' }} />
          <Table<NotaFiscal>
            rowKey="idNf"
            size="small"
            pagination={false}
            loading={notasLoading}
            dataSource={notasPreview}
            locale={{ emptyText: 'Nenhuma nota fiscal.' }}
            style={{ maxWidth: '100%' }}
            scroll={{ x: 'max-content' }}
            columns={notaColumns}
          />
        </div>
      </div>

      <Modal
        title={
          <Space>
            <span>Notas Fiscais — {client.razao ?? client.nome}</span>
            <Text type="secondary" style={{ fontSize: 13 }}>
              ({notas.length}
              {notas.length === 30 ? '+' : ''} notas)
            </Text>
          </Space>
        }
        open={notasModalOpen}
        onCancel={() => setNotasModalOpen(false)}
        footer={null}
        width={isMobile ? '95vw' : 900}
        centered
        destroyOnHidden
      >
        <Table<NotaFiscal>
          rowKey="idNf"
          columns={notaColumns}
          dataSource={notas}
          pagination={{ pageSize: 20, showSizeChanger: false, size: 'small' }}
          size="small"
          scroll={{ y: 460, x: 'max-content' }}
        />
      </Modal>

      <ClientContacts
        idCliente={idNum}
        modalOpen={addContactOpen}
        onModalClose={() => setAddContactOpen(false)}
      />

      {/* ── Produtos Mais Comprados ── */}
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          marginBottom: 6,
        }}
      >
        <Text strong style={{ fontSize: 14 }}>
          Produtos Mais Comprados
        </Text>
        {topProdutos.length > 5 && (
          <Button size="small" type="link" onClick={() => setProdutosModalOpen(true)}>
            Ver todos ({topProdutos.length}
            {topProdutos.length === 30 ? '+' : ''})
          </Button>
        )}
      </div>
      <Divider style={{ margin: '0 0 12px' }} />

      <Table<TopProduto>
        rowKey="idProduto"
        columns={produtoColumns}
        dataSource={produtosPreview}
        loading={produtosLoading}
        pagination={false}
        size="small"
        locale={{ emptyText: 'Nenhum produto encontrado.' }}
        style={{ marginBottom: 24, maxWidth: '100%' }}
        scroll={{ x: 'max-content' }}
      />

      <Modal
        title={
          <Space>
            <span>Produtos — {client.razao ?? client.nome}</span>
            <Text type="secondary" style={{ fontSize: 13 }}>
              ({topProdutos.length}
              {topProdutos.length === 30 ? '+' : ''} produtos)
            </Text>
          </Space>
        }
        open={produtosModalOpen}
        onCancel={() => setProdutosModalOpen(false)}
        footer={null}
        width={isMobile ? '95vw' : 820}
        centered
        destroyOnHidden
      >
        <Table<TopProduto>
          rowKey="idProduto"
          columns={produtoColumns}
          dataSource={topProdutos}
          pagination={{ pageSize: 20, showSizeChanger: false, size: 'small' }}
          size="small"
          scroll={{ y: 460 }}
        />
      </Modal>

      {/* ── Últimos Pedidos ── */}
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          marginBottom: 6,
        }}
      >
        <Text strong style={{ fontSize: 14 }}>
          Últimos Pedidos
        </Text>
        {orders.length > 5 && (
          <Button size="small" type="link" onClick={() => setOrdersModalOpen(true)}>
            Ver todos ({orders.length}
            {orders.length === 50 ? '+' : ''})
          </Button>
        )}
      </div>
      <Divider style={{ margin: '0 0 12px' }} />

      <Table<PedidoSummary>
        rowKey="id"
        columns={orderColumns(false)}
        dataSource={ordersPreview}
        loading={ordersLoading}
        pagination={false}
        size="small"
        locale={{ emptyText: 'Nenhum pedido encontrado.' }}
        rowClassName={(row) => (row.situa === 1 ? 'row-pending' : '')}
        style={{ marginBottom: 24, maxWidth: '100%' }}
        scroll={{ x: 'max-content' }}
      />
      <style>{`.row-pending td { background: #fffbe6 !important; }`}</style>

      {/* ── Modal Ver Todos Pedidos ── */}
      <Modal
        title={
          <Space>
            <span>Pedidos — {client.razao ?? client.nome}</span>
            <Text type="secondary" style={{ fontSize: 13 }}>
              ({orders.length}
              {orders.length === 50 ? '+' : ''} registros)
            </Text>
          </Space>
        }
        open={ordersModalOpen}
        onCancel={() => setOrdersModalOpen(false)}
        footer={null}
        width={isMobile ? '95vw' : 780}
        centered
        destroyOnHidden
      >
        <Table<PedidoSummary>
          rowKey="id"
          columns={orderColumns(true)}
          dataSource={orders}
          pagination={{ pageSize: 20, showSizeChanger: false, size: 'small' }}
          size="small"
          scroll={{ y: 460 }}
          rowClassName={(row) => (row.situa === 1 ? 'row-pending' : '')}
        />
      </Modal>
    </div>
  );
}
