import { Head, Link, router } from '@inertiajs/react';
import {
    Award,
    BookOpen,
    ChevronLeft,
    ChevronRight,
    Clock,
    Search,
    SlidersHorizontal,
    Star,
    Users,
} from 'lucide-react';
import { useRef, useState } from 'react';
import GuestLayout from '@/layouts/guest-layout';

type Category = { id: number; name: string; slug: string };

type Course = {
    id: number;
    title: string;
    slug: string;
    description: string | null;
    thumbnail: string | null;
    level: string;
    price_type: 'free' | 'paid';
    price: number;
    duration_minutes: number;
    enrollments_count: number;
    lessons_count: number;
    instructor: { id: number; name: string };
    category: { id: number; name: string; slug: string } | null;
};

type PaginatedCourses = {
    data: Course[];
    current_page: number;
    last_page: number;
    total: number;
    links: { url: string | null; label: string; active: boolean }[];
};

type Props = {
    courses: PaginatedCourses;
    categories: Category[];
    enrolledCourseIds: number[];
    filters: {
        search?: string;
        category?: string;
        level?: string;
        price?: string;
    };
};

const levelLabels: Record<string, string> = {
    beginner: 'Pemula',
    intermediate: 'Menengah',
    advanced: 'Mahir',
};

const levelColors: Record<string, { bg: string; color: string }> = {
    beginner: { bg: 'rgba(6,214,160,0.12)', color: '#05A57D' },
    intermediate: { bg: 'rgba(255,183,3,0.12)', color: '#B8820A' },
    advanced: { bg: 'rgba(230,57,70,0.12)', color: '#C0303B' },
};

function formatDuration(minutes: number): string {
    if (minutes < 60) return `${minutes} mnt`;
    const h = Math.floor(minutes / 60);
    const m = minutes % 60;
    return m > 0 ? `${h}j ${m}mnt` : `${h} jam`;
}

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

export default function CoursesIndex({
    courses,
    categories,
    enrolledCourseIds,
    filters,
}: Props) {
    const [search, setSearch] = useState(filters.search ?? '');
    const contentRef = useRef<HTMLDivElement>(null);

    function applyFilter(params: Record<string, string>) {
        router.get(
            '/courses',
            { ...filters, ...params },
            { preserveScroll: true, preserveState: true, replace: true },
        );
    }

    function handleSearch(e: React.FormEvent) {
        e.preventDefault();
        applyFilter({ search });
    }

    const activeFiltersCount = [
        filters.category,
        filters.level,
        filters.price,
    ].filter(Boolean).length;

    return (
        <>
            <Head title="Jelajahi Kelas – Natagara LMS" />

            {/* ─── HERO ──────────────────────────────────────────────────── */}
            <section
                className="relative overflow-hidden"
                style={{
                    backgroundColor: '#0D0F12',
                    paddingTop: '72px',
                    paddingBottom: '72px',
                }}
            >
                {/* 4 parallelogram photo panels — same as landing page */}
                <div className="absolute inset-0 z-0">
                    {[
                        'https://picsum.photos/seed/courses-h1/700/600',
                        'https://picsum.photos/seed/courses-h2/700/600',
                        'https://picsum.photos/seed/courses-h3/700/600',
                        'https://picsum.photos/seed/courses-h4/700/600',
                    ].map((src, i) => (
                        <div
                            key={i}
                            className="absolute inset-y-0 overflow-hidden"
                            style={{
                                left: `${i * 25}%`,
                                width: '36%',
                                clipPath:
                                    'polygon(13% 0%, 100% 0%, 87% 100%, 0% 100%)',
                            }}
                        >
                            <img
                                src={src}
                                alt=""
                                aria-hidden="true"
                                className="h-full w-full object-cover"
                                loading={i === 0 ? 'eager' : 'lazy'}
                            />
                            <div
                                className="absolute inset-0"
                                style={{ backgroundColor: 'rgba(0,0,0,0.42)' }}
                            />
                        </div>
                    ))}
                    {/* Gradient overlay — heavy on center for text legibility */}
                    <div
                        className="absolute inset-0"
                        style={{
                            background:
                                'linear-gradient(to bottom, rgba(13,15,18,0.55) 0%, rgba(13,15,18,0.72) 100%), ' +
                                'radial-gradient(ellipse 80% 100% at 50% 50%, rgba(13,15,18,0.3) 0%, rgba(13,15,18,0.85) 100%)',
                        }}
                    />
                </div>

                <div className="relative z-10 mx-auto max-w-7xl px-5 md:px-8">
                    {/* Breadcrumb */}
                    <div
                        className="mb-6 flex items-center gap-2 text-sm"
                        style={{ color: 'rgba(255,255,255,0.48)' }}
                    >
                        <Link
                            href="/"
                            className="transition-colors hover:text-white"
                        >
                            Beranda
                        </Link>
                        <ChevronRight className="h-3.5 w-3.5" />
                        <span style={{ color: 'rgba(255,255,255,0.8)' }}>
                            Kelas
                        </span>
                    </div>

                    {/* Title */}
                    <div className="mx-auto max-w-2xl text-center">
                        <div
                            className="mb-4 inline-flex items-center gap-2 rounded-full px-4 py-1.5 text-sm font-medium"
                            style={{
                                backgroundColor: 'rgba(255,255,255,0.08)',
                                border: '1px solid rgba(255,255,255,0.15)',
                                color: 'rgba(255,255,255,0.82)',
                            }}
                        >
                            <Star className="h-3.5 w-3.5 fill-[#FFB703] text-[#FFB703]" />
                            {courses.total}+ kelas tersedia
                        </div>

                        <h1
                            className="mb-4 text-3xl leading-tight font-bold tracking-tight md:text-4xl lg:text-5xl"
                            style={{ color: '#FFFFFF' }}
                        >
                            Jelajahi Kelas yang
                            <br />
                            <span style={{ color: '#FFB703' }}>
                                Tepat Untukmu
                            </span>
                        </h1>

                        <p
                            className="mb-8 text-base leading-relaxed md:text-lg"
                            style={{ color: 'rgba(255,255,255,0.62)' }}
                        >
                            Ratusan kelas dari mentor berpengalaman — pilih
                            sesuai level, kategori, dan waktu belajarmu.
                        </p>

                        {/* Search bar */}
                        <form
                            onSubmit={handleSearch}
                            className="mx-auto max-w-lg"
                        >
                            <div
                                className="flex items-center gap-3 rounded-2xl p-2"
                                style={{
                                    backgroundColor: 'rgba(255,255,255,0.97)',
                                    boxShadow: '0 8px 40px rgba(0,0,0,0.28)',
                                }}
                            >
                                <Search
                                    className="ml-3 h-5 w-5 shrink-0"
                                    style={{ color: '#118AB2' }}
                                />
                                <input
                                    type="text"
                                    value={search}
                                    onChange={(e) => setSearch(e.target.value)}
                                    placeholder="Cari kelas, topik, atau mentor..."
                                    className="flex-1 bg-transparent text-sm outline-none"
                                    style={{ color: '#1A1A1A' }}
                                />
                                <button
                                    type="submit"
                                    className="shrink-0 rounded-xl px-5 py-2.5 text-sm font-semibold text-white transition-all hover:-translate-y-0.5 active:translate-y-0"
                                    style={{
                                        backgroundColor: '#118AB2',
                                        boxShadow:
                                            '0 4px 16px rgba(17,138,178,0.35)',
                                    }}
                                >
                                    Cari
                                </button>
                            </div>
                        </form>

                        {/* Quick stats */}
                        <div
                            className="mt-8 flex flex-wrap items-center justify-center gap-6 text-sm"
                            style={{ color: 'rgba(255,255,255,0.55)' }}
                        >
                            {[
                                {
                                    icon: BookOpen,
                                    text: `${courses.total}+ Kelas`,
                                },
                                { icon: Users, text: '5.000+ Pelajar' },
                                { icon: Award, text: 'Sertifikat Resmi' },
                            ].map(({ icon: Icon, text }) => (
                                <span
                                    key={text}
                                    className="flex items-center gap-1.5"
                                >
                                    <Icon
                                        className="h-4 w-4"
                                        style={{ color: '#06D6A0' }}
                                    />
                                    {text}
                                </span>
                            ))}
                        </div>
                    </div>
                </div>
            </section>

            {/* ─── CONTENT ───────────────────────────────────────────────── */}
            <div
                ref={contentRef}
                className="mx-auto max-w-7xl px-5 py-10 md:px-8"
            >
                {/* Filter bar */}
                <div className="mb-8 flex flex-col gap-4 rounded-2xl border border-slate-100 bg-white p-4 shadow-sm md:flex-row md:items-center md:justify-between">
                    {/* Categories */}
                    <div className="flex flex-wrap items-center gap-1.5">
                        <span className="mr-2 text-xs font-bold tracking-wider text-slate-400 uppercase">
                            Kategori:
                        </span>
                        <button
                            onClick={() => applyFilter({ category: '' })}
                            className="rounded-full px-3.5 py-1.5 text-xs font-semibold transition-all"
                            style={
                                !filters.category
                                    ? {
                                          backgroundColor: '#118AB2',
                                          color: '#FFFFFF',
                                          boxShadow:
                                              '0 2px 8px rgba(17,138,178,0.2)',
                                      }
                                    : {
                                          backgroundColor: '#F3F4F6',
                                          color: '#4B5563',
                                          border: '1px solid transparent',
                                      }
                            }
                        >
                            Semua
                        </button>
                        {categories.map((cat) => (
                            <button
                                key={cat.id}
                                onClick={() =>
                                    applyFilter({ category: cat.slug })
                                }
                                className="rounded-full px-3.5 py-1.5 text-xs font-semibold transition-all"
                                style={
                                    filters.category === cat.slug
                                        ? {
                                              backgroundColor: '#118AB2',
                                              color: '#FFFFFF',
                                              boxShadow:
                                                  '0 2px 8px rgba(17,138,178,0.2)',
                                          }
                                        : {
                                              backgroundColor: '#F3F4F6',
                                              color: '#4B5563',
                                              border: '1px solid transparent',
                                          }
                                }
                            >
                                {cat.name}
                            </button>
                        ))}
                    </div>

                    {/* Dropdowns */}
                    <div className="flex flex-wrap items-center gap-2 md:justify-end">
                        <span className="mr-1 text-xs font-bold tracking-wider text-slate-400 uppercase">
                            Filter:
                        </span>
                        <select
                            value={filters.level ?? ''}
                            onChange={(e) =>
                                applyFilter({ level: e.target.value })
                            }
                            className="cursor-pointer rounded-full border border-gray-200 bg-white px-3.5 py-1.5 text-xs font-semibold text-gray-700 shadow-sm transition-all outline-none hover:bg-gray-50 focus:border-[#118AB2] focus:ring-1 focus:ring-[#118AB2]"
                        >
                            <option value="">Semua Level</option>
                            <option value="beginner">Pemula</option>
                            <option value="intermediate">Menengah</option>
                            <option value="advanced">Mahir</option>
                        </select>
                        <select
                            value={filters.price ?? ''}
                            onChange={(e) =>
                                applyFilter({ price: e.target.value })
                            }
                            className="cursor-pointer rounded-full border border-gray-200 bg-white px-3.5 py-1.5 text-xs font-semibold text-gray-700 shadow-sm transition-all outline-none hover:bg-gray-50 focus:border-[#118AB2] focus:ring-1 focus:ring-[#118AB2]"
                        >
                            <option value="">Semua Harga</option>
                            <option value="free">Gratis</option>
                            <option value="paid">Berbayar</option>
                        </select>

                        {activeFiltersCount > 0 && (
                            <button
                                onClick={() =>
                                    applyFilter({
                                        category: '',
                                        level: '',
                                        price: '',
                                        search: '',
                                    })
                                }
                                className="rounded-full bg-rose-50 px-3.5 py-1.5 text-xs font-semibold text-[#E63946] transition-all hover:bg-rose-100"
                            >
                                Reset ({activeFiltersCount})
                            </button>
                        )}
                    </div>
                </div>

                {/* Course grid */}
                {courses.data.length === 0 ? (
                    <div
                        className="flex flex-col items-center justify-center rounded-2xl py-20 text-center"
                        style={{
                            backgroundColor: '#FFFFFF',
                            border: '1px dashed rgba(0,0,0,0.12)',
                        }}
                    >
                        <div
                            className="mb-4 flex h-16 w-16 items-center justify-center rounded-2xl"
                            style={{ backgroundColor: '#F7F8FA' }}
                        >
                            <BookOpen
                                className="h-8 w-8"
                                style={{ color: '#118AB2' }}
                            />
                        </div>
                        <p
                            className="mb-1 text-base font-semibold"
                            style={{ color: '#1A1A1A' }}
                        >
                            Kelas tidak ditemukan
                        </p>
                        <p className="text-sm" style={{ color: '#555555' }}>
                            Coba ubah kata kunci atau hapus filter
                        </p>
                        <button
                            onClick={() =>
                                applyFilter({
                                    category: '',
                                    level: '',
                                    price: '',
                                    search: '',
                                })
                            }
                            className="mt-5 rounded-xl px-6 py-2.5 text-sm font-semibold text-white transition-all hover:-translate-y-0.5"
                            style={{ backgroundColor: '#118AB2' }}
                        >
                            Lihat semua kelas
                        </button>
                    </div>
                ) : (
                    <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                        {courses.data.map((course) => {
                            const isEnrolled = enrolledCourseIds.includes(
                                course.id,
                            );
                            const level = levelColors[course.level] ?? {
                                bg: '#F7F8FA',
                                color: '#555555',
                            };

                            return (
                                <Link
                                    key={course.id}
                                    href={`/courses/${course.slug}`}
                                    className="group flex flex-col overflow-hidden rounded-2xl bg-white transition-all duration-300 hover:-translate-y-1.5"
                                    style={{
                                        boxShadow:
                                            '0 4px 20px rgba(0,0,0,0.07)',
                                        border: '1px solid rgba(0,0,0,0.06)',
                                    }}
                                >
                                    {/* Thumbnail */}
                                    <div className="relative overflow-hidden">
                                        {course.thumbnail ? (
                                            <img
                                                src={course.thumbnail}
                                                alt={course.title}
                                                className="h-44 w-full object-cover transition-transform duration-500 group-hover:scale-105"
                                            />
                                        ) : (
                                            <div
                                                className="flex h-44 w-full items-center justify-center"
                                                style={{
                                                    background:
                                                        'linear-gradient(135deg, #E8F5FF 0%, #EBF5FB 100%)',
                                                }}
                                            >
                                                <BookOpen
                                                    className="h-10 w-10"
                                                    style={{
                                                        color: '#118AB2',
                                                        opacity: 0.4,
                                                    }}
                                                />
                                            </div>
                                        )}
                                        {/* Price badge top-right */}
                                        <div
                                            className="absolute top-3 right-3 rounded-full px-2.5 py-1 text-xs font-semibold"
                                            style={
                                                course.price_type === 'free'
                                                    ? {
                                                          backgroundColor:
                                                              '#06D6A0',
                                                          color: '#FFFFFF',
                                                      }
                                                    : {
                                                          backgroundColor:
                                                              'rgba(0,0,0,0.65)',
                                                          color: '#FFFFFF',
                                                          backdropFilter:
                                                              'blur(4px)',
                                                      }
                                            }
                                        >
                                            {course.price_type === 'free'
                                                ? 'Gratis'
                                                : formatPrice(course.price)}
                                        </div>
                                    </div>

                                    {/* Body */}
                                    <div className="flex flex-1 flex-col gap-2.5 p-5">
                                        {/* Category */}
                                        {course.category && (
                                            <span
                                                className="w-fit rounded-full px-2.5 py-0.5 text-xs font-medium"
                                                style={{
                                                    backgroundColor:
                                                        'rgba(17,138,178,0.1)',
                                                    color: '#118AB2',
                                                }}
                                            >
                                                {course.category.name}
                                            </span>
                                        )}

                                        {/* Title */}
                                        <h3
                                            className="line-clamp-2 text-sm leading-snug font-semibold transition-colors group-hover:text-[#118AB2]"
                                            style={{ color: '#1A1A1A' }}
                                        >
                                            {course.title}
                                        </h3>

                                        {/* Instructor */}
                                        <p
                                            className="text-xs"
                                            style={{ color: '#777777' }}
                                        >
                                            {course.instructor.name}
                                        </p>

                                        {/* Stats */}
                                        <div
                                            className="flex items-center gap-3 text-xs"
                                            style={{ color: '#888888' }}
                                        >
                                            <span className="flex items-center gap-1">
                                                <BookOpen className="h-3 w-3" />
                                                {course.lessons_count} lesson
                                            </span>
                                            <span className="flex items-center gap-1">
                                                <Clock className="h-3 w-3" />
                                                {formatDuration(
                                                    course.duration_minutes,
                                                )}
                                            </span>
                                            <span className="flex items-center gap-1">
                                                <Users className="h-3 w-3" />
                                                {course.enrollments_count.toLocaleString(
                                                    'id-ID',
                                                )}
                                            </span>
                                        </div>

                                        {/* Footer */}
                                        <div className="mt-auto flex items-center justify-between pt-2">
                                            <span
                                                className="rounded-full px-2.5 py-0.5 text-xs font-medium"
                                                style={{
                                                    backgroundColor: level.bg,
                                                    color: level.color,
                                                }}
                                            >
                                                {levelLabels[course.level] ??
                                                    course.level}
                                            </span>
                                            {isEnrolled ? (
                                                <Link
                                                    href={`/courses/${course.slug}/learn`}
                                                    className="flex items-center gap-1 rounded-full bg-emerald-50 px-3 py-1.5 text-xs font-bold text-emerald-600 transition-colors hover:bg-emerald-100"
                                                    onClick={(e) =>
                                                        e.stopPropagation()
                                                    }
                                                >
                                                    <BookOpen className="h-3 w-3" />
                                                    Mulai Belajar
                                                </Link>
                                            ) : (
                                                <span
                                                    className="text-xs font-bold"
                                                    style={{ color: '#118AB2' }}
                                                >
                                                    Lihat Detail →
                                                </span>
                                            )}
                                        </div>
                                    </div>
                                </Link>
                            );
                        })}
                    </div>
                )}

                {/* Pagination */}
                {courses.last_page > 1 && (
                    <div className="mt-10 flex items-center justify-center gap-1.5">
                        {courses.links.map((link, i) => {
                            const isArrow =
                                link.label.includes('&laquo;') ||
                                link.label.includes('&raquo;');
                            const isPrev = link.label.includes('&laquo;');
                            return (
                                <button
                                    key={i}
                                    disabled={!link.url}
                                    onClick={() =>
                                        link.url && router.visit(link.url)
                                    }
                                    className="flex h-9 min-w-[36px] items-center justify-center rounded-xl text-sm font-medium transition-all disabled:opacity-30"
                                    style={
                                        link.active
                                            ? {
                                                  backgroundColor: '#118AB2',
                                                  color: '#FFFFFF',
                                                  boxShadow:
                                                      '0 2px 10px rgba(17,138,178,0.3)',
                                              }
                                            : {
                                                  backgroundColor: '#FFFFFF',
                                                  color: '#555555',
                                                  border: '1px solid rgba(0,0,0,0.1)',
                                              }
                                    }
                                >
                                    {isArrow ? (
                                        isPrev ? (
                                            <ChevronLeft className="h-4 w-4" />
                                        ) : (
                                            <ChevronRight className="h-4 w-4" />
                                        )
                                    ) : (
                                        <span
                                            dangerouslySetInnerHTML={{
                                                __html: link.label,
                                            }}
                                        />
                                    )}
                                </button>
                            );
                        })}
                    </div>
                )}
            </div>

            {/* Bottom padding */}
            <div className="h-16" />
        </>
    );
}

CoursesIndex.layout = (page: React.ReactNode) => (
    <GuestLayout>{page}</GuestLayout>
);