import Link from 'next/link';
import { formatDate } from '@/lib/markdown';
import { Clock } from 'lucide-react';

function imageUrl(article) {
  if (!article.cover_url) return null;
  return article.cover_url;
}

function gradientFor(article) {
  const seed = (article.id || 0) * 31 + (article.title?.length || 0);
  const variants = [
    'linear-gradient(135deg, #10b981 0%, #0ea5e9 100%)',
    'linear-gradient(135deg, #34d399 0%, #14b8a6 100%)',
    'linear-gradient(135deg, #059669 0%, #6366f1 100%)',
    'linear-gradient(135deg, #10b981 0%, #fbbf24 100%)',
    'linear-gradient(135deg, #14b8a6 0%, #a78bfa 100%)',
    'linear-gradient(135deg, #047857 0%, #0891b2 100%)',
  ];
  return variants[seed % variants.length];
}

function CoverPlaceholder({ article, featured = false, className = '' }) {
  const gradient = gradientFor(article);
  return (
    <div
      className={`relative overflow-hidden ${featured ? 'aspect-[16/9] sm:aspect-[16/10]' : 'aspect-[16/9]'} rounded-xl ${className}`}
      style={{ background: gradient }}
    >
      <div className="absolute -top-10 -right-10 w-40 h-40 rounded-full opacity-30" style={{ background: 'rgba(255,255,255,0.3)' }} />
      <div className="absolute -bottom-12 -left-8 w-32 h-32 rounded-full opacity-20" style={{ background: 'rgba(0,0,0,0.2)' }} />
      <div className="absolute inset-0 flex items-end p-4">
        <div className="text-white/90 text-xs font-mono tracking-wider uppercase">
          #{(article.tags?.[0] || 'zeropost')}
        </div>
      </div>
    </div>
  );
}

export default function ArticleCard({ article, featured = false }) {
  const img = imageUrl(article);

  if (featured) {
    return (
      <Link href={`/blog/${article.slug}`} className="article-card block group overflow-hidden p-0">
        <div className="flex flex-col sm:grid sm:grid-cols-5 sm:gap-0">
          {/* Image: full-width на мобиле, 2/5 на десктопе */}
          <div className="p-3 sm:p-5 sm:col-span-2">
            {img ? (
              <img
                src={img}
                alt={article.title}
                className="w-full aspect-[16/9] sm:aspect-square object-cover rounded-xl"
                loading="eager"
              />
            ) : (
              <CoverPlaceholder article={article} className="sm:aspect-square" />
            )}
          </div>
          <div className="p-5 sm:p-8 sm:col-span-3 flex flex-col justify-center">
            <div className="flex flex-wrap items-center gap-2 mb-3">
              {(article.tags || []).slice(0, 3).map(t => (
                <span key={t} className="tag">#{t}</span>
              ))}
            </div>
            <h2 className="text-xl sm:text-3xl font-bold mb-3 leading-tight ink group-hover:accent transition-colors">
              {article.title}
            </h2>
            {article.excerpt && (
              <p className="mute text-sm sm:text-base leading-relaxed line-clamp-3 mb-4">
                {article.excerpt}
              </p>
            )}
            <div className="flex items-center gap-3 text-xs mute">
              <span>{formatDate(article.published_at)}</span>
              {article.reading_time && (
                <span className="inline-flex items-center gap-1">
                  <Clock className="w-3 h-3" /> {article.reading_time} мин
                </span>
              )}
            </div>
          </div>
        </div>
      </Link>
    );
  }

  return (
    <Link href={`/blog/${article.slug}`} className="article-card block group overflow-hidden p-0">
      <div className="p-3">
        {img ? (
          <img src={img} alt={article.title} className="w-full aspect-[16/9] object-cover rounded-lg" loading="lazy" />
        ) : (
          <CoverPlaceholder article={article} />
        )}
      </div>
      <div className="p-4 sm:p-5 pt-2">
        <div className="flex flex-wrap items-center gap-2 mb-2">
          {(article.tags || []).slice(0, 2).map(t => (
            <span key={t} className="tag">#{t}</span>
          ))}
        </div>
        <h3 className="text-base sm:text-lg font-semibold mb-2 ink group-hover:accent transition-colors leading-snug line-clamp-2">
          {article.title}
        </h3>
        {article.excerpt && (
          <p className="mute text-sm line-clamp-2 mb-4">{article.excerpt}</p>
        )}
        <div className="flex items-center gap-3 text-xs mute">
          <span>{formatDate(article.published_at)}</span>
          {article.reading_time && (
            <span className="inline-flex items-center gap-1">
              <Clock className="w-3 h-3" /> {article.reading_time} мин
            </span>
          )}
        </div>
      </div>
    </Link>
  );
}