'use client';

/**
 * @route /projetos/[id]/planejamento/analise/diagnostico-arquiteto
 *
 * Contrato API: GET/POST `/v1/projetos/{id}/diagnostico-arquiteto`
 * (DiagnosticoArquitetoService — JSON em projeto_software.diagnostico_arquiteto).
 */

import React, { useEffect, useState } from 'react';
import { FileText, Pencil, Save } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import { useParams, useRouter } from 'next/navigation';
import { Form, Button, Space, Alert, Descriptions, Tag, Typography } from 'antd';
import { message } from '@/lib/feedback/message';
import { useQueryCache } from '@/hooks/useQueryCache';
import { useMutationCache } from '@/hooks/useMutationCache';
import { queryKeys } from '@/lib/cache/queryKeys';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { formatDate } from '@/lib/utils/export';
import { FormTextarea } from '@/components/form';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import ContentCard from '@/components/layouts/ContentCard';
import { ButtonHeaderIcon } from '@/components/ui';
import { FormActions } from '@/components/form';
import { EmptyState } from '@/components/empty';
import { OperativeRouteHint } from '@/components/layouts/OperativeRouteHint/OperativeRouteHint';
import btnHeaderStyles from '@/components/ui/buttons/ButtonHeaderIcon/ButtonHeaderIcon.module.scss';

interface DiagnosticoArquiteto {
    projeto_id: number;
    arquitetura_atual?: string | null;
    pontos_fortes?: string | null;
    pontos_fracos?: string | null;
    recomendacoes?: string | null;
    tecnologias_sugeridas?: string[];
    riscos_identificados?: string[];
    data_diagnostico_arquiteto?: string | null;
    arquiteto_responsavel_id?: number | null;
    created_at?: string | null;
    updated_at?: string | null;
    preenchido?: boolean;
}

function diagnosticoTemConteudo(d: DiagnosticoArquiteto | undefined | null): boolean {
    if (!d) return false;
    if (d.preenchido === true) return true;
    return Boolean(
        (d.arquitetura_atual && d.arquitetura_atual.trim()) ||
            (d.pontos_fortes && d.pontos_fortes.trim()) ||
            (d.pontos_fracos && d.pontos_fracos.trim()) ||
            (d.recomendacoes && d.recomendacoes.trim()) ||
            (d.tecnologias_sugeridas && d.tecnologias_sugeridas.length > 0) ||
            (d.riscos_identificados && d.riscos_identificados.length > 0)
    );
}

export default function ProjetoDiagnosticoArquitetoPage() {
    const params = useParams();
    const router = useRouter();
    const projetoId = (params?.id as string) || '';
    const [form] = Form.useForm();
    const [editando, setEditando] = useState(false);

    const {
        data: diagnostico,
        isLoading,
        isError,
        error,
        refetch,
    } = useQueryCache<DiagnosticoArquiteto>({
        queryKey: queryKeys.projetos.diagnosticoArquiteto(projetoId),
        endpoint: API_ENDPOINTS.projetos.diagnosticoArquiteto.index(projetoId),
        staleTime: 5 * 60 * 1000,
        gcTime: 10 * 60 * 1000,
        enabled: !!projetoId,
    });

    const storeMutation = useMutationCache<
        { message?: string; data?: DiagnosticoArquiteto },
        Partial<DiagnosticoArquiteto>
    >({
        endpoint: API_ENDPOINTS.projetos.diagnosticoArquiteto.store(projetoId),
        method: 'POST',
        invalidateQueries: [queryKeys.projetos.diagnosticoArquiteto(projetoId)],
        onSuccess: () => {
            message.success('Diagnóstico salvo com sucesso!');
            setEditando(false);
        },
        onError: (err: unknown) => {
            const e = err as { response?: { data?: { message?: string } } };
            message.error(e?.response?.data?.message || 'Erro ao salvar diagnóstico');
        },
    });

    useEffect(() => {
        if (diagnostico) {
            form.setFieldsValue({
                arquitetura_atual: diagnostico.arquitetura_atual ?? '',
                pontos_fortes: diagnostico.pontos_fortes ?? '',
                pontos_fracos: diagnostico.pontos_fracos ?? '',
                recomendacoes: diagnostico.recomendacoes ?? '',
            });
        }
    }, [diagnostico, form]);

    const handleSubmit = async (values: Record<string, unknown>) => {
        storeMutation.mutate(values);
    };

    const temConteudo = diagnosticoTemConteudo(diagnostico);
    const errorMessage =
        (error as { message?: string } | null)?.message ||
        'Não foi possível carregar o diagnóstico. Tente novamente em instantes.';

    const headerAction = (
        <Space wrap size={8} align="center">
            {!editando ? (
                <ButtonHeaderIcon
                    icon={<Pencil size={ICON_SIZE_MD} aria-hidden />}
                    title={temConteudo ? 'Editar' : 'Criar'}
                    aria-label={temConteudo ? 'Editar diagnóstico' : 'Criar diagnóstico'}
                    onClick={() => setEditando(true)}
                    className={btnHeaderStyles.btnHeaderIcon}
                />
            ) : null}
        </Space>
    );

    return (
        <ProjetoLayout
            projetoId={projetoId}
            pageTitle="Diagnóstico do Arquiteto"
            showPageTitleIcon={false}
            titleSection="Diagnóstico do Arquiteto"
            breadcrumbItems={[
                { title: 'PROJETO', path: `/projetos/${projetoId}` },
                { title: 'Planejamento' },
                { title: 'Análise' },
                { title: 'Diagnóstico' },
            ]}
            headerAction={headerAction}
        >
            {isLoading && !diagnostico ? (
                <ContentCard>
                    <div style={{ textAlign: 'center', padding: 48 }}>
                        <Typography.Text type="secondary">Carregando diagnóstico…</Typography.Text>
                    </div>
                </ContentCard>
            ) : null}

            {isError ? (
                <Alert
                    message="Erro ao carregar diagnóstico"
                    description={errorMessage}
                    type="error"
                    showIcon
                    action={
                        <Space wrap>
                            <Button size="small" type="primary" onClick={() => void refetch()}>
                                Tentar novamente
                            </Button>
                            <Button
                                size="small"
                                onClick={() => router.push(`/projetos/${projetoId}`)}
                            >
                                Voltar ao projeto
                            </Button>
                        </Space>
                    }
                    style={{ marginBottom: 16 }}
                />
            ) : null}

            {!isError && !isLoading ? (
                <>
                    {temConteudo && !editando ? (
                        <OperativeRouteHint
                            type={
                                (diagnostico?.riscos_identificados?.length ?? 0) > 0 ||
                                Boolean(diagnostico?.pontos_fracos?.trim())
                                    ? 'warning'
                                    : 'info'
                            }
                            message="Riscos técnicos e plano de evolução"
                            description="Cruze pontos fracos e riscos com o backlog: cada recomendação deve ter dono e prioridade antes de mudanças estruturais."
                        >
                            <Space wrap>
                                <Button
                                    type="link"
                                    size="small"
                                    onClick={() =>
                                        router.push(`/projetos/${projetoId}/planejamento/backlog`)
                                    }
                                >
                                    Backlog de planejamento
                                </Button>
                                <Button
                                    type="link"
                                    size="small"
                                    onClick={() =>
                                        router.push(`/projetos/${projetoId}/planejamento/gantt`)
                                    }
                                >
                                    Cronograma (Gantt)
                                </Button>
                                <Button
                                    type="link"
                                    size="small"
                                    onClick={() =>
                                        router.push(
                                            `/projetos/${projetoId}/planejamento/modelagem-dados`
                                        )
                                    }
                                >
                                    Modelagem de dados (guia)
                                </Button>
                            </Space>
                        </OperativeRouteHint>
                    ) : null}

                    {editando ? (
                        <ContentCard>
                            <Form form={form} layout="vertical" onFinish={handleSubmit}>
                                <FormTextarea
                                    name="arquitetura_atual"
                                    label="Arquitetura atual"
                                    rows={4}
                                    placeholder="Descreva a arquitetura atual do sistema..."
                                />

                                <FormTextarea
                                    name="pontos_fortes"
                                    label="Pontos fortes"
                                    rows={3}
                                    placeholder="Liste os pontos fortes da arquitetura atual..."
                                />

                                <FormTextarea
                                    name="pontos_fracos"
                                    label="Pontos fracos"
                                    rows={3}
                                    placeholder="Liste os pontos fracos e limitações..."
                                />

                                <FormTextarea
                                    name="recomendacoes"
                                    label="Recomendações"
                                    rows={4}
                                    placeholder="Forneça recomendações para melhorias..."
                                />

                                <FormActions>
                                    <Button
                                        type="primary"
                                        htmlType="submit"
                                        icon={<Save size={ICON_SIZE_MD} aria-hidden />}
                                        loading={storeMutation.isPending}
                                    >
                                        Salvar
                                    </Button>
                                    <Button onClick={() => setEditando(false)}>Cancelar</Button>
                                </FormActions>
                            </Form>
                        </ContentCard>
                    ) : temConteudo && diagnostico ? (
                        <ContentCard>
                            <Descriptions column={1} bordered>
                                {diagnostico.arquitetura_atual ? (
                                    <Descriptions.Item label="Arquitetura atual">
                                        <Typography.Paragraph style={{ whiteSpace: 'pre-wrap' }}>
                                            {diagnostico.arquitetura_atual}
                                        </Typography.Paragraph>
                                    </Descriptions.Item>
                                ) : null}
                                {diagnostico.pontos_fortes ? (
                                    <Descriptions.Item label="Pontos fortes">
                                        <Typography.Paragraph style={{ whiteSpace: 'pre-wrap' }}>
                                            {diagnostico.pontos_fortes}
                                        </Typography.Paragraph>
                                    </Descriptions.Item>
                                ) : null}
                                {diagnostico.pontos_fracos ? (
                                    <Descriptions.Item label="Pontos fracos">
                                        <Typography.Paragraph style={{ whiteSpace: 'pre-wrap' }}>
                                            {diagnostico.pontos_fracos}
                                        </Typography.Paragraph>
                                    </Descriptions.Item>
                                ) : null}
                                {diagnostico.recomendacoes ? (
                                    <Descriptions.Item label="Recomendações">
                                        <Typography.Paragraph style={{ whiteSpace: 'pre-wrap' }}>
                                            {diagnostico.recomendacoes}
                                        </Typography.Paragraph>
                                    </Descriptions.Item>
                                ) : null}
                                {diagnostico.tecnologias_sugeridas &&
                                diagnostico.tecnologias_sugeridas.length > 0 ? (
                                    <Descriptions.Item label="Tecnologias sugeridas">
                                        <Space wrap>
                                            {diagnostico.tecnologias_sugeridas.map((tech, index) => (
                                                <Tag key={`${tech}-${index}`} color="blue">
                                                    {tech}
                                                </Tag>
                                            ))}
                                        </Space>
                                    </Descriptions.Item>
                                ) : null}
                                {diagnostico.riscos_identificados &&
                                diagnostico.riscos_identificados.length > 0 ? (
                                    <Descriptions.Item label="Riscos identificados">
                                        <Space wrap>
                                            {diagnostico.riscos_identificados.map((risco, index) => (
                                                <Tag key={`${risco}-${index}`} color="red">
                                                    {risco}
                                                </Tag>
                                            ))}
                                        </Space>
                                    </Descriptions.Item>
                                ) : null}
                                {diagnostico.data_diagnostico_arquiteto ? (
                                    <Descriptions.Item label="Data do diagnóstico">
                                        {formatDate(diagnostico.data_diagnostico_arquiteto)}
                                    </Descriptions.Item>
                                ) : null}
                                {diagnostico.updated_at ? (
                                    <Descriptions.Item label="Atualizado em">
                                        {formatDate(diagnostico.updated_at)}
                                    </Descriptions.Item>
                                ) : null}
                            </Descriptions>
                        </ContentCard>
                    ) : (
                        <ContentCard>
                            <EmptyState
                                title="Nenhum diagnóstico encontrado"
                                description="Clique em Criar para registrar a análise arquitetural do projeto."
                                icon={<FileText size={ICON_SIZE_MD} aria-hidden />}
                                action={
                                    <Button type="primary" onClick={() => setEditando(true)}>
                                        Criar diagnóstico
                                    </Button>
                                }
                            />
                        </ContentCard>
                    )}
                </>
            ) : null}
        </ProjetoLayout>
    );
}