import { useState } from 'react';
import { Modal, Form, Select, Input, Checkbox, Typography, Space } from 'antd';
import { TIPOS_CHAMADO, TIPO_CHAMADO_LABEL, type PedidoItem } from '@sar/api-interface';
import { useCreateChamado } from '../../lib/queries/sac';

const { TextArea } = Input;
const { Text } = Typography;

interface Props {
  open: boolean;
  onClose: () => void;
  idPedido?: string;
  numPedSar?: number;
  numPedErp?: number;
  nomeCliente?: string | null;
  idCliente: number;
  itens: PedidoItem[];
}

export function AbrirChamadoModal({
  open,
  onClose,
  idPedido,
  numPedSar,
  numPedErp,
  nomeCliente,
  idCliente,
  itens,
}: Props) {
  const [form] = Form.useForm();
  const [itensSelecionados, setItensSelecionados] = useState<string[]>([]);
  const criar = useCreateChamado();

  const pedidoLabel = numPedErp
    ? `ERP #${numPedErp}`
    : numPedSar
      ? `SAR-${String(numPedSar).padStart(5, '0')}`
      : 'Pedido';

  function handleOk() {
    form.validateFields().then((values) => {
      const itensAfetados = itens
        .filter((it) => itensSelecionados.includes(it.id))
        .map((it) => ({
          codProduto: it.codProduto ?? '',
          nomeProduto: it.descProduto ?? it.codProduto ?? '',
          qtd: Number(it.qtd),
        }));
      criar.mutate(
        {
          idPedido,
          numPedSar,
          numPedErp,
          nomeCliente: nomeCliente ?? undefined,
          idCliente,
          tipo: values.tipo,
          assunto: values.assunto,
          descricao: values.descricao,
          itensAfetados,
        },
        {
          onSuccess: () => {
            form.resetFields();
            setItensSelecionados([]);
            onClose();
          },
        },
      );
    });
  }

  function handleCancel() {
    form.resetFields();
    setItensSelecionados([]);
    onClose();
  }

  return (
    <Modal
      title={
        <span>
          Abrir Chamado — {pedidoLabel}
          {nomeCliente && (
            <Text type="secondary" style={{ fontWeight: 400, marginLeft: 8 }}>
              · {nomeCliente}
            </Text>
          )}
        </span>
      }
      open={open}
      onOk={handleOk}
      onCancel={handleCancel}
      okText="Abrir Chamado"
      cancelText="Cancelar"
      confirmLoading={criar.isPending}
      width={640}
      centered
    >
      <Form form={form} layout="vertical" style={{ marginTop: 16 }}>
        <Form.Item
          name="tipo"
          label="Tipo de Ocorrência"
          rules={[{ required: true, message: 'Selecione o tipo' }]}
        >
          <Select placeholder="Selecione...">
            {TIPOS_CHAMADO.map((t) => (
              <Select.Option key={t} value={t}>
                {TIPO_CHAMADO_LABEL[t]}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item
          name="assunto"
          label="Assunto"
          rules={[{ required: true, min: 5, message: 'Mínimo 5 caracteres' }]}
        >
          <Input maxLength={200} showCount placeholder="Resumo breve do problema..." />
        </Form.Item>
        <Form.Item
          name="descricao"
          label="Descrição"
          rules={[{ required: true, min: 10, message: 'Mínimo 10 caracteres' }]}
        >
          <TextArea
            rows={4}
            maxLength={2000}
            showCount
            placeholder="Descreva detalhadamente o problema..."
          />
        </Form.Item>
        {itens.length > 0 && (
          <Form.Item label="Produtos Afetados (opcional)">
            <Space orientation="vertical" style={{ width: '100%' }}>
              {itens.map((it) => (
                <Checkbox
                  key={it.id}
                  checked={itensSelecionados.includes(it.id)}
                  onChange={(e) => {
                    if (e.target.checked) {
                      setItensSelecionados((prev) => [...prev, it.id]);
                    } else {
                      setItensSelecionados((prev) => prev.filter((c) => c !== it.id));
                    }
                  }}
                >
                  <Text>
                    {it.codProduto} — {it.descProduto ?? it.codProduto}
                  </Text>
                  <Text type="secondary"> (Qtd: {it.qtd})</Text>
                </Checkbox>
              ))}
            </Space>
          </Form.Item>
        )}
      </Form>
    </Modal>
  );
}
