import { useState } from 'react';
import {
  Alert,
  Badge,
  Card,
  Col,
  DatePicker,
  Progress,
  Row,
  Select,
  Space,
  Spin,
  Statistic,
  Table,
  Tag,
  Tabs,
  Typography,
} from 'antd';
import type { TableColumnsType } from 'antd';
import { AlertOutlined, BarChartOutlined, RiseOutlined, TeamOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import type { CarteiraCliente, AbcProduto } from '@sar/api-interface';
import { useReportMeta, useReportCarteira, useReportAbc } from '../../lib/queries/reports';

const { Title, Text } = Typography;
const { Option } = Select;

function fmt(v: number | string): string {
  return Number(v).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
}

function fmtDate(v: string | null | undefined): string {
  if (!v) return '—';
  return new Date(v).toLocaleDateString('pt-BR');
}

// ─── Aba 1: Desempenho vs. Meta ───────────────────────────────────────────────

function TabMeta() {
  const now = dayjs();
  const [mes, setMes] = useState(now.month() + 1);
  const [ano, setAno] = useState(now.year());

  const { data, isLoading, isError, error } = useReportMeta({ mes, ano });

  const realizado = Number(data?.realizado ?? 0);
  const meta = Number(data?.meta ?? 0);
  const percentual = Number(data?.percentual ?? 0);
  const comissao = Number(data?.comissaoEstimada ?? 0);
  const bateuMeta = meta > 0 && realizado >= meta;

  const progressColor = percentual >= 100 ? '#52c41a' : percentual >= 70 ? '#faad14' : '#003B8E';

  const meses = [
    'Jan',
    'Fev',
    'Mar',
    'Abr',
    'Mai',
    'Jun',
    'Jul',
    'Ago',
    'Set',
    'Out',
    'Nov',
    'Dez',
  ];

  return (
    <div>
      <Space style={{ marginBottom: 20 }}>
        <Select value={mes} onChange={setMes} style={{ width: 90 }}>
          {meses.map((m, i) => (
            <Option key={i + 1} value={i + 1}>
              {m}
            </Option>
          ))}
        </Select>
        <DatePicker
          picker="year"
          value={dayjs().year(ano)}
          onChange={(d) => d && setAno(d.year())}
          style={{ width: 100 }}
          allowClear={false}
        />
      </Space>

      {isLoading ? (
        <div style={{ textAlign: 'center', padding: 48 }}>
          <Spin size="large" />
        </div>
      ) : isError ? (
        <Alert
          type="error"
          showIcon
          message="Erro ao carregar desempenho"
          description={error instanceof Error ? error.message : 'Erro desconhecido'}
        />
      ) : (
        <Space orientation="vertical" size={20} style={{ width: '100%' }}>
          <Card
            style={{ borderRadius: 10, border: '1px solid #EBF0F5' }}
            styles={{ body: { padding: '24px 28px' } }}
          >
            <Row gutter={[32, 24]} align="middle">
              <Col xs={24} md={12}>
                <Text
                  type="secondary"
                  style={{ fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.08em' }}
                >
                  Realizado {meses[mes - 1]}/{ano}
                </Text>
                <div style={{ marginTop: 4 }}>
                  <Text
                    strong
                    style={{
                      fontSize: 32,
                      color: bateuMeta ? '#52c41a' : '#003B8E',
                      lineHeight: 1,
                    }}
                  >
                    {fmt(realizado)}
                  </Text>
                  {bateuMeta && (
                    <Tag
                      color="success"
                      style={{ marginLeft: 10, fontWeight: 700, borderRadius: 20 }}
                    >
                      Meta batida!
                    </Tag>
                  )}
                </div>
                <Text type="secondary" style={{ fontSize: 13 }}>
                  de {fmt(meta)} de meta
                </Text>
                <Progress
                  percent={Math.min(percentual, 100)}
                  style={{ marginTop: 12 }}
                  strokeColor={progressColor}
                  format={() => `${percentual.toFixed(1)}%`}
                />
              </Col>
              <Col xs={24} md={12}>
                <Row gutter={[16, 16]}>
                  <Col span={12}>
                    <Statistic
                      title="Pedidos Transmitidos"
                      value={data?.totalPedidos ?? 0}
                      styles={{ content: { color: '#003B8E' } }}
                    />
                  </Col>
                  <Col span={12}>
                    <Statistic
                      title="Comissão Estimada"
                      value={fmt(comissao)}
                      styles={{ content: { color: '#52c41a', fontSize: 20 } }}
                    />
                  </Col>
                  <Col span={12}>
                    <Statistic
                      title="Falta para Meta"
                      value={meta > realizado ? fmt(meta - realizado) : 'Atingida'}
                      styles={{
                        content: { color: meta > realizado ? '#faad14' : '#52c41a', fontSize: 18 },
                      }}
                    />
                  </Col>
                  <Col span={12}>
                    <Statistic
                      title="% Atingido"
                      value={`${percentual.toFixed(1)}%`}
                      styles={{ content: { color: progressColor, fontSize: 18 } }}
                    />
                  </Col>
                </Row>
              </Col>
            </Row>
          </Card>

          {meta === 0 && (
            <Card
              style={{ borderRadius: 8, border: '1px solid #fde68a', background: '#fffbeb' }}
              styles={{ body: { padding: '12px 16px' } }}
            >
              <Space>
                <AlertOutlined style={{ color: '#d97706' }} />
                <Text style={{ color: '#92400e' }}>
                  Nenhuma meta cadastrada para {meses[mes - 1]}/{ano}. Fale com seu supervisor.
                </Text>
              </Space>
            </Card>
          )}
        </Space>
      )}
    </div>
  );
}

// ─── Aba 2: Carteira de Clientes ─────────────────────────────────────────────

type FiltroCarteira = 'todos' | 'inativos30' | 'inativos60' | 'semPedido';

function TabCarteira() {
  const [filtro, setFiltro] = useState<FiltroCarteira>('todos');
  const { data, isLoading, isError, error } = useReportCarteira();

  const clientes = data?.data ?? [];

  const filtered = clientes.filter((c: CarteiraCliente) => {
    if (filtro === 'inativos30') return c.diasSemPedido != null && c.diasSemPedido >= 30;
    if (filtro === 'inativos60') return c.diasSemPedido != null && c.diasSemPedido >= 60;
    if (filtro === 'semPedido') return c.totalPedidos === 0;
    return true;
  });

  function statusBadge(c: CarteiraCliente) {
    if (c.totalPedidos === 0)
      return <Badge color="#94A3B8" text={<Text style={{ fontSize: 12 }}>Sem pedidos</Text>} />;
    if (c.diasSemPedido != null && c.diasSemPedido >= 60)
      return (
        <Badge
          color="#ef4444"
          text={<Text style={{ fontSize: 12, color: '#ef4444' }}>Inativo 60d+</Text>}
        />
      );
    if (c.diasSemPedido != null && c.diasSemPedido >= 30)
      return (
        <Badge
          color="#f59e0b"
          text={<Text style={{ fontSize: 12, color: '#f59e0b' }}>Inativo 30d+</Text>}
        />
      );
    return (
      <Badge color="#22c55e" text={<Text style={{ fontSize: 12, color: '#22c55e' }}>Ativo</Text>} />
    );
  }

  const columns: TableColumnsType<CarteiraCliente> = [
    {
      title: 'Cliente',
      key: 'cliente',
      render: (_: unknown, c: CarteiraCliente) => (
        <Space orientation="vertical" size={0}>
          <Text strong style={{ fontSize: 13 }}>
            {c.razao ?? c.nome ?? `Cód. ${c.idCliente}`}
          </Text>
          {c.razao && c.nome && (
            <Text type="secondary" style={{ fontSize: 11 }}>
              {c.nome}
            </Text>
          )}
        </Space>
      ),
    },
    {
      title: 'Status',
      key: 'status',
      width: 140,
      render: (_: unknown, c: CarteiraCliente) => statusBadge(c),
    },
    {
      title: 'Último Pedido',
      dataIndex: 'ultimoPedido',
      width: 130,
      render: (v: string | null) => (
        <Text style={{ fontSize: 13, color: '#475569' }}>{fmtDate(v)}</Text>
      ),
    },
    {
      title: 'Dias Sem Pedido',
      dataIndex: 'diasSemPedido',
      width: 140,
      align: 'right' as const,
      render: (v: number | null) =>
        v != null ? (
          <Text
            strong
            className="tabular-nums"
            style={{ color: v >= 60 ? '#ef4444' : v >= 30 ? '#f59e0b' : '#22c55e' }}
          >
            {v}d
          </Text>
        ) : (
          <Text type="secondary">—</Text>
        ),
    },
    {
      title: 'Pedidos',
      dataIndex: 'totalPedidos',
      width: 90,
      align: 'right' as const,
      render: (v: number) => <Text className="tabular-nums">{v}</Text>,
    },
    {
      title: 'Ticket Médio',
      dataIndex: 'ticketMedio',
      width: 130,
      align: 'right' as const,
      render: (v: string) => (
        <Text strong className="tabular-nums" style={{ color: '#003B8E' }}>
          {fmt(v)}
        </Text>
      ),
    },
  ];

  if (isError) {
    return (
      <Alert
        type="error"
        showIcon
        message="Erro ao carregar carteira de clientes"
        description={error instanceof Error ? error.message : 'Erro desconhecido'}
      />
    );
  }

  return (
    <div>
      {data && (
        <Row gutter={[12, 12]} style={{ marginBottom: 20 }}>
          {[
            { key: 'todos', label: 'Total', value: data.total, color: '#003B8E' },
            { key: 'inativos30', label: 'Inativos 30d+', value: data.inativos30, color: '#f59e0b' },
            { key: 'inativos60', label: 'Inativos 60d+', value: data.inativos60, color: '#ef4444' },
            { key: 'semPedido', label: 'Sem Pedido', value: data.semPedido, color: '#94A3B8' },
          ].map((item) => (
            <Col key={item.key} xs={12} md={6}>
              <Card
                hoverable
                onClick={() => setFiltro(item.key as FiltroCarteira)}
                style={{
                  borderRadius: 8,
                  border: filtro === item.key ? `2px solid ${item.color}` : '1px solid #EBF0F5',
                  cursor: 'pointer',
                }}
                styles={{ body: { padding: '12px 16px' } }}
              >
                <Statistic
                  title={item.label}
                  value={item.value}
                  styles={{ content: { color: item.color, fontSize: 24 } }}
                />
              </Card>
            </Col>
          ))}
        </Row>
      )}

      <Card
        style={{ borderRadius: 10, border: '1px solid #EBF0F5' }}
        styles={{ body: { padding: 0 } }}
      >
        <Table<CarteiraCliente>
          rowKey="idCliente"
          columns={columns}
          dataSource={filtered}
          loading={isLoading}
          size="middle"
          pagination={{ pageSize: 15, showSizeChanger: false }}
          scroll={{ x: 700 }}
          style={{ borderRadius: 10, overflow: 'hidden' }}
        />
      </Card>
    </div>
  );
}

// ─── Aba 3: Curva ABC ─────────────────────────────────────────────────────────

const CURVA_COLOR: Record<string, string> = { A: '#003B8E', B: '#f59e0b', C: '#94A3B8' };

function TabAbc() {
  const now = dayjs();
  const [mes, setMes] = useState<number | undefined>(now.month() + 1);
  const [ano, setAno] = useState<number | undefined>(now.year());

  const { data, isLoading, isError, error } = useReportAbc({ mes, ano });

  const meses = [
    'Jan',
    'Fev',
    'Mar',
    'Abr',
    'Mai',
    'Jun',
    'Jul',
    'Ago',
    'Set',
    'Out',
    'Nov',
    'Dez',
  ];

  const columns: TableColumnsType<AbcProduto> = [
    {
      title: 'Curva',
      dataIndex: 'curva',
      width: 70,
      align: 'center' as const,
      render: (v: string) => (
        <Tag
          color={CURVA_COLOR[v]}
          style={{ fontWeight: 800, borderRadius: 20, fontSize: 13, padding: '0 10px' }}
        >
          {v}
        </Tag>
      ),
    },
    {
      title: 'Produto',
      key: 'produto',
      render: (_: unknown, p: AbcProduto) => (
        <Space orientation="vertical" size={0}>
          {p.codProduto && <Text style={{ fontSize: 11, color: '#94A3B8' }}>{p.codProduto}</Text>}
          <Text style={{ fontSize: 13, fontWeight: 500 }}>{p.descProduto}</Text>
        </Space>
      ),
    },
    {
      title: 'Total Faturado',
      dataIndex: 'totalFaturado',
      width: 150,
      align: 'right' as const,
      render: (v: string, p: AbcProduto) => (
        <Space orientation="vertical" size={0} style={{ alignItems: 'flex-end' }}>
          <Text strong className="tabular-nums" style={{ color: '#003B8E' }}>
            {fmt(v)}
          </Text>
          <Text type="secondary" style={{ fontSize: 11 }}>
            {Number(p.participacao).toFixed(1)}% do total
          </Text>
        </Space>
      ),
    },
    {
      title: 'Qtd. Vendida',
      dataIndex: 'qtdVendida',
      width: 110,
      align: 'right' as const,
      render: (v: string) => (
        <Text className="tabular-nums">
          {Number(v).toLocaleString('pt-BR', { maximumFractionDigits: 0 })}
        </Text>
      ),
    },
    {
      title: 'Desc. Médio',
      dataIndex: 'descontoMedio',
      width: 110,
      align: 'right' as const,
      render: (v: string) => (
        <Text className="tabular-nums" style={{ color: Number(v) > 5 ? '#f59e0b' : '#475569' }}>
          {Number(v).toFixed(1)}%
        </Text>
      ),
    },
    {
      title: 'Comissão',
      dataIndex: 'comissaoTotal',
      width: 120,
      align: 'right' as const,
      render: (v: string) => (
        <Text className="tabular-nums" style={{ color: '#22c55e', fontWeight: 600 }}>
          {fmt(v)}
        </Text>
      ),
    },
  ];

  if (isError) {
    return (
      <Alert
        type="error"
        showIcon
        message="Erro ao carregar curva ABC"
        description={error instanceof Error ? error.message : 'Erro desconhecido'}
      />
    );
  }

  return (
    <div>
      <Space style={{ marginBottom: 20 }}>
        <Select
          value={mes}
          onChange={(v) => setMes(v)}
          allowClear
          placeholder="Mês"
          style={{ width: 100 }}
          onClear={() => setMes(undefined)}
        >
          {meses.map((m, i) => (
            <Option key={i + 1} value={i + 1}>
              {m}
            </Option>
          ))}
        </Select>
        <DatePicker
          picker="year"
          value={ano ? dayjs().year(ano) : null}
          onChange={(d) => setAno(d?.year())}
          style={{ width: 100 }}
          placeholder="Ano"
          allowClear
        />
        {data && (
          <Text type="secondary" style={{ fontSize: 13 }}>
            Período: <strong>{data.periodo}</strong> — Total:{' '}
            <strong>{fmt(data.totalFaturado)}</strong>
          </Text>
        )}
      </Space>

      <Card
        style={{ borderRadius: 10, border: '1px solid #EBF0F5' }}
        styles={{ body: { padding: 0 } }}
      >
        <Table<AbcProduto>
          rowKey={(r) => r.codProduto ?? r.descProduto}
          columns={columns}
          dataSource={data?.data ?? []}
          loading={isLoading}
          size="middle"
          pagination={{ pageSize: 20, showSizeChanger: false }}
          scroll={{ x: 800 }}
          rowClassName={(r) => (r.curva === 'A' ? 'row-curva-a' : '')}
          style={{ borderRadius: 10, overflow: 'hidden' }}
        />
      </Card>

      <style>{`
        .row-curva-a td { background: #f0f5ff !important; }
      `}</style>
    </div>
  );
}

// ─── RelatoriosPage ───────────────────────────────────────────────────────────

export function RelatoriosPage() {
  const tabs = [
    {
      key: 'meta',
      label: (
        <Space>
          <RiseOutlined />
          Desempenho vs. Meta
        </Space>
      ),
      children: <TabMeta />,
    },
    {
      key: 'carteira',
      label: (
        <Space>
          <TeamOutlined />
          Carteira de Clientes
        </Space>
      ),
      children: <TabCarteira />,
    },
    {
      key: 'abc',
      label: (
        <Space>
          <BarChartOutlined />
          Curva ABC
        </Space>
      ),
      children: <TabAbc />,
    },
  ];

  return (
    <div style={{ maxWidth: 1200, margin: '0 auto' }}>
      <div style={{ marginBottom: 24 }}>
        <Title level={3} style={{ margin: 0, color: '#003B8E' }}>
          Relatórios
        </Title>
        <Text type="secondary" style={{ fontSize: 14 }}>
          Análise de desempenho, carteira e mix de produtos.
        </Text>
      </div>

      <Tabs defaultActiveKey="meta" items={tabs} size="large" />
    </div>
  );
}
