import { useQuery } from '@tanstack/react-query'
import { Link } from '@tanstack/react-router'
import * as api from '@/lib/api'
import { LiveBlogTicker } from '@/components/features/live-blog/LiveBlogTicker'

export function LiveBlogsComponent() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['liveBlogs'],
    queryFn: () => api.fetchLiveBlogs({ status: 'live' }),
  })

  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-lg">Loading live blogs...</div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-lg text-red-500">Error loading live blogs</div>
      </div>
    )
  }

  return (
    <div className="space-y-6">
      <LiveBlogTicker />
      
      <div className="mb-8">
        <h1 className="text-3xl font-bold">Live Blogs</h1>
        <p className="text-muted-foreground">Breaking news and live updates</p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {data?.data.map((liveBlog) => (
           <Link
             key={liveBlog.id}
             to="/live-blogs/$slug"
             params={{ slug: liveBlog.slug }}
             className="p-6 rounded-xl border bg-card hover:shadow-lg transition-shadow cursor-pointer block"
           >
            <div className="flex items-start justify-between mb-4">
              <div className="flex-1">
                <div className="flex items-center gap-2 mb-2">
                  <div className="w-2 h-2 rounded-full bg-green-500"></div>
                  <span className="text-sm text-muted-foreground">
                    {liveBlog.status === 'live' ? 'LIVE NOW' : liveBlog.status.toUpperCase()}
                  </span>
                </div>
                <h2 className="text-xl font-semibold mb-2 line-clamp-2">
                  {liveBlog.title}
                </h2>
                {liveBlog.description && (
                  <p className="text-muted-foreground text-sm mb-4 line-clamp-3">
                    {liveBlog.description}
                  </p>
                )}
              </div>
            </div>
            
            <div className="flex items-center justify-between text-sm text-muted-foreground">
              <div className="flex items-center gap-4">
                <span>{liveBlog.viewCount || 0} прегледи</span>
                <span>{liveBlog.updates?.length || 0} ажурирања</span>
              </div>
              <span>
                {new Date(liveBlog.createdAt).toLocaleDateString('mk-MK', {
                  day: 'numeric',
                  month: 'long',
                  year: 'numeric',
                })}
              </span>
            </div>
            
            {liveBlog.author && (
              <div className="flex items-center gap-2 mt-4 pt-4 border-t">
                {liveBlog.author.avatar && (
                  <img
                    src={liveBlog.author.avatar}
                    alt={liveBlog.author.name}
                    className="w-6 h-6 rounded-full"
                  />
                )}
                <span className="text-sm text-muted-foreground">
                  By {liveBlog.author.name}
                </span>
              </div>
            )}
          </Link>
        ))}
      </div>

      {data?.data.length === 0 && (
        <div className="text-center py-12">
          <p className="text-muted-foreground text-lg">
            No live blogs are currently active. Check back soon!
          </p>
        </div>
      )}
    </div>
  )
}