'use client';

/**
 * Página hub «Conectar projeto» — 5 passos (Git, Cursor, logs, deploy, sync).
 * @route /projetos/[id]/conectar
 */

import { Alert, Button, Result, Space, Steps, Typography } from 'antd';
import { useParams } from 'next/navigation';
import { RefreshCw } from 'lucide-react';

import ContentCard from '@/components/layouts/ContentCard';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import PageWrapper from '@/components/layouts/PageWrapper';
import { ICON_SIZE_MD } from '@/components/icons';
import { useIsMobile } from '@/hooks/useIsMobile';
import { projetosProjetoCanonical } from '@/lib/routes/projetosProjetoCanonical';

import { ConectarPassoCard } from './ConectarPassoCard';
import { CONECTAR_PASSO_COPY, CONECTAR_STATUS_LABEL } from './passoCopy';
import { CONECTAR_PASSOS_ORDEM } from './types';
import type { ConectarPassoAcao, ConectarPassoKey } from './types';
import { useProjetoConectar } from './useProjetoConectar';
import styles from './ProjetoConectar.module.scss';
import { LoadingState } from '@/components/ui/LoadingState';

const { Paragraph, Text } = Typography;

const PROJETOS_LIST_PATH = '/projetos';

export function ProjetoConectarScreen() {
    const isMobile = useIsMobile();
    const params = useParams();
    const projetoId =
        typeof params?.id === 'string' ? params.id : Array.isArray(params?.id) ? params.id[0] : '';
    const c = projetosProjetoCanonical;

    const {
        data,
        isLoading,
        isError,
        httpStatus,
        refetch,
        aplicarAcao,
        isMutating,
    } = useProjetoConectar(projetoId);

    const onAcao = (passo: ConectarPassoKey, acao: ConectarPassoAcao) => {
        void aplicarAcao(passo, acao);
    };

    const headerAction = (
        <Button
            icon={<RefreshCw size={ICON_SIZE_MD} />}
            onClick={() => void refetch()}
            loading={isMutating}
            aria-label="Atualizar"
        >
            {isMobile ? null : 'Atualizar'}
        </Button>
    );

    if (!projetoId) {
        return (
            <PageWrapper>
                <Result status="warning" title="Projeto não identificado" />
            </PageWrapper>
        );
    }

    const currentStepIndex =
        data
            ? CONECTAR_PASSOS_ORDEM.findIndex(
                  (k) =>
                      data.passos[k]?.status !== 'concluido' && data.passos[k]?.status !== 'pulado',
              )
            : -1;

    return (
        <ProjetoLayout
            projetoId={projetoId}
            pageTitle="Conectar projeto"
            pageIcon="plug"
            titleSection="Conectar projeto"
            breadcrumbItems={[
                { title: 'PROJETO', path: PROJETOS_LIST_PATH },
                { title: 'Projeto', path: c.projetoDetalhe(projetoId) },
                { title: 'Conectar projeto' },
            ]}
            headerAction={headerAction}
        >
            <Paragraph type="secondary" style={{ marginTop: 0, marginBottom: 16 }}>
                Ligue o repositório ao Waygest: Git, Cursor Pack, logs, deploy e sincronização do
                workspace.
            </Paragraph>

            {isLoading && !data ? (
                <ContentCard>
                    <div style={{ display: 'flex', justifyContent: 'center', padding: 48 }}>
                        <LoadingState size="large" label="Carregando conexão do projeto…" />
                    </div>
                </ContentCard>
            ) : null}

            {isError && httpStatus === 403 ? (
                <Result
                    status="403"
                    title="Sem permissão"
                    subTitle="Você não tem acesso a este projeto ou o addon Desenvolvimento de software não está ativo."
                    extra={
                        <Button type="primary" onClick={() => void refetch()}>
                            Tentar de novo
                        </Button>
                    }
                />
            ) : null}

            {isError && httpStatus !== 403 ? (
                <Result
                    status="error"
                    title="Não foi possível carregar"
                    subTitle="Verifique a conexão com a API e tente novamente."
                    extra={
                        <Button type="primary" onClick={() => void refetch()}>
                            Tentar de novo
                        </Button>
                    }
                />
            ) : null}

            {!isError && !data && !isLoading ? (
                <Result
                    status="error"
                    title="Não foi possível carregar"
                    subTitle="Verifique a conexão com a API e tente novamente."
                    extra={
                        <Button type="primary" onClick={() => void refetch()}>
                            Tentar de novo
                        </Button>
                    }
                />
            ) : null}

            {data ? (
                <ContentCard>
                    <Space direction="vertical" size="large" style={{ width: '100%' }}>
                        {data.conectado_p0 ? (
                            <Alert
                                type="success"
                                showIcon
                                message="Conexão técnica pronta"
                                description="Os passos obrigatórios (Git, Cursor, logs e sync) estão concluídos. O deploy continua opcional."
                            />
                        ) : (
                            <Alert
                                type="info"
                                showIcon
                                message="Complete os passos obrigatórios"
                                description="Git, Cursor Pack, logs e sincronização são necessários. Deploy de produção pode ser pulado por agora."
                            />
                        )}

                        {data.tipo_codigo ? (
                            <Text type="secondary">Tipo: {data.tipo_codigo}</Text>
                        ) : null}

                        <Steps
                            size="small"
                            direction={isMobile ? 'vertical' : 'horizontal'}
                            className={isMobile ? styles.stepsMobile : undefined}
                            data-testid="projeto-conectar-steps"
                            current={
                                currentStepIndex < 0
                                    ? CONECTAR_PASSOS_ORDEM.length
                                    : currentStepIndex
                            }
                            items={CONECTAR_PASSOS_ORDEM.map((key) => ({
                                title: CONECTAR_PASSO_COPY[key].titulo,
                                description:
                                    CONECTAR_STATUS_LABEL[data.passos[key]?.status ?? 'pendente'],
                                status:
                                    data.passos[key]?.status === 'erro'
                                        ? 'error'
                                        : data.passos[key]?.status === 'concluido'
                                          ? 'finish'
                                          : data.passos[key]?.status === 'pulado'
                                            ? 'wait'
                                            : undefined,
                            }))}
                        />

                        <Paragraph type="secondary" style={{ marginBottom: 0 }}>
                            Ao abrir a configuração detalhada, use o fluxo da tela e volte por aqui
                            (returnTo=conectar) quando terminar.
                        </Paragraph>

                        {CONECTAR_PASSOS_ORDEM.map((key) => (
                            <ConectarPassoCard
                                key={key}
                                projetoId={projetoId}
                                passoKey={key}
                                passo={data.passos[key]}
                                busy={isMutating}
                                onAcao={onAcao}
                                onAtualizarStatus={() => refetch()}
                                passoCursorStatus={data.passos.cursor?.status}
                            />
                        ))}
                    </Space>
                </ContentCard>
            ) : null}
        </ProjetoLayout>
    );
}