<?php

namespace App\Components\PensionCase;

use App\Models\PensionCase\PensionCase;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Cache;
use Livewire\Attributes\Lazy;
use Livewire\Component;

#[Lazy]
class View extends Component {
    public PensionCase $pensionCase;
    public string $activeTab = 'overview';

    protected string $cacheKey;

    public function mount(PensionCase $pensionCase): void {
        $this->pensionCase = $pensionCase;
        $this->cacheKey = $this->makeCacheKey();
        $this->activeTab = Cache::remember(
            $this->cacheKey,
            now()->addMonth(),
            fn() => 'overview'
        );
    }

    protected function makeCacheKey(): string {
        return sprintf(
            'pension_case_tabs.user_%s.case_%s',
            Auth::id() ?? 'guest',
            $this->pensionCase->getKey()
        );
    }

    public function setTab(string $tab): void {
        $this->activeTab = $tab;
        Cache::put($this->cacheKey ?? $this->makeCacheKey(), $tab, now()->addMonth());
    }

    public function render() {
        return view('components.pension-case.view');
    }

    public function placeholder() {
        return <<<HTML
<div>
    <div class="row">
        <div class="col-12 col-md-3">
            <div class="card shadow-sm p-3">
                <div class="placeholder-glow mb-2"><span class="placeholder col-8"></span></div>
                <div class="placeholder-glow"><span class="placeholder col-6"></span></div>
            </div>
        </div>
        <div class="col-12 col-md-6">
            <div class="card shadow-sm p-4">
                <div class="placeholder-glow mb-4">
                    <span class="placeholder col-3 me-2"></span>
                    <span class="placeholder col-3 me-2"></span>
                    <span class="placeholder col-3"></span>
                </div>
                <div class="placeholder-glow mb-2"><span class="placeholder col-12"></span></div>
                <div class="placeholder-glow mb-2"><span class="placeholder col-10"></span></div>
            </div>
        </div>
        <div class="col-12 col-md-3">
            <div class="card shadow-sm p-3">
                <div class="placeholder-glow mb-2"><span class="placeholder col-12"></span></div>
                <div class="placeholder-glow"><span class="placeholder col-8"></span></div>
            </div>
        </div>
    </div>
</div>
HTML;
    }
}
