'use client';

/**
 * Cartão «Conexão técnica» para o hub Visão Geral (tipologias desenvolvimento_software).
 */

import Link from 'next/link';
import { Alert, Button, Card, Progress, Space, Typography } from 'antd';
import { Plug } from 'lucide-react';

import { ICON_SIZE_MD } from '@/components/icons';
import { projetosProjetoCanonical } from '@/lib/routes/projetosProjetoCanonical';

import { CONECTAR_PASSOS_ORDEM } from './types';
import { useProjetoConectar } from './useProjetoConectar';

const { Text, Paragraph } = Typography;

type Props = {
    projetoId: string;
    enabled?: boolean;
};

export function ConexaoTecnicaHubCard({ projetoId, enabled = true }: Props) {
    const { data, isLoading, isError, httpStatus } = useProjetoConectar(projetoId, enabled);
    const href = projetosProjetoCanonical.projetoConectar(projetoId);

    if (!enabled) return null;

    if (isError && httpStatus === 403) {
        return null;
    }

    const feitos = data
        ? CONECTAR_PASSOS_ORDEM.filter((k) => {
              const s = data.passos[k]?.status;
              if (k === 'deploy') return s === 'concluido' || s === 'pulado';
              return s === 'concluido';
          }).length
        : 0;
    const total = CONECTAR_PASSOS_ORDEM.length;
    const percent = Math.round((feitos / total) * 100);

    return (
        <Card
            size="small"
            title={
                <Space>
                    <Plug size={ICON_SIZE_MD} aria-hidden />
                    <span>Conexão técnica</span>
                </Space>
            }
            extra={
                <Link href={href}>
                    <Button type="link" size="small">
                        Abrir
                    </Button>
                </Link>
            }
        >
            {isLoading && !data ? (
                <Text type="secondary">Carregando…</Text>
            ) : isError ? (
                <Alert type="warning" showIcon message="Não foi possível carregar o status." />
            ) : (
                <Space direction="vertical" style={{ width: '100%' }} size="small">
                    <Paragraph type="secondary" style={{ marginBottom: 0 }}>
                        Git, Cursor Pack, logs, deploy e sincronização do workspace com o Waygest.
                    </Paragraph>
                    <Progress
                        percent={percent}
                        size="small"
                        status={data?.conectado_p0 ? 'success' : 'active'}
                        format={() => `${feitos}/${total}`}
                    />
                    {data?.conectado_p0 ? (
                        <Text type="success">Passos obrigatórios concluídos.</Text>
                    ) : (
                        <Link href={href}>
                            <Button type="primary" size="small">
                                Continuar conexão
                            </Button>
                        </Link>
                    )}
                </Space>
            )}
        </Card>
    );
}