import { Head, Link } from '@inertiajs/react';
import { useEffect, useRef } from 'react';
import ScrollReveal from 'scrollreveal';
import LandingPageLayout from '@/components/Layouts/LandingPageLayout';
import { Show } from '@/types';

interface SchedulePageProps {
    shows: Show[];
}

export default function Index({ shows = [] }: SchedulePageProps) {
    const scheduleRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        // Initialize ScrollReveal
        const sr = ScrollReveal({
            origin: 'bottom',
            distance: '60px',
            duration: 1000,
            delay: 100,
            reset: false,
            mobile: true,
        });

        if (scheduleRef.current) {
            sr.reveal(scheduleRef.current, { delay: 200 });
        }

        return () => {
            sr.destroy();
        };
    }, []);

    const formatDate = (timestamp: number): string => {
        const date = new Date(timestamp * 1000);
        return date.toLocaleDateString('id-ID', {
            weekday: 'long',
            year: 'numeric',
            month: 'long',
            day: 'numeric',
        });
    };

    const formatTime = (timestamp: number): string => {
        const date = new Date(timestamp * 1000);
        return date.toLocaleTimeString('id-ID', {
            hour: '2-digit',
            minute: '2-digit',
        });
    };

    const formatPrice = (price: number): string => {
        return new Intl.NumberFormat('id-ID', {
            style: 'currency',
            currency: 'IDR',
            minimumFractionDigits: 0,
        }).format(price);
    };

    const getStatusBadge = (show: Show) => {
        if (show.is_live) {
            return (
                <span className="inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800 dark:bg-red-900/30 dark:text-red-300">
                    Live
                </span>
            );
        }
        if (show.is_replay) {
            return (
                <span className="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
                    Replay
                </span>
            );
        }
        return (
            <span className="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900/30 dark:text-green-300">
                Upcoming
            </span>
        );
    };

    return (
        <LandingPageLayout>
            <Head title="Jadwal Show - Ngidolihub">
                <link rel="preconnect" href="https://fonts.bunny.net" />
                <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600,700" rel="stylesheet" />
            </Head>

            {/* Hero Section */}
            <section className="relative bg-gray-50 pt-12 pb-6 dark:bg-gray-900 sm:pt-16 sm:pb-8 md:pt-20 md:pb-10">
                <div className="mx-auto max-w-7xl px-3 sm:px-4 md:px-6 lg:px-8">
                    <div className="mx-auto max-w-2xl text-center">
                        <h1 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-3xl md:text-4xl">
                            Jadwal <span className="text-[#d4af37] dark:text-[#b8941f]">Show</span>
                        </h1>
                        <p className="mt-2 text-sm text-gray-600 dark:text-gray-300 sm:text-base">
                            Lihat jadwal theater show dan event JKT48 yang akan datang
                        </p>
                    </div>
                </div>
            </section>

            {/* Schedule Section */}
            <section ref={scheduleRef} className="bg-white py-8 dark:bg-gray-800 sm:py-12 md:py-16">
                <div className="mx-auto max-w-7xl px-3 sm:px-4 md:px-6 lg:px-8">
                    {shows.length === 0 ? (
                        <div className="text-center py-16 sm:py-20">
                            <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800">
                                <svg
                                    className="h-8 w-8 text-gray-400 dark:text-gray-500"
                                    fill="none"
                                    viewBox="0 0 24 24"
                                    strokeWidth="1.5"
                                    stroke="currentColor"
                                >
                                    <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
                                    />
                                </svg>
                            </div>
                            <h3 className="mt-6 text-lg font-semibold text-gray-900 dark:text-white">
                                Tidak ada show tersedia
                            </h3>
                            <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
                                Belum ada jadwal show yang tersedia saat ini.
                            </p>
                        </div>
                    ) : (
                        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3 lg:gap-8">
                            {shows.map((show) => (
                                <Link
                                    key={show.id}
                                    href={`/jadwal/${show.id}`}
                                    className="group relative flex flex-col overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm transition-all duration-300 hover:border-[#d4af37]/50 hover:shadow-xl dark:border-gray-700 dark:bg-gray-800 dark:hover:border-[#b8941f]/50"
                                >
                                    {/* Banner */}
                                    {show.banner_link ? (
                                        <div className="relative h-48 overflow-hidden bg-gray-100 dark:bg-gray-700 sm:h-56">
                                            <img
                                                src={show.banner_link}
                                                alt={show.title}
                                                className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-110"
                                            />
                                            <div className="absolute top-3 right-3">{getStatusBadge(show)}</div>
                                        </div>
                                    ) : (
                                        <div className="relative h-48 bg-gradient-to-br from-[#d4af37] to-[#b8941f] dark:from-[#b8941f] dark:to-[#9a7d15] sm:h-56">
                                            <div className="absolute top-3 right-3">{getStatusBadge(show)}</div>
                                            <div className="flex h-full items-center justify-center">
                                                <span className="text-4xl font-bold text-white opacity-80">N</span>
                                            </div>
                                        </div>
                                    )}

                                    {/* Content */}
                                    <div className="flex flex-1 flex-col p-5 sm:p-6">
                                        {/* Header */}
                                        <div className="mb-3">
                                            <div className="mb-2">
                                                <span className="inline-block rounded-md bg-gray-100 px-2 py-1 text-xs font-medium text-gray-700 dark:bg-gray-700 dark:text-gray-300">
                                                    {show.type}
                                                </span>
                                            </div>
                                            <h3 className="line-clamp-2 text-lg font-bold text-gray-900 dark:text-white sm:text-xl">
                                                {show.title}
                                            </h3>
                                        </div>

                                        {/* Description */}
                                        {show.description && (
                                            <p className="mb-4 line-clamp-2 flex-1 text-sm leading-relaxed text-gray-600 dark:text-gray-300">
                                                {show.description}
                                            </p>
                                        )}

                                        {/* Date & Time */}
                                        <div className="mb-4 space-y-2 border-t border-gray-100 pt-4 dark:border-gray-700">
                                            <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
                                                <svg
                                                    className="h-4 w-4 shrink-0 text-[#d4af37] dark:text-[#b8941f]"
                                                    fill="none"
                                                    viewBox="0 0 24 24"
                                                    strokeWidth="2"
                                                    stroke="currentColor"
                                                >
                                                    <path
                                                        strokeLinecap="round"
                                                        strokeLinejoin="round"
                                                        d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-16.5 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5"
                                                    />
                                                </svg>
                                                <span className="truncate">{formatDate(show.start_time)}</span>
                                            </div>
                                            <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
                                                <svg
                                                    className="h-4 w-4 shrink-0 text-[#d4af37] dark:text-[#b8941f]"
                                                    fill="none"
                                                    viewBox="0 0 24 24"
                                                    strokeWidth="2"
                                                    stroke="currentColor"
                                                >
                                                    <path
                                                        strokeLinecap="round"
                                                        strokeLinejoin="round"
                                                        d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
                                                    />
                                                </svg>
                                                <span>{formatTime(show.start_time)} WIB</span>
                                            </div>
                                        </div>

                                        {/* Price & Lineup */}
                                        <div className="space-y-3 border-t border-gray-100 pt-4 dark:border-gray-700">
                                            {/* Price */}
                                            <div className="flex items-center justify-between">
                                                <span className="text-xs font-medium text-gray-500 dark:text-gray-400">Harga</span>
                                                <div className="text-right">
                                                    {show.is_promo && show.promo_price ? (
                                                        <>
                                                            <span className="text-sm font-bold text-[#d4af37] dark:text-[#b8941f]">
                                                                {formatPrice(show.promo_price)}
                                                            </span>
                                                            <span className="ml-2 text-xs text-gray-400 line-through dark:text-gray-500">
                                                                {formatPrice(show.price)}
                                                            </span>
                                                        </>
                                                    ) : (
                                                        <span className="text-sm font-bold text-gray-900 dark:text-white">
                                                            {formatPrice(show.price)}
                                                        </span>
                                                    )}
                                                </div>
                                            </div>

                                            {/* Lineup Preview */}
                                            {show.lineup && Array.isArray(show.lineup) && show.lineup.length > 0 && (
                                                <div>
                                                    <p className="mb-2 text-xs font-medium text-gray-500 dark:text-gray-400">
                                                        Lineup ({show.lineup.length})
                                                    </p>
                                                    <div className="flex flex-wrap gap-1.5">
                                                        {show.lineup.slice(0, 3).map((member, index) => {
                                                            const memberName =
                                                                typeof member === 'string'
                                                                    ? member
                                                                    : member?.name || member?.id || 'Unknown';
                                                            return (
                                                                <span
                                                                    key={index}
                                                                    className="rounded-md bg-gray-100 px-2 py-0.5 text-xs text-gray-700 dark:bg-gray-700 dark:text-gray-300"
                                                                >
                                                                    {memberName}
                                                                </span>
                                                            );
                                                        })}
                                                        {show.lineup.length > 3 && (
                                                            <span className="rounded-md bg-[#d4af37]/10 px-2 py-0.5 text-xs font-medium text-[#d4af37] dark:bg-[#b8941f]/20 dark:text-[#b8941f]">
                                                                +{show.lineup.length - 3}
                                                            </span>
                                                        )}
                                                    </div>
                                                </div>
                                            )}
                                        </div>

                                        {/* CTA */}
                                        <div className="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
                                            <span className="inline-flex w-full items-center justify-center gap-2 rounded-lg bg-[#d4af37] px-4 py-2.5 text-sm font-semibold text-white transition-colors group-hover:bg-[#b8941f] dark:bg-[#b8941f] dark:group-hover:bg-[#9a7d15]">
                                                Lihat Detail
                                                <svg
                                                    className="h-4 w-4 transition-transform group-hover:translate-x-1"
                                                    fill="none"
                                                    viewBox="0 0 24 24"
                                                    strokeWidth="2"
                                                    stroke="currentColor"
                                                >
                                                    <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
                                                </svg>
                                            </span>
                                        </div>
                                    </div>
                                </Link>
                            ))}
                        </div>
                    )}
                </div>
            </section>
        </LandingPageLayout>
    );
}

