placebo.mk/frontend/src/components/features/live-blog/LiveBlogViewer.tsx

import React, { useState, useEffect, useRef, useCallback } from 'react';
import { useLiveBlogStream } from '@/hooks/useLiveBlogStream';
import { useLiveBlog, useLiveBlogUpdates } from '@/queries/live-blogs';
import type { LiveBlogUpdate as ApiLiveBlogUpdate } from '@/lib/api';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { cn } from '@/lib/utils';

interface LiveBlogViewerProps {
  slug: string;
  className?: string;
}

export function LiveBlogViewer({ slug, className }: LiveBlogViewerProps) {
  const [autoScroll, setAutoScroll] = useState(true);
  const [newUpdatesCount, setNewUpdatesCount] = useState(0);
  const [isScrolledUp, setIsScrolledUp] = useState(false);
  
  const updatesContainerRef = useRef<HTMLDivElement>(null);
  const lastUpdateCountRef = useRef(0);

  const { data: liveBlog, isLoading: blogLoading, error: blogError } = useLiveBlog(slug);
  const { 
    data: updatesData, 
    isLoading: updatesLoading, 
    refetch: refetchUpdates 
  } = useLiveBlogUpdates(liveBlog?.id || '', 1, 100);
  
  const { 
    isConnected, 
    lastEvent, 
    connectionError,
    reconnectAttempts,
    connect 
  } = useLiveBlogStream(liveBlog?.id || '');

  const scrollToBottom = useCallback(() => {
    if (updatesContainerRef.current && autoScroll) {
      const container = updatesContainerRef.current;
      container.scrollTo({
        top: container.scrollHeight,
        behavior: 'smooth'
      });
    }
  }, [autoScroll]);

  const handleScroll = useCallback(() => {
    if (!updatesContainerRef.current) return;

    const container = updatesContainerRef.current;
    const isAtBottom = container.scrollHeight - container.scrollTop <= container.clientHeight + 50;
    
    setIsScrolledUp(!isAtBottom);
    
    if (isAtBottom) {
      setNewUpdatesCount(0);
    }
  }, []);

  const handleAutoScrollToggle = useCallback(() => {
    setAutoScroll(!autoScroll);
    if (!autoScroll) {
      scrollToBottom();
      setNewUpdatesCount(0);
    }
  }, [autoScroll, scrollToBottom]);

  const showNewUpdates = useCallback(() => {
    setNewUpdatesCount(0);
    scrollToBottom();
    setIsScrolledUp(false);
  }, [scrollToBottom]);

  // Handle new updates from SSE
  useEffect(() => {
    if (lastEvent?.type === 'update') {
      const handleUpdate = () => {
        refetchUpdates();
        
        if (autoScroll && !isScrolledUp) {
          // Add a small delay to ensure the update is in the DOM
          setTimeout(() => {
            scrollToBottom();
          }, 100);
        } else if (!autoScroll || isScrolledUp) {
          setNewUpdatesCount(prev => prev + 1);
        }
      };
      
      handleUpdate();
    }
  }, [lastEvent, autoScroll, isScrolledUp, refetchUpdates, scrollToBottom]);

  // Initial scroll to bottom when data loads
  useEffect(() => {
    if (updatesData?.data && updatesData.data.length > 0) {
      const currentUpdateCount = updatesData.data.length;
      
      // Only auto-scroll if this is the initial load or user is at bottom
      if (currentUpdateCount > lastUpdateCountRef.current && !isScrolledUp) {
        setTimeout(scrollToBottom, 100);
      }
      
      lastUpdateCountRef.current = currentUpdateCount;
    }
  }, [updatesData, scrollToBottom, isScrolledUp]);

  if (blogLoading) {
    return (
      <Card className={cn('w-full max-w-4xl mx-auto', className)}>
        <CardContent className="p-6">
          <div className="animate-pulse space-y-4">
            <div className="h-8 bg-muted rounded w-3/4"></div>
            <div className="h-4 bg-muted rounded w-1/2"></div>
            <div className="space-y-2">
              <div className="h-16 bg-muted rounded"></div>
              <div className="h-16 bg-muted rounded"></div>
              <div className="h-16 bg-muted rounded"></div>
            </div>
          </div>
        </CardContent>
      </Card>
    );
  }

  if (blogError || !liveBlog) {
    return (
      <Card className={cn('w-full max-w-4xl mx-auto', className)}>
        <CardContent className="p-6">
          <div className="text-center text-destructive">
            <h3 className="text-lg font-semibold mb-2">Failed to load live blog</h3>
            <p className="text-sm">
              {blogError instanceof Error ? blogError.message : 'Unknown error occurred'}
            </p>
          </div>
        </CardContent>
      </Card>
    );
  }

  const updates = updatesData?.data || [];
  const isLive = liveBlog.status === 'live';

  return (
    <Card className={cn('w-full max-w-4xl mx-auto', className)}>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div className="flex-1">
            <CardTitle className="text-2xl mb-2">{liveBlog.title}</CardTitle>
            {liveBlog.description && (
              <p className="text-muted-foreground">{liveBlog.description}</p>
            )}
            <div className="flex items-center gap-4 mt-4 text-sm text-muted-foreground">
              <div className="flex items-center gap-2">
                <div className={cn(
                  'w-2 h-2 rounded-full',
                  isLive ? 'bg-green-500' : 'bg-gray-400'
                )} />
                <span>{isLive ? 'Live' : 'Ended'}</span>
              </div>
              {isLive && (
                <div className="flex items-center gap-2">
                  <div className={cn(
                    'w-2 h-2 rounded-full',
                    isConnected ? 'bg-green-500' : 'bg-red-500'
                  )} />
                  <span>
                    {isConnected ? 'Connected' : `Reconnecting... (${reconnectAttempts})`}
                  </span>
                </div>
              )}
              <span>{liveBlog.viewCount} views</span>
              <span>{updates.length} updates</span>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <Button
              variant={autoScroll ? 'default' : 'outline'}
              size="sm"
              onClick={handleAutoScrollToggle}
            >
              {autoScroll ? 'Auto-scroll ON' : 'Auto-scroll OFF'}
            </Button>
            {!isConnected && (
              <Button
                variant="outline"
                size="sm"
                onClick={connect}
              >
                Reconnect
              </Button>
            )}
          </div>
        </div>
      </CardHeader>

      <CardContent className="p-0">
        {connectionError && (
          <div className="m-6 p-4 bg-destructive/10 border border-destructive/20 rounded-lg">
            <div className="flex items-center justify-between">
              <p className="text-sm text-destructive">
                {connectionError}
              </p>
              <Button
                variant="outline"
                size="sm"
                onClick={connect}
              >
                Try Again
              </Button>
            </div>
          </div>
        )}

        <div
          ref={updatesContainerRef}
          className="max-h-[600px] overflow-y-auto px-6 pb-6"
          onScroll={handleScroll}
        >
          {updates.length === 0 && !updatesLoading ? (
            <div className="text-center py-12 text-muted-foreground">
              <p>No updates yet. Check back soon!</p>
            </div>
          ) : (
            <div className="space-y-4">
              {updates.map((update) => (
                <LiveBlogUpdate key={update.id} update={update} />
              ))}
              {updatesLoading && (
                <div className="animate-pulse">
                  <div className="h-16 bg-muted rounded"></div>
                </div>
              )}
            </div>
          )}
        </div>

        {/* New updates indicator */}
        {isScrolledUp && newUpdatesCount > 0 && (
          <div className="sticky bottom-0 bg-background border-t p-4">
            <div className="flex items-center justify-between">
              <span className="text-sm text-muted-foreground">
                {newUpdatesCount} new {newUpdatesCount === 1 ? 'update' : 'updates'}
              </span>
              <Button size="sm" onClick={showNewUpdates}>
                Show Updates
              </Button>
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
}

interface LiveBlogUpdateProps {
  update: ApiLiveBlogUpdate;
}

function LiveBlogUpdate({ update }: LiveBlogUpdateProps) {
  const isPinned = update.isPinned;
  
  return (
    <div
      className={cn(
        'relative p-4 rounded-lg border',
        isPinned && 'border-primary bg-primary/5'
      )}
    >
      {isPinned && (
        <div className="absolute -top-2 -left-2 bg-primary text-primary-foreground text-xs px-2 py-1 rounded-full">
          Pinned
        </div>
      )}
      
      <div className="flex items-start justify-between mb-2">
        <div className="flex items-center gap-2">
          {update.author && (
            <>
              {update.author.avatar && (
                <img
                  src={update.author.avatar}
                  alt={update.author.name}
                  className="w-6 h-6 rounded-full"
                />
              )}
              <span className="text-sm font-medium">{update.author.name}</span>
            </>
          )}
        </div>
        <span className="text-xs text-muted-foreground">
          {new Date(update.createdAt).toLocaleTimeString()}
        </span>
      </div>
      
      <div className="text-sm leading-relaxed whitespace-pre-wrap">
        {update.content}
      </div>
    </div>
  );
}