@extends('layouts.app')

@section('title', __('batches.meta_title_index'))

@push('head')
<style>
/* Fallback local para mantener layout del feed aunque el bundle CSS este en cache */
.batch-activity-card .batch-activity-row {
    display: grid !important;
    grid-template-columns: 78px 1fr 72px;
    align-items: start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 8px;
    text-decoration: none;
    border: 1px solid transparent;
}

.batch-activity-card .batch-activity-row .batch-activity-row-type {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 22px;
    font-size: 11px;
    border-radius: 999px;
    font-weight: 600;
    padding: 0 8px;
}

.batch-activity-card .batch-activity-row .batch-activity-row-main {
    min-width: 0;
}

.batch-activity-card .batch-activity-row .batch-activity-row-title {
    display: block;
    white-space: normal !important;
    line-height: 1.35;
    word-break: break-word;
    color: #1b1b1b;
    font-size: 13px;
    font-weight: 600;
}

.batch-activity-card .batch-activity-row .batch-activity-row-time {
    display: block;
    font-size: 11px;
    color: #7a7a7a;
    text-align: right;
    white-space: nowrap;
    margin-top: 2px;
}

.batch-activity-card .batch-activity-row.batch-activity-row-event {
    background: #ecf9f0 !important;
    border-color: #d4eedc;
}

.batch-activity-card .batch-activity-row.batch-activity-row-log {
    background: #fff1e7 !important;
    border-color: #ffd6ba;
}

.batch-activity-card .batch-activity-row.batch-activity-row-notification {
    background: #eef4ff !important;
    border-color: #d6e2ff;
}

.batch-activity-card .batch-activity-row.batch-activity-row-event .batch-activity-row-type {
    background: #dff2e6;
    color: #2f7b4a;
}

.batch-activity-card .batch-activity-row.batch-activity-row-log .batch-activity-row-type {
    background: #ffe3d1;
    color: #b5541e;
}

.batch-activity-card .batch-activity-row.batch-activity-row-notification .batch-activity-row-type {
    background: #dfe9ff;
    color: #3559ad;
}

.batch-activity-table-head {
    display: grid;
    grid-template-columns: 78px 1fr 72px;
    gap: 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a8a8a;
    padding: 0 8px 8px;
}

.batch-activity-table-head span:last-child {
    text-align: right;
}

/* ── Batch cards: progress ring + key info ─────────── */
.batch-ring-card {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 16px;
    background: var(--surface-card, #fff);
    border: 1px solid var(--border-subtle, #e7e7e2);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,.04));
    transition: transform .14s ease, box-shadow .14s ease;
}
.batch-ring-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm, 0 4px 12px rgba(0,0,0,.08)); }
.batch-ring-card-completed { background: color-mix(in srgb, var(--green-600, #3A7A22) 5%, #fff); }
.batch-ring-card-paused,
.batch-ring-card-failed { opacity: .82; }

.brc-ring {
    position: relative;
    width: 64px; height: 64px;
    flex-shrink: 0;
    border-radius: 50%;
    background: conic-gradient(var(--ring) calc(var(--pct) * 1%), var(--paper-3, #ececE6) 0);
    display: grid; place-items: center;
}
.brc-ring::before {
    content: ''; position: absolute; inset: 5px;
    background: var(--surface-card, #fff); border-radius: 50%;
}
.brc-ring-face { position: relative; }
.brc-ring-pct { font: 700 .82rem var(--font-data, monospace); color: var(--ring); }
.brc-ring-pct small { font-size: .62em; opacity: .8; }
.brc-alert {
    position: absolute; top: -2px; right: -2px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--rust-500, #d4541e); color: #fff;
    display: grid; place-items: center; font-size: .62rem;
    box-shadow: 0 0 0 3px var(--surface-card, #fff);
}

.brc-body { min-width: 0; flex: 1; }
.brc-top { display: flex; align-items: center; gap: 8px; }
.brc-name {
    flex: 1; min-width: 0;
    font: 700 .95rem/1.25 var(--font-sans);
    color: var(--text-primary, #1b1b1b);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.brc-type { margin-top: 2px; font-size: .78rem; color: var(--text-muted, #7a7a7a); }
.brc-dates {
    display: flex; flex-wrap: wrap; gap: 6px 14px;
    margin-top: 8px;
    font: 500 .74rem var(--font-data, var(--font-sans));
    color: var(--text-muted, #7a7a7a);
}
.brc-date { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.brc-date i { opacity: .65; font-size: .82em; }
.brc-rating { color: var(--gold-600, #b5841e); }
</style>
@endpush

@section('content')

<div class="d-flex justify-content-between align-items-start mb-4 flex-wrap gap-2">
    <div>
        <div class="page-title">{{ __('batches.index.title') }}</div>
        <p class="page-subtitle mb-0">{{ __('batches.index.subtitle') }}</p>
    </div>
    <a href="{{ route('batches.create') }}" class="btn btn-fermenty-orange">
        {{ __('batches.index.new_btn') }}
    </a>
</div>

{{-- Filtros de estado --}}
<div class="batch-filters d-flex gap-2 flex-wrap mb-4">
    @foreach(['active' => 'Activos', 'paused' => 'Pausados', 'completed' => 'Completados', 'draft' => 'Borradores'] as $filter => $label)
        <a href="{{ request()->fullUrlWithQuery(['status' => $filter]) }}"
           class="batch-filter-btn {{ ($currentStatus ?? request('status', 'active')) === $filter ? 'active' : '' }}">
            {{ $label }}
        </a>
    @endforeach
</div>

@if($batches->isEmpty())
    <div class="fermenty-card">
        <div class="fermenty-empty">
            <div class="empty-icon">🫙</div>
            <div class="empty-title">{{ __('batches.index.empty_title') }}</div>
            <div class="empty-text">{{ __('batches.index.empty_text') }}</div>
            <a href="{{ route('batches.create') }}" class="btn btn-fermenty-primary mt-3">
                {{ __('batches.index.new_btn') }}
            </a>
        </div>
    </div>
@else
    <div class="row g-4 batch-index-layout">
        <div class="col-12 col-xl-8">
            <div class="row g-3">
                @foreach($batches as $batch)
                    @php
                        $pct = $batch->overallProgressPercentage();
                        $ring     = $batch->guide->category?->color ?? '#3A7A22';
                        $hasAlert = in_array($batch->id, $alertBatchIds, true);
                    @endphp
                    <div class="col-12 col-md-6 col-xxl-4">
                        <a href="{{ route('batches.show', $batch) }}" class="text-decoration-none">
                            <div class="batch-ring-card batch-ring-card-{{ $batch->status }}">

                                <div class="brc-ring" style="--pct:{{ $pct }};--ring:{{ $ring }};">
                                    <div class="brc-ring-face">
                                        <span class="brc-ring-pct numeric">{{ $pct }}<small>%</small></span>
                                    </div>
                                    @if($hasAlert)
                                        <span class="brc-alert" title="Necesita atención"><i class="fa-solid fa-bell"></i></span>
                                    @endif
                                </div>

                                <div class="brc-body">
                                    <div class="brc-top">
                                        <span class="brc-name">{{ $batch->name }}</span>
                                        <span class="fermenty-badge badge-{{ $batch->status }}">
                                            {{ __('batches.status.' . $batch->status) }}
                                        </span>
                                    </div>
                                    {{-- Con la receta base: en una terminada es lo primero que se pregunta («¿cuál era?»). --}}
                                    <div class="brc-type">{{ $batch->guide->name }}@if($batch->recipe && $batch->recipe->name !== $batch->guide->name) <span style="opacity:.75;">· {{ $batch->recipe->name }}</span>@endif</div>

                                    <div class="brc-dates">
                                        <span class="brc-date">
                                            <i class="fa-regular fa-circle-play"></i>
                                            {{ $batch->start_date?->format('d/m/Y') ?? '—' }}
                                        </span>
                                        <span class="brc-date">
                                            <i class="fa-regular fa-flag"></i>
                                            @if($batch->status === 'completed')
                                                {{ $batch->actual_end_date?->format('d/m/Y') ?? '—' }}
                                            @else
                                                {{ $batch->expected_end_date?->format('d/m/Y') ?? '—' }}
                                            @endif
                                        </span>
                                        @if($batch->flavorResult && $batch->flavorResult->rating)
                                            <span class="brc-date brc-rating" title="{{ $batch->flavorResult->rating }}/5">
                                                @for($i = 1; $i <= 5; $i++)<span style="opacity:{{ $i <= $batch->flavorResult->rating ? '1' : '.25' }}">★</span>@endfor
                                            </span>
                                        @endif
                                    </div>
                                </div>

                            </div>
                        </a>
                    </div>
                @endforeach
            </div>

            {{-- Paginación --}}
            @if($batches->hasPages())
                <div class="d-flex justify-content-center mt-4">
                    {{ $batches->links() }}
                </div>
            @endif
        </div>

        <aside class="col-12 col-xl-4 d-none d-xl-block">
            <div class="fermenty-card batch-activity-card">
                <div class="card-title mb-1">{{ __('batches.index.activity_title') }}</div>
                <div class="batch-card-type mb-3">{{ __('batches.index.activity_subtitle') }}</div>

                <!--
                <div class="batch-activity-legend mb-3">
                    <span class="batch-activity-legend-item">
                        <span class="batch-activity-legend-dot log"></span>{{ __('batches.index.activity_kind_log') }}
                    </span>
                    <span class="batch-activity-legend-item">
                        <span class="batch-activity-legend-dot event"></span>{{ __('batches.index.activity_kind_event') }}
                    </span>
                    <span class="batch-activity-legend-item">
                        <span class="batch-activity-legend-dot notification"></span>{{ __('batches.index.activity_kind_notification') }}
                    </span>
                </div>
                -->
                <div class="batch-activity-table-head">
                    <span>{{ __('batches.index.activity_col_type') }}</span>
                    <span>{{ __('batches.index.activity_col_title') }}</span>
                    <span>{{ __('batches.index.activity_col_date') }}</span>
                </div>

                @forelse($activityFeed as $index => $item)
                    @php
                        $targetUrl = '#';
                        if ($item['batch_id']) {
                            $targetUrl = ($item['kind'] === 'log' && $item['log_id'])
                                ? route('batches.logs.show', ['batch' => $item['batch_id'], 'log' => $item['log_id']])
                                : route('batches.show', $item['batch_id']);
                        }
                    @endphp
                    <a href="{{ $targetUrl }}"
                       class="batch-activity-row batch-activity-row-{{ $item['kind'] }} {{ $index >= 10 ? 'd-none batch-activity-extra' : '' }}">
                        <span class="batch-activity-row-type">{{ __('batches.index.activity_kind_' . $item['kind']) }}</span>
                        <span class="batch-activity-row-main">
                            <u class="mini" style="font-size: 0.7rem;">{{ $item['batch_name'] ?: __('batches.index.title') }}</u>
                            <span class="batch-activity-row-title">{{ \Illuminate\Support\Str::limit($item['headline'] . ($item['description'] ? ': ' . $item['description'] : ''), 82) }}</span>
                        </span>
                        <span class="batch-activity-row-time numeric">{{ $item['occurred_at']->format('d/m H:i') }}</span>
                    </a>
                @empty
                    <div class="fermenty-empty py-2">
                        <div class="empty-text">{{ __('batches.index.activity_empty') }}</div>
                    </div>
                @endforelse

                @if($activityFeed->count() > 10)
                    <button type="button"
                            class="btn btn-fermenty-outline btn-sm mt-3 w-100"
                            id="toggle-activity-feed"
                            data-more-label="{{ __('batches.index.activity_view_more') }}"
                            data-less-label="{{ __('batches.index.activity_view_less') }}"
                            data-expanded="false">
                        {{ __('batches.index.activity_view_more') }}
                    </button>
                @endif
            </div>
        </aside>
    </div>
@endif

@endsection

@push('scripts')
<script>
(() => {
    const toggleButton = document.getElementById('toggle-activity-feed');
    if (!toggleButton) return;

    toggleButton.addEventListener('click', () => {
        const expanded = toggleButton.dataset.expanded === 'true';
        document.querySelectorAll('.batch-activity-extra').forEach((item) => {
            item.classList.toggle('d-none', expanded);
        });

        toggleButton.dataset.expanded = expanded ? 'false' : 'true';
        toggleButton.textContent = expanded
            ? toggleButton.dataset.moreLabel
            : toggleButton.dataset.lessLabel;
    });
})();
</script>
@endpush