@extends('layouts.app')

@section('content')
@php
    $licenseStatus = app(\App\Services\LicenseStatusService::class)->getStatus();
@endphp

<div class="sca-page">
    <div class="sca-shell sca-page-stack dashboard-blueprint">
        <style>
            .dashboard-blueprint {
                gap: 26px;
            }

            .dashboard-blueprint .dashboard-title {
                font-size: clamp(2.35rem, 4vw, 3.55rem);
                line-height: .95;
                margin: 0;
            }

            .dashboard-blueprint .dashboard-metrics {
                display: grid;
                gap: 16px;
            }

            .dashboard-blueprint .dashboard-metric-card {
                min-height: 168px;
                padding: 16px 18px;
                box-shadow: none;
            }

            .dashboard-blueprint .dashboard-metric-card .sca-stat-label {
                letter-spacing: 0;
                text-transform: none;
                font-size: 1rem;
                color: inherit;
            }

            .dashboard-blueprint .dashboard-metric-card .sca-stat-value {
                font-size: clamp(2.8rem, 4vw, 3.3rem);
                margin-top: 6px;
            }

            .dashboard-blueprint .dashboard-metric-card .sca-stat-note {
                margin-top: auto;
                font-size: .95rem;
            }

            .dashboard-blueprint .dashboard-main,
            .dashboard-blueprint .dashboard-record-grid,
            .dashboard-blueprint .dashboard-two-up,
            .dashboard-blueprint .dashboard-form-grid,
            .dashboard-blueprint .dashboard-deck-table {
                display: grid;
                gap: 22px;
            }

            .dashboard-blueprint .dashboard-card {
                padding: 16px 18px;
                box-shadow: none;
            }

            .dashboard-blueprint .dashboard-card-yellow {
                background: var(--sca-yellow);
            }

            .dashboard-blueprint .dashboard-section-title {
                font-size: clamp(2rem, 3.2vw, 2.4rem);
                margin: 0;
            }

            .dashboard-blueprint .dashboard-rule {
                margin-top: 10px;
                margin-bottom: 18px;
                height: 5px;
            }

            .dashboard-blueprint .dashboard-section-copy {
                color: rgba(0, 0, 0, 0.82);
                font-size: .98rem;
                line-height: 1.5;
                max-width: 58ch;
            }

            .dashboard-blueprint .dashboard-table {
                width: 100%;
                border-collapse: collapse;
            }

            .dashboard-blueprint .dashboard-table th,
            .dashboard-blueprint .dashboard-table td {
                padding: 10px 6px;
                border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                text-align: left;
                vertical-align: top;
            }

            .dashboard-blueprint .dashboard-table th {
                font-size: .95rem;
                font-weight: 700;
            }

            .dashboard-blueprint .dashboard-table td {
                font-size: .98rem;
            }

            .dashboard-blueprint .dashboard-pill {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-height: 30px;
                padding: 6px 14px;
                border: 1px solid var(--sca-black);
                border-radius: 999px;
                font-weight: 700;
                background: var(--sca-white);
            }

            .dashboard-blueprint .dashboard-list {
                display: grid;
            }

            .dashboard-blueprint .dashboard-list-item {
                padding: 12px 0;
                border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                display: grid;
                gap: 2px;
            }

            .dashboard-blueprint .dashboard-list-item:last-child {
                border-bottom: 0;
            }

            .dashboard-blueprint .dashboard-list-title {
                font-size: 1rem;
                font-weight: 700;
            }

            .dashboard-blueprint .dashboard-list-title-link {
                text-decoration: none;
            }

            .dashboard-blueprint .dashboard-list-meta,
            .dashboard-blueprint .dashboard-list-note {
                font-size: .95rem;
                color: rgba(0, 0, 0, 0.82);
            }

            .dashboard-blueprint .dashboard-record-grid {
                gap: 12px;
            }

            .dashboard-blueprint .dashboard-record-stat {
                min-height: 78px;
                padding: 12px;
                border-radius: 14px;
                background: rgba(255,255,255,0.95);
                box-shadow: none;
            }

            .dashboard-blueprint .dashboard-record-stat .sca-stat-label {
                letter-spacing: 0;
                text-transform: none;
                font-size: .94rem;
                color: inherit;
            }

            .dashboard-blueprint .dashboard-record-stat .sca-stat-value {
                font-size: 2.15rem;
                margin-top: 6px;
            }

            .dashboard-blueprint .dashboard-status-banner {
                padding: 12px 14px;
                border: 1px solid var(--sca-black);
                border-radius: 12px;
                background: rgba(255,255,255,0.96);
                font-weight: 700;
            }

            .dashboard-blueprint .dashboard-field-group {
                display: grid;
                gap: 6px;
            }

            .dashboard-blueprint .dashboard-field-group label {
                font-size: .76rem;
                font-weight: 700;
                letter-spacing: .12em;
                text-transform: uppercase;
            }

            .dashboard-blueprint .dashboard-form-grid {
                gap: 14px;
            }

            .dashboard-blueprint .dashboard-stock-entry {
                padding: 12px;
                border: 1px solid var(--sca-black);
                border-radius: 16px;
                background: rgba(255,255,255,0.95);
                display: grid;
                gap: 10px;
            }

            .dashboard-blueprint .dashboard-stock-entry-head {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                align-items: baseline;
            }

            .dashboard-blueprint .dashboard-stock-entry-date {
                font-weight: 700;
                font-size: 1rem;
            }

            .dashboard-blueprint .dashboard-stock-entry-note {
                font-size: .95rem;
                color: rgba(0,0,0,.82);
            }

            .dashboard-blueprint .dashboard-stock-adjust {
                display: grid;
                gap: 10px;
                align-items: end;
            }

            .dashboard-blueprint .dashboard-empty {
                color: rgba(0, 0, 0, 0.74);
                font-size: .97rem;
            }

            .dashboard-blueprint .dashboard-license-card {
                display: grid;
                gap: 10px;
                align-content: start;
            }

            .dashboard-blueprint .dashboard-license-tier {
                font-size: clamp(2rem, 3vw, 2.7rem);
                line-height: 1;
                font-weight: 700;
            }

            .dashboard-blueprint .dashboard-deck-table {
                overflow-x: auto;
            }

            .dashboard-blueprint .dashboard-deck-table table {
                min-width: 760px;
            }

            @media (min-width: 820px) {
                .dashboard-blueprint .dashboard-metrics {
                    grid-template-columns: repeat(5, minmax(0, 1fr));
                }

                .dashboard-blueprint .dashboard-main {
                    grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.97fr);
                    align-items: start;
                }

                .dashboard-blueprint .dashboard-record-grid {
                    grid-template-columns: repeat(4, minmax(0, 1fr));
                }

                .dashboard-blueprint .dashboard-two-up {
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                }

                .dashboard-blueprint .dashboard-form-grid {
                    grid-template-columns: minmax(0, 1fr) 160px;
                }

                .dashboard-blueprint .dashboard-stock-adjust {
                    grid-template-columns: minmax(0, 1fr) auto;
                }
            }
        </style>

        <h1 class="sca-page-title dashboard-title">System Dashboard</h1>

        @if (session('status'))
            <div class="sca-flash">{{ session('status') }}</div>
        @endif

        @if ($errors->any())
            <div class="sca-alert">
                {{ $errors->first() }}
            </div>
        @endif

        <section class="dashboard-metrics">
            <article class="sca-stat-card sca-stat-card-accent dashboard-metric-card">
                <div class="sca-stat-label">Installed Cartridges</div>
                <div class="sca-stat-value">{{ $installedCartridges->count() }}</div>
            </article>

            <article class="sca-stat-card sca-stat-card-accent dashboard-metric-card">
                <div class="sca-stat-label">Approaching Service</div>
                <div class="sca-stat-value">{{ $approachingCartridges->count() }}</div>
            </article>

            <article class="sca-stat-card dashboard-metric-card">
                <div class="sca-stat-label">Due for Service</div>
                <div class="sca-stat-value">{{ $dueCartridges->count() }}</div>
            </article>

            <article class="sca-stat-card sca-stat-card-black dashboard-metric-card">
                <div class="sca-stat-label">Overdue</div>
                <div class="sca-stat-value">{{ $overdueCartridges->count() }}</div>
            </article>

            <article class="sca-stat-card dashboard-metric-card dashboard-license-card">
                <div class="sca-stat-label">License</div>
                <div class="dashboard-license-tier">{{ $licenseStatus['tier'] }}</div>
                <div class="sca-stat-note">{{ $licenseStatus['is_activated'] ? 'Activated license' : 'Core' }}</div>
                @if(!$licenseStatus['is_activated'])
                    <button
                        type="button"
                        class="sca-btn sca-btn-primary"
                        onclick="window.dispatchEvent(new CustomEvent('open-license-modal'))"
                        style="width:max-content;"
                    >
                        Upgrade to Pro
                    </button>
                @endif
            </article>
        </section>

        <section class="dashboard-main">
            <div class="sca-stack-lg">
                <article class="sca-card dashboard-card">
                    <h2 class="sca-section-title dashboard-section-title">Cartridge Health</h2>
                    <div class="sca-rule dashboard-rule"></div>

                    <div class="dashboard-deck-table">
                        <table class="dashboard-table">
                            <thead>
                                <tr>
                                    <th>Cartridge</th>
                                    <th>Tonearm</th>
                                    <th>Since Service</th>
                                    <th>Remaining</th>
                                    <th>State</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($cartridges as $cartridge)
                                    @php
                                        $usage = $usageSummaries[$cartridge->id] ?? null;
                                        $state = $usage['service_state'] ?? 'Unknown';
                                    @endphp
                                    <tr>
                                        <td><a href="{{ route('cartridges.edit', $cartridge) }}" class="dashboard-list-title-link"><strong>{{ $cartridge->name }}</strong></a></td>
                                        <td>{{ $cartridge->tonearm?->name ?? '—' }}</td>
                                        <td>{{ rtrim(rtrim(number_format((float) ($usage['hours_since_service'] ?? 0), 1), '0'), '.') }}</td>
                                        <td>{{ rtrim(rtrim(number_format((float) ($usage['remaining_hours'] ?? 1000), 1), '0'), '.') }}</td>
                                        <td>
                                            <span class="dashboard-pill" style="background: {{ $state === 'Overdue' ? '#000' : '#FFF' }}; color: {{ $state === 'Overdue' ? '#FFF' : '#000' }};">
                                                {{ $state === 'Healthy' ? 'Optimal' : $state }}
                                            </span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="dashboard-empty">No cartridges found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </article>

                <article class="sca-card dashboard-card dashboard-card-yellow">
                    <div>
                        <h2 class="sca-section-title dashboard-section-title">Record Restore</h2>
                        <div class="dashboard-section-copy">Monitor stock on hand, age, and restock status.</div>
                    </div>

                    <div class="dashboard-record-grid">
                        <div class="sca-card dashboard-record-stat">
                            <div class="sca-stat-label">On Hand</div>
                            <div class="sca-stat-value">{{ number_format((float) ($recordRestoreSummary['quantity_on_hand_ml'] ?? 0), 1) }} ml</div>
                        </div>
                        <div class="sca-card dashboard-record-stat">
                            <div class="sca-stat-label">Bottles Eq.</div>
                            <div class="sca-stat-value">{{ number_format((float) ($recordRestoreSummary['bottles_equivalent'] ?? 0), 2) }}</div>
                        </div>
                        <div class="sca-card dashboard-record-stat">
                            <div class="sca-stat-label">Oldest Stock Age</div>
                            <div class="sca-stat-value">{{ $recordRestoreSummary['oldest_stock_age_days'] ?? 0 }}</div>
                        </div>
                        <div class="sca-card dashboard-record-stat">
                            <div class="sca-stat-label">Status</div>
                            <div class="sca-stat-value" style="font-size: 1.2rem; line-height: 1.15; margin-top: 14px;">{{ $recordRestoreSummary['status_label'] ?? 'Healthy' }}</div>
                        </div>
                        <div class="sca-card dashboard-record-stat">
                            <div class="sca-stat-label">Avg. ml / Clean</div>
                            <div class="sca-stat-value">{{ number_format((float) ($recordRestoreDashboard['average_ml_per_clean'] ?? 0), 1) }}</div>
                        </div>
                        <div class="sca-card dashboard-record-stat">
                            <div class="sca-stat-label">Cleans Remaining</div>
                            <div class="sca-stat-value">{{ number_format((float) ($recordRestoreDashboard['cleans_remaining'] ?? 0), 1) }}</div>
                        </div>
                        <div class="sca-card dashboard-record-stat">
                            <div class="sca-stat-label">Days Remaining</div>
                            <div class="sca-stat-value">{{ $recordRestoreDashboard['days_remaining'] ?? '—' }}</div>
                        </div>
                    </div>

                    <div class="dashboard-status-banner">
                        @if(($recordRestoreSummary['show_restock_alert'] ?? false))
                            Stock is low. Reorder recommended.
                        @else
                            Stock level healthy.
                        @endif
                    </div>

                    <form method="POST" action="{{ route('record-restore-stock.store') }}" class="sca-stack-md">
                        @csrf
                        <div class="dashboard-two-up">
                            <div class="dashboard-field-group">
                                <label for="acquired_on">Acquisition Date</label>
                                <input id="acquired_on" type="date" name="acquired_on" value="{{ old('acquired_on', now()->toDateString()) }}" required>
                            </div>
                            <div class="dashboard-field-group">
                                <label for="quantity_bottles">Quantity</label>
                                <select id="quantity_bottles" name="quantity_bottles" required>
                                    @foreach(range(1, 4) as $quantity)
                                        <option value="{{ $quantity }}" @selected((int) old('quantity_bottles', 1) === $quantity)>{{ $quantity }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="dashboard-field-group">
                            <label for="notes">Notes</label>
                            <textarea id="notes" name="notes" placeholder="Optional notes about this stock entry">{{ old('notes') }}</textarea>
                        </div>

                        <div class="sca-inline-actions" style="justify-content:flex-end;">
                            <button type="submit" class="sca-btn sca-btn-primary">Add Stock</button>
                        </div>
                    </form>

                    <div class="sca-stack-md">
                        <div>
                            <h3 class="sca-section-title" style="font-size:1.15rem;">Recent Stock Entries</h3>
                        </div>

                        @forelse ($recentRecordRestoreStocks as $stock)
                            <div class="dashboard-stock-entry">
                                <div class="dashboard-stock-entry-head">
                                    <div class="dashboard-stock-entry-date">{{ optional($stock->acquired_on)->format('Y-m-d') }}</div>
                                    <div>{{ $stock->quantity_bottles }} {{ \Illuminate\Support\Str::plural('bottle', (int) $stock->quantity_bottles) }}</div>
                                </div>
                                <div class="dashboard-stock-entry-note">{{ number_format((float) $stock->quantity_ml_remaining, 1) }} ml remaining@if($stock->notes) · {{ $stock->notes }}@endif</div>

                                <form method="POST" action="{{ route('record-restore-stock.adjust-ml', $stock) }}" class="dashboard-stock-adjust">
                                    @csrf
                                    @method('PATCH')
                                    <div class="dashboard-field-group">
                                        <label for="adjust_ml_{{ $stock->id }}">Adjust Stock (+/- ml)</label>
                                        <input id="adjust_ml_{{ $stock->id }}" type="number" step="0.1" name="adjust_ml" placeholder="e.g. -7.0 or 12.5" required>
                                        <div class="dashboard-stock-entry-note">Use negative to reduce stock, positive to increase it.</div>
                                    </div>
                                    <button type="submit" class="sca-btn sca-btn-secondary">Adjust Stock</button>
                                </form>
                            </div>
                        @empty
                            <div class="dashboard-empty">No stock entries yet.</div>
                        @endforelse
                    </div>
                </article>
            </div>

            <div class="sca-stack-lg">
                <article class="sca-card dashboard-card">
                    <h2 class="sca-section-title dashboard-section-title">Recent Service</h2>
                    <div class="sca-rule dashboard-rule"></div>

                    <div class="dashboard-list">
                        @forelse ($recentServiceEvents as $event)
                            <div class="dashboard-list-item">
                                <div class="dashboard-list-title">{{ $event->cartridge?->name ?? 'Cartridge service event' }}</div>
                                <div class="dashboard-list-meta">{{ optional($event->serviced_on)->format('Y-m-d') ?? 'No date recorded' }}</div>
                                @if($event->notes)
                                    <div class="dashboard-list-note">{{ $event->notes }}</div>
                                @endif
                            </div>
                        @empty
                            <div class="dashboard-empty">No recent service events.</div>
                        @endforelse
                    </div>
                </article>

                <article class="sca-card dashboard-card">
                    <div class="sca-section-head" style="margin-bottom:0;">
                        <div style="width:100%;">
                            <h2 class="sca-section-title dashboard-section-title">Recent Plays</h2>
                            <div class="sca-rule dashboard-rule" style="max-width:64%;"></div>
                        </div>
                        <a href="{{ route('play-logs.index') }}" class="sca-btn">View All Plays</a>
                    </div>

                    <div class="dashboard-list">
                        @forelse ($recentPlayLogs as $play)
                            <div class="dashboard-list-item">
                                <div class="dashboard-list-title">{{ $play->album?->title ?? 'Untitled album' }}</div>
                                <div class="dashboard-list-meta">{{ optional($play->played_at)->format('Y-m-d') ?? 'No date' }} · Side {{ $play->side_played }}</div>
                                <div class="dashboard-list-note">Cartridge: {{ $play->cartridge?->name ?? '—' }}</div>
                            </div>
                        @empty
                            <div class="dashboard-empty">No recent plays.</div>
                        @endforelse
                    </div>
                </article>
            </div>
        </section>

        <article class="sca-card dashboard-card">
            <h2 class="sca-section-title dashboard-section-title">Deck Configuration</h2>
            <div class="sca-rule dashboard-rule"></div>

            <div class="dashboard-deck-table">
                <table class="dashboard-table">
                    <thead>
                        <tr>
                            <th>Deck</th>
                            <th>Type</th>
                            <th>Tonearm 1</th>
                            <th>Cartridge 1</th>
                            <th>Tonearm 2</th>
                            <th>Cartridge 2</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($turntables as $turntable)
                            @php
                                $tonearms = $turntable->tonearms->values();
                                $firstTonearm = $tonearms->get(0);
                                $secondTonearm = $tonearms->get(1);
                            @endphp
                            <tr>
                                <td><strong>{{ $turntable->name }}</strong></td>
                                <td>{{ $turntable->type ?? 'Turntable' }}</td>
                                <td>{{ $firstTonearm?->name ?? '—' }}</td>
                                <td>{{ $firstTonearm?->cartridge?->name ?? '—' }}</td>
                                <td>{{ $secondTonearm?->name ?? '—' }}</td>
                                <td>{{ $secondTonearm?->cartridge?->name ?? '—' }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="dashboard-empty">No turntables configured.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </article>

        <div x-data="{ openLicenseModal: {{ $errors->has('activation_key') ? 'true' : 'false' }} }" @open-license-modal.window="openLicenseModal = true">
            <div x-show="openLicenseModal" x-transition style="display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:999;">
                <div style="min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;">
                    <div @click.outside="openLicenseModal = false" class="sca-card" style="width:100%; max-width:460px; box-shadow:none;">
                        <div class="sca-stack-md">
                            <div class="sca-section-head" style="margin-bottom:0;">
                                <div>
                                    <h3 class="sca-section-title" style="font-size:1.45rem;">Activate Pro</h3>
                                    <div class="sca-section-copy">Enter your activation key to unlock Pro features.</div>
                                </div>

                                <button type="button" @click="openLicenseModal = false" class="sca-btn" style="min-height:34px; width:34px; padding:0;">×</button>
                            </div>

                            <form method="POST" action="{{ route('license.activate') }}" class="sca-stack-md">
                                @csrf
                                <div>
                                    <label for="activation_key" class="sca-field-label">Activation Key</label>
                                    <input
                                        id="activation_key"
                                        type="text"
                                        name="activation_key"
                                        value="{{ old('activation_key') }}"
                                        placeholder="SCA-RT-2026-ABCD-1234"
                                        required
                                    >
                                </div>

                                <div class="sca-inline-actions" style="justify-content:flex-end;">
                                    <button type="button" @click="openLicenseModal = false" class="sca-btn">Cancel</button>
                                    <button type="submit" class="sca-btn sca-btn-primary">Activate</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection