// components/admin-notifications.tsx
'use client';

import React from 'react';
import { Heart, MessageCircle, BookOpen, List } from 'lucide-react';
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import Image from 'next/image';
import { formatDistanceToNow } from 'date-fns';

interface Notification {
  id: string;
  type: 'like' | 'comment' | 'course_created' | 'playlist_created';
  user?: {
    id: string;
    name?: string;
    image?: string;
    email: string;
  } | null;
  video?: {
    id: string;
    title: string;
  };
  course?: {
    id: string;
    title: string;
    code: string;
  };
  playlist?: {
    id: string;
    title: string;
    courseTitle: string;
  };
  content: string | null;
  createdAt: Date;
}

export function AdminNotifications() {
  const [notifications, setNotifications] = React.useState<Notification[]>([]);
  const [isLoading, setIsLoading] = React.useState(true);
  const [error, setError] = React.useState<string | null>(null);

  React.useEffect(() => {
    const fetchNotifications = async () => {
      try {
        setIsLoading(true);
        const res = await fetch('/api/admin/notifications');
        if (res.ok) {
          const data = await res.json();
          setNotifications(
            data.notifications.map((n: any) => ({
              ...n,
              createdAt: new Date(n.createdAt),
            }))
          );
        } else {
          setError('Failed to fetch notifications');
        }
      } catch (err) {
        console.error('Failed to fetch notifications:', err);
        setError('Error loading notifications');
      } finally {
        setIsLoading(false);
      }
    };

    fetchNotifications();

    // Refresh notifications every 30 seconds
    const interval = setInterval(fetchNotifications, 30000);
    return () => clearInterval(interval);
  }, []);

  if (isLoading) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <MessageCircle className="w-5 h-5" />
            Activity
          </CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-muted-foreground">Loading notifications...</p>
        </CardContent>
      </Card>
    );
  }

  if (error) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <MessageCircle className="w-5 h-5" />
            Activity
          </CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-red-500">{error}</p>
        </CardContent>
      </Card>
    );
  }

  if (notifications.length === 0) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <MessageCircle className="w-5 h-5" />
            Activity
          </CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-muted-foreground">No activity yet</p>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <MessageCircle className="w-5 h-5" />
          Activity ({notifications.length})
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4 max-h-96 overflow-y-auto">
        {notifications.map((notification) => (
          <div
            key={notification.id}
            className="flex gap-3 pb-4 border-b last:border-b-0"
          >
            {notification.user?.image && (
              <div className="relative w-10 h-10 rounded-full overflow-hidden shrink-0">
                <Image
                  src={notification.user.image}
                  alt={notification.user.name ?? 'User'}
                  fill
                  unoptimized
                  sizes="40px"
                  className="object-cover"
                />
              </div>
            )}
            {notification.type === 'course_created' && (
              <div className="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center shrink-0">
                <BookOpen className="w-5 h-5 text-purple-600" />
              </div>
            )}
            {notification.type === 'playlist_created' && (
              <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center shrink-0">
                <List className="w-5 h-5 text-blue-600" />
              </div>
            )}
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2">
                {notification.type === 'like' && (
                  <Heart className="w-4 h-4 text-red-500 shrink-0" />
                )}
                {notification.type === 'comment' && (
                  <MessageCircle className="w-4 h-4 text-blue-500 shrink-0" />
                )}
                {notification.type === 'course_created' && (
                  <BookOpen className="w-4 h-4 text-purple-600 shrink-0" />
                )}
                {notification.type === 'playlist_created' && (
                  <List className="w-4 h-4 text-blue-600 shrink-0" />
                )}
                <p className="text-sm font-medium truncate">
                  {notification.user ? (
                    notification.user.name || notification.user.email
                  ) : (
                    'System'
                  )}
                </p>
                <p className="text-xs text-muted-foreground shrink-0">
                  {formatDistanceToNow(notification.createdAt, {
                    addSuffix: true,
                  })}
                </p>
              </div>
              <p className="text-xs text-muted-foreground truncate">
                {notification.type === 'like' &&
                  `liked ${notification.video?.title}`}
                {notification.type === 'comment' &&
                  `commented on ${notification.video?.title}`}
                {notification.type === 'course_created' &&
                  `created course: ${notification.course?.title}`}
                {notification.type === 'playlist_created' &&
                  `created playlist: ${notification.playlist?.title}`}
              </p>
              {notification.content && (
                <p className="text-sm text-foreground mt-1 line-clamp-2">
                  "{notification.content}"
                </p>
              )}
            </div>
          </div>
        ))}
      </CardContent>
    </Card>
  );
}