'use client';

/**
 * E-mails de autenticação do projeto (`/projetos/[id]/software/emails-autenticacao`).
 * Estratégia SMTP, credenciais e remetente com resumo lateral.
 */

import {
    AlertTriangle,
    AtSign,
    Mail,
    Save,
    Send,
    Server,
    ShieldCheck,
} from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React, { useCallback, useEffect, useMemo } from 'react';
import { useParams } from 'next/navigation';
import { Form, Button, Input, Select, Spin, Tooltip, Typography } from 'antd';
import { message } from '@/lib/feedback/message';
import { notifyApiError } from '@/lib/feedback/notifyApiError';
import { FormInput, FormTextarea, FormRadio, FormNumber } from '@/components/form';
import { useQueryCache } from '@/hooks/useQueryCache';
import { useMutationCache } from '@/hooks/useMutationCache';
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 MetricsGrid from '@/components/layouts/MetricsGrid';
import MetricCard from '@/components/layouts/MetricCard';
import { useProjetoWriteGates } from '@/features/projetos/hooks/useProjetoWriteGates';
import { routeProjetoId } from '@/features/projetos/feira-list';
import {
    ProjetoTipologicoSyncBanner,
    TIPOLOGICO_EMPTY_DOMAIN,
} from '@/features/projetos/projeto-tipologico-empty-state';
import styles from './projetoSoftwareEmailsAutenticacaoScreen.module.scss';

const { Text } = Typography;

export interface ProjetoEmailsAutenticacaoData {
    usar_autenticacao_externa: boolean;
    devway_contratar_smtp?: boolean | null;
    smtp_host?: string;
    smtp_porta?: number;
    smtp_usuario?: string;
    smtp_senha?: string;
    smtp_criptografia?: string | null;
    email_remetente_padrao?: string | null;
    observacoes?: string | null;
}

const defaultValues: ProjetoEmailsAutenticacaoData = {
    usar_autenticacao_externa: false,
    devway_contratar_smtp: null,
    smtp_host: '',
    smtp_porta: 587,
    smtp_usuario: '',
    smtp_senha: '',
    smtp_criptografia: 'tls',
    email_remetente_padrao: '',
    observacoes: '',
};

function emailsToFormValues(data: ProjetoEmailsAutenticacaoData) {
    return {
        usar_autenticacao_externa: data.usar_autenticacao_externa ? 'sim' : 'nao',
        devway_contratar_smtp:
            data.devway_contratar_smtp === true
                ? 'sim'
                : data.devway_contratar_smtp === false
                  ? 'nao'
                  : undefined,
        smtp_host: data.smtp_host ?? '',
        smtp_porta: data.smtp_porta ?? 587,
        smtp_usuario: data.smtp_usuario ?? '',
        smtp_senha: data.smtp_senha ?? '',
        smtp_criptografia: data.smtp_criptografia ?? 'tls',
        email_remetente_padrao: data.email_remetente_padrao ?? '',
        observacoes: data.observacoes ?? '',
    };
}

function formatSimNao(value: unknown): string {
    if (value === 'sim' || value === true) return 'Sim';
    if (value === 'nao' || value === false) return 'Não';
    return 'Pendente';
}

export function ProjetoSoftwareEmailsAutenticacaoScreen() {
    const params = useParams();
    const id = routeProjetoId(params);
    const { canEditar, permsLoading, tooltipSemPermissao } = useProjetoWriteGates();
    const [form] = Form.useForm();

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

    const { data: configData, isLoading: isLoadingConfig } = useQueryCache<ProjetoEmailsAutenticacaoData>({
        queryKey: queryKeys.projetos.emailsAutenticacao(id),
        endpoint: API_ENDPOINTS.projetos.emailsAutenticacao(id),
        enabled: !!id,
        staleTime: 2 * 60 * 1000,
        gcTime: 5 * 60 * 1000,
    });

    const mutation = useMutationCache({
        endpoint: API_ENDPOINTS.projetos.emailsAutenticacao(id),
        method: 'PUT',
        invalidateQueries: [[...queryKeys.projetos.detail(id), 'emails-autenticacao']],
    });

    const usarAutenticacaoExterna = Form.useWatch('usar_autenticacao_externa', form);
    const devwayContratarSmtp = Form.useWatch('devway_contratar_smtp', form);
    const smtpHostWatch = Form.useWatch('smtp_host', form);
    const smtpUsuarioWatch = Form.useWatch('smtp_usuario', form);
    const smtpCriptografiaWatch = Form.useWatch('smtp_criptografia', form);
    const remetenteWatch = Form.useWatch('email_remetente_padrao', form);

    const exibirPerguntaDevway = usarAutenticacaoExterna === true || usarAutenticacaoExterna === 'sim';
    const exibirCamposSmtp =
        exibirPerguntaDevway && (devwayContratarSmtp === false || devwayContratarSmtp === 'nao');
    const smtpHostOk = Boolean(String(smtpHostWatch ?? '').trim());
    const smtpUsuarioOk = Boolean(String(smtpUsuarioWatch ?? '').trim());
    const smtpOk = !exibirCamposSmtp || (smtpHostOk && smtpUsuarioOk);
    const remetentePreenchido = Boolean(String(remetenteWatch ?? '').trim());

    const applyFormValues = useCallback(
        (data: ProjetoEmailsAutenticacaoData) => {
            form.setFieldsValue(emailsToFormValues(data));
        },
        [form],
    );

    useEffect(() => {
        if (configData) {
            applyFormValues(configData);
        } else if (!isLoadingConfig && !configData) {
            applyFormValues(defaultValues);
        }
    }, [configData, isLoadingConfig, applyFormValues]);

    const canalSmtpLabel = useMemo(() => {
        if (!exibirPerguntaDevway) return 'Padrão Waygest';
        if (devwayContratarSmtp === 'sim') return 'Waygest contrata';
        if (exibirCamposSmtp) {
            return smtpOk ? 'SMTP próprio' : 'Incompleto';
        }
        return 'Pendente';
    }, [exibirPerguntaDevway, devwayContratarSmtp, exibirCamposSmtp, smtpOk]);

    const checklist = useMemo(() => {
        const items = [
            {
                label: 'Estratégia de autenticação definida',
                done: usarAutenticacaoExterna === 'sim' || usarAutenticacaoExterna === 'nao',
                warn: false,
            },
        ];

        if (exibirPerguntaDevway) {
            items.push({
                label: 'Responsável pelo SMTP definido',
                done: devwayContratarSmtp === 'sim' || devwayContratarSmtp === 'nao',
                warn: false,
            });
        }

        if (exibirCamposSmtp) {
            items.push(
                {
                    label: 'Credenciais SMTP preenchidas',
                    done: smtpOk,
                    warn: !smtpOk && smtpHostOk,
                },
                {
                    label: 'E-mail remetente (From) informado',
                    done: remetentePreenchido,
                    warn: false,
                },
            );
        }

        return items;
    }, [
        usarAutenticacaoExterna,
        exibirPerguntaDevway,
        devwayContratarSmtp,
        exibirCamposSmtp,
        smtpOk,
        smtpHostOk,
        remetentePreenchido,
    ]);

    const checklistConcluido = checklist.filter((item) => item.done).length;

    const handleSubmit = (values: Record<string, unknown>) => {
        const usarExterna = values.usar_autenticacao_externa === 'sim';
        const mostrarSmtp =
            usarExterna && (values.devway_contratar_smtp === false || values.devway_contratar_smtp === 'nao');

        const payload: ProjetoEmailsAutenticacaoData = {
            usar_autenticacao_externa: usarExterna,
            devway_contratar_smtp: usarExterna ? values.devway_contratar_smtp === 'sim' : null,
            email_remetente_padrao: (values.email_remetente_padrao as string)?.trim() || null,
            observacoes: (values.observacoes as string)?.trim() || null,
        };

        if (mostrarSmtp) {
            payload.smtp_host = (values.smtp_host as string)?.trim() || undefined;
            payload.smtp_porta = values.smtp_porta != null ? Number(values.smtp_porta) : 587;
            payload.smtp_usuario = (values.smtp_usuario as string)?.trim() || undefined;
            payload.smtp_senha = (values.smtp_senha as string) || undefined;
            payload.smtp_criptografia = (values.smtp_criptografia as string) || null;
        } else {
            payload.smtp_host = undefined;
            payload.smtp_porta = 587;
            payload.smtp_usuario = undefined;
            payload.smtp_senha = undefined;
            payload.smtp_criptografia = undefined;
        }

        mutation.mutate(payload, {
            onSuccess: () => {
                message.success('Configurações de e-mails salvas com sucesso.');
            },
            onError: (error) => {
                notifyApiError(error, 'Erro ao salvar e-mails de autenticação. Tente novamente.', 'infra');
            },
        });
    };

    const handleReset = () => {
        if (configData) {
            applyFormValues(configData);
        } else {
            applyFormValues(defaultValues);
        }
    };

    const isLoading = isLoadingProjeto || isLoadingConfig;

    const emailsConfigVazio =
        !isLoadingConfig &&
        !String(configData?.smtp_host ?? '').trim() &&
        !String(configData?.email_remetente_padrao ?? '').trim() &&
        !String(configData?.observacoes ?? '').trim() &&
        !configData?.usar_autenticacao_externa;

    if (isLoading && !projeto && !configData) {
        return (
            <ProjetoLayout
                projetoId={id}
                pageTitle="Emails de autenticação"
                pageIcon="envelope"
                titleSection="Emails de autenticação"
            >
                <div className={styles.loadingWrap}>
                    <Spin size="large" />
                    <Text type="secondary">Carregando configurações…</Text>
                </div>
            </ProjetoLayout>
        );
    }

    return (
        <ProjetoLayout
            projetoId={id}
            pageTitle="Emails de autenticação"
            pageIcon="envelope"
            titleSection="Emails de autenticação"
            breadcrumbItems={[
                { title: 'PROJETO' },
                { title: projeto?.nome || 'Projeto' },
                { title: 'Emails de autenticação' },
            ]}
        >
            <div className={styles.page} data-testid="projeto-software-emails-autenticacao-screen">
                {emailsConfigVazio ? (
                    <ProjetoTipologicoSyncBanner
                        projetoId={id}
                        title="E-mails de autenticação ainda sem configuração"
                        domainDescription={TIPOLOGICO_EMPTY_DOMAIN.emailsAutenticacao}
                        data-testid="projeto-emails-sync-banner"
                    />
                ) : null}

                <section className={styles.hero} aria-labelledby="emails-hero-title">
                    <div className={styles.heroCopy}>
                        <Typography.Title level={4} id="emails-hero-title" className={styles.heroTitle}>
                            Configure os e-mails de autenticação
                        </Typography.Title>
                        <p className={styles.heroDescription}>
                            Defina como o projeto envia e-mails transacionais (recuperação de senha, confirmações).
                            Credenciais corretas e remetente validado reduzem risco de spam e falhas em produção.
                        </p>
                    </div>
                    <MetricsGrid columns={3} mobileCompactCollapsible>
                        <MetricCard
                            icon={<Send size={ICON_SIZE_MD} aria-hidden />}
                            label="Canal SMTP"
                            value={canalSmtpLabel}
                            subvalue={
                                exibirCamposSmtp && smtpCriptografiaWatch
                                    ? `Criptografia ${String(smtpCriptografiaWatch).toUpperCase()}`
                                    : 'Entrega de e-mails transacionais'
                            }
                            variant={smtpOk ? 'concluidos' : exibirCamposSmtp ? 'emAndamento' : 'sprints'}
                        />
                        <MetricCard
                            icon={<Mail size={ICON_SIZE_MD} aria-hidden />}
                            label="Auth externa"
                            value={formatSimNao(usarAutenticacaoExterna)}
                            subvalue={
                                exibirPerguntaDevway
                                    ? 'SMTP dedicado ao projeto'
                                    : 'Canal padrão Waygest'
                            }
                            variant={exibirPerguntaDevway ? 'ativos' : 'planejamento'}
                        />
                        <MetricCard
                            icon={<AtSign size={ICON_SIZE_MD} aria-hidden />}
                            label="Remetente"
                            value={remetentePreenchido ? String(remetenteWatch).trim() : 'Pendente'}
                            subvalue={remetentePreenchido ? 'From configurado' : 'Ex.: noreply@dominio.com'}
                            variant={remetentePreenchido ? 'projetos' : 'default'}
                        />
                    </MetricsGrid>
                </section>

                <Form
                    form={form}
                    layout="vertical"
                    onFinish={handleSubmit}
                    initialValues={emailsToFormValues(defaultValues)}
                >
                    <div className={styles.workspace}>
                        <div className={styles.formPanel}>
                            <ContentCard
                                title="Estratégia de envio"
                                icon={<Mail size={ICON_SIZE_MD} aria-hidden />}
                            >
                                <FormRadio
                                    name="usar_autenticacao_externa"
                                    label="Usar autenticação externa (SMTP dedicado)?"
                                    required
                                    options={[
                                        { label: 'Sim — SMTP próprio ou contratado', value: 'sim' },
                                        { label: 'Não — canal padrão Waygest', value: 'nao' },
                                    ]}
                                />

                                {exibirPerguntaDevway ? (
                                    <FormRadio
                                        name="devway_contratar_smtp"
                                        label="A Waygest deve contratar SMTP externo e incluir na mensalidade?"
                                        required
                                        options={[
                                            { label: 'Sim — Waygest gere o provedor', value: 'sim' },
                                            { label: 'Não — cliente fornece credenciais', value: 'nao' },
                                        ]}
                                    />
                                ) : null}
                            </ContentCard>

                            {exibirCamposSmtp ? (
                                <ContentCard
                                    title="Servidor SMTP"
                                    icon={<Server size={ICON_SIZE_MD} aria-hidden />}
                                >
                                    <div className={styles.smtpPanel}>
                                        <p className={styles.smtpPanelTitle}>Credenciais e remetente</p>
                                        <FormInput
                                            name="smtp_host"
                                            label="Host SMTP"
                                            placeholder="Ex.: smtp.gmail.com, smtp.office365.com"
                                            required
                                            help="Endereço do servidor SMTP"
                                        />
                                        <FormNumber
                                            name="smtp_porta"
                                            label="Porta"
                                            min={1}
                                            max={65535}
                                            precision={0}
                                            placeholder="587"
                                            rules={[{ required: true, message: 'Informe a porta.' }]}
                                            help="Geralmente 587 (TLS), 465 (SSL) ou 25"
                                        />
                                        <Form.Item
                                            name="smtp_criptografia"
                                            label="Criptografia"
                                            help="TLS é o padrão recomendado"
                                        >
                                            <Select
                                                placeholder="Selecione"
                                                options={[
                                                    { value: 'tls', label: 'TLS' },
                                                    { value: 'ssl', label: 'SSL' },
                                                ]}
                                            />
                                        </Form.Item>
                                        <FormInput
                                            name="smtp_usuario"
                                            label="Usuário SMTP"
                                            placeholder="E-mail ou usuário de acesso"
                                            required
                                        />
                                        <Form.Item
                                            name="smtp_senha"
                                            label="Senha SMTP"
                                            help="Armazenada de forma segura. Deixe em branco para não alterar."
                                        >
                                            <Input.Password placeholder="Senha" autoComplete="new-password" />
                                        </Form.Item>
                                        <FormInput
                                            name="email_remetente_padrao"
                                            label="E-mail remetente padrão (From)"
                                            placeholder="Ex.: noreply@seudominio.com"
                                            help="Aparece como remetente nas mensagens do sistema"
                                        />
                                    </div>
                                </ContentCard>
                            ) : null}

                            <ContentCard title="Notas" icon={<ShieldCheck size={ICON_SIZE_MD} aria-hidden />}>
                                <FormTextarea
                                    name="observacoes"
                                    label="Observações"
                                    rows={4}
                                    placeholder="Provedor, limites de envio, SPF/DKIM/DMARC, contatos de suporte, etc."
                                />
                            </ContentCard>
                        </div>

                        <aside className={styles.summaryPanel} aria-label="Resumo de e-mails">
                            <ContentCard title="Resumo e checklist" flexColumn loading={isLoadingConfig}>
                                <div className={styles.summaryCard}>
                                    <div className={styles.summaryStatus}>
                                        <span className={styles.summaryStatusLabel}>Estado do formulário</span>
                                        <p className={styles.summaryStatusValue}>
                                            {checklistConcluido}/{checklist.length} itens concluídos
                                        </p>
                                    </div>

                                    <div className={styles.summaryStatus}>
                                        <span className={styles.summaryStatusLabel}>Canal de envio</span>
                                        <p className={styles.summaryStatusValue}>{canalSmtpLabel}</p>
                                    </div>

                                    {exibirCamposSmtp && smtpHostWatch ? (
                                        <div className={styles.summaryStatus}>
                                            <span className={styles.summaryStatusLabel}>Servidor SMTP</span>
                                            <p className={styles.summaryStatusValue}>
                                                {String(smtpHostWatch).trim()}
                                            </p>
                                        </div>
                                    ) : null}

                                    {exibirCamposSmtp && !smtpOk ? (
                                        <p className={styles.summaryHint}>
                                            <AlertTriangle
                                                size={14}
                                                style={{ marginRight: 6, verticalAlign: -2 }}
                                                aria-hidden
                                            />
                                            Preencha host e usuário SMTP antes do go-live.
                                        </p>
                                    ) : null}

                                    <div>
                                        <span className={styles.summaryStatusLabel}>Checklist de entregabilidade</span>
                                        <ul className={styles.checklist}>
                                            {checklist.map((item) => (
                                                <li key={item.label} className={styles.checklistItem}>
                                                    <ShieldCheck
                                                        size={16}
                                                        aria-hidden
                                                        className={
                                                            item.done
                                                                ? styles.checklistIconOk
                                                                : item.warn
                                                                  ? styles.checklistIconWarn
                                                                  : styles.checklistIconPending
                                                        }
                                                    />
                                                    <span>{item.label}</span>
                                                </li>
                                            ))}
                                        </ul>
                                    </div>

                                    <div className={styles.summaryActions}>
                                        <Tooltip
                                            title={
                                                !canEditar && !permsLoading
                                                    ? tooltipSemPermissao(
                                                          'editar os e-mails de autenticação do projeto',
                                                      )
                                                    : undefined
                                            }
                                        >
                                            <span style={{ display: 'block', width: '100%' }}>
                                                <Button
                                                    type="primary"
                                                    block
                                                    size="large"
                                                    htmlType="submit"
                                                    loading={mutation.isPending}
                                                    disabled={!canEditar || permsLoading}
                                                    icon={<Save size={ICON_SIZE_MD} aria-hidden />}
                                                    data-testid="projeto-emails-autenticacao-save"
                                                >
                                                    Salvar configuração
                                                </Button>
                                            </span>
                                        </Tooltip>
                                        <Button
                                            block
                                            size="large"
                                            onClick={handleReset}
                                            disabled={mutation.isPending}
                                        >
                                            Restaurar valores
                                        </Button>
                                    </div>
                                </div>
                            </ContentCard>
                        </aside>
                    </div>
                </Form>
            </div>
        </ProjetoLayout>
    );
}