@php
    $githubRepo = $get('github_repo') ?? ($getRecord ? $getRecord()->github_repo : null);
@endphp

<div
    x-data="{
        githubRepoUrl: @js($githubRepo),
        commitDays: [],
        activeDayIndex: 0,
        loading: false,
        errorMsg: '',
        isEmpty: false,

        init() {
            this.loadCommits();
        },

        escapeHtml(text) {
            if (!text) return '';
            const div = document.createElement('div');
            div.appendChild(document.createTextNode(text));
            return div.innerHTML;
        },

        loadCommits() {
            if (!this.githubRepoUrl) {
                this.isEmpty = true;
                return;
            }

            this.loading = true;
            this.errorMsg = '';
            this.isEmpty = false;
            this.commitDays = [];

            let repoClean = this.githubRepoUrl.replace(/https?:\/\/(www\.)?github\.com\//i, '');
            repoClean = repoClean.replace(/\/$/, '');
            const parts = repoClean.split('/');
            if (parts.length < 2) {
                this.loading = false;
                this.errorMsg = 'Github depo URL\'si çözümlenemedi. Geçerli format: https://github.com/kullanici/depo';
                return;
            }
            const owner = parts[0];
            const repo = parts[1].replace(/\.git$/i, '');

            fetch('https://api.github.com/repos/' + owner + '/' + repo + '/commits?per_page=100')
                .then(response => {
                    if (!response.ok) {
                        if (response.status === 404) {
                            throw new Error('Depo bulunamadı veya private (gizli). Deponuzun public (herkese açık) olduğundan emin olun.');
                        } else if (response.status === 403) {
                            throw new Error('GitHub API istek limiti aşıldı. Lütfen daha sonra tekrar deneyin.');
                        } else {
                            throw new Error('GitHub API hatası: ' + response.statusText);
                        }
                    }
                    return response.json();
                })
                .then(commits => {
                    this.loading = false;
                    if (!Array.isArray(commits) || commits.length === 0) {
                        this.isEmpty = true;
                        return;
                    }

                    commits.reverse();

                    const grouped = {};
                    commits.forEach(item => {
                        const dateStr = item.commit.author.date;
                        if (dateStr) {
                            const dateOnly = dateStr.substring(0, 10);
                            if (!grouped[dateOnly]) {
                                grouped[dateOnly] = [];
                            }
                            grouped[dateOnly].push(item);
                        }
                    });

                    const sortedDates = Object.keys(grouped).sort();

                    this.commitDays = sortedDates.map((date, index) => {
                        const dateParts = date.split('-');
                        return {
                            date: date,
                            dayNum: index + 1,
                            formattedDate: dateParts[2] + '.' + dateParts[1] + '.' + dateParts[0],
                            commits: grouped[date].map(c => ({
                                message: c.commit.message,
                                time: new Date(c.commit.author.date).toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' }),
                                sha: c.sha.substring(0, 7),
                                url: c.html_url
                            }))
                        };
                    });

                    if (this.commitDays.length === 0) {
                        this.isEmpty = true;
                        return;
                    }

                    this.activeDayIndex = 0;
                })
                .catch(err => {
                    this.loading = false;
                    this.errorMsg = err.message || 'Bir hata oluştu.';
                });
        },

        get activeDay() {
            return this.commitDays[this.activeDayIndex] || null;
        },

        navigateDay(dir) {
            const newIndex = this.activeDayIndex + dir;
            if (newIndex >= 0 && newIndex < this.commitDays.length) {
                this.activeDayIndex = newIndex;
            }
        },

        selectDay(index) {
            this.activeDayIndex = index;
        }
    }"
    style="margin-top: 1rem; font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;"
>
    <style>
        .jt-day-btn {
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }
        .jt-day-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
        }
        .jt-arrow-btn {
            transition: all 0.2s ease;
        }
        .jt-arrow-btn:hover:not(:disabled) {
            transform: scale(1.08);
            background: #eff6ff !important;
            border-color: #93c5fd !important;
        }
        .jt-arrow-btn:disabled {
            opacity: 0.35;
            cursor: not-allowed;
        }
        .jt-event-card {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .jt-event-card:hover {
            transform: translateY(-2px) translateX(3px);
            box-shadow: 0 12px 24px -8px rgba(59, 130, 246, 0.12);
            border-color: #bfdbfe !important;
            background: #ffffff !important;
        }
        .jt-timeline-dot {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .jt-event-row:hover .jt-timeline-dot {
            transform: scale(1.2);
            background-color: #3b82f6 !important;
            box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.18);
        }
        .jt-event-row:hover .jt-timeline-dot-inner {
            background-color: #ffffff !important;
        }
        .jt-sha-link {
            transition: all 0.25s ease;
        }
        .jt-sha-link:hover {
            background: #3b82f6 !important;
            color: #ffffff !important;
            border-color: #3b82f6 !important;
        }
        .jt-paginator-scroll::-webkit-scrollbar {
            height: 4px;
        }
        .jt-paginator-scroll::-webkit-scrollbar-track {
            background: transparent;
        }
        .jt-paginator-scroll::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 9999px;
        }
        .jt-paginator-scroll {
            scrollbar-width: thin;
            scrollbar-color: #cbd5e1 transparent;
        }
        @keyframes jt-spin {
            to { transform: rotate(360deg); }
        }
        @keyframes jt-fadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .jt-fade-in {
            animation: jt-fadeIn 0.4s ease-out;
        }
    </style>

    {{-- Loader --}}
    <div x-show="loading" x-cloak style="padding: 3rem 0; display: flex; flex-direction: column; align-items: center; justify-content: center;">
        <div style="width: 2.5rem; height: 2.5rem; border: 2px solid #e2e8f0; border-top-color: #3b82f6; border-radius: 50%; animation: jt-spin 0.8s linear infinite; margin-bottom: 0.75rem;"></div>
        <span style="font-size: 0.75rem; color: #94a3b8; font-weight: 600; letter-spacing: 0.025em;">Commit geçmişi yükleniyor...</span>
    </div>

    {{-- Error --}}
    <div x-show="errorMsg" x-cloak x-text="errorMsg" style="padding: 1rem 1.25rem; border-radius: 1rem; background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; font-size: 0.75rem; font-weight: 700;"></div>

    {{-- Empty --}}
    <div x-show="isEmpty && !loading" x-cloak style="padding: 2rem; border-radius: 1.5rem; border: 1px solid #f1f5f9; background: #ffffff; text-align: center; color: #94a3b8; font-style: italic; font-size: 0.875rem;">
        Henüz hiçbir commit verisi bulunamadı veya depo adresi yapılandırılmadı.
    </div>

    {{-- Day Paginator --}}
    <div x-show="commitDays.length > 0" x-cloak style="display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem; background: rgba(255,255,255,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid #e2e8f0; border-radius: 1.5rem; margin-bottom: 1.75rem; user-select: none; box-shadow: 0 1px 3px rgba(0,0,0,0.04);">
        <button type="button" @click="navigateDay(-1)" :disabled="activeDayIndex === 0" class="jt-arrow-btn" style="width: 2.75rem; height: 2.75rem; border-radius: 0.875rem; background: #ffffff; color: #64748b; border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04);">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
        </button>

        <div class="jt-paginator-scroll" style="flex: 1; overflow-x: auto; padding: 0.375rem 0;">
            <div style="display: flex; gap: 0.625rem; justify-content: center; min-width: max-content; padding: 0 0.5rem;">
                <template x-for="(day, index) in commitDays" :key="day.date">
                    <button type="button" @click="selectDay(index)" class="jt-day-btn" :style="index === activeDayIndex
                        ? 'padding: 0.5rem 1.25rem; border-radius: 0.875rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1.5px solid #93c5fd; background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #1d4ed8; font-weight: 800; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);'
                        : 'padding: 0.5rem 1.25rem; border-radius: 0.875rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #e2e8f0; background: #ffffff; color: #64748b; font-weight: 600;'">
                        <span style="font-size: 0.75rem; line-height: 1.2;" x-text="day.dayNum + '. Gün'"></span>
                        <span style="font-size: 0.6rem; margin-top: 0.125rem; opacity: 0.7; font-weight: 500;" x-text="day.formattedDate"></span>
                    </button>
                </template>
            </div>
        </div>

        <button type="button" @click="navigateDay(1)" :disabled="activeDayIndex === commitDays.length - 1" class="jt-arrow-btn" style="width: 2.75rem; height: 2.75rem; border-radius: 0.875rem; background: #ffffff; color: #64748b; border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04);">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
        </button>
    </div>

    {{-- Active Day Card --}}
    <div x-show="activeDay" x-cloak class="jt-fade-in" :key="activeDayIndex" style="background: #ffffff; border: 1px solid #f1f5f9; border-radius: 1.5rem; padding: 1.75rem 2rem; box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.06);">
        {{-- Day Header --}}
        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid #f1f5f9;">
            <div style="display: flex; align-items: center; gap: 0.875rem;">
                <span style="font-size: 0.875rem; font-weight: 800; color: #2563eb; background: linear-gradient(135deg, #eff6ff, #dbeafe); padding: 0.5rem 1.125rem; border-radius: 1rem; box-shadow: 0 1px 3px rgba(37, 99, 235, 0.1);" x-text="activeDay ? activeDay.dayNum + '. Gün' : ''"></span>
                <span style="font-size: 0.8125rem; font-weight: 600; color: #94a3b8; display: flex; align-items: center; gap: 0.375rem;">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: #60a5fa;"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                    <span x-text="activeDay ? activeDay.formattedDate : ''"></span>
                </span>
            </div>
            <span style="font-size: 0.6875rem; font-weight: 700; color: #94a3b8; background: #f8fafc; border: 1px solid #f1f5f9; padding: 0.375rem 0.875rem; border-radius: 0.625rem;" x-text="activeDay ? activeDay.commits.length + ' Commit' : ''"></span>
        </div>

        {{-- Timeline --}}
        <div style="position: relative; padding-left: 2.25rem;">
            {{-- Gradient Timeline Line --}}
            <div style="position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, #3b82f6 0%, #818cf8 40%, #c7d2fe 100%); border-radius: 2px;"></div>

            <div style="display: flex; flex-direction: column; gap: 1.25rem;">
                <template x-for="(commit, ci) in (activeDay ? activeDay.commits : [])" :key="ci">
                    <div class="jt-event-row" style="position: relative;">
                        {{-- Timeline Dot --}}
                        <div class="jt-timeline-dot" style="position: absolute; left: -32px; top: 6px; width: 24px; height: 24px; border-radius: 50%; background: #ffffff; border: 2.5px solid #3b82f6; display: flex; align-items: center; justify-content: center; z-index: 1;">
                            <div class="jt-timeline-dot-inner" style="width: 8px; height: 8px; border-radius: 50%; background: #3b82f6;"></div>
                        </div>
                        {{-- Event Card --}}
                        <div class="jt-event-card" style="padding: 1.125rem 1.25rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.03);">
                            <div style="display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.625rem;">
                                <span style="font-size: 0.75rem; font-weight: 700; color: #94a3b8; display: flex; align-items: center; gap: 0.375rem;">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#60a5fa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                                    <span x-text="commit.time"></span>
                                </span>
                                <a :href="commit.url" target="_blank" class="jt-sha-link" x-text="commit.sha" style="font-size: 0.6875rem; font-family: 'SF Mono', 'Fira Code', monospace; font-weight: 700; color: #2563eb; background: #eff6ff; padding: 0.25rem 0.75rem; border-radius: 0.5rem; border: 1px solid #bfdbfe; text-decoration: none;"></a>
                            </div>
                            <p style="font-size: 0.8125rem; font-weight: 600; color: #334155; line-height: 1.6; white-space: pre-line; margin: 0;" x-text="commit.message"></p>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</div>