'use client';

import React, { useEffect, useMemo, useState } from 'react';
import { Alert, Button, Checkbox, Modal, Space, Spin, Tag, Typography } from 'antd';
import { Sparkles } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import { useResponsiveModalProps } from '@/hooks/useResponsiveModalProps';
import type { RequisitoSugestaoIa } from './types';
import styles from './ModalSugerirRequisitosIa.module.scss';

const { Text, Paragraph } = Typography;

const TIPO_LABEL: Record<string, string> = {
    funcional: 'Funcional',
    nao_funcional: 'Não funcional',
    regra_negocio: 'Regra de negócio',
};

const PRIORIDADE_LABEL: Record<string, string> = {
    baixa: 'Baixa',
    media: 'Média',
    alta: 'Alta',
    critica: 'Crítica',
};

export type ModalSugerirRequisitosIaProps = {
    open: boolean;
    loadingSugestoes: boolean;
    applying: boolean;
    sugestoes: RequisitoSugestaoIa[];
    errorMessage?: string | null;
    onClose: () => void;
    onRetry: () => void;
    onAplicar: (selecionados: RequisitoSugestaoIa[]) => void;
};

export function ModalSugerirRequisitosIa({
    open,
    loadingSugestoes,
    applying,
    sugestoes,
    errorMessage,
    onClose,
    onRetry,
    onAplicar,
}: ModalSugerirRequisitosIaProps) {
    const modalLayout = useResponsiveModalProps();
    const [selectedKeys, setSelectedKeys] = useState<string[]>([]);

    const keys = useMemo(
        () => sugestoes.map((s, index) => `${index}:${s.titulo}`),
        [sugestoes],
    );

    useEffect(() => {
        if (!open) {
            setSelectedKeys([]);
            return;
        }
        if (!loadingSugestoes && sugestoes.length > 0) {
            setSelectedKeys(keys);
        }
    }, [open, loadingSugestoes, sugestoes, keys]);

    const selectedItems = sugestoes.filter((_, index) =>
        selectedKeys.includes(`${index}:${sugestoes[index]?.titulo}`),
    );

    return (
        <Modal
            title={
                <Space>
                    <Sparkles size={ICON_SIZE_MD} aria-hidden />
                    Sugerir requisitos com IA
                </Space>
            }
            open={open}
            onCancel={onClose}
            width={modalLayout.width ?? 720}
            centered={modalLayout.centered}
            styles={modalLayout.styles}
            destroyOnHidden
            data-testid="planejamento-requisitos-modal-sugerir-ia"
            footer={
                <div className={styles.footer}>
                    <Button onClick={onClose} disabled={applying}>
                        Cancelar
                    </Button>
                    <Button
                        type="primary"
                        loading={applying}
                        disabled={loadingSugestoes || selectedItems.length === 0}
                        onClick={() => onAplicar(selectedItems)}
                        data-testid="planejamento-requisitos-aplicar-selecionados"
                    >
                        Inserir selecionados ({selectedItems.length})
                    </Button>
                </div>
            }
        >
            <Paragraph type="secondary" className={styles.intro}>
                Analisamos o briefing, escopo, stack, equipe, responsáveis técnicos e riscos já
                lançados neste projeto. Marque apenas os requisitos que deseja cadastrar no
                planejamento.
            </Paragraph>

            {errorMessage ? (
                <Alert
                    type="error"
                    showIcon
                    style={{ marginBottom: 12 }}
                    message={errorMessage}
                    action={
                        <Button size="small" onClick={onRetry}>
                            Tentar novamente
                        </Button>
                    }
                />
            ) : null}

            {loadingSugestoes ? (
                <div className={styles.loading}>
                    <Spin />
                    <Text type="secondary">Analisando o projeto e gerando sugestões…</Text>
                </div>
            ) : sugestoes.length === 0 && !errorMessage ? (
                <Alert
                    type="warning"
                    showIcon
                    message="Nenhuma sugestão nova"
                    description="Não encontramos requisitos adicionais além dos já cadastrados. Complete o briefing ou tente novamente depois."
                />
            ) : (
                <>
                    <div className={styles.toolbar}>
                        <Checkbox
                            checked={keys.length > 0 && selectedKeys.length === keys.length}
                            indeterminate={
                                selectedKeys.length > 0 && selectedKeys.length < keys.length
                            }
                            onChange={(e) => {
                                setSelectedKeys(e.target.checked ? keys : []);
                            }}
                        >
                            Selecionar todos
                        </Checkbox>
                        <Text type="secondary">
                            {selectedKeys.length} de {keys.length}
                        </Text>
                    </div>
                    <Checkbox.Group
                        value={selectedKeys}
                        onChange={(vals) => setSelectedKeys(vals as string[])}
                        className={styles.list}
                    >
                        {sugestoes.map((s, index) => {
                            const key = `${index}:${s.titulo}`;
                            return (
                                <label key={key} className={styles.item}>
                                    <Checkbox value={key} />
                                    <div className={styles.itemBody}>
                                        <div className={styles.itemTitle}>{s.titulo}</div>
                                        <div className={styles.itemMeta}>
                                            {s.tipo ? (
                                                <Tag>{TIPO_LABEL[s.tipo] ?? s.tipo}</Tag>
                                            ) : null}
                                            {s.prioridade ? (
                                                <Tag color="blue">
                                                    {PRIORIDADE_LABEL[s.prioridade] ?? s.prioridade}
                                                </Tag>
                                            ) : null}
                                        </div>
                                        {s.descricao ? (
                                            <div className={styles.itemDesc}>{s.descricao}</div>
                                        ) : null}
                                        {s.criterios_aceitacao ? (
                                            <div className={styles.criterio}>
                                                <Text type="secondary">Critério: </Text>
                                                {s.criterios_aceitacao}
                                            </div>
                                        ) : null}
                                    </div>
                                </label>
                            );
                        })}
                    </Checkbox.Group>
                </>
            )}
        </Modal>
    );
}