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

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

    return (
        <div className={`bg-gradient-to-br from-gray-50 to-gray-100/50 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>{formatFullDate(schedule.date)}</span>
                </div>

                {/* 시간 */}
                {schedule.time && (
                    <>
                        <div className="w-px h-4 bg-gray-300" />
                        <div className="flex items-center gap-1.5 text-gray-500">
                            <Clock size={14} />
                            <span>{formatTime(schedule.time)}</span>
                        </div>
                    </>
                )}

                {/* 채널명 */}
                {schedule.source?.name && (
                    <>
                        <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.source.name}</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-200">
                <a
                    href={schedule.source?.url}
                    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>
    );
}

// 유튜브 비디오 ID 추출
const extractYoutubeVideoId = (url) => {
    if (!url) return null;
    const shortMatch = url.match(/youtu\.be\/([a-zA-Z0-9_-]{11})/);
    if (shortMatch) return shortMatch[1];
    const watchMatch = url.match(/youtube\.com\/watch\?v=([a-zA-Z0-9_-]{11})/);
    if (watchMatch) return watchMatch[1];
    const shortsMatch = url.match(/youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})/);
    if (shortsMatch) return shortsMatch[1];
    return null;
};

// 유튜브 섹션 컴포넌트
function YoutubeSection({ schedule }) {
    const videoId = extractYoutubeVideoId(schedule.source?.url);
    const isShorts = schedule.source?.url?.includes('/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-2xl shadow-black/20">
                        <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-2xl shadow-black/20">
                    <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;
