import { NotificationItem } from '@/components/notification-item';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { ListFilter } from 'lucide-react';
import { forwardRef, useState } from 'react';
// CSS for notification animations
export const notificationStyles = `
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideDown {
  from { transform: translateY(-10px); }
  to { transform: translateY(0); }
}

.notification-panel {
  animation: fadeIn 0.2s ease-out, slideDown 0.2s ease-out;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 0;
  display: none;
}

.custom-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
`;

export interface Notification {
    id: number;
    notification_id: number;
    action?: string | null;
    message?: string | null;
    action_url?: string | null;
    user_image?: string | null;
    timestamp?: string;
    is_read: boolean;
    time_ago?: string;
}

interface NotificationBoxProps {
    onClose: () => void;
    notifications: Notification[];
    onMarkAsRead?: (notificationId: number) => void;
}

const NotificationBox = forwardRef<HTMLDivElement, NotificationBoxProps>(
    ({ onClose, notifications, onMarkAsRead }, ref) => {
        const [filter, setFilter] = useState<'all' | 'unread'>('all');
        
        const filteredNotifications = filter === 'unread' 
            ? notifications.filter((n) => !n.is_read)
            : notifications;
            
        const unreadCount = notifications.filter((n) => !n.is_read).length;
    return (
        <>
            <style>{notificationStyles}</style>
            <div
                ref={ref}
                className="notification-panel absolute right-0 mt-2 max-h-[850px] w-[370px] overflow-hidden rounded-md border border-gray-100 bg-white dark:border-gray-700 dark:bg-gray-800"
                style={{ zIndex: 99999 }}
            >
                <Card className="w-full max-w-md p-0 shadow-none">
                    {/* Header */}
                    <div className="flex items-center justify-between border-b p-4">
                        <div className="flex items-center gap-2">
                            <h2 className="text-xl font-semibold">Notifications</h2>
                            {unreadCount > 0 && (
                                <Badge variant="outline" className="flex h-5 w-5 items-center justify-center rounded-full p-0 text-xs">
                                    {unreadCount}
                                </Badge>
                            )}
                        </div>
                        {/* <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => onClose()}>
                            <X className="h-4 w-4" />
                        </Button> */}
                    </div>

                    {/* Tabs and Menu */}
                    <div className="flex items-center justify-between px-4 py-2">
                        <Tabs value={filter} onValueChange={(v) => setFilter(v as 'all' | 'unread')} className="w-auto">
                            <TabsList className="h-9 gap-1 bg-transparent p-0">
                                <TabsTrigger value="all" className="rounded-md data-[state=active]:bg-muted">
                                    All ({notifications.length})
                                </TabsTrigger>
                                <TabsTrigger value="unread" className="rounded-md data-[state=active]:bg-muted">
                                    Unread ({unreadCount})
                                </TabsTrigger>
                            </TabsList>
                        </Tabs>
                        <Button variant="ghost" size="icon" className="h-8 w-8">
                            <ListFilter className="h-4 w-4" />
                        </Button>
                    </div>
                    
                    {/* Notifications List */}
                    <div className="no-scrollbar overflow-y-auto xl:max-h-[450px] 2xl:max-h-[500px]">
                        {filteredNotifications.length > 0 ? (
                            filteredNotifications.map((notification) => (
                                <NotificationItem 
                                    key={notification.id} 
                                    notification={notification}
                                    onClick={() => onMarkAsRead?.(notification.id)}
                                />
                            ))
                        ) : (
                            <div className="flex items-center justify-center p-8 text-center text-muted-foreground">
                                <p>No notifications {filter === 'unread' ? 'to read' : 'yet'}</p>
                            </div>
                        )}
                    </div>
                </Card>
            </div>
        </>
    );
}
);

NotificationBox.displayName = 'NotificationBox';

export default NotificationBox;