'use client';

import React from 'react';
import Link from 'next/link';
import { Button, Space, Tag, Typography } from 'antd';
import { Pin, X } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import { projetoSprintBoardPath } from '@/features/projetos/sprint-detalhe/sprintDetalhePaths';
import { useProjetoSprintPin } from './useProjetoSprintPin';
import styles from './ProjetoSprintPinBar.module.scss';

const { Text } = Typography;

export type ProjetoSprintPinBarProps = {
    projetoId: string | number;
};

/**
 * Atalho persistente para a sprint fixada no projecto (TASK-PWP-063).
 */
export function ProjetoSprintPinBar({ projetoId }: ProjetoSprintPinBarProps) {
    const { pinned, clearPin } = useProjetoSprintPin(projetoId);

    if (!pinned) {
        return null;
    }

    const boardHref = projetoSprintBoardPath(String(projetoId), String(pinned.sprintId));

    return (
        <div className={styles.wrap} data-testid="projeto-sprint-pin-bar" aria-label="Sprint fixada">
            <Space wrap size={[8, 8]} align="center">
                <Text type="secondary" className={styles.label}>
                    <Pin size={ICON_SIZE_MD} aria-hidden />
                    Minha sprint
                </Text>
                <Tag color="purple">
                    <Link href={boardHref}>{pinned.sprintNome}</Link>
                </Tag>
                <Button
                    type="link"
                    size="small"
                    icon={<X size={ICON_SIZE_MD} aria-hidden />}
                    aria-label="Remover sprint fixada"
                    onClick={clearPin}
                >
                    Remover
                </Button>
            </Space>
        </div>
    );
}