'use client';

import React from 'react';
import { Button, Tooltip } from 'antd';
import { Pin, PinOff } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import { message } from '@/lib/feedback/message';
import { useProjetoSprintPin } from './useProjetoSprintPin';

export type ProjetoSprintPinButtonProps = {
    projetoId: string | number;
    sprintId: number;
    sprintNome?: string | null;
    size?: 'small' | 'middle' | 'large';
    type?: 'default' | 'text' | 'primary';
};

/**
 * Fixar / desafixar sprint actual no projecto (persistência local).
 */
export function ProjetoSprintPinButton({
    projetoId,
    sprintId,
    sprintNome,
    size = 'middle',
    type = 'default',
}: ProjetoSprintPinButtonProps) {
    const { isPinned, togglePin } = useProjetoSprintPin(projetoId);
    const pinned = isPinned(sprintId);

    return (
        <Tooltip title={pinned ? 'Desafixar sprint (atalho P)' : 'Fixar como "Minha sprint" (atalho P)'}>
            <Button
                type={type}
                size={size}
                icon={
                    pinned ? (
                        <PinOff size={ICON_SIZE_MD} aria-hidden />
                    ) : (
                        <Pin size={ICON_SIZE_MD} aria-hidden />
                    )
                }
                aria-label={
                    pinned ? 'Desafixar sprint como Minha sprint' : 'Fixar sprint como Minha sprint'
                }
                aria-pressed={pinned}
                data-testid={`projeto-sprint-pin-${sprintId}`}
                onClick={() => {
                    const next = togglePin({ id: sprintId, nome: sprintNome });
                    message.success(
                        next
                            ? `Sprint "${next.sprintNome}" fixada — acesse pelo atalho no topo.`
                            : 'Sprint desafixada.',
                    );
                }}
            >
                {pinned ? 'Desafixar' : 'Fixar sprint'}
            </Button>
        </Tooltip>
    );
}