import { Clock, ThumbsUp, MapPin, ThumbsDown } from 'lucide-react';
import { Link, useLocation } from 'react-router-dom';
import { Article, CategoryTitles, CityTitles } from '../types';
import MinutesWord from './Words/MinutesWord';
import { useScrollStore } from '../stores/scrollStore';

interface ArticleCardProps {
  article: Article;
  featured?: boolean;
}

export function ArticleCard({ article, featured = false }: ArticleCardProps) {
  const location = useLocation();
  const setHomeScrollPosition = useScrollStore(state => state.setHomeScrollPosition);

  const writerAuthors = article.authors
      .filter(a => a.role === 'WRITER')
      .sort((a, b) => (a.author.order ?? 0) - (b.author.order ?? 0));

  const handleArticleClick = () => {
    // Сохранить текущее положение скролинга при переходе к статье
    if (location.pathname === '/') {
      setHomeScrollPosition(window.scrollY);
    }
  };

  return (
    <article className={`overflow-hidden rounded-lg shadow-lg transition-transform hover:scale-[1.02] ${
      featured ? 'sm:col-span-2 sm:row-span-2' : ''
    } flex flex-col`}>
      <div className="relative pt-7">
        <img
          src={article.coverImage}
          alt={article.title}
          className={`w-full object-cover ${featured ? 'h-64 sm:h-96' : 'h-64'}`}
        />
        <div className="absolute bottom-0 left-0 w-full flex justify-between items-center z-10 px-4 py-2 bg-gradient-to-t from-black/70 to-transparent">
          <span className="text-white text-sm md:text-base font-medium">
            {CategoryTitles[article.categoryId]}
          </span>
          <span className="text-white text-sm md:text-base font-medium flex items-center">
            <MapPin size={14} className="mr-1 text-white" />
            {CityTitles[article.cityId]}
          </span>
        </div>
      </div>
      <div className="p-6 flex flex-col flex-grow">
        <div className="flex items-center gap-4 mb-4">
          {writerAuthors.map((authorLink) => (
              <img
                  key={authorLink.author.id}
                  src={authorLink.author.avatarUrl}
                  alt={authorLink.author.displayName}
                  className="w-10 h-10 rounded-full"
              />
          ))}
          <div>
            <p className="text-sm font-medium text-gray-900">
              {writerAuthors.map((a, i) => (
                  <span key={a.author.id}>
                    {a.author.displayName}
                    {i < writerAuthors.length - 1 ? ', ' : ''}
                  </span>
              ))}
            </p>
            <div className="flex items-center text-sm text-gray-500">
              {new Date(article.publishedAt).toLocaleDateString('ru-RU', {
                month: 'long',
                day: 'numeric',
                year: 'numeric',
              })} ·{' '}
              <Clock size={14} className="mr-1" />
              {article.readTime} <MinutesWord minutes={article.readTime} /> чтения
            </div>
          </div>
        </div>

        <h2 className={`font-bold text-gray-900 mb-2 ${featured ? 'text-xl sm:text-2xl' : 'text-xl'}`}>
          {article.title}
        </h2>
        <p className="text-gray-600 line-clamp-2">{article.excerpt}</p>
        
        <div className="p-4 mt-auto flex items-center justify-between">
          <Link 
            to={`/article/${article.id}`}
            state={{ from: location.pathname + location.search }}
            onClick={handleArticleClick}
            className="text-blue-600 font-medium hover:text-blue-800"
          >
            Читать →
          </Link>
          <div className="flex items-center text-gray-500">
            <ThumbsUp size={16} className="mr-1" />
            <span>{article.likes}</span>
            <span className="ml-2">
               <ThumbsDown size={16} className="mr-1" />
            </span>
            <span>{article.dislikes}</span>
          </div>
        </div>
      </div>
    </article>
  );
}