import Link from 'next/link';
import { BadgeCheck } from 'lucide-react';
import { FeedCard as FeedCardType } from '@/types/feed/card';
import { formatDate } from '@/lib/utils/client';
import FeedActionBar from './FeedActionBar';
import TagChip from './TagChip';

type Props = {
	card: FeedCardType;
	onTagClick?: (slug: string) => void;
};

export default function FeedCard({ card }: Props) {
	const displayName = card.authorName || card.authorSID || '알 수 없음';
	const avatarInitial = (displayName.charAt(0) || '?').toUpperCase();

	return (
		<article className="feed__card" data-post-id={card.postID}>
			<header className="feed__card-header">
				{card.authorSID ? (
					<Link href={`/user/${card.authorSID}`} className="feed__card-avatar" aria-label={`${displayName} 프로필`}>
						{card.authorThumb ? (
							<img src={card.authorThumb} alt={displayName} />
						) : (
							<span className="feed__card-avatar-fallback">{avatarInitial}</span>
						)}
					</Link>
				) : (
					<span className="feed__card-avatar">
						<span className="feed__card-avatar-fallback">{avatarInitial}</span>
					</span>
				)}

				<div className="feed__card-meta">
					<div className="feed__card-author-row">
						{card.authorSID ? (
							<Link href={`/user/${card.authorSID}`} className="feed__card-author">{displayName}</Link>
						) : (
							<span className="feed__card-author">{displayName}</span>
						)}

						{card.isCreator && (
							<span className="feed__card-badge" title="크리에이터">
								<BadgeCheck size={14} fill="currentColor" stroke="#fff" strokeWidth={2.5} />
							</span>
						)}
						<span className="feed__card-time">· {formatDate(card.createdAt)}</span>
					</div>

					{card.authorSummary && (
						<p className="feed__card-summary" title="오늘의 한마디">{card.authorSummary ? '“' + card.authorSummary + '”' :  '-'}</p>
					)}
				</div>
			</header>

			{card.contentExcerpt && (
				<Link href={`/feed/post/${card.postID}`} className="feed__card-body">
					<p>{card.contentExcerpt}</p>
				</Link>
			)}

			{card.thumbnail && (
				<Link href={`/feed/post/${card.postID}`} className="feed__card-thumbnail">
					<img src={card.thumbnail} alt={card.subject} loading="lazy" />
					{card.images > 1 && (
						<span className="feed__card-image-count">+{card.images - 1}</span>
					)}
				</Link>
			)}

			{card.tags.length > 0 && (
				<div className="feed__card-tags">
					{card.tags.slice(0, 5).map((tag) => (
						<TagChip key={tag.slug} name={tag.name} slug={tag.slug} />
					))}
				</div>
			)}

			<FeedActionBar
				postID={card.postID}
				initialLikes={card.likes}
				initialComments={card.comments}
				initialBookmarks={card.bookmarks}
			/>
		</article>
	);
}