import React from 'react';
import { ActionIcon, Badge, FileButton, Group, Text } from '@mantine/core';
import { IconPaperclip, IconX } from '@tabler/icons-react';
import { useSelector } from 'react-redux';
import { validateFileSize, notifyOversized } from '../../utils/validateFileSize';
import { __ } from '@wordpress/i18n';

// Paperclip trigger only — collects size-validated File objects into the
// parent's `files` state. The pending selection is shown separately via
// <CommentAttachmentChips> (a full-width row) so the toolbar stays uncluttered.
const CommentAttachmentInput = ({ files = [], onChange = () => {}, disabled = false }) => {
    const maxUploadSize = useSelector((s) => s.settings?.setting?.effectiveMaxUploadSize) || 0;
    const maxUploadSizeHuman = useSelector((s) => s.settings?.setting?.effectiveMaxUploadSizeHuman) || '';

    const handlePick = (picked) => {
        const list = Array.isArray(picked) ? picked : (picked ? [picked] : []);
        if (list.length === 0) return;
        const { accepted, message } = validateFileSize(list, maxUploadSize, maxUploadSizeHuman);
        if (message) notifyOversized(message);
        if (accepted.length) onChange([...files, ...accepted]);
    };

    return (
        <FileButton multiple onChange={handlePick} disabled={disabled}>
            {(props) => (
                <ActionIcon
                    {...props}
                    variant="subtle"
                    color="gray"
                    disabled={disabled}
                    aria-label={__('Attach files', 'lazytasks-project-task-management')}
                >
                    <IconPaperclip size={18} stroke={1.5} />
                </ActionIcon>
            )}
        </FileButton>
    );
};

// Full-width, removable list of the pending (not-yet-posted) file selection.
// Render this on its own row (e.g. below the editor/toolbar) — not inline with
// the post button — so a multi-file selection doesn't crowd the toolbar.
export const CommentAttachmentChips = ({ files = [], onChange = () => {}, mt = 8 }) => {
    if (!files || files.length === 0) return null;

    const removeAt = (idx) => onChange(files.filter((_, i) => i !== idx));

    return (
        <Group gap={6} mt={mt} wrap="wrap" w="100%">
            {files.map((f, idx) => (
                <Badge
                    key={idx}
                    variant="default"
                    radius="sm"
                    size="lg"
                    styles={{ root: { backgroundColor: '#ffffff', border: '1px solid #E2E8F0' } }}
                    rightSection={
                        <ActionIcon
                            size="xs"
                            variant="transparent"
                            color="red"
                            onClick={() => removeAt(idx)}
                            aria-label={__('Remove', 'lazytasks-project-task-management')}
                        >
                            <IconX size={12} />
                        </ActionIcon>
                    }
                >
                    <Text span fz={12} lineClamp={1} maw={180}>{f.name}</Text>
                </Badge>
            ))}
        </Group>
    );
};

export default CommentAttachmentInput;