import { useState } from 'react';
import {
  Button,
  Card,
  DatePicker,
  Flex,
  Form,
  InputNumber,
  Modal,
  Popconfirm,
  Select,
  Skeleton,
  Space,
  Table,
  Tabs,
  Tag,
  Tooltip,
  Typography,
  Input,
  message,
} from 'antd';
import type { TableColumnsType } from 'antd';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus, faTrash, faPen } from '@fortawesome/free-solid-svg-icons';
import dayjs from 'dayjs';
import type {
  AlcadaDescontoItem,
  Promocao,
  RegraDesconto,
  RepStats,
  GrupoProdutoItem,
} from '@sar/api-interface';
import {
  usePoliticasDescontos,
  usePromocoes,
  useUpsertDesconto,
  useCreatePromocao,
  useUpdatePromocao,
  useDeletePromocao,
  useEquipe,
  useRegrasDesconto,
  useGruposProduto,
  useCreateRegraDesconto,
  useUpdateRegraDesconto,
  useDeleteRegraDesconto,
} from '../../lib/queries/gerente';

const { Title, Text } = Typography;

// ─── Tab Descontos ────────────────────────────────────────────────────────────

function TabDescontos() {
  const { data, isLoading } = usePoliticasDescontos();
  const upsert = useUpsertDesconto();
  const [editingKey, setEditingKey] = useState<string | null>(null);
  const [editValue, setEditValue] = useState<number>(0);
  const [msg, msgCtx] = message.useMessage();

  function startEdit(row: AlcadaDescontoItem) {
    setEditingKey(`${row.codVendedor}-${row.codGrupo}`);
    setEditValue(row.limitePerc);
  }

  async function saveEdit(row: AlcadaDescontoItem) {
    try {
      await upsert.mutateAsync({
        codVendedor: row.codVendedor,
        codGrupo: row.codGrupo,
        limitePerc: editValue,
      });
    } catch {
      return; // erro já notificado pelo handler global do QueryClient
    }
    setEditingKey(null);
    void msg.success('Limite atualizado');
  }

  const columns: TableColumnsType<AlcadaDescontoItem> = [
    {
      title: 'Representante',
      key: 'rep',
      render: (_: unknown, row: AlcadaDescontoItem) =>
        row.nomeVendedor ?? `Cód. ${row.codVendedor}`,
    },
    {
      title: 'Grupo',
      dataIndex: 'codGrupo',
      width: 100,
      render: (v: number) => (v === 0 ? <Tag>Global</Tag> : <Tag color="blue">Grupo {v}</Tag>),
    },
    {
      title: 'Limite de Desconto',
      dataIndex: 'limitePerc',
      width: 200,
      render: (v: number, row: AlcadaDescontoItem) => {
        const key = `${row.codVendedor}-${row.codGrupo}`;
        if (editingKey === key) {
          return (
            <InputNumber
              value={editValue}
              onChange={(val) => setEditValue(val ?? 0)}
              min={0}
              max={100}
              suffix="%"
              size="small"
              style={{ width: 100 }}
              autoFocus
            />
          );
        }
        return <Text className="tabular-nums">{v}%</Text>;
      },
    },
    {
      title: '',
      width: 120,
      render: (_: unknown, row: AlcadaDescontoItem) => {
        const key = `${row.codVendedor}-${row.codGrupo}`;
        if (editingKey === key) {
          return (
            <Space>
              <Button
                size="small"
                type="primary"
                loading={upsert.isPending}
                onClick={() => void saveEdit(row)}
              >
                Salvar
              </Button>
              <Button size="small" onClick={() => setEditingKey(null)}>
                Cancelar
              </Button>
            </Space>
          );
        }
        return (
          <Button
            size="small"
            icon={<FontAwesomeIcon icon={faPen} />}
            onClick={() => startEdit(row)}
          >
            Editar
          </Button>
        );
      },
    },
  ];

  if (isLoading || !data) return <Skeleton active paragraph={{ rows: 5 }} />;

  return (
    <>
      {msgCtx}
      <Table<AlcadaDescontoItem>
        rowKey={(r) => `${r.codVendedor}-${r.codGrupo}`}
        columns={columns}
        dataSource={data.descontos}
        pagination={false}
        size="small"
        locale={{ emptyText: 'Nenhum limite configurado.' }}
      />
      <Text type="secondary" style={{ fontSize: 'var(--text-xs)', display: 'block', marginTop: 8 }}>
        Limite 0 = sem restricao de desconto para este representante.
      </Text>
    </>
  );
}

// ─── Tab Promocoes ────────────────────────────────────────────────────────────

interface PromocaoForm {
  descricao: string;
  codProduto?: string;
  grpProd?: string;
  descPct: number;
  periodo: [dayjs.Dayjs, dayjs.Dayjs];
}

function TabPromocoes() {
  const { data, isLoading } = usePromocoes();
  const createMutation = useCreatePromocao();
  const updateMutation = useUpdatePromocao();
  const deleteMutation = useDeletePromocao();
  const [form] = Form.useForm<PromocaoForm>();
  const [modalOpen, setModalOpen] = useState(false);
  const [editTarget, setEditTarget] = useState<Promocao | null>(null);
  const [msg, msgCtx] = message.useMessage();

  function openCreate() {
    setEditTarget(null);
    form.resetFields();
    setModalOpen(true);
  }

  function openEdit(p: Promocao) {
    setEditTarget(p);
    form.setFieldsValue({
      descricao: p.descricao,
      codProduto: p.codProduto ?? undefined,
      grpProd: p.grpProd ?? undefined,
      descPct: p.descPct,
      periodo: [dayjs(p.dataInicio), dayjs(p.dataFim)],
    });
    setModalOpen(true);
  }

  async function handleSubmit(values: PromocaoForm) {
    const [inicio, fim] = values.periodo;
    const body = {
      descricao: values.descricao,
      codProduto: values.codProduto || undefined,
      grpProd: values.grpProd || undefined,
      descPct: values.descPct,
      dataInicio: inicio.format('YYYY-MM-DD'),
      dataFim: fim.format('YYYY-MM-DD'),
    };
    try {
      if (editTarget) {
        await updateMutation.mutateAsync({ id: editTarget.id, body });
        void msg.success('Promocao atualizada');
      } else {
        await createMutation.mutateAsync(body);
        void msg.success('Promocao criada');
      }
    } catch {
      return; // erro já notificado pelo handler global do QueryClient; modal fica aberto
    }
    setModalOpen(false);
  }

  async function handleDelete(id: number) {
    try {
      await deleteMutation.mutateAsync(id);
    } catch {
      return; // erro já notificado pelo handler global do QueryClient
    }
    void msg.success('Promocao removida');
  }

  const today = dayjs().format('YYYY-MM-DD');

  const columns: TableColumnsType<Promocao> = [
    {
      title: 'Descricao',
      dataIndex: 'descricao',
      render: (v: string, row: Promocao) => (
        <Flex vertical gap={2}>
          <Text>{v}</Text>
          {(row.codProduto || row.grpProd) && (
            <Text type="secondary" style={{ fontSize: 'var(--text-xs)' }}>
              {row.codProduto ? `Produto: ${row.codProduto}` : `Grupo: ${row.grpProd}`}
            </Text>
          )}
        </Flex>
      ),
    },
    {
      title: 'Desconto',
      dataIndex: 'descPct',
      width: 100,
      align: 'right',
      render: (v: number) => <Text className="tabular-nums">{v}%</Text>,
    },
    {
      title: 'Vigencia',
      width: 200,
      render: (_: unknown, row: Promocao) => (
        <Text className="tabular-nums" style={{ fontSize: 'var(--text-sm)' }}>
          {dayjs(row.dataInicio).format('DD/MM/YY')} a {dayjs(row.dataFim).format('DD/MM/YY')}
        </Text>
      ),
    },
    {
      title: 'Status',
      width: 90,
      render: (_: unknown, row: Promocao) => {
        if (!row.ativa) return <Tag>Inativa</Tag>;
        if (row.dataFim < today) return <Tag color="red">Expirada</Tag>;
        if (row.dataInicio > today) return <Tag color="blue">Futura</Tag>;
        return <Tag color="green">Ativa</Tag>;
      },
    },
    {
      title: '',
      width: 100,
      render: (_: unknown, row: Promocao) => (
        <Space>
          <Tooltip title="Editar">
            <Button
              size="small"
              icon={<FontAwesomeIcon icon={faPen} />}
              onClick={() => openEdit(row)}
            />
          </Tooltip>
          <Popconfirm
            title="Remover promocao?"
            okText="Sim"
            cancelText="Nao"
            onConfirm={() => void handleDelete(row.id)}
          >
            <Button
              size="small"
              danger
              icon={<FontAwesomeIcon icon={faTrash} />}
              loading={deleteMutation.isPending}
            />
          </Popconfirm>
        </Space>
      ),
    },
  ];

  if (isLoading || !data) return <Skeleton active paragraph={{ rows: 5 }} />;

  return (
    <>
      {msgCtx}
      <Flex justify="flex-end" style={{ marginBottom: 16 }}>
        <Button type="primary" icon={<FontAwesomeIcon icon={faPlus} />} onClick={openCreate}>
          Nova Promocao
        </Button>
      </Flex>

      <Table<Promocao>
        rowKey="id"
        columns={columns}
        dataSource={data.promocoes}
        pagination={false}
        size="small"
        locale={{ emptyText: 'Nenhuma promocao cadastrada.' }}
      />

      <Modal
        title={editTarget ? 'Editar Promocao' : 'Nova Promocao'}
        open={modalOpen}
        onCancel={() => setModalOpen(false)}
        onOk={() => void form.validateFields().then(handleSubmit)}
        okText={editTarget ? 'Salvar' : 'Criar'}
        confirmLoading={createMutation.isPending || updateMutation.isPending}
        width={520}
        centered
      >
        <Form form={form} layout="vertical" style={{ marginTop: 16 }}>
          <Form.Item
            name="descricao"
            label="Descricao"
            rules={[{ required: true, message: 'Informe a descricao' }]}
          >
            <Input placeholder="Ex.: Promocao de inverno" />
          </Form.Item>

          <Flex gap={16}>
            <Form.Item name="codProduto" label="Codigo do produto" style={{ flex: 1 }}>
              <Input placeholder="Opcional" />
            </Form.Item>
            <Form.Item name="grpProd" label="Grupo de produto" style={{ flex: 1 }}>
              <Input placeholder="Opcional" />
            </Form.Item>
          </Flex>

          <Form.Item
            name="descPct"
            label="Desconto (%)"
            rules={[{ required: true, message: 'Informe o desconto' }]}
          >
            <InputNumber min={0} max={100} suffix="%" style={{ width: '100%' }} />
          </Form.Item>

          <Form.Item
            name="periodo"
            label="Periodo de vigencia"
            rules={[{ required: true, message: 'Informe o periodo' }]}
          >
            <DatePicker.RangePicker
              format="DD/MM/YYYY"
              style={{ width: '100%' }}
              placeholder={['Inicio', 'Fim']}
            />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
}

// ─── Tab Regras de Desconto ───────────────────────────────────────────────────

interface RegraForm {
  descricao: string;
  codVendedor?: number;
  codGrupo?: number;
  codSubgrupo?: number;
  descPct: number;
  periodo: [dayjs.Dayjs, dayjs.Dayjs];
}

function TabRegras() {
  const { data, isLoading } = useRegrasDesconto();
  const { data: equipe } = useEquipe();
  const { data: gruposData } = useGruposProduto();
  const createMutation = useCreateRegraDesconto();
  const updateMutation = useUpdateRegraDesconto();
  const deleteMutation = useDeleteRegraDesconto();
  const [form] = Form.useForm<RegraForm>();
  const [modalOpen, setModalOpen] = useState(false);
  const [editTarget, setEditTarget] = useState<RegraDesconto | null>(null);
  const [msg, msgCtx] = message.useMessage();
  const grupoSelecionado = Form.useWatch('codGrupo', form);

  const repOptions = (equipe?.reps ?? []).map((r: RepStats) => ({
    value: r.codVendedor,
    label: r.nomeVendedor ?? `Cód. ${r.codVendedor}`,
  }));

  const grupoRows: GrupoProdutoItem[] = gruposData?.grupos ?? [];
  const grupoMap = new Map<number, { value: number; label: string }>();
  const subgrupoMap = new Map<number, { value: number; label: string }>();
  for (const g of grupoRows) {
    if (g.codGrupo != null && !grupoMap.has(g.codGrupo)) {
      grupoMap.set(g.codGrupo, { value: g.codGrupo, label: g.grupo ?? `Grupo ${g.codGrupo}` });
    }
    if (
      g.codSubgrupo != null &&
      (grupoSelecionado == null || g.codGrupo === grupoSelecionado) &&
      !subgrupoMap.has(g.codSubgrupo)
    ) {
      subgrupoMap.set(g.codSubgrupo, {
        value: g.codSubgrupo,
        label: g.subgrupo ?? `Subgrupo ${g.codSubgrupo}`,
      });
    }
  }
  const grupoOptions = [...grupoMap.values()];
  const subgrupoOptions = [...subgrupoMap.values()];

  function openCreate() {
    setEditTarget(null);
    form.resetFields();
    setModalOpen(true);
  }

  function openEdit(r: RegraDesconto) {
    setEditTarget(r);
    form.setFieldsValue({
      descricao: r.descricao,
      codVendedor: r.codVendedor ?? undefined,
      codGrupo: r.codGrupo ?? undefined,
      codSubgrupo: r.codSubgrupo ?? undefined,
      descPct: r.descPct,
      periodo: [dayjs(r.dataInicio), dayjs(r.dataFim)],
    });
    setModalOpen(true);
  }

  async function handleSubmit(values: RegraForm) {
    const [inicio, fim] = values.periodo;
    const body = {
      descricao: values.descricao,
      codVendedor: values.codVendedor ?? null,
      codGrupo: values.codGrupo ?? null,
      codSubgrupo: values.codSubgrupo ?? null,
      descPct: values.descPct,
      dataInicio: inicio.format('YYYY-MM-DD'),
      dataFim: fim.format('YYYY-MM-DD'),
    };
    try {
      if (editTarget) {
        await updateMutation.mutateAsync({ id: editTarget.id, body });
        void msg.success('Regra atualizada');
      } else {
        await createMutation.mutateAsync(body);
        void msg.success('Regra criada');
      }
    } catch {
      return; // erro já notificado pelo handler global do QueryClient; modal fica aberto
    }
    setModalOpen(false);
  }

  async function handleDelete(id: number) {
    try {
      await deleteMutation.mutateAsync(id);
    } catch {
      return; // erro já notificado pelo handler global do QueryClient
    }
    void msg.success('Regra removida');
  }

  const today = dayjs().format('YYYY-MM-DD');

  const columns: TableColumnsType<RegraDesconto> = [
    {
      title: 'Descricao',
      dataIndex: 'descricao',
    },
    {
      title: 'Representante',
      width: 180,
      render: (_: unknown, row: RegraDesconto) =>
        row.codVendedor == null ? (
          <Tag>Todos</Tag>
        ) : (
          <Text>{row.nomeVendedor ?? `Cód. ${row.codVendedor}`}</Text>
        ),
    },
    {
      title: 'Grupo / Subgrupo',
      width: 220,
      render: (_: unknown, row: RegraDesconto) => {
        if (row.codGrupo == null && row.codSubgrupo == null) return <Tag>Todos</Tag>;
        const partes = [
          row.codGrupo != null ? (row.grupo ?? `Grupo ${row.codGrupo}`) : null,
          row.codSubgrupo != null ? (row.subgrupo ?? `Subgrupo ${row.codSubgrupo}`) : null,
        ].filter(Boolean);
        return <Text style={{ fontSize: 'var(--text-sm)' }}>{partes.join(' / ')}</Text>;
      },
    },
    {
      title: 'Desconto',
      dataIndex: 'descPct',
      width: 100,
      align: 'right',
      render: (v: number) => <Text className="tabular-nums">{v}%</Text>,
    },
    {
      title: 'Vigencia',
      width: 200,
      render: (_: unknown, row: RegraDesconto) => (
        <Text className="tabular-nums" style={{ fontSize: 'var(--text-sm)' }}>
          {dayjs(row.dataInicio).format('DD/MM/YY')} a {dayjs(row.dataFim).format('DD/MM/YY')}
        </Text>
      ),
    },
    {
      title: 'Status',
      width: 90,
      render: (_: unknown, row: RegraDesconto) => {
        if (!row.ativa) return <Tag>Inativa</Tag>;
        if (row.dataFim < today) return <Tag color="red">Expirada</Tag>;
        if (row.dataInicio > today) return <Tag color="blue">Futura</Tag>;
        return <Tag color="green">Ativa</Tag>;
      },
    },
    {
      title: '',
      width: 100,
      render: (_: unknown, row: RegraDesconto) => (
        <Space>
          <Tooltip title="Editar">
            <Button
              size="small"
              icon={<FontAwesomeIcon icon={faPen} />}
              onClick={() => openEdit(row)}
            />
          </Tooltip>
          <Popconfirm
            title="Remover regra?"
            okText="Sim"
            cancelText="Nao"
            onConfirm={() => void handleDelete(row.id)}
          >
            <Button
              size="small"
              danger
              icon={<FontAwesomeIcon icon={faTrash} />}
              loading={deleteMutation.isPending}
            />
          </Popconfirm>
        </Space>
      ),
    },
  ];

  if (isLoading || !data) return <Skeleton active paragraph={{ rows: 5 }} />;

  return (
    <>
      {msgCtx}
      <Flex justify="flex-end" style={{ marginBottom: 16 }}>
        <Button type="primary" icon={<FontAwesomeIcon icon={faPlus} />} onClick={openCreate}>
          Nova Regra
        </Button>
      </Flex>

      <Table<RegraDesconto>
        rowKey="id"
        columns={columns}
        dataSource={data.regras}
        pagination={false}
        size="small"
        locale={{ emptyText: 'Nenhuma regra de desconto cadastrada.' }}
      />
      <Text type="secondary" style={{ fontSize: 'var(--text-xs)', display: 'block', marginTop: 8 }}>
        A regra vale para o representante, grupo e subgrupo informados (em branco = todos) e aplica
        o desconto automaticamente nos pedidos durante a vigencia.
      </Text>

      <Modal
        title={editTarget ? 'Editar Regra de Desconto' : 'Nova Regra de Desconto'}
        open={modalOpen}
        onCancel={() => setModalOpen(false)}
        onOk={() => void form.validateFields().then(handleSubmit)}
        okText={editTarget ? 'Salvar' : 'Criar'}
        confirmLoading={createMutation.isPending || updateMutation.isPending}
        width={520}
        centered
      >
        <Form form={form} layout="vertical" style={{ marginTop: 16 }}>
          <Form.Item
            name="descricao"
            label="Descricao"
            rules={[{ required: true, message: 'Informe a descricao' }]}
          >
            <Input placeholder="Ex.: Campanha linha inverno" />
          </Form.Item>

          <Form.Item name="codVendedor" label="Representante">
            <Select
              options={repOptions}
              placeholder="Todos os representantes"
              allowClear
              showSearch
              optionFilterProp="label"
            />
          </Form.Item>

          <Flex gap={16}>
            <Form.Item name="codGrupo" label="Grupo de produto" style={{ flex: 1 }}>
              <Select
                options={grupoOptions}
                placeholder="Todos os grupos"
                allowClear
                showSearch
                optionFilterProp="label"
                onChange={() => form.setFieldValue('codSubgrupo', undefined)}
              />
            </Form.Item>
            <Form.Item name="codSubgrupo" label="Subgrupo" style={{ flex: 1 }}>
              <Select
                options={subgrupoOptions}
                placeholder="Todos os subgrupos"
                allowClear
                showSearch
                optionFilterProp="label"
              />
            </Form.Item>
          </Flex>

          <Form.Item
            name="descPct"
            label="Desconto (%)"
            rules={[{ required: true, message: 'Informe o desconto' }]}
          >
            <InputNumber min={0} max={100} suffix="%" style={{ width: '100%' }} />
          </Form.Item>

          <Form.Item
            name="periodo"
            label="Periodo de vigencia"
            rules={[{ required: true, message: 'Informe o periodo' }]}
          >
            <DatePicker.RangePicker
              format="DD/MM/YYYY"
              style={{ width: '100%' }}
              placeholder={['Inicio', 'Fim']}
            />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
}

// ─── PoliticasPage ─────────────────────────────────────────────────────────────

export function PoliticasPage() {
  const items = [
    {
      key: 'descontos',
      label: 'Desconto por Representante',
      children: <TabDescontos />,
    },
    {
      key: 'promocoes',
      label: 'Promocoes',
      children: <TabPromocoes />,
    },
    {
      key: 'regras',
      label: 'Regras de Desconto',
      children: <TabRegras />,
    },
  ];

  return (
    <Flex vertical gap={24} style={{ maxWidth: 1280, margin: '0 auto' }}>
      <Flex vertical gap={4}>
        <Title level={2} style={{ margin: 0 }}>
          Politicas Comerciais
        </Title>
        <Text type="secondary" style={{ fontSize: 'var(--text-lg)' }}>
          Limites de desconto e promocoes com vigencia
        </Text>
      </Flex>

      <Card styles={{ body: { paddingTop: 0 } }}>
        <Tabs items={items} />
      </Card>
    </Flex>
  );
}
