/**
 * @fileoverview Página de Objetivo — briefing tipológico (site ou aplicação React)
 *
 * Permite definir o objetivo principal: o que se espera alcançar,
 * problemas que resolve, metas de negócio e comunicação.
 *
 * @route /projetos/[id]/objetivo-site
 *
 * Rota ao nível do projeto (não usa o prefixo `software/`); ver inventário Fase 6 em `projetosProjetoCanonical`.
 * TASK-APR-026 — copy tipológica `aplicacao_react` sem priming de landing.
 */

'use client';

import { Save } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React, { useEffect, useMemo } from 'react';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { Form, Button, Spin, Row, Col, Typography, Space, Tooltip } from 'antd';
import { message } from '@/lib/feedback/message';
import { FormTextarea } from '@/components/form';
import { FormActions as FormActionsWrapper } from '@/components/form';
import { useQueryCache } from '@/hooks/useQueryCache';
import { useMutationCache } from '@/hooks/useMutationCache';
import { useIsMobile } from '@/hooks/useIsMobile';
import { queryKeys } from '@/lib/cache/queryKeys';
import { API_ENDPOINTS } from '@/lib/api/endpoints';
import { Projeto } from '@/types';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import ContentCard from '@/components/layouts/ContentCard';
import { useMobilePageActionBarRegistration } from '@/components/layouts/PageShellOptions';
import { useRecordWebsiteOnboardingVisit } from '@/features/projetos/website-personalizado-onboarding';
import { useProjetoBriefingFormGuard } from '@/features/projetos/hooks/useProjetoBriefingFormGuard';
import { useProjetoWriteGates } from '@/features/projetos/hooks/useProjetoWriteGates';
import { resolveObjetivoTipologiaCopy } from '@/features/projetos/lib/resolveAplicacaoReactTipologiaCopy';
import {
    collectProjetoMenuRoutes,
    isHrefInProjetoMenu,
} from '@/components/layouts/ProjetoLayout/collectProjetoMenuRoutes';
import { useRegisterPlanejamentoWizardSave } from '@/components/layouts/ProjetoLayout/ProjetoPlanejamentoWizardContext';
import type { FormInstance } from 'antd';

const { Paragraph, Text } = Typography;

function ObjetivoPlanejamentoWizardSaveBridge({
    form,
    canEditar,
    saving,
    saveLabel,
    onPersist,
}: {
    form: FormInstance;
    canEditar: boolean;
    saving: boolean;
    saveLabel: string;
    onPersist: (values: { objetivo_site?: string }) => Promise<unknown>;
}) {
    useRegisterPlanejamentoWizardSave({
        enabled: canEditar,
        canSave: canEditar && !saving,
        saving,
        saveLabel,
        onSave: async () => {
            const values = await form.validateFields();
            await onPersist(values);
        },
    });
    return null;
}

export default function ObjetivoSitePage() {
    const params = useParams();
    const id = params?.id as string;
    useRecordWebsiteOnboardingVisit(id, 'objetivo');
    const isMobileLayout = useIsMobile();
    /** Sticky «Salvar» no rodapé mobile — form longo + teclado (TASK-APR-048). */
    useMobilePageActionBarRegistration(isMobileLayout);
    const [form] = Form.useForm();
    const { canEditar, tooltipSemPermissao, permsLoading } = useProjetoWriteGates();
    const {
        draftBanner,
        savedHint,
        handleFormValuesChange,
        afterSaveSuccess,
        handleCancelEdits,
    } = useProjetoBriefingFormGuard(form, id, 'objetivo-site', { enabled: canEditar });

    const { data: projetoResponse, isLoading } = useQueryCache<
        Projeto | { projeto?: Projeto; metricas?: unknown }
    >({
        queryKey: queryKeys.projetos.detail(id),
        endpoint: API_ENDPOINTS.projetos.show(id),
        enabled: !!id,
        staleTime: 1 * 60 * 1000,
        gcTime: 5 * 60 * 1000});

    const projeto =
        projetoResponse && typeof projetoResponse === 'object' && 'projeto' in projetoResponse
            ? (projetoResponse as { projeto?: Projeto }).projeto
            : (projetoResponse as Projeto | undefined);

    const tipCopy = resolveObjetivoTipologiaCopy(projeto?.categoria_projeto?.codigo);
    /** TASK-APR-041 — Continuity só para rotas do menu tipológico. */
    const continuityLinks = useMemo(() => {
        if (!id) return [];
        const menuRoutes = collectProjetoMenuRoutes(id, projeto?.categoria_projeto?.codigo);
        return [
            {
                key: 'backlog',
                href: `/projetos/${id}/planejamento/backlog`,
                label: 'Abrir backlog do planejamento',
            },
            {
                key: 'planejamento',
                href: `/projetos/${id}/planejamento`,
                label: 'Visão geral do planejamento',
            },
            {
                key: 'gestao',
                href: `/projetos/${id}/gestao`,
                label: 'Gestão do projeto',
            },
            {
                key: 'stack',
                href: `/projetos/${id}/software/stack`,
                label: 'Definir stack',
            },
            {
                key: 'sprints',
                href: `/projetos/${id}/planejamento/sprints`,
                label: 'Abrir sprints',
            },
        ].filter((link) => isHrefInProjetoMenu(link.href, menuRoutes));
    }, [id, projeto?.categoria_projeto?.codigo]);

    const updateMutation = useMutationCache({
        endpoint: API_ENDPOINTS.projetos.update(id),
        method: 'PUT',
        invalidateQueries: [queryKeys.projetos.detail(id), queryKeys.projetos.lists()],
        onSuccess: () => {
            message.success(tipCopy.successMessage);
            afterSaveSuccess();
        },
        onError: (error: unknown) => {
            const errorMessage =
                (error as { response?: { data?: { message?: string } } })?.response?.data
                    ?.message || `Erro ao salvar o ${tipCopy.pageTitle.toLowerCase()}`;
            message.error(errorMessage);
        }});

    /** LOG-026: deps primitivas + skip se igual/dirty — evita React #185 (Maximum update depth). */
    const projetoId = projeto?.id;
    const objetivoSiteServer = projeto?.objetivo_site ?? '';
    useEffect(() => {
        if (projetoId == null) return;
        const atual = String(form.getFieldValue('objetivo_site') ?? '');
        if (atual === objetivoSiteServer) return;
        if (form.isFieldsTouched(['objetivo_site'])) return;
        form.setFieldsValue({ objetivo_site: objetivoSiteServer });
    }, [projetoId, objetivoSiteServer, form]);

    const handleSubmit = (values: { objetivo_site?: string }) => {
        updateMutation.mutate({
            objetivo_site: values.objetivo_site?.trim() || null});
    };

    if (isLoading && !projeto) {
        return (
            <ProjetoLayout
                projetoId={id}
                pageTitle={tipCopy.pageTitle}
                pageIcon="bullseye"
                titleSection={tipCopy.titleSection}
            >
                <div style={{ textAlign: 'center', padding: 50 }}>
                    <Spin size="large" />
                </div>
            </ProjetoLayout>
        );
    }

    return (
        <ProjetoLayout
            projetoId={id}
            pageTitle={tipCopy.pageTitle}
            pageIcon="bullseye"
            titleSection={tipCopy.titleSection}
            breadcrumbItems={[
                { title: 'PROJETO' },
                { title: projeto?.nome || 'Projeto' },
                { title: tipCopy.pageTitle },
            ]}
        >
            <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
                <Col xs={24} md={8}>
                    <ContentCard title="Problema / público-alvo">
                        <Paragraph type="secondary" style={{ marginBottom: 0 }}>
                            {tipCopy.problemaCard}
                        </Paragraph>
                    </ContentCard>
                </Col>
                <Col xs={24} md={8}>
                    <ContentCard title="Resultado esperado">
                        <Paragraph type="secondary" style={{ marginBottom: 0 }}>
                            O que deve mudar depois do go-live (ex.: mais pedidos qualificados, menos chamadas repetitivas ao suporte).
                        </Paragraph>
                    </ContentCard>
                </Col>
                <Col xs={24} md={8}>
                    <ContentCard title="Métricas e critérios">
                        <Paragraph type="secondary" style={{ marginBottom: 0 }}>
                            Informe como vai medir sucesso (KPI, meta numérica ou critério qualitativo verificável).
                        </Paragraph>
                    </ContentCard>
                </Col>
            </Row>

            {draftBanner}
            {savedHint}

            {isMobileLayout ? (
                <ObjetivoPlanejamentoWizardSaveBridge
                    form={form}
                    canEditar={canEditar}
                    saving={updateMutation.isPending}
                    saveLabel={tipCopy.saveLabel}
                    onPersist={async (values) =>
                        updateMutation.mutateAsync({
                            objetivo_site: values.objetivo_site?.trim() || null,
                        })
                    }
                />
            ) : null}

            <Form
                form={form}
                layout="vertical"
                initialValues={{ objetivo_site: projeto?.objetivo_site ?? '' }}
                onFinish={handleSubmit}
                onValuesChange={handleFormValuesChange}
            >
                <ContentCard title={tipCopy.pageTitle}>
                    <FormTextarea
                        name="objetivo_site"
                        aria-label={tipCopy.fieldLabel}
                        rules={[
                            {
                                max: 10000,
                                message: 'Máximo 10.000 caracteres.',
                            },
                        ]}
                        placeholder={tipCopy.placeholder}
                        rows={12}
                        maxLength={10000}
                        showCount
                        disabled={!canEditar}
                    />
                    <Text type="secondary" style={{ display: 'block' }}>
                        Quanto mais explícitos forem resultado e medição, mais fácil fica priorizar backlog e validar entregas.
                    </Text>
                </ContentCard>

                {continuityLinks.length > 0 ? (
                    <Space wrap style={{ marginBottom: 16 }} data-testid="objetivo-site-continuity">
                        <Text type="secondary">Continuidade:</Text>
                        {continuityLinks.map((link) => (
                            <Link key={link.key} href={link.href}>
                                <Button size="small" data-testid={`objetivo-continuity-${link.key}`}>
                                    {link.label}
                                </Button>
                            </Link>
                        ))}
                    </Space>
                ) : null}

                {!isMobileLayout ? (
                    <FormActionsWrapper>
                        <Button
                            type="default"
                            onClick={() =>
                                handleCancelEdits({
                                    objetivo_site: projeto?.objetivo_site ?? '',
                                })
                            }
                            disabled={updateMutation.isPending || !form.isFieldsTouched()}
                        >
                            Cancelar
                        </Button>
                        <Tooltip
                            title={
                                !canEditar && !permsLoading
                                    ? tooltipSemPermissao('salvar o objetivo do projeto')
                                    : undefined
                            }
                        >
                            <span>
                                <Button
                                    type="primary"
                                    htmlType="submit"
                                    loading={updateMutation.isPending}
                                    disabled={!canEditar || permsLoading}
                                    icon={<Save size={ICON_SIZE_MD} aria-hidden />}
                                    data-testid="projeto-objetivo-save"
                                >
                                    {tipCopy.saveLabel}
                                </Button>
                            </span>
                        </Tooltip>
                    </FormActionsWrapper>
                ) : null}
            </Form>
        </ProjetoLayout>
    );
}