import React, { useState, useEffect } from 'react';
import { pb } from '../../services/pocketbaseService';
import { FaBell, FaUsers, FaFilter, FaPaperPlane, FaPlus, FaTrash } from 'react-icons/fa';

const NotificationManager = () => {
    const [title, setTitle] = useState('');
    const [message, setMessage] = useState('');
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);
    const [success, setSuccess] = useState(null);
    const [filters, setFilters] = useState([{ field: '', operator: '=', value: '' }]);
    const [mediaList, setMediaList] = useState([]);
    const [selectedMedia, setSelectedMedia] = useState([]);
    const [minReviews, setMinReviews] = useState(1);

    useEffect(() => {
        loadMediaList();
    }, []);

    const loadMediaList = async () => {
        try {
            const records = await pb.collection('media').getList(1, 1000, {
                sort: 'title'
            });
            setMediaList(records.items);
        } catch (error) {
            console.error('Error loading media list:', error);
        }
    };

    const operators = [
        { value: '=', label: 'Равно' },
        { value: '!=', label: 'Не равно' },
        { value: '>', label: 'Больше' },
        { value: '<', label: 'Меньше' },
        { value: '>=', label: 'Больше или равно' },
        { value: '<=', label: 'Меньше или равно' },
        { value: '~', label: 'Содержит' },
        { value: '!~', label: 'Не содержит' }
    ];

    const fields = [
        { value: 'level', label: 'Уровень' },
        { value: 'review_count', label: 'Количество рецензий' },
        { value: 'email', label: 'Email' },
        { value: 'showcase', label: 'Витрина' },
        { value: 'created', label: 'Дата регистрации' },
        { value: 'has_reviewed', label: 'Оставил рецензию на медиа' }
    ];

    const addFilter = () => {
        setFilters([...filters, { field: '', operator: '=', value: '' }]);
    };

    const removeFilter = (index) => {
        setFilters(filters.filter((_, i) => i !== index));
    };

    const updateFilter = (index, field, value) => {
        const newFilters = [...filters];
        newFilters[index][field] = value;
        setFilters(newFilters);
    };

    const buildFilterString = () => {
        return filters
            .filter(f => f.field && f.operator && f.value)
            .map(f => {
                let value = f.value;
                // Если значение не число и не булево, заключаем в кавычки
                if (isNaN(value) && value !== 'true' && value !== 'false') {
                    value = `"${value}"`;
                }
                return `${f.field} ${f.operator} ${value}`;
            })
            .join(' && ');
    };

    const handleMediaSelect = (mediaId) => {
        setSelectedMedia(prev => {
            if (prev.includes(mediaId)) {
                return prev.filter(id => id !== mediaId);
            } else {
                return [...prev, mediaId];
            }
        });
    };

    const sendNotification = async () => {
        if (!title || !message) {
            setError('Заполните заголовок и сообщение');
            return;
        }

        setLoading(true);
        setError(null);
        setSuccess(null);

        try {
            let filterString = buildFilterString();
            
            // Если выбран фильтр по медиа, добавляем подзапрос для получения пользователей с рецензиями
            if (selectedMedia.length > 0) {
                const reviews = await pb.collection('reviews').getList(1, 1000, {
                    filter: `media_id ?~ "${selectedMedia.join('" || media_id ?~ "')}"`,
                    fields: 'user_id'
                });
                
                // Группируем рецензии по пользователям
                const userReviews = reviews.items.reduce((acc, review) => {
                    acc[review.user_id] = (acc[review.user_id] || 0) + 1;
                    return acc;
                }, {});

                // Фильтруем пользователей по минимальному количеству рецензий
                const userIds = Object.entries(userReviews)
                    .filter(([_, count]) => count >= minReviews)
                    .map(([userId]) => userId);

                if (userIds.length > 0) {
                    const mediaFilter = `id ?~ "${userIds.join('" || id ?~ "')}"`;
                    filterString = filterString ? `${filterString} && ${mediaFilter}` : mediaFilter;
                } else {
                    throw new Error('Нет пользователей, соответствующих выбранным критериям');
                }
            }

            // Получаем список пользователей по фильтру
            const users = await pb.collection('users').getList(1, 1000, {
                filter: filterString || undefined
            });

            if (users.items.length === 0) {
                throw new Error('Нет пользователей, соответствующих выбранным фильтрам');
            }

            // Отправляем уведомления каждому пользователю
            for (const user of users.items) {
                await pb.collection('notifications').create({
                    user_id: user.id,
                    type: 'system',
                    title,
                    message,
                    is_read: false
                });
            }

            setSuccess(`Уведомления отправлены ${users.items.length} пользователям`);
            setTitle('');
            setMessage('');
            setFilters([{ field: '', operator: '=', value: '' }]);
            setSelectedMedia([]);
            setMinReviews(1);
        } catch (error) {
            console.error('Error sending notifications:', error);
            setError(error.message || 'Произошла ошибка при отправке уведомлений');
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="bg-campfire-dark rounded-lg p-6">
            <h2 className="text-2xl font-bold text-campfire-light mb-6 flex items-center">
                <FaBell className="mr-2" />
                Отправка уведомлений
            </h2>

            {error && (
                <div className="bg-red-500/10 border border-red-500/20 text-red-500 p-4 rounded-lg mb-4">
                    {error}
                </div>
            )}

            {success && (
                <div className="bg-green-500/10 border border-green-500/20 text-green-500 p-4 rounded-lg mb-4">
                    {success}
                </div>
            )}

            <div className="space-y-4">
                <div>
                    <label className="block text-sm font-medium text-campfire-light mb-2">
                        Заголовок
                    </label>
                    <input
                        type="text"
                        value={title}
                        onChange={(e) => setTitle(e.target.value)}
                        className="w-full p-2 bg-campfire-charcoal border border-campfire-ash/30 rounded-md text-campfire-light focus:ring-2 focus:ring-campfire-amber focus:border-transparent"
                        placeholder="Введите заголовок уведомления"
                    />
                </div>

                <div>
                    <label className="block text-sm font-medium text-campfire-light mb-2">
                        Сообщение
                    </label>
                    <textarea
                        value={message}
                        onChange={(e) => setMessage(e.target.value)}
                        className="w-full p-2 bg-campfire-charcoal border border-campfire-ash/30 rounded-md text-campfire-light focus:ring-2 focus:ring-campfire-amber focus:border-transparent"
                        rows="4"
                        placeholder="Введите текст уведомления"
                    />
                </div>

                <div>
                    <label className="block text-sm font-medium text-campfire-light mb-2">
                        Фильтр по рецензиям
                    </label>
                    <div className="space-y-4">
                        <div>
                            <label className="block text-sm text-campfire-light/70 mb-2">
                                Минимальное количество рецензий
                            </label>
                            <input
                                type="number"
                                min="1"
                                value={minReviews}
                                onChange={(e) => setMinReviews(parseInt(e.target.value) || 1)}
                                className="w-full p-2 bg-campfire-charcoal border border-campfire-ash/30 rounded-md text-campfire-light focus:ring-2 focus:ring-campfire-amber focus:border-transparent"
                            />
                        </div>
                        <div>
                            <label className="block text-sm text-campfire-light/70 mb-2">
                                Выберите медиа
                            </label>
                            <div className="max-h-48 overflow-y-auto bg-campfire-charcoal border border-campfire-ash/30 rounded-md">
                                {mediaList.map(media => (
                                    <div
                                        key={media.id}
                                        className="flex items-center space-x-2 p-2 hover:bg-campfire-ash/20 cursor-pointer"
                                        onClick={() => handleMediaSelect(media.id)}
                                    >
                                        <input
                                            type="checkbox"
                                            checked={selectedMedia.includes(media.id)}
                                            onChange={() => {}}
                                            className="text-campfire-amber focus:ring-campfire-amber"
                                        />
                                        <span className="text-campfire-light">{media.title}</span>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>

                <div>
                    <div className="flex justify-between items-center mb-2">
                        <label className="block text-sm font-medium text-campfire-light">
                            Дополнительные фильтры
                        </label>
                        <button
                            onClick={addFilter}
                            className="flex items-center text-campfire-amber hover:text-campfire-amber/80"
                        >
                            <FaPlus className="mr-1" />
                            Добавить фильтр
                        </button>
                    </div>

                    <div className="space-y-2">
                        {filters.map((filter, index) => (
                            <div key={index} className="flex items-center space-x-2">
                                <select
                                    value={filter.field}
                                    onChange={(e) => updateFilter(index, 'field', e.target.value)}
                                    className="flex-1 p-2 bg-campfire-charcoal border border-campfire-ash/30 rounded-md text-campfire-light focus:ring-2 focus:ring-campfire-amber focus:border-transparent"
                                >
                                    <option value="">Выберите поле</option>
                                    {fields.map(field => (
                                        <option key={field.value} value={field.value}>
                                            {field.label}
                                        </option>
                                    ))}
                                </select>

                                <select
                                    value={filter.operator}
                                    onChange={(e) => updateFilter(index, 'operator', e.target.value)}
                                    className="w-32 p-2 bg-campfire-charcoal border border-campfire-ash/30 rounded-md text-campfire-light focus:ring-2 focus:ring-campfire-amber focus:border-transparent"
                                >
                                    {operators.map(op => (
                                        <option key={op.value} value={op.value}>
                                            {op.label}
                                        </option>
                                    ))}
                                </select>

                                <input
                                    type="text"
                                    value={filter.value}
                                    onChange={(e) => updateFilter(index, 'value', e.target.value)}
                                    className="flex-1 p-2 bg-campfire-charcoal border border-campfire-ash/30 rounded-md text-campfire-light focus:ring-2 focus:ring-campfire-amber focus:border-transparent"
                                    placeholder="Значение"
                                />

                                {filters.length > 1 && (
                                    <button
                                        onClick={() => removeFilter(index)}
                                        className="p-2 text-red-500 hover:text-red-400"
                                    >
                                        <FaTrash />
                                    </button>
                                )}
                            </div>
                        ))}
                    </div>
                </div>

                <button
                    onClick={sendNotification}
                    disabled={loading}
                    className="w-full py-2 px-4 bg-campfire-amber text-campfire-dark rounded-md hover:bg-campfire-amber/80 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
                >
                    {loading ? (
                        'Отправка...'
                    ) : (
                        <>
                            <FaPaperPlane className="mr-2" />
                            Отправить уведомления
                        </>
                    )}
                </button>
            </div>
        </div>
    );
};

export default NotificationManager; 