'use client';

import * as React from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { cn } from '@/lib/utils';

interface ArticleCardProps {
  article: {
    slug: string;
    title: string;
    excerpt: string | null;
    cardImage: string | null;
    publicationDate: Date | null;
    category: string | null;
    readingTime: number | null;
  };
  featured?: boolean;
  priority?: boolean;
}

/**
 * Format date to Japanese format (YYYY年MM月DD日)
 */
function formatDate(date: Date | null): string {
  if (!date) return '';
  
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  
  return `${year}年${month}月${day}日`;
}

export function ArticleCard({ article, featured = false, priority = false }: ArticleCardProps) {
  const [imageError, setImageError] = React.useState(false);

  return (
    <Link 
      href={`/post/${encodeURIComponent(article.slug)}`}
      className={cn(
        'block group',
        featured && 'lg:col-span-2'
      )}
    >
      <Card 
        className={cn(
          'overflow-hidden transition-all duration-300 border-transparent bg-[#202026] rounded-xl',
          'hover:shadow-[0_0_20px_rgba(230,0,35,0.3)] hover:border-[#E60023]'
        )}
      >
        {/* Image with aspect ratio (16:9) */}
        <div className="relative aspect-video overflow-hidden bg-gradient-to-br from-gray-800 to-gray-900">
          {article.cardImage && !imageError ? (
            <Image
              src={article.cardImage}
              alt={article.title}
              fill
              priority={priority}
              loading={priority ? undefined : 'lazy'}
              className="object-cover transition-transform duration-300 group-hover:scale-105"
              sizes={featured ? '(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 66vw' : '(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw'}
              unoptimized
              onError={() => setImageError(true)}
            />
          ) : (
            <div className="w-full h-full flex items-center justify-center">
              <div className="text-center p-6">
                <div className="text-4xl mb-2">📰</div>
                <p className="text-gray-400 text-sm">No Image Available</p>
              </div>
            </div>
          )}
        </div>
        
        <CardContent className="p-4">
          {/* Category badge (crimson red #E60023) */}
          {article.category && (
            <Badge className="mb-2 bg-[#E60023] hover:bg-[#FF2A3D] text-white border-transparent">
              {article.category}
            </Badge>
          )}
          
          {/* Title with line-clamp-2 - changes to #E60023 on hover */}
          <h3 
            className={cn(
              'font-bold mb-2 line-clamp-2 text-white transition-colors group-hover:text-[#E60023]',
              featured ? 'text-2xl' : 'text-lg'
            )}
          >
            {article.title}
          </h3>
          
          {/* Excerpt with line-clamp-2 */}
          {article.excerpt && (
            <p className="text-sm text-[#B8B8C0] line-clamp-2 mb-3 leading-[1.8]">
              {article.excerpt}
            </p>
          )}
          
          {/* Date and reading time */}
          <div className="flex items-center gap-4 text-xs text-[#B8B8C0]">
            {article.publicationDate && (
              <span>{formatDate(article.publicationDate)}</span>
            )}
            {article.readingTime && (
              <span>読了時間: {article.readingTime}分</span>
            )}
          </div>
        </CardContent>
      </Card>
    </Link>
  );
}
