/**
 * Notification Bell Component
 * 
 * Shows in the header with badge count and dropdown of recent alerts.
 */

import React, { useState } from 'react';
import { Bell, X, AlertTriangle, Thermometer, Droplets } from 'lucide-react';
import { useNotifications } from '../../hooks/useNotifications';

export function NotificationBell() {
    const { connected, alerts, unreadCount, clearUnread, clearAll } = useNotifications();
    const [isOpen, setIsOpen] = useState(false);

    const toggleOpen = () => {
        setIsOpen(!isOpen);
        if (!isOpen && unreadCount > 0) {
            clearUnread();
        }
    };

    const getAlertIcon = (type: string) => {
        if (type.includes('TEMPERATURE')) return <Thermometer className="w-4 h-4" />;
        if (type.includes('HUMIDITY')) return <Droplets className="w-4 h-4" />;
        return <AlertTriangle className="w-4 h-4" />;
    };

    const getAlertColor = (type: string) => {
        if (type.includes('HIGH')) return 'text-red-500';
        if (type.includes('LOW')) return 'text-blue-500';
        return 'text-yellow-500';
    };

    return (
        <div className="relative">
            {/* Bell Button */}
            <button
                onClick={toggleOpen}
                className="relative p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
                aria-label="Notifications"
            >
                <Bell className={`w-5 h-5 ${connected ? 'text-gray-600 dark:text-gray-400' : 'text-gray-400'}`} />

                {/* Badge */}
                {unreadCount > 0 && (
                    <span className="absolute -top-1 -right-1 flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-red-500 rounded-full animate-pulse">
                        {unreadCount > 9 ? '9+' : unreadCount}
                    </span>
                )}

                {/* Connection indicator */}
                <span className={`absolute bottom-1 right-1 w-2 h-2 rounded-full ${connected ? 'bg-green-500' : 'bg-gray-400'}`} />
            </button>

            {/* Dropdown */}
            {isOpen && (
                <>
                    {/* Backdrop */}
                    <div
                        className="fixed inset-0 z-40"
                        onClick={() => setIsOpen(false)}
                    />

                    {/* Panel */}
                    <div className="absolute right-0 top-12 z-50 w-80 max-h-96 overflow-hidden rounded-xl bg-white dark:bg-gray-900 shadow-2xl border border-gray-200 dark:border-gray-700">
                        {/* Header */}
                        <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700">
                            <h3 className="font-semibold text-gray-900 dark:text-white">Notifications</h3>
                            {alerts.length > 0 && (
                                <button
                                    onClick={clearAll}
                                    className="text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
                                >
                                    Clear all
                                </button>
                            )}
                        </div>

                        {/* Alerts List */}
                        <div className="max-h-72 overflow-y-auto">
                            {alerts.length === 0 ? (
                                <div className="px-4 py-8 text-center text-gray-500">
                                    <Bell className="w-8 h-8 mx-auto mb-2 opacity-50" />
                                    <p>No notifications</p>
                                </div>
                            ) : (
                                alerts.map((alert, index) => (
                                    <div
                                        key={alert.id || index}
                                        className="px-4 py-3 border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                                    >
                                        <div className="flex items-start gap-3">
                                            <div className={`mt-0.5 ${getAlertColor(alert.type)}`}>
                                                {getAlertIcon(alert.type)}
                                            </div>
                                            <div className="flex-1 min-w-0">
                                                <p className="text-sm text-gray-900 dark:text-white truncate">
                                                    {alert.sensorName}
                                                </p>
                                                <p className="text-xs text-gray-500 mt-0.5">
                                                    {alert.value.toFixed(1)} (threshold: {alert.threshold.toFixed(1)})
                                                </p>
                                                <p className="text-xs text-gray-400 mt-1">
                                                    {new Date(alert.timestamp).toLocaleTimeString()}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                ))
                            )}
                        </div>

                        {/* Footer */}
                        {alerts.length > 0 && (
                            <div className="px-4 py-2 border-t border-gray-200 dark:border-gray-700">
                                <a
                                    href="/environment"
                                    className="block text-center text-sm text-emerald-600 hover:text-emerald-700 dark:text-emerald-500"
                                >
                                    View all alerts →
                                </a>
                            </div>
                        )}
                    </div>
                </>
            )}
        </div>
    );
}
