import { Calendar, Clock, Tv, ExternalLink, Play } from 'lucide-react';
import { decodeHtmlEntities, formatFullDate, formatTime } from './utils';

/**
 * 예능 일정 섹션 컴포넌트
 */
function VarietySection({ schedule }) {
  const members = schedule.members || [];
  const isFullGroup = members.length === 5;
  const hasThumbnail = !!schedule.thumbnailUrl;
  const hasReplayUrl = !!schedule.replayUrl;

  // 다시보기 링크가 유튜브인지 확인
  const isYoutubeReplay = hasReplayUrl && /youtu\.?be/i.test(schedule.replayUrl);

  return (
    <div className="bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-100">
      {/* 상단: 썸네일 + 오버레이 */}
      {hasThumbnail && (
        <div className="relative group">
          {hasReplayUrl ? (
            <a href={schedule.replayUrl} target="_blank" rel="noopener noreferrer">
              <div className="aspect-video overflow-hidden">
                <img
                  src={schedule.thumbnailUrl}
                  alt={schedule.title}
                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                />
              </div>
              {/* 재생 오버레이 */}
              <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
                <div className="w-14 h-14 bg-white/90 group-hover:bg-white rounded-full flex items-center justify-center shadow-lg opacity-0 group-hover:opacity-100 transition-all scale-90 group-hover:scale-100">
                  <Play size={22} className="text-gray-800 ml-0.5" fill="currentColor" />
                </div>
              </div>
            </a>
          ) : (
            <div className="aspect-video overflow-hidden">
              <img
                src={schedule.thumbnailUrl}
                alt={schedule.title}
                className="w-full h-full object-cover"
              />
            </div>
          )}
        </div>
      )}

      {/* 콘텐츠 */}
      <div className="p-6">
        {/* 방송사 + 날짜 */}
        <div className="flex items-center gap-2 mb-3">
          {schedule.broadcaster && (
            <span className="inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-md" style={{ backgroundColor: `${schedule.category?.color || '#06b6d4'}15`, color: schedule.category?.color || '#06b6d4' }}>
              <Tv size={11} />
              {schedule.broadcaster}
            </span>
          )}
          <span className="text-xs text-gray-400">
            {formatFullDate(schedule.date)}
            {schedule.time && ` · ${formatTime(schedule.time)}`}
          </span>
        </div>

        {/* 제목 */}
        <h1 className="text-xl font-bold text-gray-900 leading-snug mb-4">
          {decodeHtmlEntities(schedule.title)}
        </h1>

        {/* 멤버 */}
        {members.length > 0 && (
          <div className="flex flex-wrap gap-1.5 mb-5">
            {isFullGroup ? (
              <span className="px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">
                프로미스나인
              </span>
            ) : (
              members.map((member) => (
                <span key={member.id} className="px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full">
                  {member.name}
                </span>
              ))
            )}
          </div>
        )}

        {/* 다시보기 버튼 */}
        {hasReplayUrl && (
          <div className="pt-4 border-t border-gray-100">
            <a
              href={schedule.replayUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 px-4 py-2 bg-gray-900 hover:bg-black text-white text-sm font-medium rounded-full transition-colors"
            >
              {isYoutubeReplay ? <Play size={14} fill="currentColor" /> : <ExternalLink size={14} />}
              다시보기
            </a>
          </div>
        )}
      </div>
    </div>
  );
}

export default VarietySection;