'use client';

/**
 * Card KPI cobertura requisito→teste no hub SC (TASK-PSC-033).
 * Não oversell: métrica pontual requisito→teste, não "qualidade total".
 *
 * CTA único "Abrir requisitos" fora de `Alert.action` — hit-target acima da
 * bottom bar mobile (`ProjetoLayout`), sem clique interceptado em xs.
 */

import { FlaskConical } from 'lucide-react';
import { Alert, Button, Progress, Space, Spin, Typography } from 'antd';
import { useRouter } from 'next/navigation';

import { ICON_SIZE_MD } from '@/components/icons';
import ContentCard from '@/components/layouts/ContentCard';

import { useScCoberturaRequisitoTeste } from './useScCoberturaRequisitoTeste';
import styles from './ScProntidaoHubBlock.module.scss';

const { Text } = Typography;

export type ScCoberturaRequisitoTesteCardProps = {
    projetoId: string;
};

/**
 * % cobertura + count sem teste + CTA para requisitos de planeamento.
 */
export function ScCoberturaRequisitoTesteCard({ projetoId }: ScCoberturaRequisitoTesteCardProps) {
    const router = useRouter();
    const { data, isLoading, isError, isForbidden, refetch } = useScCoberturaRequisitoTeste({
        projetoId,
    });

    const metricas = data?.cobertura_requisito_teste;
    const semTesteAlerta = data?.alertas?.find((a) => a.codigo === 'req_sem_teste');
    const requisitosHref = `/projetos/${projetoId}/planejamento/requisitos`;

    const ctaAbrirRequisitos = (
        <div className={styles.ctaRow}>
            <Button
                type="primary"
                className={styles.ctaButton}
                data-testid="sc-cobertura-cta-requisitos"
                onClick={() => router.push(requisitosHref)}
            >
                Abrir requisitos
            </Button>
        </div>
    );

    return (
        <div data-testid="sc-cobertura-requisito-teste">
            <ContentCard
                title="Cobertura requisito → teste"
                icon={<FlaskConical size={ICON_SIZE_MD} aria-hidden />}
                loading={isLoading && !data}
            >
                <Text type="secondary" className={styles.cardSubtitle}>
                    Percentagem de requisitos elegíveis com pelo menos um teste associado (não mede
                    qualidade global do projecto).
                </Text>

                {isLoading && !data ? (
                    <div style={{ textAlign: 'center', padding: 16 }} role="status" aria-busy="true">
                        <Spin size="small" />
                        <div style={{ marginTop: 8 }}>
                            <Text type="secondary">A carregar cobertura…</Text>
                        </div>
                    </div>
                ) : null}

                {isForbidden ? (
                    <Alert
                        type="warning"
                        showIcon
                        message="Cobertura indisponível"
                        description="Addon Desenvolvimento de software inativo ou sem permissão para ver este indicador."
                        action={
                            <Button size="small" onClick={() => router.push('/configuracoes/addons')}>
                                Abrir addons
                            </Button>
                        }
                    />
                ) : null}

                {isError && !isForbidden ? (
                    <Alert
                        type="error"
                        showIcon
                        message="Não foi possível carregar a cobertura"
                        description="Tente novamente. Se persistir, verifique a ligação à API."
                        action={
                            <Button size="small" onClick={refetch}>
                                Tentar novamente
                            </Button>
                        }
                    />
                ) : null}

                {!isLoading && !isError && metricas && metricas.elegiveis === 0 ? (
                    <Space direction="vertical" size={12} style={{ width: '100%' }}>
                        <Alert
                            type="info"
                            showIcon
                            message="Sem requisitos elegíveis para cobertura"
                            description="Cadastre requisitos elegíveis neste projeto para começar a medir a ligação requisito→teste."
                        />
                        {ctaAbrirRequisitos}
                    </Space>
                ) : null}

                {!isLoading && !isError && metricas && metricas.elegiveis > 0 ? (
                    <Space direction="vertical" size={12} style={{ width: '100%' }}>
                        <div>
                            <Text strong style={{ fontSize: 28, lineHeight: 1.2 }}>
                                {metricas.percentual != null ? `${metricas.percentual}%` : '—'}
                            </Text>
                            <Text type="secondary" style={{ display: 'block', fontSize: 12, marginTop: 4 }}>
                                {metricas.cobertos} de {metricas.elegiveis} requisitos com teste
                                {metricas.sem_teste > 0
                                    ? ` · ${metricas.sem_teste} sem teste`
                                    : ''}
                            </Text>
                        </div>
                        <Progress
                            percent={metricas.percentual ?? 0}
                            size="small"
                            status={
                                metricas.sem_teste > 0
                                    ? 'active'
                                    : metricas.percentual === 100
                                      ? 'success'
                                      : 'normal'
                            }
                            showInfo={false}
                            aria-label={`Cobertura ${metricas.percentual ?? 0} por cento`}
                        />

                        {semTesteAlerta && semTesteAlerta.count > 0 ? (
                            <Alert
                                type="warning"
                                showIcon
                                message={`${semTesteAlerta.count} requisito(s) sem teste associado`}
                                description="Revise os requisitos elegíveis e associe testes para reduzir o risco de regressão."
                            />
                        ) : null}

                        {ctaAbrirRequisitos}
                    </Space>
                ) : null}
            </ContentCard>
        </div>
    );
}