'use client';

import React from 'react';
import Link from 'next/link';
import { Badge, Tooltip } from 'antd';
import { Plug } from 'lucide-react';
import { useProjetoLayoutContextOptional } from '@/components/layouts/ProjetoLayout/ProjetoLayoutContext';

export type CursorModoCronogramaBadgeProps = {
    projetoId?: string;
    className?: string;
};

/**
 * Indica que o projeto usa modo cronograma do Cursor Pack (FE-ENT-003).
 */
export function CursorModoCronogramaBadge({ className }: CursorModoCronogramaBadgeProps) {
    const ctx = useProjetoLayoutContextOptional();
    const ativo = ctx?.projeto?.cursor_modo_cronograma === true;

    if (!ativo) {
        return null;
    }

    return (
        <Tooltip title="Tarefas Cursor devem vincular entrega quando este modo está ativo.">
            <Badge
                className={className}
                count={
                    <span
                        style={{
                            display: 'inline-flex',
                            alignItems: 'center',
                            gap: 4,
                            padding: '0 8px',
                            fontSize: 12,
                            fontWeight: 500,
                            lineHeight: '22px',
                            borderRadius: 4,
                            background: 'var(--info-light, #e6f4ff)',
                            color: 'var(--color-info, #1677ff)',
                            border: '1px solid var(--color-info, #91caff)',
                        }}
                        data-testid="cursor-modo-cronograma-badge"
                    >
                        <Plug size={12} aria-hidden />
                        Cursor · modo cronograma
                    </span>
                }
            />
        </Tooltip>
    );
}

export function cursorPackGuiaHref(projetoId: string): string {
    return `/projetos/${projetoId}/desenvolvimento/guia-cursor-pack#baixar-contexto`;
}

export type CursorPackPlanejamentoEmptyHintProps = {
    projetoId: string;
    /** Quando false (filtros ativos), não exibe o bloco Cursor. */
    showCursorHint?: boolean;
};

/**
 * Copy + link para guia Cursor Pack em empty states de planejamento (FE-ENT-002).
 */
export function CursorPackPlanejamentoEmptyHint({
    projetoId,
    showCursorHint = true,
}: CursorPackPlanejamentoEmptyHintProps) {
    const ctx = useProjetoLayoutContextOptional();
    const modoCronograma = ctx?.projeto?.cursor_modo_cronograma === true;

    if (!showCursorHint || !modoCronograma) {
        return null;
    }

    const guiaHref = cursorPackGuiaHref(projetoId);

    return (
        <>
            {' '}
            Com o modo cronograma ativo, organize entregas e sprints e use{' '}
            <code>waygest-cursor-pack orientacao</code> no repositório local.{' '}
            <Link href={guiaHref} data-testid="cursor-pack-guia-empty-link">
                Ver guia Cursor Pack
            </Link>
            .
        </>
    );
}