'use client';

/**
 * Grupo de chips (múltipla escolha) para formulários de briefing do projeto.
 * Compatível com Form.Item (value / onChange).
 */

import Link from 'next/link';
import { Button, Tag } from 'antd';
import { Plus } from 'lucide-react';
import { ICON_SIZE_SM } from '@/components/icons';
import styles from './ProjetoSoftwarePublicoAlvoTomScreen.module.scss';

export type BriefingOpcaoChip = {
    label: string;
    value: number;
};

export type BriefingOpcaoChipGroupProps = {
    value?: number[];
    onChange?: (next: number[]) => void;
    options: BriefingOpcaoChip[];
    emptyDescription: string;
    emptyCtaHref: string;
    emptyCtaLabel: string;
    'aria-label'?: string;
};

export function BriefingOpcaoChipGroup({
    value = [],
    onChange,
    options,
    emptyDescription,
    emptyCtaHref,
    emptyCtaLabel,
    'aria-label': ariaLabel,
}: BriefingOpcaoChipGroupProps) {
    if (options.length === 0) {
        return (
            <div className={styles.emptyPanel}>
                <p className={styles.emptyText}>{emptyDescription}</p>
                <Link href={emptyCtaHref}>
                    <Button type="primary" size="small" icon={<Plus size={ICON_SIZE_SM} aria-hidden />}>
                        {emptyCtaLabel}
                    </Button>
                </Link>
            </div>
        );
    }

    return (
        <div className={styles.chipGrid} role="group" aria-label={ariaLabel}>
            {options.map((option) => {
                const checked = value.includes(option.value);
                return (
                    <Tag.CheckableTag
                        key={option.value}
                        checked={checked}
                        className={styles.chip}
                        onChange={(nextChecked) => {
                            if (!onChange) return;
                            onChange(
                                nextChecked
                                    ? [...value, option.value]
                                    : value.filter((id) => id !== option.value)
                            );
                        }}
                    >
                        {option.label}
                    </Tag.CheckableTag>
                );
            })}
        </div>
    );
}