@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')

<style>
    .dash-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
    .dash-eyebrow { font:600 12px/1 var(--font-sans); letter-spacing:.08em; text-transform:uppercase; color:var(--green-600); margin-bottom:8px; }
    .dash-h1 { font-family:var(--font-display); font-weight:700; font-size:clamp(24px,6vw,30px); letter-spacing:-.01em; color:var(--text-primary); margin:0; }

    .dash-sectitle { margin:0 0 14px; font:600 14px/1 var(--font-sans); letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .dash-section { margin-bottom:26px; }

    /* Wide layout: alerts become a right-hand column next to current ferments.
       Narrow/TV-narrow keeps the stacked order (alerts above ferments). */
    .dash-grid { display:grid; gap:0 26px; }
    .dash-grid__aside { order:0; }
    .dash-grid__main  { order:1; }
    @media (min-width:1200px) {
        .dash-grid.has-aside { grid-template-columns:1fr 340px; align-items:start; }
        .dash-grid.has-aside .dash-grid__main  { order:1; }
        .dash-grid.has-aside .dash-grid__aside { order:2; }
        .dash-grid.has-aside .dash-grid__aside .dash-section { margin-bottom:0; }
    }

    /* Tip of the day */
    .dash-tip { display:flex; gap:14px; align-items:flex-start; background:linear-gradient(120deg,var(--lime-100),var(--surface-card)); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:16px 18px; }
    .dash-tip-ic { font-size:1.4rem; flex-shrink:0; line-height:1.2; }
    .dash-tip-label { font:700 11px/1 var(--font-sans); letter-spacing:.08em; text-transform:uppercase; color:var(--green-600); }
    .dash-tip-text { margin-top:5px; font-size:.95rem; line-height:1.55; color:var(--text-primary); }

    /* Alerts */
    .dash-alert { display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--border-subtle); }
    .dash-alert:last-child { border-bottom:none; }
    .dash-alert-ic { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex-shrink:0; background:var(--gold-100); color:var(--gold-700); }

    /* Fermentando ahora — round ring bubbles */
    .dash-bubbles { display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:18px 14px; }
    .dash-bubble { display:flex; flex-direction:column; align-items:center; text-decoration:none; }
    .dash-bubble-ring { position:relative; width:112px; height:112px; border-radius:50%;
        background:conic-gradient(var(--ring) calc(var(--pct)*1%), var(--paper-3) 0); display:grid; place-items:center;
        transition:transform .14s var(--ease-out); }
    .dash-bubble:hover .dash-bubble-ring { transform:translateY(-3px); }
    .dash-bubble-ring::before { content:''; position:absolute; inset:7px; background:var(--surface-card); border-radius:50%; box-shadow:var(--shadow-xs); }
    .dash-bubble-face { position:relative; width:78px; text-align:center; }
    .dash-bubble-name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
        font:700 .78rem/1.15 var(--font-sans); color:var(--text-primary); }
    .dash-bubble-pct { margin-top:3px; font:700 .72rem var(--font-data); color:var(--ring); }
    .dash-bubble-alert { position:absolute; top:2px; right:6px; width:24px; height:24px; border-radius:50%;
        background:var(--rust-500); color:#fff; display:grid; place-items:center; font-size:.7rem; box-shadow:0 0 0 3px var(--surface-card); }
    .dash-bubble-cat { margin-top:8px; font-size:.72rem; color:var(--text-muted); text-align:center; max-width:118px; }

    /* Try something new */
    .dash-try { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
    .dash-try-cover { width:88px; height:66px; border-radius:14px; flex-shrink:0; background-size:cover; background-position:center; }
</style>

@php $first = Str::of(auth()->user()->name)->before(' ') ?: auth()->user()->name; @endphp

{{-- 0 · Welcome banner (first visit only) --}}
@unless(auth()->user()->onboarding_tour_completed_at)
    <div class="dash-welcome" id="dashWelcome">
        <div>
            <div class="dash-welcome__eyebrow">🫧 Te damos la bienvenida</div>
            <h2 class="dash-welcome__h">¡Hola, {{ $first }}! Bienvenido a Fermenty</h2>
            <p class="dash-welcome__p">Este es tu espacio para acompañar cada fermento hasta su punto. ¿Te enseñamos lo básico en 30 segundos?</p>
        </div>
        <div class="dash-welcome__cta">
            <button type="button" class="btn btn-fermenty-orange" onclick="window.fermentyTour && window.fermentyTour.start()">
                <i class="fa-solid fa-wand-magic-sparkles me-1"></i> Empezar el tour
            </button>
            <button type="button" class="btn btn-link dash-welcome__later" data-welcome-dismiss>Ahora no</button>
        </div>
    </div>
    <style>
        .dash-welcome { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
            background:linear-gradient(120deg,var(--lime-100,#eaf3d8),var(--surface-card,#fff));
            border:1px solid var(--border-subtle,#e3e7da); border-radius:var(--radius-lg,16px); padding:18px 20px; margin-bottom:22px; }
        .dash-welcome__eyebrow { font:600 12px/1 var(--font-sans,sans-serif); letter-spacing:.06em; text-transform:uppercase; color:var(--green-600,#4B7A50); }
        .dash-welcome__h { font-family:var(--font-display,'Comfortaa',sans-serif); font-size:clamp(19px,4vw,23px); color:var(--text-primary,#1B241D); margin:6px 0 4px; }
        .dash-welcome__p { font-size:14px; color:var(--text-muted,#56625A); margin:0; max-width:48ch; }
        .dash-welcome__cta { display:flex; align-items:center; gap:6px; flex-shrink:0; }
        .dash-welcome__later { color:var(--text-muted,#56625A); text-decoration:none; }
    </style>
    <script>
        document.querySelectorAll('[data-welcome-dismiss]').forEach(function (b) {
            b.addEventListener('click', function () {
                var tok = document.querySelector('meta[name="csrf-token"]');
                if (tok) fetch('{{ route('onboarding.tour-done') }}', { method: 'POST', headers: { 'X-CSRF-TOKEN': tok.content, 'Accept': 'application/json' } }).catch(function () {});
                var el = document.getElementById('dashWelcome'); if (el) el.remove();
            });
        });
    </script>
@endunless

{{-- 1 · Welcome --}}
<div class="dash-head">
    <div>
        <div class="dash-eyebrow">{{ \Carbon\Carbon::now()->translatedFormat('l · d M') }}</div>
        @if(auth()->user()->onboarding_tour_completed_at)
            <h1 class="dash-h1">Hola, {{ $first }}</h1>
        @else
            <h1 class="dash-h1">Tu panel</h1>
        @endif
    </div>
    <a href="{{ route('batches.create') }}" class="btn btn-fermenty-primary"><i class="fa-solid fa-plus me-1"></i> Nuevo lote</a>
</div>

{{-- 2 · Tip of the day --}}
@if($tip)
<div class="dash-section">
    <div class="dash-tip">
        <span class="dash-tip-ic">💡</span>
        <div>
            <div class="dash-tip-label">Consejo del día</div>
            <div class="dash-tip-text">{{ $tip }}</div>
        </div>
    </div>
</div>
@endif

{{-- 3 + 4 · Alerts (right column on wide) + Fermentando ahora (main) --}}
<div class="dash-grid {{ $alerts->isNotEmpty() ? 'has-aside' : '' }}">

@if($alerts->isNotEmpty())
<aside class="dash-grid__aside">
<div class="dash-section">
    <h2 class="dash-sectitle">
        <span><i class="fa-solid fa-triangle-exclamation me-1" style="color:var(--gold-600)"></i> Necesita atención</span>
        <a href="{{ route('notificaciones.index') }}" class="btn btn-fermenty-outline btn-sm">Ver todas</a>
    </h2>
    <div class="fermenty-card">
        @foreach($alerts as $notif)
            <a href="{{ $notif->batch ? route('batches.show', $notif->batch) : route('notificaciones.index') }}" class="dash-alert text-decoration-none">
                <span class="dash-alert-ic"><i class="fa-solid {{ $notif->type === 'alert' ? 'fa-bell' : 'fa-lightbulb' }}"></i></span>
                <div class="flex-1" style="min-width:0;">
                    <div class="text-truncate" style="font:600 14px var(--font-sans);color:var(--text-primary);">{{ $notif->title }}</div>
                    <div class="text-muted text-truncate" style="font-size:12px;">{{ $notif->batch?->name }}</div>
                </div>
                <span class="numeric text-muted" style="font-size:12px;flex-shrink:0;">{{ $notif->scheduled_at->diffForHumans(null, true) }}</span>
            </a>
        @endforeach
    </div>
</div>
</aside>
@endif

<div class="dash-grid__main">
<div class="dash-section">
    <h2 class="dash-sectitle">
        <span>Fermentando ahora</span>
        @if($activeCount > 6)
            <a href="{{ route('batches.index') }}" class="btn btn-fermenty-outline btn-sm">Ver todos ({{ $activeCount }})</a>
        @endif
    </h2>

    @if($activeBatches->isEmpty())
        <div class="fermenty-card">
            <div class="fermenty-empty py-3">
                <div class="empty-icon">🫧</div>
                <div class="empty-title">Sin fermentos activos</div>
                <div class="empty-text">Empieza tu primer lote y síguelo hasta su punto.</div>
                <a href="{{ route('batches.create') }}" class="btn btn-fermenty-primary mt-3"><i class="fa-solid fa-plus me-1"></i> Crea tu fermento</a>
            </div>
        </div>
    @else
        <div class="dash-bubbles">
            @foreach($activeBatches->take(6) as $batch)
                @php
                    $pct      = $batch->overallProgressPercentage();
                    $ring     = $batch->guide->category?->color ?? '#3A7A22';
                    $hasAlert = in_array($batch->id, $alertBatchIds, true);
                @endphp
                <a class="dash-bubble" href="{{ route('batches.show', $batch) }}" title="{{ $batch->name }}">
                    <div class="dash-bubble-ring" style="--pct:{{ $pct }};--ring:{{ $ring }};">
                        <div class="dash-bubble-face">
                            <div class="dash-bubble-name">{{ $batch->name }}</div>
                            <div class="dash-bubble-pct">{{ $pct }}%</div>
                        </div>
                        @if($hasAlert)
                            <span class="dash-bubble-alert"><i class="fa-solid fa-bell"></i></span>
                        @endif
                    </div>
                    <div class="dash-bubble-cat text-truncate">{{ $batch->guide->category?->name ?? $batch->guide->name }}</div>
                </a>
            @endforeach
        </div>
    @endif
</div>
</div>{{-- /.dash-grid__main --}}
</div>{{-- /.dash-grid --}}

{{-- 5 · Try something new --}}
@if($suggestion)
<div class="dash-section">
    <h2 class="dash-sectitle"><span>Prueba algo nuevo</span></h2>
    <div class="fermenty-card dash-try">
        <div class="dash-try-cover" style="background-image:url('{{ $suggestion->cover_image_url }}');"></div>
        <div class="flex-1" style="min-width:150px;">
            <div class="batch-card-name">{{ $suggestion->name }}</div>
            <div class="text-muted" style="font-size:.8rem;">@if($suggestion->category){{ $suggestion->category->name }}@endif</div>
        </div>
        <a href="{{ route('fermentos.show', $suggestion->slug) }}" class="btn btn-fermenty-primary btn-sm ms-auto">Descubrir</a>
    </div>
</div>
@endif

@endsection