'use client';

/**
 * Ambientes estruturados + runbook — `/projetos/[id]/software/ambientes`.
 */

import { Plus, Save, Server } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React, { useEffect, useMemo, useState } from 'react';
import { useParams } from 'next/navigation';
import { Alert, Button, Form, Input, Modal, Select, Space, Spin, Tabs, Tag, Tooltip } from 'antd';
import { message } from '@/lib/feedback/message';
import { notifyApiError } from '@/lib/feedback/notifyApiError';
import { confirmDialog } from '@/lib/feedback/confirmDialog';
import { FormTextarea } from '@/components/form';
import {
    useWaygestFormModalProps,
    waygestFormModalFooterClassName,
} from '@/hooks/useWaygestFormModalProps';
import { useQueryCache } from '@/hooks/useQueryCache';
import { useMutationCache } from '@/hooks/useMutationCache';
import { useProjetoWriteGates } from '@/features/projetos/hooks/useProjetoWriteGates';
import { queryKeys } from '@/lib/cache/queryKeys';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import apiClient from '@/lib/api/client';
import type { Projeto } from '@/types';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import { ListPageCreateFloatButton } from '@/components/listings';
import { LazyDataTable } from '@/components/lazy';
import { resolveProjetoFromResponse } from '@/features/projetos/lib/resolveProjetoFromResponse';
import {
    ProjetoTipologicoEmptyState,
} from '@/features/projetos/projeto-tipologico-empty-state';
import {
    AMBIENTE_TIPO_OPTIONS,
    type ProjetoSoftwareAmbiente,
    type ProjetoSoftwareAmbienteTipo,
} from './types';

function labelTipoAmbiente(tipo: ProjetoSoftwareAmbienteTipo | undefined): string {
    const opt = AMBIENTE_TIPO_OPTIONS.find((o) => o.value === tipo);
    return opt?.label ?? (tipo ? String(tipo) : '—');
}

function sortAmbientesParaGovernanca(rows: ProjetoSoftwareAmbiente[]): ProjetoSoftwareAmbiente[] {
    const peso = (tipo: string | undefined) => {
        if (tipo === 'producao') return 0;
        if (tipo === 'staging' || tipo === 'homologacao') return 1;
        if (tipo === 'desenvolvimento') return 2;
        return 3;
    };
    return [...rows].sort((a, b) => {
        const d = peso(a.tipo) - peso(b.tipo);
        if (d !== 0) return d;
        return String(a.nome ?? '').localeCompare(String(b.nome ?? ''), 'pt-BR');
    });
}

const FORM_ID = 'projeto-software-ambiente-form';

const STATUS_OPTIONS = [
    { label: 'Ativo', value: 'ativo' },
    { label: 'Inativo', value: 'inativo' },
    { label: 'Planejado', value: 'planejado' },
];

export function ProjetoSoftwareAmbientesScreen() {
    const params = useParams();
    const id = params?.id as string;
    const { canEditar, tooltipSemPermissao } = useProjetoWriteGates();
    const tooltipSemEdicao = !canEditar
        ? tooltipSemPermissao('editar ambientes')
        : undefined;
    const [modalOpen, setModalOpen] = useState(false);
    const [editing, setEditing] = useState<ProjetoSoftwareAmbiente | null>(null);
    const [form] = Form.useForm();
    const [runbookForm] = Form.useForm();
    const formModalLayout = useWaygestFormModalProps();

    const { data: projetoResponse, isLoading: loadingProjeto, refetch: refetchProjeto } = useQueryCache<
        Projeto | { projeto?: Projeto }
    >({
        queryKey: queryKeys.projetos.detail(id),
        endpoint: API_ENDPOINTS.projetos.show(id),
        enabled: !!id,
        staleTime: 60_000,
    });
    const projeto = resolveProjetoFromResponse(projetoResponse);

    useEffect(() => {
        runbookForm.setFieldsValue({
            ambientes_runbook: projeto?.ambientes_runbook ?? '',
        });
    }, [projeto?.ambientes_runbook, runbookForm]);

    const {
        data: listData,
        isLoading: loadingList,
        refetch,
    } = useQueryCache<{ data: ProjetoSoftwareAmbiente[] } | ProjetoSoftwareAmbiente[]>({
        queryKey: queryKeys.projetos.ambientes(id),
        endpoint: API_ENDPOINTS.projetos.ambientes.index(id),
        enabled: !!id,
        staleTime: 60_000,
    });

    const itens = useMemo(() => {
        const raw = Array.isArray(listData) ? listData : (listData?.data ?? []);
        return sortAmbientesParaGovernanca(raw);
    }, [listData]);

    const temProducao = useMemo(() => itens.some((a) => a.tipo === 'producao'), [itens]);

    const saveMutation = useMutationCache({
        endpoint: editing
            ? API_ENDPOINTS.projetos.ambientes.update(id, editing.id)
            : API_ENDPOINTS.projetos.ambientes.store(id),
        method: editing ? 'PUT' : 'POST',
        invalidateQueries: [
            queryKeys.projetos.ambientes(id),
            queryKeys.projetos.documentacaoHealth(id),
        ],
        onSuccess: () => {
            message.success(editing ? 'Ambiente atualizado.' : 'Ambiente registrado.');
            setModalOpen(false);
            setEditing(null);
            form.resetFields();
            refetch();
        },
        onError: (error: unknown) => {
            notifyApiError(error, 'Erro ao salvar o ambiente.', 'ambientes');
        },
    });

    const runbookMutation = useMutationCache({
        endpoint: API_ENDPOINTS.projetos.update(id),
        method: 'PUT',
        invalidateQueries: [
            queryKeys.projetos.detail(id),
            queryKeys.projetos.documentacaoHealth(id),
        ],
        onSuccess: () => {
            message.success('Runbook salvo.');
            refetchProjeto();
        },
        onError: (error: unknown) => {
            notifyApiError(error, 'Erro ao salvar o runbook.', 'ambientes-runbook');
        },
    });

    const openCreate = () => {
        setEditing(null);
        form.resetFields();
        form.setFieldsValue({ tipo: 'desenvolvimento', status: 'ativo' });
        setModalOpen(true);
    };

    const openEdit = (row: ProjetoSoftwareAmbiente) => {
        setEditing(row);
        form.setFieldsValue({
            nome: row.nome,
            tipo: row.tipo,
            url: row.url ?? '',
            dominio: row.dominio ?? '',
            hostname: row.hostname ?? '',
            provedor: row.provedor ?? '',
            branch: row.branch ?? '',
            versao: row.versao ?? '',
            status: row.status ?? 'ativo',
            criticidade: row.criticidade ?? undefined,
            responsavel: row.responsavel ?? '',
            observacoes: row.observacoes ?? '',
        });
        setModalOpen(true);
    };

    const handleDelete = (row: ProjetoSoftwareAmbiente) => {
        confirmDialog({
            title: 'Excluir ambiente?',
            content: `Remover “${row.nome}”?`,
            okText: 'Excluir',
            okType: 'danger',
            onOk: async () => {
                try {
                    await apiClient.delete(API_ENDPOINTS.projetos.ambientes.destroy(id, row.id));
                    message.success('Ambiente excluído.');
                    refetch();
                } catch (error) {
                    notifyApiError(error, 'Erro ao excluir.', 'ambientes');
                }
            },
        });
    };

    if (loadingProjeto && !projeto) {
        return (
            <ProjetoLayout projetoId={id} pageTitle="Ambientes" pageIcon="server">
                <Spin />
            </ProjetoLayout>
        );
    }

    return (
        <ProjetoLayout
            projetoId={id}
            pageTitle="Ambientes"
            pageIcon="server"
            titleSection="Arquitetura"
            breadcrumbItems={[
                { title: 'PROJETO' },
                { title: 'Projeto', path: `/projetos/${id}` },
                { title: 'Ambientes' },
            ]}
            data-testid="projeto-ambientes"
        >
            
            <Tabs
                items={[
                    {
                        key: 'inventario',
                        label: (
                            <span>
                                <Server size={14} aria-hidden style={{ marginInlineEnd: 6 }} />
                                Inventário
                            </span>
                        ),
                        children: (
                            <>
                                {itens.length > 0 && !temProducao ? (
                                    <Alert
                                        type="warning"
                                        showIcon
                                        style={{ marginBottom: 16 }}
                                        data-testid="projeto-ambientes-sem-producao"
                                        message="Nenhum ambiente de produção cadastrado"
                                        description="Cadastre o ambiente produtivo para governança de deploy, backup e health documental."
                                        action={
                                            canEditar ? (
                                                <Button size="small" type="primary" onClick={openCreate}>
                                                    Adicionar
                                                </Button>
                                            ) : undefined
                                        }
                                    />
                                ) : null}
                                {itens.length === 0 && !loadingList ? (
                                    <ProjetoTipologicoEmptyState
                                        title="Nenhum ambiente estruturado"
                                        domainKey="ambientes"
                                        projetoId={id}
                                        primaryAction={
                                            canEditar ? (
                                                <Button type="primary" onClick={openCreate}>
                                                    Adicionar ambiente
                                                </Button>
                                            ) : undefined
                                        }
                                    />
                                ) : (
                                    <LazyDataTable
                                        rowKey="id"
                                        loading={loadingList}
                                        data={itens}
                                        pagination={{ pageSize: 20, hideOnSinglePage: true }}
                                        columns={[
                                            {
                                                title: 'Nome',
                                                dataIndex: 'nome',
                                                key: 'nome',
                                                render: (nome: string, row: ProjetoSoftwareAmbiente) => (
                                                    <Space size={8}>
                                                        <span style={{ fontWeight: row.tipo === 'producao' ? 600 : 400 }}>
                                                            {nome}
                                                        </span>
                                                        {row.tipo === 'producao' ? (
                                                            <Tag color="purple">Produção</Tag>
                                                        ) : null}
                                                    </Space>
                                                ),
                                            },
                                            {
                                                title: 'Tipo',
                                                dataIndex: 'tipo',
                                                key: 'tipo',
                                                width: 150,
                                                render: (tipo: ProjetoSoftwareAmbienteTipo) => (
                                                    <Tag color={tipo === 'producao' ? 'purple' : 'default'}>
                                                        {labelTipoAmbiente(tipo)}
                                                    </Tag>
                                                ),
                                            },
                                            { title: 'URL', dataIndex: 'url', key: 'url', ellipsis: true },
                                            { title: 'Status', dataIndex: 'status', key: 'status', width: 110 },
                                            {
                                                title: 'Responsável',
                                                dataIndex: 'responsavel',
                                                key: 'resp',
                                                width: 140,
                                                render: (v: string | null | undefined) => v?.trim() || '—',
                                            },
                                            {
                                                title: 'Ações',
                                                key: 'acoes',
                                                width: 160,
                                                render: (_: unknown, row: ProjetoSoftwareAmbiente) => (
                                                    <Space>
                                                        <Button
                                                            type="link"
                                                            disabled={!canEditar}
                                                            onClick={() => openEdit(row)}
                                                        >
                                                            Editar
                                                        </Button>
                                                        <Button
                                                            type="link"
                                                            danger
                                                            disabled={!canEditar}
                                                            onClick={() => handleDelete(row)}
                                                        >
                                                            Excluir
                                                        </Button>
                                                    </Space>
                                                ),
                                            },
                                        ]}
                                        ariaRegionLabel="Ambientes do projeto"
                                        autoMobileFromColumns={{
                                            testIdPrefix: 'software-ambientes',
                                            listHeading: 'Lista de ambientes',
                                            getFallbackTitle: (r) =>
                                                r.nome?.trim() || `Ambiente ${r.id}`,
                                            getSubtitle: (r) =>
                                                [labelTipoAmbiente(r.tipo), r.status]
                                                    .filter(Boolean)
                                                    .join(' · ') || undefined,
                                            excludeFieldKeys: ['nome'],
                                        }}
                                    />
                                )}
                                {canEditar ? (
                                    <ListPageCreateFloatButton
                                        icon={<Plus size={ICON_SIZE_MD} aria-hidden />}
                                        onClick={openCreate}
                                        aria-label="Adicionar ambiente"
                                    />
                                ) : null}
                            </>
                        ),
                    },
                    {
                        key: 'runbook',
                        label: 'Runbook (texto)',
                        children: (
                            <Form
                                form={runbookForm}
                                layout="vertical"
                                onFinish={(values) =>
                                    runbookMutation.mutate({
                                        ambientes_runbook: values.ambientes_runbook?.trim() || null,
                                    })
                                }
                            >
                                <Form.Item
                                    name="ambientes_runbook"
                                    label="Notas de ops / runbook"
                                    extra="Complementa o inventário estruturado (deploy, rollback, crons)."
                                >
                                    <FormTextarea rows={14} disabled={!canEditar} />
                                </Form.Item>
                                <Tooltip title={tooltipSemEdicao}>
                                    <Button
                                        type="primary"
                                        htmlType="submit"
                                        icon={<Save size={ICON_SIZE_MD} aria-hidden />}
                                        loading={runbookMutation.isPending}
                                        disabled={!canEditar}
                                    >
                                        Salvar runbook
                                    </Button>
                                </Tooltip>
                            </Form>
                        ),
                    },
                ]}
            />
            

            <Modal
                {...formModalLayout}
                open={modalOpen}
                title={editing ? 'Editar ambiente' : 'Novo ambiente'}
                onCancel={() => {
                    setModalOpen(false);
                    setEditing(null);
                }}
                footer={
                    <div className={waygestFormModalFooterClassName}>
                        <Button onClick={() => setModalOpen(false)}>Cancelar</Button>
                        <Tooltip title={tooltipSemEdicao}>
                            <Button
                                type="primary"
                                htmlType="submit"
                                form={FORM_ID}
                                icon={<Save size={ICON_SIZE_MD} aria-hidden />}
                                loading={saveMutation.isPending}
                                disabled={!canEditar}
                            >
                                Salvar
                            </Button>
                        </Tooltip>
                    </div>
                }
            >
                <Form
                    id={FORM_ID}
                    form={form}
                    layout="vertical"
                    onFinish={(values) => saveMutation.mutate(values)}
                    scrollToFirstError
                >
                    <Form.Item name="nome" label="Nome" rules={[{ required: true, message: 'Informe o nome' }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item name="tipo" label="Tipo" rules={[{ required: true }]}>
                        <Select options={AMBIENTE_TIPO_OPTIONS} />
                    </Form.Item>
                    <Form.Item name="url" label="URL">
                        <Input placeholder="https://…" />
                    </Form.Item>
                    <Form.Item name="dominio" label="Domínio">
                        <Input />
                    </Form.Item>
                    <Form.Item name="hostname" label="Hostname">
                        <Input />
                    </Form.Item>
                    <Form.Item name="provedor" label="Provedor">
                        <Input />
                    </Form.Item>
                    <Form.Item name="branch" label="Branch">
                        <Input />
                    </Form.Item>
                    <Form.Item name="versao" label="Versão">
                        <Input />
                    </Form.Item>
                    <Form.Item name="status" label="Status">
                        <Select options={STATUS_OPTIONS} />
                    </Form.Item>
                    <Form.Item name="criticidade" label="Criticidade">
                        <Select
                            allowClear
                            options={[
                                { label: 'Baixa', value: 'baixa' },
                                { label: 'Média', value: 'media' },
                                { label: 'Alta', value: 'alta' },
                                { label: 'Crítica', value: 'critica' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item name="responsavel" label="Responsável">
                        <Input />
                    </Form.Item>
                    <Form.Item name="observacoes" label="Observações">
                        <FormTextarea rows={3} />
                    </Form.Item>
                </Form>
            </Modal>
        </ProjetoLayout>
    );
}