'use client';

import Link from 'next/link';
import { Alert, Button, Card, Space, Tag, Typography } from 'antd';
import {
    CheckCircle2,
    Circle,
    AlertTriangle,
    SkipForward,
    Loader2,
    ExternalLink,
} from 'lucide-react';

import { ICON_SIZE_SM } from '@/components/icons';

import { buildConectarDeepLink, sugestoesCursorDeepLink } from './deepLinks';
import { ConectarDeployPassoPanel } from './ConectarDeployPassoPanel';
import { ConectarLogsPassoPanel } from './ConectarLogsPassoPanel';
import { ConectarSyncPassoPanel } from './ConectarSyncPassoPanel';
import { ConectarCursorPassoPanel } from './ConectarCursorPassoPanel';
import { CONECTAR_PASSO_COPY, CONECTAR_STATUS_LABEL } from './passoCopy';
import type {
    ConectarPassoAcao,
    ConectarPassoDto,
    ConectarPassoKey,
    ConectarPassoStatus,
} from './types';
import styles from './ProjetoConectar.module.scss';

const { Text, Paragraph } = Typography;

const STATUS_COLOR: Record<string, string> = {
    pendente: 'default',
    em_progresso: 'processing',
    concluido: 'success',
    pulado: 'warning',
    erro: 'error',
};

type Props = {
    projetoId: string;
    passoKey: ConectarPassoKey;
    passo: ConectarPassoDto;
    busy: boolean;
    onAcao: (passo: ConectarPassoKey, acao: ConectarPassoAcao) => void;
    onAtualizarStatus?: () => Promise<unknown>;
    passoCursorStatus?: ConectarPassoStatus;
};

export function ConectarPassoCard({
    projetoId,
    passoKey,
    passo,
    busy,
    onAcao,
    onAtualizarStatus,
    passoCursorStatus,
}: Props) {
    const copy = CONECTAR_PASSO_COPY[passoKey];
    const deepLink = buildConectarDeepLink(projetoId, passoKey, passo);
    const status = passo.status;

    return (
        <Card size="small" styles={{ body: { padding: 16 } }} data-testid={`conectar-passo-${passoKey}`}>
            <Space direction="vertical" size="middle" style={{ width: '100%' }}>
                <Space className={styles.passoHeader}>
                    <Space align="start" className={styles.passoTitleBlock}>
                        <PassoIcon status={status} />
                        <div>
                            <Text strong>{copy.titulo}</Text>
                            {!passo.obrigatorio ? (
                                <Tag style={{ marginLeft: 8 }}>Opcional</Tag>
                            ) : null}
                            <Paragraph type="secondary" style={{ marginBottom: 0, marginTop: 4 }}>
                                {copy.descricao}
                            </Paragraph>
                        </div>
                    </Space>
                    <Tag
                        color={STATUS_COLOR[status] ?? 'default'}
                        className={styles.passoStatusTag}
                    >
                        {CONECTAR_STATUS_LABEL[status] ?? status}
                    </Tag>
                </Space>

                {status === 'concluido' ? (
                    <Text type="success">{copy.concluidoHint}</Text>
                ) : null}

                {passo.ultimo_erro?.mensagem ? (
                    <Alert
                        type="error"
                        showIcon
                        message={passo.ultimo_erro.codigo}
                        description={passo.ultimo_erro.mensagem}
                    />
                ) : null}

                {passoKey === 'logs' && onAtualizarStatus ? (
                    <ConectarLogsPassoPanel
                        projetoId={projetoId}
                        passo={passo}
                        onAtualizarStatus={onAtualizarStatus}
                    />
                ) : null}

                {passoKey === 'cursor' ? (
                    <ConectarCursorPassoPanel projetoId={projetoId} passo={passo} />
                ) : null}

                {passoKey === 'sync' ? (
                    <ConectarSyncPassoPanel
                        projetoId={projetoId}
                        passo={passo}
                        passoCursorStatus={passoCursorStatus}
                    />
                ) : null}

                {passoKey === 'deploy' && onAtualizarStatus ? (
                    <ConectarDeployPassoPanel
                        projetoId={projetoId}
                        passo={passo}
                        onAtualizarStatus={onAtualizarStatus}
                    />
                ) : null}

                <Space wrap>
                    <Button
                        type={
                            passoKey === 'logs' || passoKey === 'sync' || passoKey === 'deploy'
                                ? 'default'
                                : 'primary'
                        }
                        href={deepLink}
                        icon={<ExternalLink size={ICON_SIZE_SM} />}
                    >
                        {passoKey === 'logs'
                            ? 'Abrir observabilidade'
                            : passoKey === 'sync'
                              ? 'Abrir contexto'
                              : passoKey === 'deploy'
                                ? 'Abrir hospedagem'
                                : passoKey === 'cursor'
                                  ? 'Abrir guia completo'
                                  : copy.ctaPrimario}
                    </Button>
                    <Link href={deepLink}>Abrir configuração detalhada</Link>
                    {passoKey === 'sync' ? (
                        <Link href={sugestoesCursorDeepLink(projetoId)}>Sugestões Cursor</Link>
                    ) : null}
                </Space>

                <Space wrap>
                    {status === 'pendente' || status === 'erro' ? (
                        <Button
                            size="small"
                            loading={busy}
                            onClick={() => onAcao(passoKey, 'iniciar')}
                        >
                            Marcar em andamento
                        </Button>
                    ) : null}
                    {status !== 'concluido' && (passoKey === 'cursor' || !passo.obrigatorio) ? (
                        <Button
                            size="small"
                            loading={busy}
                            onClick={() => onAcao(passoKey, 'concluir')}
                        >
                            Marcar como concluído
                        </Button>
                    ) : null}
                    {passoKey === 'deploy' && status !== 'pulado' && status !== 'concluido' ? (
                        <Button
                            size="small"
                            loading={busy}
                            onClick={() => onAcao(passoKey, 'pular')}
                        >
                            {passo.sinais.deploy_aplicavel === false
                                ? 'Pular — sem URL pública (N/A)'
                                : 'Pular por agora'}
                        </Button>
                    ) : null}
                    {status === 'pulado' || status === 'concluido' || status === 'erro' ? (
                        <Button
                            size="small"
                            loading={busy}
                            onClick={() => onAcao(passoKey, 'reabrir')}
                        >
                            Reabrir
                        </Button>
                    ) : null}
                </Space>
            </Space>
        </Card>
    );
}

function PassoIcon({ status }: { status: string }) {
    if (status === 'concluido') {
        return <CheckCircle2 size={ICON_SIZE_SM} color="var(--color-success)" aria-hidden />;
    }
    if (status === 'erro') {
        return <AlertTriangle size={ICON_SIZE_SM} color="var(--color-error)" aria-hidden />;
    }
    if (status === 'pulado') {
        return <SkipForward size={ICON_SIZE_SM} aria-hidden />;
    }
    if (status === 'em_progresso') {
        return <Loader2 size={ICON_SIZE_SM} aria-hidden />;
    }
    return <Circle size={ICON_SIZE_SM} aria-hidden />;
}