import { Head, Link, router, usePage } from '@inertiajs/react';
import {
    ArrowUpRight,
    BookOpen,
    CalendarDays,
    CheckCircle2,
    ChevronLeft,
    ChevronRight,
    Circle,
    Sparkles,
    Trophy,
    Map as MapIcon,
    Radio,
    Award,
    Receipt,
    Bookmark,
    Megaphone,
} from 'lucide-react';
import { useState } from 'react';
import AppLayout from '@/layouts/app-layout';
import { cn } from '@/lib/utils';
import { dashboard } from '@/routes';
import type { Auth, BreadcrumbItem } from '@/types';

type Course = {
    id: number;
    title: string;
    slug: string;
    thumbnail: string | null;
    duration_minutes: number;
};

type ContinueLearningItem = {
    id: number;
    course: Course;
    progress_percent: number;
    completed_lessons: number;
    total_lessons: number;
    current_title: string;
    next_title: string;
    next_url: string;
};

type AssignedTaskParent = {
    id: number;
    title: string;
};

type PlannerTask = {
    id: number;
    title: string;
    type: 'lesson' | 'quiz' | 'assignment' | 'personal' | 'assigned';
    status: 'pending' | 'completed' | 'missed';
    is_priority: boolean;
    lesson_id: number | null;
    quiz_id: number | null;
    assignment_id: number | null;
    enrollment_id: number | null;
    assigned_task_id: number | null;
    assigned_task: AssignedTaskParent | null;
};

type UpcomingDeadline = {
    id: number;
    title: string;
    type: string;
    scheduled_date: string;
};

type Badge = {
    id: number;
    key: string;
    name: string;
    icon: string;
    earned_at: string;
};

type MonthTask = {
    id: number;
    title: string;
    type: 'lesson' | 'quiz' | 'assignment' | 'personal' | 'assigned';
    status: 'pending' | 'completed' | 'missed';
    scheduled_date: string;
};

type Props = {
    continuelearning: ContinueLearningItem[];
    todayTasks: PlannerTask[];
    upcomingDeadlines: UpcomingDeadline[];
    monthTasks: MonthTask[];
    stats: {
        total_enrolled: number;
        total_completed: number;
        points: number;
        average_progress: number;
    };
    recentBadges: Badge[];
};

const breadcrumbs: BreadcrumbItem[] = [{ title: 'Dashboard', href: dashboard() }];

const ACTIVITY_COLORS: { bg: string }[] = [
    { bg: 'bg-emerald-100' },
    { bg: 'bg-pink-100' },
    { bg: 'bg-sky-100' },
    { bg: 'bg-teal-100' },
];

const PROGRESS_COLORS: { bg: string; bar: string; iconBg: string; iconText: string }[] = [
    { bg: 'bg-amber-100', bar: 'bg-amber-400', iconBg: 'bg-amber-200', iconText: 'text-amber-600' },
    { bg: 'bg-emerald-100', bar: 'bg-emerald-400', iconBg: 'bg-emerald-200', iconText: 'text-emerald-600' },
    { bg: 'bg-sky-100', bar: 'bg-sky-400', iconBg: 'bg-sky-200', iconText: 'text-sky-600' },
];

const MONTH_NAMES = [
    'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
    'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember',
];

function greetingByHour(): string {
    const hour = new Date().getHours();
    if (hour < 12) return 'Selamat Pagi';
    if (hour < 17) return 'Selamat Siang';
    if (hour < 20) return 'Selamat Sore';
    return 'Selamat Malam';
}

function MiniCalendar({ tasks = [] }: { tasks: MonthTask[] }) {
    const [viewDate, setViewDate] = useState(() => new Date());

    const year = viewDate.getFullYear();
    const month = viewDate.getMonth();
    const today = new Date();
    const todayStr = today.toISOString().slice(0, 10);

    // Group tasks by date string YYYY-MM-DD
    const tasksByDate = tasks.reduce<Record<string, MonthTask[]>>((acc, task) => {
        const dateStr = task.scheduled_date.split('T')[0];
        if (!acc[dateStr]) {
            acc[dateStr] = [];
        }
        acc[dateStr].push(task);
        return acc;
    }, {});

    const firstDayOfWeek = new Date(year, month, 1).getDay();
    const startOffset = (firstDayOfWeek + 6) % 7;
    const daysInMonth = new Date(year, month + 1, 0).getDate();

    const cells: (number | null)[] = [];
    for (let i = 0; i < startOffset; i++) {
        cells.push(null);
    }
    for (let i = 1; i <= daysInMonth; i++) {
        cells.push(i);
    }
    while (cells.length % 7 !== 0) {
        cells.push(null);
    }

    const TYPE_DOT: Record<string, string> = {
        lesson: 'bg-sky-400',
        quiz: 'bg-amber-400',
        assignment: 'bg-violet-400',
        personal: 'bg-slate-400',
        assigned: 'bg-sky-400',
    };

    return (
        <div>
            <div className="mb-4 flex items-center justify-between">
                <span className="font-semibold text-gray-900">
                    {MONTH_NAMES[month]} {year}
                </span>
                <div className="flex gap-1">
                    <button
                        onClick={() => setViewDate(new Date(year, month - 1, 1))}
                        className="calendar-nav-btn-sm rounded-lg p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
                    >
                        <ChevronLeft className="h-5 w-5" />
                    </button>
                    <button
                        onClick={() => setViewDate(new Date(year, month + 1, 1))}
                        className="calendar-nav-btn-sm rounded-lg p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
                    >
                        <ChevronRight className="h-5 w-5" />
                    </button>
                </div>
            </div>

            <div className="grid grid-cols-7 gap-y-1">
                {['Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab', 'Min'].map((d) => (
                    <div key={d} className="pb-1 text-center text-[11px] font-semibold text-gray-400 uppercase tracking-wider">
                        {d}
                    </div>
                ))}
                {cells.map((day, i) => {
                    if (!day) {
                        return <div key={`e-${i}`} className="h-10" />;
                    }

                    const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
                    const isToday = dateStr === todayStr;
                    const dayTasks = tasksByDate[dateStr] ?? [];

                    return (
                        <Link
                            key={i}
                            href={`/planner?date=${dateStr}`}
                            className={cn(
                                'flex h-10 flex-col items-center justify-between rounded-xl py-1 transition-colors hover:bg-sky-50/50',
                                isToday && 'bg-sky-50 border border-sky-200 hover:bg-sky-100/60',
                            )}
                        >
                            <span
                                className={cn(
                                    'flex h-6 w-6 items-center justify-center rounded-full text-xs font-semibold',
                                    isToday ? 'bg-sky-500 text-white' : 'text-gray-700',
                                )}
                            >
                                {day}
                            </span>
                            <div className="flex h-1.5 items-center justify-center gap-0.5">
                                {dayTasks.slice(0, 3).map((t) => (
                                    <div
                                        key={t.id}
                                        className={cn('h-1 w-1 rounded-full', TYPE_DOT[t.type])}
                                        title={t.title}
                                    />
                                ))}
                                {dayTasks.length > 3 && (
                                    <div className="h-1 w-1 rounded-full bg-gray-400" title={`${dayTasks.length} tugas`} />
                                )}
                            </div>
                        </Link>
                    );
                })}
            </div>
        </div>
    );
}

function TaskGroupedList({
    tasks,
    onMarkDone,
}: {
    tasks: PlannerTask[];
    onMarkDone: (id: number) => void;
}) {
    // Group tasks by assigned_task_id; tasks with no assigned_task_id go into a null group.
    const groups = new Map<number | null, { label: string | null; tasks: PlannerTask[] }>();

    for (const task of tasks) {
        const key = task.assigned_task_id ?? null;
        if (!groups.has(key)) {
            groups.set(key, { label: task.assigned_task?.title ?? null, tasks: [] });
        }
        groups.get(key)!.tasks.push(task);
    }

    // Put grouped (assigned) tasks first, then the null/personal group last.
    const sortedGroups = [...groups.entries()].sort(([a], [b]) => {
        if (a === null) return 1;
        if (b === null) return -1;
        return a - b;
    });

    return (
        <div className="flex flex-col gap-3">
            {sortedGroups.map(([key, group]) => (
                <div key={key ?? 'personal'} className="rounded-2xl border border-gray-100 bg-white shadow-sm overflow-hidden">
                    {group.label && (
                        <div className="flex items-center gap-2 border-b border-gray-50 bg-gray-50 px-3.5 py-2.5">
                            <CheckCircle2 className="h-3.5 w-3.5 shrink-0 text-emerald-500" />
                            <p className="text-xs font-semibold text-gray-700 truncate">{group.label}</p>
                            <span className="ml-auto shrink-0 text-xs text-gray-400">
                                {group.tasks.filter((t) => t.status === 'completed').length}/{group.tasks.length}
                            </span>
                        </div>
                    )}
                    <div className="divide-y divide-gray-50">
                        {group.tasks.map((task) => (
                            <div key={task.id} className="flex items-center gap-3 p-3.5">
                                <button
                                    onClick={() => task.status === 'pending' && onMarkDone(task.id)}
                                    className="shrink-0 text-gray-300 transition-colors hover:text-emerald-500 disabled:cursor-default"
                                    disabled={task.status !== 'pending'}
                                >
                                    {task.status === 'completed' ? (
                                        <CheckCircle2 className="h-5 w-5 text-emerald-500" />
                                    ) : (
                                        <Circle className="h-5 w-5" />
                                    )}
                                </button>
                                <div className="min-w-0 flex-1">
                                    <p
                                        className={cn(
                                            'text-sm font-medium text-gray-800',
                                            task.status === 'completed' && 'text-gray-400 line-through',
                                            task.status === 'missed' && 'text-red-500',
                                        )}
                                    >
                                        {task.title}
                                    </p>
                                </div>
                                {task.is_priority && (
                                    <span className="rounded-full bg-orange-100 px-2 py-0.5 text-xs text-orange-600">
                                        Prioritas
                                    </span>
                                )}
                            </div>
                        ))}
                    </div>
                </div>
            ))}
        </div>
    );
}

const TYPE_COLOR_MAP: Record<string, { bg: string; text: string }> = {
    lesson: { bg: 'bg-sky-100', text: 'text-sky-600' },
    quiz: { bg: 'bg-amber-100', text: 'text-amber-600' },
    assignment: { bg: 'bg-violet-100', text: 'text-violet-600' },
    personal: { bg: 'bg-slate-100', text: 'text-slate-500' },
    assigned: { bg: 'bg-sky-100', text: 'text-sky-600' },
};

export default function Dashboard({ continuelearning, todayTasks, upcomingDeadlines, monthTasks, stats, recentBadges }: Props) {
    const { auth } = usePage<{ auth: Auth }>().props;
    const user = auth.user;

    const completedToday = todayTasks.filter((t) => t.status === 'completed').length;
    const totalToday = todayTasks.length;

    function markTaskDone(taskId: number) {
        router.patch(`/planner/${taskId}/complete`, {}, { preserveScroll: true });
    }

    return (
        <>
            <Head title="Dashboard" />

            <div className="mx-auto grid max-w-6xl gap-5 px-5 py-8 lg:grid-cols-[1fr_300px]">
                {/* Left: Main content */}
                <div className="flex min-w-0 flex-col gap-5">
                    {/* Welcome */}
                    <div>
                        <p className="text-sm text-gray-500">{greetingByHour()},</p>
                        <h1 className="text-2xl font-bold text-gray-900">{user.name} 👋</h1>
                    </div>

                    {/* Quick Shortcuts on Mobile */}
                    <div className="grid grid-cols-3 gap-4 rounded-2xl bg-white p-4 shadow-sm border border-gray-100 lg:hidden">
                        <Link href="/learning-paths" className="flex flex-col items-center gap-1.5 text-center">
                            <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-emerald-50 text-emerald-600">
                                <MapIcon className="h-6 w-6" />
                            </div>
                            <span className="text-[11px] font-semibold text-gray-600">Learning Path</span>
                        </Link>
                        <Link href="/live-classes" className="flex flex-col items-center gap-1.5 text-center">
                            <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-rose-50 text-rose-600">
                                <Radio className="h-6 w-6" />
                            </div>
                            <span className="text-[11px] font-semibold text-gray-600">Live Class</span>
                        </Link>
                        <Link href="/certificates" className="flex flex-col items-center gap-1.5 text-center">
                            <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-amber-50 text-amber-600">
                                <Award className="h-6 w-6" />
                            </div>
                            <span className="text-[11px] font-semibold text-gray-600">Sertifikat</span>
                        </Link>
                        <Link href="/orders" className="flex flex-col items-center gap-1.5 text-center">
                            <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-sky-50 text-sky-600">
                                <Receipt className="h-6 w-6" />
                            </div>
                            <span className="text-[11px] font-semibold text-gray-600">Riwayat</span>
                        </Link>
                        <Link href="/bookmarks" className="flex flex-col items-center gap-1.5 text-center">
                            <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-blue-50 text-blue-600">
                                <Bookmark className="h-6 w-6" />
                            </div>
                            <span className="text-[11px] font-semibold text-gray-600">Bookmark</span>
                        </Link>
                        <Link href="/announcements" className="flex flex-col items-center gap-1.5 text-center">
                            <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-orange-50 text-orange-600">
                                <Megaphone className="h-6 w-6" />
                            </div>
                            <span className="text-[11px] font-semibold text-gray-600">Pengumuman</span>
                        </Link>
                    </div>

                    {/* Lanjutkan Belajar */}
                    <section>
                        <div className="mb-3 flex items-center justify-between">
                            <h2 className="font-semibold text-gray-800">
                                Lanjutkan Belajar{' '}
                                <span className="text-sm font-normal text-gray-400">({continuelearning.length})</span>
                            </h2>
                            <Link href="/courses" className="text-sm text-gray-400 hover:text-gray-600">
                                Lihat semua
                            </Link>
                        </div>

                        {continuelearning.length === 0 ? (
                            <div className="rounded-2xl border-2 border-dashed border-gray-200 bg-white p-8 text-center">
                                <BookOpen className="mx-auto mb-2 h-8 w-8 text-gray-300" />
                                <p className="text-sm text-gray-400">Belum ada kelas yang diikuti</p>
                                <Link href="/courses" className="mt-2 inline-block text-sm text-emerald-600 hover:underline">
                                    Jelajahi kelas
                                </Link>
                            </div>
                        ) : (
                            <div className="flex overflow-x-auto gap-4 pb-2 snap-x snap-mandatory lg:grid lg:grid-cols-2 lg:overflow-visible lg:pb-0 scrollbar-none">
                                {continuelearning.slice(0, 5).map((item, i) => {
                                    const color = ACTIVITY_COLORS[i % ACTIVITY_COLORS.length];
                                    return (
                                        <Link
                                            key={item.id}
                                            href={item.next_url}
                                            className={cn('group flex flex-col min-h-[120px] w-[80%] lg:w-full shrink-0 snap-start rounded-2xl p-4 transition-all hover:scale-[1.01] duration-200 shadow-sm hover:shadow-md border border-black/5 justify-between', color.bg)}
                                        >
                                            <p className="line-clamp-2 text-sm font-semibold leading-snug text-gray-900">
                                                {item.course.title}
                                            </p>

                                            <div className="flex items-center justify-between">
                                                <span className="text-[11px] font-semibold text-gray-600 group-hover:text-emerald-700 transition-colors">
                                                    Mulai belajar
                                                </span>
                                                <div className="flex h-7 w-7 items-center justify-center rounded-full bg-white shadow-sm transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5">
                                                    <ArrowUpRight className="h-3.5 w-3.5 text-gray-600" />
                                                </div>
                                            </div>
                                        </Link>
                                    );
                                })}
                            </div>
                        )}
                    </section>
 
                    {/* Learning Progress Stats */}
                    <section>
                        <h2 className="mb-3 font-semibold text-gray-800">Progres Belajar</h2>
                        <div className="grid grid-cols-3 gap-3">
                            <div
                                className="rounded-2xl border border-gray-100 bg-white p-4 shadow-sm transition-shadow hover:shadow-md"
                            >
                                <p className="text-xs text-gray-400">Progress</p>
                                <div className="mt-1.5 flex items-end justify-between">
                                    <p className="text-3xl font-bold text-gray-900">{stats.average_progress}%</p>
                                    <div className="flex h-7 w-7 items-center justify-center rounded-full bg-gray-100">
                                        <BookOpen className="h-3.5 w-3.5 text-gray-500" />
                                    </div>
                                </div>
                            </div>

                            <Link
                                href="/leaderboard"
                                className="rounded-2xl bg-amber-100 p-4 transition-opacity hover:opacity-90"
                            >
                                <p className="text-xs text-amber-700">Poin Saya</p>
                                <div className="mt-1.5 flex items-end justify-between">
                                    <p className="text-3xl font-bold text-gray-900">
                                        {(stats.points ?? 0).toLocaleString('id-ID')}
                                    </p>
                                    <div className="flex h-7 w-7 items-center justify-center rounded-full bg-white/70">
                                        <ArrowUpRight className="h-3.5 w-3.5 text-amber-700" />
                                    </div>
                                </div>
                            </Link>

                            <Link
                                href="/courses"
                                className="rounded-2xl bg-sky-100 p-4 transition-opacity hover:opacity-90"
                            >
                                <p className="text-xs text-sky-700">Aktif</p>
                                <div className="mt-1.5 flex items-end justify-between">
                                    <p className="text-3xl font-bold text-gray-900">{stats.total_enrolled}</p>
                                    <div className="flex h-7 w-7 items-center justify-center rounded-full bg-white/70">
                                        <ArrowUpRight className="h-3.5 w-3.5 text-sky-700" />
                                    </div>
                                </div>
                            </Link>
                        </div>
                    </section>

                    {/* Course Progress Cards */}
                    {continuelearning.length > 0 && (
                        <div className="grid gap-4 sm:grid-cols-2">
                            {continuelearning.slice(0, 2).map((item, i) => {
                                const color = PROGRESS_COLORS[i % PROGRESS_COLORS.length];
                                return (
                                    <Link
                                        key={item.id}
                                        href={`/my-courses/${item.course.slug}`}
                                        className={cn('group rounded-2xl p-4', color.bg)}
                                    >
                                        <div className="flex items-start justify-between">
                                            <div className={cn('rounded-xl p-2', color.iconBg)}>
                                                <Sparkles className={cn('h-4 w-4', color.iconText)} />
                                            </div>
                                            <div className="flex h-7 w-7 items-center justify-center rounded-full bg-white/70">
                                                <ArrowUpRight className="h-3.5 w-3.5 text-gray-500" />
                                            </div>
                                        </div>
                                        <p className="mt-3 text-xs text-gray-500">Kelas Online</p>
                                        <p className="mt-0.5 line-clamp-1 text-sm font-semibold text-gray-900">
                                            {item.course.title}
                                        </p>
                                        <div className="mt-3">
                                            <p className="mb-1.5 text-xs text-gray-500">
                                                {item.completed_lessons}/{item.total_lessons} pelajaran
                                            </p>
                                            <div className="h-1.5 w-full overflow-hidden rounded-full bg-white/60">
                                                <div
                                                    className={cn('h-full rounded-full transition-all', color.bar)}
                                                    style={{ width: `${item.progress_percent}%` }}
                                                />
                                            </div>
                                        </div>
                                    </Link>
                                );
                            })}
                        </div>
                    )}

                    {/* Today's Tasks */}
                    {todayTasks.length > 0 && (
                        <section>
                            <div className="mb-3 flex items-center justify-between">
                                <h2 className="font-semibold text-gray-800">To Do Hari Ini</h2>
                                <Link href="/planner" className="text-sm text-gray-400 hover:text-gray-600">
                                    Lihat planner
                                </Link>
                            </div>
                            {completedToday === totalToday && (
                                <div className="mb-3 rounded-xl bg-emerald-50 border border-emerald-200 p-3 text-center text-xs font-semibold text-emerald-800">
                                    🎉 Semua tugas hari ini sudah selesai!
                                </div>
                            )}
                            <TaskGroupedList tasks={todayTasks} onMarkDone={markTaskDone} />
                        </section>
                    )}
                </div>

                {/* Right: Schedule */}
                <div className="flex flex-col gap-4">
                    {/* Calendar */}
                    <div className="rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
                        <h2 className="mb-4 font-semibold text-gray-900">Jadwal Pelajaran</h2>
                        <MiniCalendar tasks={monthTasks} />
                    </div>

                    {/* Upcoming / Today items */}
                    <div className="flex flex-col gap-2">
                        {todayTasks.length === 0 && upcomingDeadlines.length === 0 ? (
                            <div className="rounded-2xl border border-gray-100 bg-white p-5 text-center shadow-sm">
                                <CalendarDays className="mx-auto mb-2 h-6 w-6 text-gray-300" />
                                <p className="text-sm text-gray-400">Tidak ada jadwal</p>
                            </div>
                        ) : (
                            <>
                                {todayTasks.slice(0, 3).map((task) => {
                                    const col = TYPE_COLOR_MAP[task.type] || { bg: 'bg-sky-100', text: 'text-sky-600' };
                                    return (
                                        <div
                                            key={`t-${task.id}`}
                                            className="flex items-center gap-3 rounded-2xl border border-gray-100 bg-white p-3.5 shadow-sm"
                                        >
                                            <div className={cn('shrink-0 rounded-xl p-2', col.bg)}>
                                                <BookOpen className={cn('h-4 w-4', col.text)} />
                                            </div>
                                            <p className="line-clamp-2 text-sm text-gray-700">{task.title}</p>
                                        </div>
                                    );
                                })}
                                {upcomingDeadlines.slice(0, Math.max(0, 4 - Math.min(todayTasks.length, 3))).map((item) => {
                                    const date = new Date(item.scheduled_date);
                                    const now = new Date();
                                    const diffDays = Math.ceil(
                                        (date.getTime() - now.getTime()) / (1000 * 60 * 60 * 24),
                                    );
                                    const col = TYPE_COLOR_MAP[item.type] || { bg: 'bg-pink-100', text: 'text-pink-600' };
                                    return (
                                        <div
                                            key={`d-${item.id}`}
                                            className="flex items-center gap-3 rounded-2xl border border-gray-100 bg-white p-3.5 shadow-sm"
                                        >
                                            <div className={cn('shrink-0 rounded-xl p-2', col.bg)}>
                                                <BookOpen className={cn('h-4 w-4', col.text)} />
                                            </div>
                                            <div className="min-w-0">
                                                <p className="line-clamp-1 text-sm text-gray-700">{item.title}</p>
                                                <p className="text-xs text-gray-400">
                                                    {diffDays <= 0
                                                        ? 'Hari ini'
                                                        : diffDays === 1
                                                          ? 'Besok'
                                                          : `${diffDays} hari lagi`}
                                                </p>
                                            </div>
                                        </div>
                                    );
                                })}
                            </>
                        )}
                    </div>

                    {/* Recent Badges */}
                    {recentBadges.length > 0 && (
                        <div className="rounded-2xl border border-gray-100 bg-white p-4 shadow-sm">
                            <div className="mb-3 flex items-center justify-between">
                                <h3 className="text-sm font-semibold text-gray-800">Badge Terbaru</h3>
                                <Link href="/leaderboard" className="text-gray-400 hover:text-gray-600">
                                    <Trophy className="h-3.5 w-3.5" />
                                </Link>
                            </div>
                            <div className="flex flex-wrap gap-2">
                                {recentBadges.slice(0, 4).map((badge) => (
                                    <div
                                        key={badge.id}
                                        title={badge.name}
                                        className="flex items-center gap-1.5 rounded-xl border border-amber-100 bg-amber-50 px-2.5 py-1.5 text-xs"
                                    >
                                        <span className="text-base leading-none">{badge.icon}</span>
                                        <span className="font-medium text-amber-800">{badge.name}</span>
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}
                </div>
            </div>
        </>
    );
}

Dashboard.layout = (page: React.ReactNode) => (
    <AppLayout breadcrumbs={breadcrumbs}>{page}</AppLayout>
);