@extends('layouts.app')

@section('content')
<div style="max-width: 1320px; margin: 0 auto; padding: 24px; font-family: Arial, sans-serif;">

    <h1 style="font-size: 34px; margin-bottom: 18px;">System Dashboard</h1>

    @if (session('status'))
        <div style="margin-bottom:16px; padding:12px 14px; border:1px solid #000; background:#FFB81C;">{{ session('status') }}</div>
    @endif

    <div style="display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-bottom:24px;">
        <div style="border:1px solid #000; background:#FFB81C; padding:16px;">
            <div style="font-size:13px; margin-bottom:6px;">Installed Cartridges</div>
            <div style="font-size:32px; font-weight:700;">{{ $installedCartridges->count() }}</div>
        </div>

        <div style="border:1px solid #000; background:#fff; padding:16px;">
            <div style="font-size:13px; margin-bottom:6px;">Approaching Service</div>
            <div style="font-size:32px; font-weight:700;">{{ $approachingCartridges->count() }}</div>
        </div>

        <div style="border:1px solid #000; background:#fff; padding:16px;">
            <div style="font-size:13px; margin-bottom:6px;">Due for Service</div>
            <div style="font-size:32px; font-weight:700;">{{ $dueCartridges->count() }}</div>
        </div>

        <div style="border:1px solid #000; background:#000; color:#fff; padding:16px;">
            <div style="font-size:13px; margin-bottom:6px;">Overdue</div>
            <div style="font-size:32px; font-weight:700;">{{ $overdueCartridges->count() }}</div>
        </div>
    </div>

    <div style="display:grid; grid-template-columns:1.1fr 0.9fr; gap:24px; margin-bottom:24px; align-items:start;">
        <div style="border:1px solid #000; background:#fff; padding:16px;">
            <h2 style="margin-top:0; font-size:22px;">Cartridge Health</h2>

            <table style="width:100%; border-collapse:collapse;">
                <thead>
                    <tr>
                        <th style="text-align:left; border-bottom:1px solid #ccc; padding:8px 6px;">Cartridge</th>
                        <th style="text-align:left; border-bottom:1px solid #ccc; padding:8px 6px;">Tonearm</th>
                        <th style="text-align:left; border-bottom:1px solid #ccc; padding:8px 6px;">Since Service</th>
                        <th style="text-align:left; border-bottom:1px solid #ccc; padding:8px 6px;">Remaining</th>
                        <th style="text-align:left; border-bottom:1px solid #ccc; padding:8px 6px;">State</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($cartridges as $cartridge)
                        @php
                            $usage = $usageSummaries[$cartridge->id] ?? null;
                            $state = $usage['service_state'] ?? 'Unknown';
                        @endphp
                        <tr>
                            <td style="padding:8px 6px; border-bottom:1px solid #eee;">
                                <a href="{{ route('cartridges.edit', $cartridge) }}" style="color:#000;">
                                    {{ $cartridge->name }}
                                </a>
                            </td>
                            <td style="padding:8px 6px; border-bottom:1px solid #eee;">
                                {{ $cartridge->tonearm?->name ?? '—' }}
                            </td>
                            <td style="padding:8px 6px; border-bottom:1px solid #eee;">
                                {{ $usage['hours_since_service'] ?? '0.0' }}
                            </td>
                            <td style="padding:8px 6px; border-bottom:1px solid #eee;">
                                {{ $usage['remaining_hours'] ?? '1000.0' }}
                            </td>
                            <td style="padding:8px 6px; border-bottom:1px solid #eee;">
                                <span style="display:inline-block; padding:4px 10px; border:1px solid #000; border-radius:999px; background: {{ $state === 'Optimal' ? '#fff' : ($state === 'Approaching Service' ? '#FFB81C' : ($state === 'Due for Service' ? '#fff' : '#000')) }}; color: {{ $state === 'Overdue' ? '#fff' : '#000' }};">
                                    {{ $state }}
                                </span>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" style="padding:8px 6px;">No cartridges found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div style="display:grid; gap:24px;">

            <div style="border:1px solid #000; background:#fff; padding:16px;">
                <h2 style="margin-top:0; font-size:22px;">Record Restore</h2>

                <div style="display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin-bottom:16px;">
                    <div style="border:1px solid #000; background:#FFB81C; padding:12px;">
                        <div style="font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px;">On Hand</div>
                        <div style="font-size:28px; font-weight:700;">{{ number_format($recordRestoreSummary['quantity_on_hand_ml'], 1) }} ml</div>
                        <div style="font-size:13px; margin-top:4px;">{{ number_format($recordRestoreSummary['bottles_on_hand'], 2) }} bottles equivalent</div>
                    </div>
                    <div style="border:1px solid #000; background:{{ $recordRestoreSummary['restock_alert'] ? '#000' : '#fff' }}; color:{{ $recordRestoreSummary['restock_alert'] ? '#fff' : '#000' }}; padding:12px;">
                        <div style="font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px;">Status</div>
                        <div style="font-size:22px; font-weight:700;">{{ $recordRestoreSummary['status'] }}</div>
                        <div style="font-size:13px; margin-top:4px;">Oldest stock age: {{ $recordRestoreSummary['oldest_stock_age_days'] ?? '—' }} days</div>
                    </div>
                </div>

                @if ($recordRestoreSummary['restock_alert'])
                    <div style="margin-bottom:16px; border:1px solid #000; background:#FFB81C; padding:12px 14px;">
                        <strong>Restock Needed.</strong> Only {{ number_format($recordRestoreSummary['quantity_on_hand_ml'], 1) }} ml of Record Restore remaining.
                        <div style="margin-top:10px;">
                            <a href="{{ $recordRestoreSummary['reorder_url'] }}" target="_blank" rel="noopener noreferrer" style="display:inline-flex; align-items:center; border:1px solid #000; border-radius:999px; padding:10px 16px; text-decoration:none; color:#000; background:#fff; font-weight:600;">Reorder Now</a>
                        </div>
                    </div>
                @endif

                <div style="font-size:13px; color:#333; margin-bottom:14px;">
                    Last clean consumed: {{ $recordRestoreSummary['last_clean_consumed_ml'] !== null ? number_format($recordRestoreSummary['last_clean_consumed_ml'], 1) . ' ml' : '—' }} · Restock alert threshold: {{ number_format($recordRestoreSummary['restock_threshold_ml'], 1) }} ml
                </div>

                <div style="border:1px solid #000; padding:14px; margin-bottom:16px; background:#fff;">
                    <h3 style="margin:0 0 12px 0; font-size:16px;">Add Stock</h3>
                    <form method="POST" action="{{ route('record-restore.stock.store') }}">
                        @csrf
                        <div style="display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-bottom:12px;">
                            <div>
                                <label style="display:block; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px;">Acquisition Date</label>
                                <input type="date" name="acquired_on" value="{{ old('acquired_on', now()->format('Y-m-d')) }}" style="width:100%; min-height:44px; padding:10px 12px; border:1px solid #000;" required>
                            </div>
                            <div>
                                <label style="display:block; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px;">Quantity</label>
                                <select name="quantity_bottles" style="width:100%; min-height:44px; padding:10px 12px; border:1px solid #000;" required>
                                    @foreach([1,2,3,4] as $bottles)
                                        <option value="{{ $bottles }}" {{ (string) old('quantity_bottles', '1') === (string) $bottles ? 'selected' : '' }}>{{ $bottles }} bottle{{ $bottles > 1 ? 's' : '' }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label style="display:block; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px;">Notes</label>
                                <input type="text" name="notes" value="{{ old('notes') }}" style="width:100%; min-height:44px; padding:10px 12px; border:1px solid #000;">
                            </div>
                        </div>
                        <button type="submit" style="display:inline-flex; align-items:center; border:1px solid #000; border-radius:999px; padding:10px 16px; background:#000; color:#fff; font-weight:600; cursor:pointer;">Add Record Restore Stock</button>
                    </form>
                </div>

                <div>
                    <h3 style="margin:0 0 12px 0; font-size:16px;">Recent Stock Entries</h3>
                    @forelse ($recentRecordRestoreStock as $stock)
                        <div style="padding:10px 0; border-bottom:1px solid #eee;">
                            <div><strong>{{ $stock->acquired_on?->format('Y-m-d') }}</strong> · {{ $stock->quantity_bottles }} bottle{{ $stock->quantity_bottles > 1 ? 's' : '' }}</div>
                            <div style="font-size:13px; color:#333;">{{ number_format((float) $stock->quantity_ml_remaining, 1) }} ml remaining of {{ number_format((float) $stock->quantity_ml_initial, 1) }} ml · Age {{ $stock->age_days ?? '—' }} days</div>
                            @if($stock->notes)
                                <div style="font-size:13px; color:#333;">{{ $stock->notes }}</div>
                            @endif
                        </div>
                    @empty
                        <div>No Record Restore stock has been entered yet.</div>
                    @endforelse
                </div>
            </div>

            <div style="border:1px solid #000; background:#fff; padding:16px;">
                <h2 style="margin-top:0; font-size:22px;">Recent Service</h2>

                @forelse ($recentServiceEvents as $event)
                    <div style="padding:10px 0; border-bottom:1px solid #eee;">
                        <div><strong>{{ $event->cartridge?->name ?? 'Unknown Cartridge' }}</strong></div>
                        <div>{{ optional($event->serviced_on)->format('Y-m-d') }} — {{ $event->service_type }}</div>
                        <div style="font-size:13px; color:#333;">
                            {{ $event->stylus_shape ?? 'No stylus shape noted' }}
                            @if($event->cantilever_replaced)
                                · Cantilever replaced
                            @endif
                        </div>
                    </div>
                @empty
                    <div>No recent service events.</div>
                @endforelse
            </div>

            <div style="border:1px solid #000; background:#fff; padding:16px;">
                <h2 style="margin-top:0; font-size:22px;">Recent Plays</h2>

                @forelse ($recentPlayLogs as $playLog)
                    <div style="padding:10px 0; border-bottom:1px solid #eee;">
                        <div><strong>{{ $playLog->album?->title ?? 'Unknown Album' }}</strong></div>
                        <div>
                            {{ optional($playLog->played_at)->format('Y-m-d') ?? 'No date' }}
                            · Side {{ $playLog->side_number ?? '—' }}
                        </div>
                        <div style="font-size:13px; color:#333;">
                            Cartridge: {{ $playLog->cartridge?->name ?? '—' }}
                        </div>
                    </div>
                @empty
                    <div>No recent play activity.</div>
                @endforelse
            </div>
        </div>
    </div>

    <div style="border:1px solid #000; background:#fff; padding:16px;">
        <h2 style="margin-top:0; font-size:22px;">Deck Configuration</h2>

        <table style="width:100%; border-collapse:collapse;">
            <thead>
                <tr>
                    <th style="text-align:left; border-bottom:1px solid #ccc; padding:8px 6px;">Deck</th>
                    <th style="text-align:left; border-bottom:1px solid #ccc; padding:8px 6px;">Type</th>
                    <th style="text-align:left; border-bottom:1px solid #ccc; padding:8px 6px;">Tonearm 1</th>
                    <th style="text-align:left; border-bottom:1px solid #ccc; padding:8px 6px;">Cartridge 1</th>
                    <th style="text-align:left; border-bottom:1px solid #ccc; padding:8px 6px;">Tonearm 2</th>
                    <th style="text-align:left; border-bottom:1px solid #ccc; padding:8px 6px;">Cartridge 2</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($turntables as $turntable)
                    @php
                        $tonearm1 = $turntable->tonearms->get(0);
                        $tonearm2 = $turntable->tonearms->get(1);
                    @endphp
                    <tr>
                        <td style="padding:8px 6px; border-bottom:1px solid #eee;">
                            <a href="{{ route('turntables.edit', $turntable) }}" style="color:#000;">
                                {{ $turntable->name }}
                            </a>
                        </td>
                        <td style="padding:8px 6px; border-bottom:1px solid #eee;">{{ $turntable->deck_type ?? 'Turntable' }}</td>
                        <td style="padding:8px 6px; border-bottom:1px solid #eee;">{{ $tonearm1?->name ?? '—' }}</td>
                        <td style="padding:8px 6px; border-bottom:1px solid #eee;">{{ $tonearm1?->cartridge?->name ?? '—' }}</td>
                        <td style="padding:8px 6px; border-bottom:1px solid #eee;">{{ $turntable->supports_multiple_tonearms ? ($tonearm2?->name ?? '—') : '—' }}</td>
                        <td style="padding:8px 6px; border-bottom:1px solid #eee;">{{ $turntable->supports_multiple_tonearms ? ($tonearm2?->cartridge?->name ?? '—') : '—' }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" style="padding:8px 6px;">No decks configured.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

</div>
@endsection