'use client';

import React, { useState } from 'react';
import {
    Alert,
    Button,
    Col,
    Collapse,
    Form,
    Input,
    Modal,
    Row,
    Select,
    Space,
    Typography,
} from 'antd';
import type { FormInstance, ModalProps } from 'antd';
import { Sparkles } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import { message } from '@/lib/feedback/message';
import { notifyApiError } from '@/lib/feedback/notifyApiError';
import { confirmDialog } from '@/lib/feedback/confirmDialog';
import apiClient from '@/lib/api/client';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { PRIORIDADE_OPCOES, TIPO_OPCOES } from '../constants';
import { buildNovaPaginaSitePayload } from '../buildNovaPaginaSitePayload';

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

export type ModalNovaPaginaSiteProps = {
    open: boolean;
    projetoId: string;
    form: FormInstance;
    onClose: () => void;
    onSubmit: (values: Record<string, unknown>) => void;
    modalWidth?: ModalProps['width'];
    modalCentered?: boolean;
    modalStyles?: ModalProps['styles'];
};

type SugestaoIa = {
    titulo?: string;
    slug?: string;
    tipo_website?: string;
    prioridade?: string;
    descricao?: string;
    objetivo?: string;
    referencias?: string[];
    secoes_sugeridas?: string[];
};

function slugifyPath(value: string): string {
    const cleaned = value
        .normalize('NFD')
        .replace(/[\u0300-\u036f]/g, '')
        .toLowerCase()
        .replace(/[^a-z0-9]+/g, '-')
        .replace(/^-+|-+$/g, '');
    return cleaned ? `/${cleaned}` : '';
}

export function ModalNovaPaginaSite({
    open,
    projetoId,
    form,
    onClose,
    onSubmit,
    modalWidth,
    modalCentered,
    modalStyles,
}: ModalNovaPaginaSiteProps) {
    const [iaLoading, setIaLoading] = useState(false);
    const [iaFonte, setIaFonte] = useState<'ia' | 'regra' | null>(null);

    const aplicarSugestao = async (sugestao: SugestaoIa) => {
        const atuais = form.getFieldsValue([
            'titulo',
            'slug',
            'tipo_website',
            'prioridade',
            'conteudo',
            'objetivo',
            'referencias',
            'secoes_sugeridas',
        ]) as Record<string, unknown>;

        const dirty = Object.entries(atuais).some(([, v]) => {
            if (Array.isArray(v)) return v.length > 0;
            return typeof v === 'string' ? v.trim() !== '' : v != null && v !== '';
        });

        if (dirty) {
            const result = await confirmDialog({
                title: 'Substituir campos preenchidos?',
                content:
                    'A sugestão da IA vai substituir título, slug, tipo, prioridade, descrição, objetivo, referências e seções já preenchidos.',
                okText: 'Substituir',
                cancelText: 'Cancelar',
            });
            if (!result.isConfirmed) return;
        }

        form.setFieldsValue({
            titulo: sugestao.titulo ?? undefined,
            slug: sugestao.slug ?? (sugestao.titulo ? slugifyPath(sugestao.titulo) : undefined),
            tipo_website: sugestao.tipo_website ?? 'institucional',
            prioridade: sugestao.prioridade ?? undefined,
            conteudo: sugestao.descricao ?? undefined,
            objetivo: sugestao.objetivo ?? undefined,
            referencias: sugestao.referencias ?? [],
            secoes_sugeridas: sugestao.secoes_sugeridas ?? [],
        });
        message.success('Campos preenchidos. Revise antes de criar.');
    };

    const gerarComIa = async () => {
        const prompt = String(form.getFieldValue('prompt_expectativa') ?? '').trim();
        if (prompt.length < 10) {
            message.warning('Descreva o que você espera da página (mínimo 10 caracteres).');
            return;
        }
        setIaLoading(true);
        setIaFonte(null);
        try {
            const res = await apiClient.post<{
                success?: boolean;
                fonte?: 'ia' | 'regra';
                sugestao?: SugestaoIa;
                message?: string;
            }>(API_ENDPOINTS.projetos.paginas.sugerirComIa(projetoId), {
                prompt,
                tipo_website: form.getFieldValue('tipo_website') || undefined,
                titulo_parcial: form.getFieldValue('titulo') || undefined,
                slug_parcial: form.getFieldValue('slug') || undefined,
            });
            const data = res.data;
            const sugestao = data?.sugestao;
            if (!sugestao) {
                message.error(data?.message || 'A IA não retornou uma sugestão utilizável.');
                return;
            }
            setIaFonte(data.fonte === 'regra' ? 'regra' : 'ia');
            await aplicarSugestao(sugestao);
        } catch (error) {
            notifyApiError(error, 'Não foi possível gerar o briefing com IA.', 'paginas');
        } finally {
            setIaLoading(false);
        }
    };

    return (
        <Modal
            title="Nova página do site"
            data-testid="projeto-software-paginas-nova-modal"
            open={open}
            onCancel={onClose}
            onOk={() => form.submit()}
            okText="Criar"
            width={modalWidth ?? 720}
            centered={modalCentered}
            styles={modalStyles}
            keyboard
            focusTriggerAfterClose
            destroyOnHidden
            afterOpenChange={(visible) => {
                if (!visible) {
                    setIaFonte(null);
                    setIaLoading(false);
                }
            }}
        >
            <Text type="secondary" style={{ display: 'block', marginBottom: 16 }}>
                Preencha o briefing para orientar conteúdo e layout. Você pode descrever o que espera e
                gerar os campos com IA.
            </Text>

            <Form
                form={form}
                layout="vertical"
                initialValues={{ tipo_website: 'institucional' }}
                onFinish={(values) => onSubmit(buildNovaPaginaSitePayload(values))}
            >
                <div
                    style={{
                        marginBottom: 16,
                        padding: 12,
                        borderRadius: 10,
                        border: '1px solid var(--border-light, #f0f0f0)',
                        background: 'var(--gray-100, #fafafa)',
                    }}
                >
                    <Form.Item
                        name="prompt_expectativa"
                        label="O que espero desta página"
                        extra="Descreva com suas palavras: público, tom, seções e referências."
                        style={{ marginBottom: 8 }}
                    >
                        <TextArea
                            rows={3}
                            placeholder="Ex.: Página institucional Sobre nós, tom profissional, blocos missão/valores/equipe, CTA para contato. Referência: https://exemplo.com/sobre"
                            maxLength={4000}
                            showCount
                        />
                    </Form.Item>
                    <Space wrap>
                        <Button
                            type="default"
                            icon={<Sparkles size={ICON_SIZE_MD} aria-hidden />}
                            loading={iaLoading}
                            onClick={() => void gerarComIa()}
                            data-testid="projeto-software-paginas-gerar-ia"
                        >
                            Gerar com IA
                        </Button>
                    </Space>
                    {iaFonte === 'regra' ? (
                        <Alert
                            type="info"
                            showIcon
                            style={{ marginTop: 12 }}
                            message="Sugestão por regras (IA indisponível). Revise antes de criar."
                        />
                    ) : null}
                </div>

                <Text strong style={{ display: 'block', marginBottom: 8 }}>
                    Identificação
                </Text>
                <Row gutter={16}>
                    <Col xs={24} md={12}>
                        <Form.Item
                            name="titulo"
                            label="Título"
                            rules={[{ required: true, message: 'Obrigatório' }]}
                        >
                            <Input
                                placeholder="Ex: Sobre nós"
                                onBlur={(e) => {
                                    const titulo = e.target.value.trim();
                                    const slugAtual = String(form.getFieldValue('slug') ?? '').trim();
                                    if (titulo && !slugAtual) {
                                        form.setFieldValue('slug', slugifyPath(titulo));
                                    }
                                }}
                            />
                        </Form.Item>
                    </Col>
                    <Col xs={24} md={12}>
                        <Form.Item
                            name="slug"
                            label="Slug / URL"
                            rules={[{ required: true, message: 'Obrigatório' }]}
                        >
                            <Input placeholder="/sobre-nos" />
                        </Form.Item>
                    </Col>
                    <Col xs={24} md={12}>
                        <Form.Item
                            name="tipo_website"
                            label="Tipo"
                            rules={[{ required: true, message: 'Obrigatório' }]}
                        >
                            <Select options={TIPO_OPCOES} placeholder="Selecione" />
                        </Form.Item>
                    </Col>
                    <Col xs={24} md={12}>
                        <Form.Item name="prioridade" label="Prioridade">
                            <Select allowClear options={PRIORIDADE_OPCOES} placeholder="Opcional" />
                        </Form.Item>
                    </Col>
                </Row>

                <Text strong style={{ display: 'block', marginBottom: 8 }}>
                    Briefing para layout e desenvolvimento
                </Text>
                <Form.Item
                    name="conteudo"
                    label="Descrição da página"
                    extra="Conteúdo, seções e tom de voz — o que designer e desenvolvimento precisam saber."
                >
                    <TextArea rows={4} placeholder="Descreva a página e o layout esperado…" />
                </Form.Item>
                <Form.Item
                    name="objetivo"
                    label="Objetivo"
                    extra="O que o visitante deve entender ou fazer nesta página."
                >
                    <TextArea rows={2} placeholder="Ex.: Apresentar a empresa e levar ao formulário de contato." />
                </Form.Item>
                <Form.Item
                    name="referencias"
                    label="Referências"
                    extra="URLs ou notas (uma por tag). Pressione Enter para adicionar."
                >
                    <Select
                        mode="tags"
                        tokenSeparators={[',']}
                        placeholder="https://… ou “Figma ainda não disponível”"
                        open={false}
                    />
                </Form.Item>
                <Form.Item name="secoes_sugeridas" label="Seções sugeridas" hidden>
                    <Select mode="tags" open={false} />
                </Form.Item>
                <Form.Item
                    noStyle
                    shouldUpdate={(prev, next) => prev.secoes_sugeridas !== next.secoes_sugeridas}
                >
                    {() => {
                        const secoes = form.getFieldValue('secoes_sugeridas') as string[] | undefined;
                        if (!secoes?.length) return null;
                        return (
                            <Alert
                                type="success"
                                showIcon
                                style={{ marginBottom: 16 }}
                                message="Seções sugeridas pela IA"
                                description={secoes.join(' · ')}
                            />
                        );
                    }}
                </Form.Item>

                <Collapse
                    ghost
                    items={[
                        {
                            key: 'notas',
                            label: 'Notas internas (opcional)',
                            children: (
                                <Form.Item
                                    name="observacoes"
                                    extra="Só para a equipe — não substitui a descrição do briefing."
                                    style={{ marginBottom: 0 }}
                                >
                                    <TextArea rows={2} placeholder="Ex.: Cliente pediu prazo até sexta." />
                                </Form.Item>
                            ),
                        },
                    ]}
                />
            </Form>
        </Modal>
    );
}