import { useQuery } from '@tanstack/react-query'
import { Link } from '@tanstack/react-router'
import * as api from '@/lib/api'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

export function ArticleDetailComponent({ id }: { id: string }) {
  const { data, isLoading, error } = useQuery({
    queryKey: ['article', id],
    queryFn: () => api.fetchArticleById(id),
  })

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

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

  if (!data) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-lg">Article not found</div>
      </div>
    )
  }

  return (
    <article className="max-w-3xl mx-auto">
      <Link
        to="/articles"
        className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground mb-8"
      >
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="m15 18-6-6 6-6" />
          <path d="M19 6H5" />
        </svg>
        Back to articles
      </Link>

      <h1 className="text-4xl font-bold mb-6">{data.title}</h1>

      <div className="flex items-center gap-4 text-sm text-muted-foreground mb-8">
        <span>
          {new Date(data.createdAt).toLocaleDateString('mk-MK', {
            day: 'numeric',
            month: 'long',
            year: 'numeric',
          })}
        </span>
        <span>•</span>
        <span>{data.views} views</span>
        {data.author && (
          <>
            <span>•</span>
            <span>By {data.author.name}</span>
          </>
        )}
      </div>

      {data.featuredImage && data.imagePosition !== 'none' && (
        <div className={`relative ${
          data.imagePosition === 'top' 
            ? 'w-full h-64 md:h-96 mb-8' 
            : data.imagePosition === 'left' 
              ? 'float-none md:float-left mr-0 md:mr-6 mb-4 w-full md:w-auto' 
              : data.imagePosition === 'right'
                ? 'float-none md:float-right ml-0 md:ml-6 mb-4 w-full md:w-auto'
                : ''
        } ${
          data.imagePosition === 'top'
            ? data.imageSize === 'small' 
              ? 'h-32' 
              : data.imageSize === 'medium' 
                ? 'h-48' 
                : 'h-64'
            : data.imageSize === 'small' 
              ? 'w-full md:w-48 h-32' 
              : data.imageSize === 'medium' 
                ? 'w-full md:w-64 h-48' 
                : 'w-full md:w-96 h-64'
        }`}>
          <img
            src={data.featuredImage}
            alt={data.title}
            className="w-full h-full object-cover rounded-xl"
            onError={(e) => {
              console.error('Failed to load image:', data.featuredImage, e);
              e.currentTarget.style.display = 'none';
              // Show fallback
              const fallback = e.currentTarget.nextElementSibling as HTMLElement;
              if (fallback) {
                fallback.style.display = 'flex';
              }
            }}
          />
          <div 
            className="absolute inset-0 bg-gray-100 rounded-xl flex items-center justify-center text-gray-400 hidden"
            style={{ display: 'none' }}
          >
            <span>Image not available</span>
          </div>
        </div>
      )}

      <div className="prose prose-slate max-w-none clear-both md:clear-none">
        <div className="text-lg leading-relaxed mb-6">
          <ReactMarkdown 
            remarkPlugins={[remarkGfm]}
            components={{
              img: (props) => (
                <img 
                  {...props} 
                  className="max-w-full h-auto rounded-lg my-4"
                  alt={props.alt || 'Article image'}
                />
              )
            }}
          >
            {data.content}
          </ReactMarkdown>
        </div>
      </div>

      {data.tags && Array.isArray(data.tags) && data.tags.length > 0 && (
        <div className="mt-8 pt-8 border-t">
          <h3 className="text-sm font-semibold mb-4 text-muted-foreground">Tags</h3>
          <div className="flex flex-wrap gap-2">
            {data.tags.map((tag) => (
              <span
                key={tag}
                className="px-3 py-1 text-sm rounded-full bg-secondary text-secondary-foreground"
              >
                {tag}
              </span>
            ))}
          </div>
        </div>
      )}
    </article>
  )
}