<script setup lang="ts">
import { Head, Link } from '@inertiajs/vue3';
import { dashboard } from '@/routes';

defineOptions({
    layout: {
        breadcrumbs: [
            {
                title: 'Dashboard',
                href: dashboard(),
            },
        ],
    },
});

defineProps<{
    unreadEntities: Array<{
        id: number;
        name: string;
        type: 'Dynamic' | 'Ledger';
        url: string;
        unread_count: number;
        context_activities: Array<{
            id: number;
            content: string;
            user: { name: string } | null;
            subject: { name: string; url: string } | null;
            created_at: string;
            url: string;
        }>;
        new_activities: Array<{
            id: number;
            content: string;
            user: { name: string } | null;
            subject: { name: string; url: string } | null;
            created_at: string;
            url: string;
        }>;
    }>;
}>();

function formatTime(isoString: string): string {
    return new Date(isoString).toLocaleString();
}
</script>

<template>
    <Head title="Dashboard" />

    <div class="c-dashboard">
        <div class="c-dashboard__container">
            <h2 class="c-dashboard__title">Recent Activity</h2>

            <div v-if="unreadEntities.length > 0" class="c-dashboard__grid">
                <div
                    v-for="entity in unreadEntities"
                    :key="`${entity.type}_${entity.id}`"
                    class="c-dashboard__card"
                >
                    <div class="c-dashboard__card-header">
                        <div class="c-dashboard__entity-meta">
                            <span
                                :class="[
                                    'c-dashboard__badge-type',
                                    entity.type === 'Dynamic'
                                        ? 'c-dashboard__badge-type--dynamic'
                                        : 'c-dashboard__badge-type--ledger',
                                ]"
                            >
                                {{ entity.type }}
                            </span>
                            <span class="c-dashboard__unread-count">
                                {{ entity.unread_count }} New
                            </span>
                        </div>
                        <Link
                            :href="entity.url"
                            class="c-dashboard__entity-link"
                        >
                            <h3 class="c-dashboard__entity-title">
                                {{ entity.name }}
                            </h3>
                        </Link>
                    </div>

                    <div class="c-dashboard__activity-list">
                        <!-- Context / Read Activities -->
                        <div
                            v-for="activity in entity.context_activities"
                            :key="activity.id"
                            class="c-dashboard__activity-item c-dashboard__activity-item--read"
                        >
                            <Link :href="activity.url" class="block">
                                <div class="c-dashboard__activity-meta">
                                    <span class="c-dashboard__activity-user">
                                        {{ activity.user?.name || 'System' }}
                                    </span>
                                    <span class="c-dashboard__activity-time">
                                        {{ formatTime(activity.created_at) }}
                                    </span>
                                </div>
                                <p class="c-dashboard__activity-desc">
                                    {{ activity.content }}
                                </p>
                            </Link>
                        </div>

                        <!-- Unread Separator Line -->
                        <div
                            v-if="entity.context_activities.length > 0"
                            class="c-dashboard__divider"
                        >
                            <span class="c-dashboard__divider-text"
                                >New Activity Below</span
                            >
                        </div>

                        <!-- New / Unread Activities -->
                        <div
                            v-for="activity in entity.new_activities"
                            :key="activity.id"
                            class="c-dashboard__activity-item c-dashboard__activity-item--unread"
                        >
                            <Link :href="activity.url" class="block">
                                <div class="c-dashboard__activity-meta">
                                    <span class="c-dashboard__activity-user">
                                        {{ activity.user?.name || 'System' }}
                                    </span>
                                    <span class="c-dashboard__activity-time">
                                        {{ formatTime(activity.created_at) }}
                                    </span>
                                    <span class="c-dashboard__new-badge">NEW</span>
                                </div>
                                <p class="c-dashboard__activity-desc">
                                    {{ activity.content }}
                                </p>
                            </Link>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Empty Caught-Up State -->
            <div v-else class="c-dashboard__empty-state">
                <div class="c-dashboard__empty-icon">🔒</div>
                <p class="c-dashboard__empty-text">
                    All chambers are currently quiet.
                </p>
                <p class="c-dashboard__empty-subtext">
                    Your records are completely up to date. Masterfully done.
                </p>
            </div>
        </div>
    </div>
</template>

<style scoped>
@reference "../../css/app.css";

.c-dashboard {
    @apply px-4 py-8 sm:px-6 lg:px-8;
}

.c-dashboard__container {
    @apply mx-auto max-w-7xl;
}

.c-dashboard__title {
    @apply mb-6 text-xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100;
}

.c-dashboard__grid {
    @apply grid grid-cols-1 gap-6 md:grid-cols-2;
}

.c-dashboard__card {
    @apply flex flex-col overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-sm dark:border-neutral-800 dark:bg-neutral-900;
}

.c-dashboard__card-header {
    @apply border-b border-neutral-100 p-6 dark:border-neutral-800/30;
}

.c-dashboard__entity-meta {
    @apply mb-2 flex items-center gap-2;
}

.c-dashboard__badge-type {
    @apply rounded px-1.5 py-0.5 text-[10px] font-bold tracking-wider uppercase;
}

.c-dashboard__badge-type--dynamic {
    @apply bg-purple-100 text-purple-800 dark:bg-purple-950/20 dark:text-purple-400;
}

.c-dashboard__badge-type--ledger {
    @apply bg-indigo-100 text-indigo-800 dark:bg-indigo-950/20 dark:text-indigo-400;
}

.c-dashboard__unread-count {
    @apply rounded bg-red-100 px-1.5 py-0.5 text-[10px] font-bold tracking-wider text-red-800 uppercase dark:bg-red-950/20 dark:text-red-400;
}

.c-dashboard__entity-link {
    @apply hover:underline focus:outline-none;
}

.c-dashboard__entity-title {
    @apply text-lg font-semibold text-neutral-900 dark:text-neutral-100;
}

.c-dashboard__activity-list {
    @apply flex-1 space-y-4 p-6;
}

.c-dashboard__activity-item {
    @apply rounded-lg border p-4;
}

.c-dashboard__activity-item--read {
    @apply border-neutral-200 bg-neutral-50/50 opacity-60 dark:border-neutral-800/50 dark:bg-neutral-950/20;
}

.c-dashboard__activity-item--unread {
    @apply border-red-200/50 bg-red-50/10 dark:border-red-900/30 dark:bg-red-950/5;
}

.c-dashboard__activity-meta {
    @apply mb-1.5 flex items-center gap-2 text-xs;
}

.c-dashboard__activity-user {
    @apply font-semibold text-neutral-800 dark:text-neutral-200;
}

.c-dashboard__activity-time {
    @apply text-neutral-400 dark:text-neutral-500;
}

.c-dashboard__new-badge {
    @apply ml-auto rounded bg-red-100 px-1 py-0.5 text-[9px] font-bold text-red-600 dark:bg-red-950/30 dark:text-red-400;
}

.c-dashboard__activity-desc {
    @apply text-sm text-neutral-600 dark:text-neutral-400;
}

.c-dashboard__divider {
    @apply relative my-4 flex items-center justify-center;
}

.c-dashboard__divider-text {
    @apply z-10 bg-white px-3 text-[10px] font-bold tracking-widest text-neutral-400 uppercase dark:bg-neutral-900 dark:text-neutral-500;
}

.c-dashboard__divider::before {
    content: '';
    @apply absolute inset-x-0 h-px bg-neutral-200 dark:bg-neutral-800;
}

.c-dashboard__empty-state {
    @apply flex min-h-[300px] flex-col items-center justify-center rounded-2xl border border-dashed border-neutral-200 p-12 text-center dark:border-neutral-800;
}

.c-dashboard__empty-icon {
    @apply mb-4 text-4xl;
}

.c-dashboard__empty-text {
    @apply text-lg font-semibold text-neutral-900 dark:text-neutral-100;
}

.c-dashboard__empty-subtext {
    @apply mt-1 max-w-md text-sm text-neutral-500 dark:text-neutral-500;
}
</style>
