import { useState } from 'react';
import { Plus, Search, Filter, Bell, BellOff, Clock, Eye } from 'lucide-react';
import { Table } from '../components/ui/Table';
import { Button } from '../components/ui/Button';
import { Pagination } from '../components/ui/Pagination';
import { PermissionWrapper } from '../components/common/PermissionWrapper';
import { TableColumn } from '../types';
import { PageContainer, PageTitle, StatValue } from '../components/ui/Typography';

const allNotifications = [
    {
        id: 1,
        title: 'سفارش جدید دریافت شد',
        message: 'سفارش شماره ۱۰۰۱ از طرف علی احمدی ثبت شد',
        type: 'order',
        priority: 'high',
        isRead: false,
        date: '۱۴۰۲/۰۸/۱۵ - ۱۴:۳۰',
        sender: 'سیستم فروش'
    },
    {
        id: 2,
        title: 'محصول در حال اتمام',
        message: 'موجودی لپ‌تاپ ایسوس به کمتر از ۵ عدد رسیده است',
        type: 'warning',
        priority: 'medium',
        isRead: false,
        date: '۱۴۰۲/۰۸/۱۵ - ۱۲:۱۵',
        sender: 'سیستم انبار'
    },
    {
        id: 3,
        title: 'کاربر جدید عضو شد',
        message: 'فاطمه حسینی با موفقیت در سیستم ثبت نام کرد',
        type: 'info',
        priority: 'low',
        isRead: true,
        date: '۱۴۰۲/۰۸/۱۴ - ۱۶:۴۵',
        sender: 'سیستم کاربری'
    },
    {
        id: 4,
        title: 'پرداخت انجام شد',
        message: 'پرداخت سفارش ۱۰۰۲ با موفقیت تایید شد',
        type: 'success',
        priority: 'medium',
        isRead: true,
        date: '۱۴۰۲/۰۸/۱۴ - ۱۰:۲۰',
        sender: 'سیستم پرداخت'
    },
    {
        id: 5,
        title: 'خطا در سیستم',
        message: 'خطا در اتصال به درگاه پرداخت - نیاز به بررسی فوری',
        type: 'error',
        priority: 'high',
        isRead: false,
        date: '۱۴۰۲/۰۸/۱۴ - ۰۹:۱۰',
        sender: 'سیستم مانیتورینگ'
    },
    {
        id: 6,
        title: 'بک‌آپ تکمیل شد',
        message: 'بک‌آپ روزانه اطلاعات با موفقیت انجام شد',
        type: 'success',
        priority: 'low',
        isRead: true,
        date: '۱۴۰۲/۰۸/۱۳ - ۲۳:۰۰',
        sender: 'سیستم بک‌آپ'
    },
    {
        id: 7,
        title: 'بروزرسانی سیستم',
        message: 'نسخه جدید سیستم منتشر شد - بروزرسانی در دسترس است',
        type: 'info',
        priority: 'medium',
        isRead: false,
        date: '۱۴۰۲/۰۸/۱۳ - ۱۱:۳۰',
        sender: 'تیم توسعه'
    },
    {
        id: 8,
        title: 'گزارش فروش آماده شد',
        message: 'گزارش فروش ماهانه تولید و آماده دانلود است',
        type: 'info',
        priority: 'low',
        isRead: true,
        date: '۱۴۰۲/۰۸/۱۲ - ۰۸:۰۰',
        sender: 'سیستم گزارش‌گیری'
    }
];

export const Notifications = () => {
    const [notifications, setNotifications] = useState(allNotifications);
    const [searchTerm, setSearchTerm] = useState('');
    const [filterType, setFilterType] = useState('all');
    const [currentPage, setCurrentPage] = useState(1);
    const itemsPerPage = 6;

    const getNotificationIcon = (type: string) => {
        switch (type) {
            case 'error':
                return <BellOff className="h-5 w-5 text-red-600" />;
            case 'warning':
                return <Bell className="h-5 w-5 text-yellow-600" />;
            case 'success':
                return <Bell className="h-5 w-5 text-green-600" />;
            case 'info':
                return <Eye className="h-5 w-5 text-blue-600" />;
            default:
                return <Bell className="h-5 w-5 text-gray-600" />;
        }
    };

    const getPriorityColor = (priority: string) => {
        switch (priority) {
            case 'high':
                return 'border-r-red-500';
            case 'medium':
                return 'border-r-yellow-500';
            case 'low':
                return 'border-r-green-500';
            default:
                return 'border-r-gray-300';
        }
    };

    const filteredNotifications = notifications.filter((notification) => {
        const matchesSearch = notification.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
            notification.message.toLowerCase().includes(searchTerm.toLowerCase());
        const matchesFilter = filterType === 'all' ||
            (filterType === 'unread' && !notification.isRead) ||
            (filterType === 'read' && notification.isRead) ||
            notification.type === filterType;
        return matchesSearch && matchesFilter;
    });

    const totalPages = Math.ceil(filteredNotifications.length / itemsPerPage);
    const startIndex = (currentPage - 1) * itemsPerPage;
    const paginatedNotifications = filteredNotifications.slice(startIndex, startIndex + itemsPerPage);

    const handleMarkAsRead = (id: number) => {
        setNotifications(prev =>
            prev.map(notification =>
                notification.id === id ? { ...notification, isRead: true } : notification
            )
        );
    };

    const handleMarkAllAsRead = () => {
        setNotifications(prev =>
            prev.map(notification => ({ ...notification, isRead: true }))
        );
    };

    const handleDeleteNotification = (id: number) => {
        setNotifications(prev => prev.filter(notification => notification.id !== id));
    };

    const unreadCount = notifications.filter(n => !n.isRead).length;

    return (
        <PageContainer>
            <PageTitle>اعلانات</PageTitle>
            <StatValue>
                {unreadCount} اعلان خوانده نشده از {notifications.length} اعلان
            </StatValue>

            <div className="flex items-center space-x-4">
                <Button
                    variant="secondary"
                    onClick={handleMarkAllAsRead}
                    disabled={unreadCount === 0}
                >
                    <BellOff className="h-4 w-4 ml-2" />
                    همه را خوانده شده علامت بزن
                </Button>
                <Button>
                    <Plus className="h-4 w-4 ml-2" />
                    اعلان جدید
                </Button>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
                <div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
                    <div className="flex items-center">
                        <Bell className="h-8 w-8 text-blue-600" />
                        <div className="mr-3">
                            <p className="text-sm font-medium text-gray-600 dark:text-gray-400">کل اعلانات</p>
                            <StatValue>{notifications.length}</StatValue>
                        </div>
                    </div>
                </div>

                <div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
                    <div className="flex items-center">
                        <BellOff className="h-8 w-8 text-red-600" />
                        <div className="mr-3">
                            <p className="text-sm font-medium text-gray-600 dark:text-gray-400">خوانده نشده</p>
                            <StatValue>{unreadCount}</StatValue>
                        </div>
                    </div>
                </div>

                <div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
                    <div className="flex items-center">
                        <BellOff className="h-8 w-8 text-red-600" />
                        <div className="mr-3">
                            <p className="text-sm font-medium text-gray-600 dark:text-gray-400">خطا</p>
                            <StatValue>
                                {notifications.filter(n => n.type === 'error').length}
                            </StatValue>
                        </div>
                    </div>
                </div>

                <div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
                    <div className="flex items-center">
                        <Bell className="h-8 w-8 text-yellow-600" />
                        <div className="mr-3">
                            <p className="text-sm font-medium text-gray-600 dark:text-gray-400">هشدار</p>
                            <StatValue>
                                {notifications.filter(n => n.type === 'warning').length}
                            </StatValue>
                        </div>
                    </div>
                </div>
            </div>

            <div className="card p-6">
                <div className="flex flex-col sm:flex-row gap-4 mb-6">
                    <div className="relative flex-1">
                        <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                            <Search className="h-5 w-5 text-gray-400" />
                        </div>
                        <input
                            type="text"
                            placeholder="جستجو در اعلانات..."
                            value={searchTerm}
                            onChange={(e) => setSearchTerm(e.target.value)}
                            className="input pr-10"
                        />
                    </div>

                    <select
                        value={filterType}
                        onChange={(e) => setFilterType(e.target.value)}
                        className="input min-w-[150px]"
                    >
                        <option value="all">همه اعلانات</option>
                        <option value="unread">خوانده نشده</option>
                        <option value="read">خوانده شده</option>
                        <option value="error">خطا</option>
                        <option value="warning">هشدار</option>
                        <option value="success">موفق</option>
                        <option value="info">اطلاعات</option>
                    </select>
                </div>

                <div className="space-y-4">
                    {paginatedNotifications.map((notification) => (
                        <div
                            key={notification.id}
                            className={`p-4 border-r-4 ${getPriorityColor(notification.priority)} ${notification.isRead
                                ? 'bg-gray-50 dark:bg-gray-700'
                                : 'bg-white dark:bg-gray-800'
                                } border border-gray-200 dark:border-gray-600 rounded-lg shadow-sm hover:shadow-md transition-shadow`}
                        >
                            <div className="flex items-start justify-between">
                                <div className="flex items-start space-x-3">
                                    <div className="flex-shrink-0 mt-1">
                                        {getNotificationIcon(notification.type)}
                                    </div>

                                    <div className="flex-1 min-w-0">
                                        <div className="flex items-center space-x-2">
                                            <h3 className={`text-sm font-medium ${notification.isRead
                                                ? 'text-gray-600 dark:text-gray-400'
                                                : 'text-gray-900 dark:text-gray-100'
                                                }`}>
                                                {notification.title}
                                            </h3>
                                            {!notification.isRead && (
                                                <div className="w-2 h-2 bg-blue-600 rounded-full"></div>
                                            )}
                                        </div>

                                        <p className={`mt-1 text-sm ${notification.isRead
                                            ? 'text-gray-500 dark:text-gray-500'
                                            : 'text-gray-700 dark:text-gray-300'
                                            }`}>
                                            {notification.message}
                                        </p>

                                        <div className="mt-2 flex items-center text-xs text-gray-500 dark:text-gray-500 space-x-4">
                                            <span>{notification.date}</span>
                                            <span>از: {notification.sender}</span>
                                        </div>
                                    </div>
                                </div>

                                <div className="flex items-center space-x-2">
                                    {!notification.isRead && (
                                        <Button
                                            size="sm"
                                            variant="secondary"
                                            onClick={() => handleMarkAsRead(notification.id)}
                                        >
                                            <BellOff className="h-4 w-4" />
                                        </Button>
                                    )}
                                    <Button
                                        size="sm"
                                        variant="danger"
                                        onClick={() => handleDeleteNotification(notification.id)}
                                    >
                                        <BellOff className="h-4 w-4" />
                                    </Button>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>

                {paginatedNotifications.length === 0 && (
                    <div className="text-center py-12">
                        <Bell className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                        <p className="text-gray-500 dark:text-gray-400">هیچ اعلانی یافت نشد</p>
                    </div>
                )}

                <Pagination
                    currentPage={currentPage}
                    totalPages={totalPages}
                    onPageChange={setCurrentPage}
                    itemsPerPage={itemsPerPage}
                    totalItems={filteredNotifications.length}
                />
            </div>
        </PageContainer>
    );
}; 