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);
  const categoryColor = schedule.category?.color || '#06b6d4';

  return (
    <div className="space-y-4">
      {/* 썸네일 카드 */}
      <div className="bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-100 flex items-center justify-center">
        {hasThumbnail ? (
          <img
            src={schedule.thumbnailUrl}
            alt={schedule.title}
            className="max-h-[400px] object-contain"
          />
        ) : (
          <div
            className="w-full h-48 flex items-center justify-center"
            style={{ backgroundColor: `${categoryColor}10` }}
          >
            <Tv size={48} style={{ color: categoryColor }} strokeWidth={1.5} />
          </div>
        )}
      </div>

      {/* 정보 카드 */}
      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
        {/* 방송사 + 날짜 */}
        <div className="flex items-center gap-2.5 mb-3">
          {schedule.broadcaster && (
            <span
              className="inline-flex items-center gap-1.5 px-2.5 py-1 text-sm font-semibold rounded-md"
              style={{ backgroundColor: `${categoryColor}15`, color: categoryColor }}
            >
              <Tv size={13} />
              {schedule.broadcaster}
            </span>
          )}
          <span className="text-sm 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-2 mb-4">
            {isFullGroup ? (
              <span className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">
                프로미스나인
              </span>
            ) : (
              members.map((member) => (
                <span key={member.id} className="px-3 py-1 bg-primary/10 text-primary text-sm 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-1.5 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;