@extends('kanban.layout')

@section('page-title', 'لوحة الاسبرينتات — base')

@section('content')
<script>
    window.KANBAN_ROUTES = {
        state: @json(route('kanban.state')),
        status: @json(route('kanban.status')),
        sync: @json(route('kanban.sync')),
    };
</script>

<div x-data="kanban()" x-init="init()" x-cloak dir="rtl" class="min-h-screen flex flex-col">

    {{-- ── Header ─────────────────────────────────────────────── --}}
    <header class="sticky top-0 z-20 bg-white/85 backdrop-blur border-b border-brand-100">
        <div class="px-5 py-3 flex items-center gap-4">
            {{-- title / breadcrumb --}}
            <div class="flex items-center gap-3 min-w-0">
                <div class="w-9 h-9 rounded-xl bg-brand text-white grid place-items-center shrink-0">
                    <i class="ti ti-layout-kanban text-lg"></i>
                </div>

                <template x-if="!openKey">
                    <div class="min-w-0">
                        <h1 class="font-display text-lg text-ink leading-tight">لوحة الاسبرينتات</h1>
                        <p class="text-xs text-muted">كل sprint وخططه — بتتحرّك لايف مع التنفيذ</p>
                    </div>
                </template>

                <template x-if="openKey">
                    <div class="flex items-center gap-3 min-w-0">
                        <button @click="back()" class="w-8 h-8 rounded-lg grid place-items-center text-muted hover:bg-brand-50 hover:text-brand">
                            <i class="ti ti-arrow-right text-lg"></i>
                        </button>
                        <div class="min-w-0">
                            <h1 class="font-display text-base text-ink leading-tight truncate" x-text="openSprint()?.title || ''"></h1>
                            <p class="text-xs text-muted">
                                <span x-text="'Sprint ' + (openSprint()?.number ?? '')"></span>
                                · <span x-text="(openSprint()?.done ?? 0) + '/' + (openSprint()?.total ?? 0) + ' خطة'"></span>
                                <span x-show="(openSprint()?.in_progress ?? 0) > 0" class="text-brand font-medium"
                                      x-text="' · ' + (openSprint()?.in_progress ?? 0) + ' قيد التنفيذ'"></span>
                            </p>
                        </div>
                    </div>
                </template>
            </div>

            <div class="flex-1"></div>

            {{-- live + actions --}}
            <div class="flex items-center gap-3 shrink-0">
                <span class="flex items-center gap-1.5 text-xs text-muted" :title="updatedAt ? ('آخر تحديث: ' + updatedAt) : ''">
                    <span class="w-2 h-2 rounded-full" :class="error ? 'bg-red-500' : 'bg-done kb-live'"></span>
                    <span x-text="error ? 'غير متصل' : 'لايف'"></span>
                </span>
                <span class="text-xs text-muted" x-show="lastAt" x-text="lastAt"></span>
                <button @click="syncBoard()" :disabled="syncing"
                    class="h-9 px-3 rounded-xl bg-brand-50 text-brand text-sm font-medium hover:bg-brand-100 disabled:opacity-50 flex items-center gap-1.5">
                    <i class="ti ti-refresh text-base" :class="syncing ? 'animate-spin' : ''"></i>
                    مزامنة
                </button>
            </div>
        </div>
    </header>

    {{-- ── Empty state ────────────────────────────────────────── --}}
    <template x-if="!loading && sprints.length === 0">
        <div class="flex-1 grid place-items-center p-10">
            <div class="text-center max-w-md">
                <div class="w-16 h-16 rounded-2xl bg-brand-50 text-brand grid place-items-center mx-auto mb-4">
                    <i class="ti ti-clipboard-list text-3xl"></i>
                </div>
                <h2 class="font-display text-xl text-ink mb-2">لسه مفيش اسبرينتات</h2>
                <p class="text-sm text-muted leading-relaxed">
                    اللوحة بتقرأ ملفات <code class="text-brand bg-brand-50 px-1.5 py-0.5 rounded">docs/project/sprints/*.md</code>.
                    شغّل <b>START</b> (أو <code class="text-brand bg-brand-50 px-1.5 py-0.5 rounded">php artisan board:sync</code>) وهتظهر التاسكات هنا.
                </p>
            </div>
        </div>
    </template>

    {{-- ── Board ──────────────────────────────────────────────── --}}
    <template x-if="loading || sprints.length > 0">
        <main class="flex-1 p-5 grid gap-4 grid-cols-1 md:grid-cols-3 items-start">
            <template x-for="col in columns()" :key="col.key">
                <section
                    class="kb-col rounded-2xl bg-white/60 border border-brand-100 flex flex-col max-h-[calc(100vh-5.5rem)]"
                    :class="overCol === col.key ? 'kb-col--over' : ''"
                    @dragover.prevent="overCol = col.key"
                    @dragleave="overCol = null"
                    @drop.prevent="onDrop(col.key)">

                    {{-- column header --}}
                    <div class="px-4 py-3 flex items-center gap-2 border-b border-brand-100">
                        <span class="w-2.5 h-2.5 rounded-full" :style="`background:${col.color}`"></span>
                        <h3 class="font-display text-sm text-ink" x-text="col.label"></h3>
                        <span class="ms-auto text-xs font-medium text-muted bg-brand-50 rounded-full px-2 py-0.5"
                              x-text="colCount(col.key)"></span>
                    </div>

                    {{-- cards --}}
                    <div class="kb-scroll p-3 flex flex-col gap-3 overflow-y-auto min-h-24">

                        {{-- SPRINT cards --}}
                        <template x-if="!openKey">
                            <template x-for="s in sprintsIn(col.key)" :key="s.key">
                                <article
                                    draggable="true"
                                    @dragstart="startDrag(s.key, null, $event)"
                                    @dragend="dragging = null; overCol = null"
                                    @click="open(s.key)"
                                    :class="isDragging(s.key, null) ? 'kb-card--drag' : ''"
                                    class="kb-card rounded-xl bg-white border border-brand-100 p-3.5 shadow-sm">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span class="w-6 h-6 rounded-lg bg-brand text-white text-xs font-bold grid place-items-center" x-text="s.number"></span>
                                        <h4 class="font-medium text-sm text-ink truncate flex-1" x-text="s.title"></h4>
                                    </div>
                                    <p class="text-[11px] text-muted font-mono mb-3 truncate" x-text="'sprints/' + s.file"></p>

                                    {{-- progress: done (solid) + in-progress (striped, live) --}}
                                    <div class="flex items-center gap-2">
                                        <div class="flex-1 h-1.5 rounded-full bg-brand-50 overflow-hidden flex" dir="ltr">
                                            <div class="h-full transition-all duration-500"
                                                 :style="`width:${s.total ? Math.round((s.done / s.total) * 100) : 0}%;background:${col.color}`"></div>
                                            <div class="h-full transition-all duration-500" x-show="(s.in_progress || 0) > 0"
                                                 :style="`width:${s.total ? Math.round(((s.in_progress || 0) / s.total) * 100) : 0}%;background-image:repeating-linear-gradient(45deg, ${col.color} 0 4px, transparent 4px 8px);opacity:.5`"></div>
                                        </div>
                                        <span class="text-[11px] font-medium text-muted" x-text="s.done + '/' + s.total"></span>
                                    </div>

                                    <div class="mt-2 flex items-center gap-2 flex-wrap" x-show="s.depends_on && s.depends_on.length">
                                        <span class="text-[10px] text-muted">يعتمد على:</span>
                                        <template x-for="d in (s.depends_on || [])" :key="d">
                                            <span class="text-[10px] bg-brand-100 text-brand-dark rounded px-1.5 py-0.5" x-text="'S' + d"></span>
                                        </template>
                                    </div>
                                </article>
                            </template>
                        </template>

                        {{-- PLAN cards (inside an open sprint) --}}
                        <template x-if="openKey">
                            <template x-for="p in plansIn(col.key)" :key="p.path">
                                <article
                                    draggable="true"
                                    @dragstart="startDrag(openKey, p.path, $event)"
                                    @dragend="dragging = null; overCol = null"
                                    :class="isDragging(openKey, p.path) ? 'kb-card--drag' : ''"
                                    class="kb-card rounded-xl bg-white border border-brand-100 p-3 shadow-sm"
                                    :title="p.path">
                                    <div class="flex items-start gap-2">
                                        <i class="ti text-base mt-0.5" :class="p.icon"></i>
                                        <div class="min-w-0 flex-1">
                                            <h4 class="font-medium text-sm text-ink truncate" x-text="p.name"></h4>
                                            <p class="text-[11px] text-muted font-mono truncate" x-text="p.group"></p>
                                        </div>
                                    </div>
                                </article>
                            </template>
                        </template>

                        {{-- per-column empty hint --}}
                        <p class="text-center text-[11px] text-muted/60 py-4" x-show="colCount(col.key) === 0">
                            اسحب كارت هنا
                        </p>
                    </div>
                </section>
            </template>
        </main>
    </template>
</div>
@endsection