import { motion } from 'framer-motion';
import { Calendar, Link2 } from 'lucide-react';
import { decodeHtmlEntities, formatXDateTimeWithTime } from './utils';

/**
 * 영상 정보 컴포넌트 (공통)
 */
function VideoInfo({ schedule, isShorts }) {
  const members = schedule.members || [];
  const isFullGroup = members.length === 5;

  return (
    <div className={`bg-gradient-to-br from-gray-100 to-gray-200/80 rounded-2xl p-6 ${isShorts ? 'flex-1' : ''}`}>
      {/* 제목 */}
      <h1 className={`font-bold text-gray-900 mb-4 leading-relaxed ${isShorts ? 'text-lg' : 'text-xl'}`}>
        {decodeHtmlEntities(schedule.title)}
      </h1>

      {/* 메타 정보 */}
      <div className={`flex flex-wrap items-center gap-4 text-sm ${isShorts ? 'gap-3' : ''}`}>
        {/* 날짜/시간 */}
        <div className="flex items-center gap-1.5 text-gray-500">
          <Calendar size={14} />
          <span>{formatXDateTimeWithTime(schedule.date, schedule.time)}</span>
        </div>

        {/* 채널명 */}
        {schedule.channelName && (
          <>
            <div className="w-px h-4 bg-gray-300" />
            <div className="flex items-center gap-2 text-gray-500">
              <Link2 size={14} className="opacity-60" />
              <span className="font-medium">{schedule.channelName}</span>
            </div>
          </>
        )}
      </div>

      {/* 멤버 목록 */}
      {members.length > 0 && (
        <div className="flex flex-wrap gap-2 mt-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>
      )}

      {/* 유튜브에서 보기 버튼 */}
      <div className="mt-6 pt-5 border-t border-gray-300/60">
        <a
          href={schedule.videoUrl}
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center gap-2 px-5 py-2.5 bg-red-500 hover:bg-red-600 text-white rounded-xl font-medium transition-colors shadow-lg shadow-red-500/20"
        >
          <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
            <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
          </svg>
          YouTube에서 보기
        </a>
      </div>
    </div>
  );
}

/**
 * PC 유튜브 섹션 컴포넌트
 */
function YoutubeSection({ schedule }) {
  const videoId = schedule.videoId;
  const isShorts = schedule.videoType === 'shorts';

  if (!videoId) return null;

  // 숏츠: 가로 레이아웃 (영상 + 정보)
  if (isShorts) {
    return (
      <div className="flex gap-6 items-start">
        {/* 영상 임베드 */}
        <motion.div
          initial={{ opacity: 0, scale: 0.98 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ delay: 0.1 }}
          className="w-[420px] flex-shrink-0"
        >
          <div className="relative aspect-[9/16] bg-gray-900 rounded-2xl overflow-hidden shadow-lg shadow-black/10">
            <iframe
              src={`https://www.youtube.com/embed/${videoId}?rel=0`}
              title={schedule.title}
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
              className="absolute inset-0 w-full h-full"
            />
          </div>
        </motion.div>

        {/* 영상 정보 카드 */}
        <motion.div
          initial={{ opacity: 0, x: 10 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ delay: 0.2 }}
          className="flex-1"
        >
          <VideoInfo schedule={schedule} isShorts={true} />
        </motion.div>
      </div>
    );
  }

  // 일반 영상: 세로 레이아웃 (영상 위, 정보 아래)
  return (
    <div className="space-y-6">
      {/* 영상 임베드 */}
      <motion.div
        initial={{ opacity: 0, scale: 0.98 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ delay: 0.1 }}
        className="w-full"
      >
        <div className="relative aspect-video bg-gray-900 rounded-2xl overflow-hidden shadow-lg shadow-black/10">
          <iframe
            src={`https://www.youtube.com/embed/${videoId}?rel=0`}
            title={schedule.title}
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
            className="absolute inset-0 w-full h-full"
          />
        </div>
      </motion.div>

      {/* 영상 정보 카드 */}
      <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.2 }}>
        <VideoInfo schedule={schedule} isShorts={false} />
      </motion.div>
    </div>
  );
}

export default YoutubeSection;