import { Head, Link } from '@inertiajs/react';
import UserLayout from '@/components/Layouts/UserLayout';
import Card from '@/components/Card/Card';
import { Show } from '@/types';

interface ReplayPageProps {
    replay_shows: Show[];
    has_active_membership?: boolean;
    membership_expires_at?: string | null;
    streaming_maintenance?: boolean;
}

export default function Replay({ 
    replay_shows, 
    has_active_membership = false,
    membership_expires_at = null,
    streaming_maintenance = false,
}: ReplayPageProps) {

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

    const truncateTitle = (title: string, maxWords: number = 15): string => {
        const words = title.split(' ');
        if (words.length > maxWords) {
            return words.slice(0, maxWords).join(' ') + '...';
        }
        return title;
    };

    return (
        <UserLayout title="Replay Show">
            <Head title="Replay Show" />
            <div className="space-y-6">
                {/* Header */}
                <div>
                    <div className="flex items-center gap-3">
                        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Replay Show</h1>
                        {has_active_membership && (
                            <span className="inline-flex items-center gap-1.5 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 px-3 py-1 text-xs font-semibold text-white shadow-lg">
                                <CrownIcon className="h-3.5 w-3.5" />
                                Membership Istimewa
                            </span>
                        )}
                    </div>
                    <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
                        Tonton kembali show yang telah Anda beli
                    </p>
                </div>

                {/* Shows List */}
                {replay_shows.length === 0 ? (
                    <Card padding="md">
                        <div className="text-center py-12">
                            <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800">
                                <PlayIcon className="h-8 w-8 text-gray-400 dark:text-gray-500" />
                            </div>
                            <h3 className="mt-4 text-lg font-semibold text-gray-900 dark:text-white">
                                Belum ada replay show
                            </h3>
                            <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
                                Belum ada show replay yang tersedia untuk ditonton.
                            </p>
                        </div>
                    </Card>
                ) : (
                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                        {replay_shows.map((show) => (
                            <Card key={show.id} padding="none" className="overflow-hidden relative">
                                {/* Membership Badge */}
                                {has_active_membership && (
                                    <div className="absolute top-3 left-3 z-10">
                                        <span className="inline-flex items-center gap-1 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 px-2.5 py-1 text-xs font-semibold text-white shadow-lg">
                                            <CrownIcon className="h-3 w-3" />
                                            Akses Membership
                                        </span>
                                    </div>
                                )}
                                
                                {/* Replay Badge */}
                                <div className="absolute top-3 right-3 z-10">
                                    <span className="inline-flex items-center gap-1 rounded-full bg-blue-100 px-2.5 py-1 text-xs font-semibold text-blue-800 dark:bg-blue-900/20 dark:text-blue-200">
                                        <PlayIcon className="h-3 w-3" />
                                        Replay
                                    </span>
                                </div>

                                {show.banner_link && (
                                    <div className="aspect-video w-full overflow-hidden bg-gray-200 dark:bg-gray-700">
                                        <img
                                            src={show.banner_link}
                                            alt={show.title}
                                            className="h-full w-full object-cover"
                                        />
                                    </div>
                                )}
                                
                                <div className="p-4 flex flex-col flex-1">
                                    <div className="flex-1">
                                        <h3 
                                            className="text-lg font-semibold text-gray-900 dark:text-white"
                                            title={show.title}
                                        >
                                            {truncateTitle(show.title)}
                                        </h3>
                                        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
                                            {formatDate(show.start_time)}
                                        </p>
                                    </div>

                                    {show.description && (
                                        <div className="mt-2 min-h-[2.5rem]">
                                            <p className="line-clamp-2 text-sm text-gray-600 dark:text-gray-300">
                                                {show.description}
                                            </p>
                                        </div>
                                    )}

                                    <div className="mt-4 flex flex-col gap-2">
                                        <Link
                                            href={`/dashboard/replay/${show.id}`}
                                            className="w-full rounded-md bg-blue-600 px-3 py-2 text-sm font-medium text-white hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 flex items-center justify-center gap-2 transition-colors"
                                        >
                                            <PlayIcon className="h-4 w-4" />
                                            Tonton Replay
                                        </Link>
                                    </div>
                                </div>

                            </Card>
                        ))}
                    </div>
                )}
            </div>
        </UserLayout>
    );
}

// Icons
function CrownIcon({ className }: { className?: string }) {
    return (
        <svg className={className} fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
        </svg>
    );
}

function PlayIcon({ className }: { className?: string }) {
    return (
        <svg className={className} fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.986V5.653z" />
        </svg>
    );
}

function PauseIcon({ className }: { className?: string }) {
    return (
        <svg className={className} fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5" />
        </svg>
    );
}

