@extends('admin.layouts.app')

@php
    use App\Support\AdminOptions;

    $editing = $article->exists;
    $json = fn (?array $value) => $value ? json_encode($value, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) : '';
    $formatButtons = [
        ['label' => 'Paragraf', 'icon' => 'paragraph', 'wrap' => "<p>|</p>"],
        ['label' => 'Judul H2', 'icon' => 'type-h2', 'wrap' => "<h2>|</h2>"],
        ['label' => 'Judul H3', 'icon' => 'type-h3', 'wrap' => "<h3>|</h3>"],
        ['label' => 'Tebal', 'icon' => 'type-bold', 'wrap' => "<strong>|</strong>"],
        ['label' => 'Miring', 'icon' => 'type-italic', 'wrap' => "<em>|</em>"],
        ['label' => 'Daftar', 'icon' => 'list-ul', 'wrap' => "<ul>\n  <li>|</li>\n</ul>"],
        ['label' => 'Daftar bernomor', 'icon' => 'list-ol', 'wrap' => "<ol>\n  <li>|</li>\n</ol>"],
        ['label' => 'Kutipan / Callout', 'icon' => 'quote', 'wrap' => "<div class=\"callout\"><b>Catatan:</b> |</div>"],
        ['label' => 'Link', 'icon' => 'link-45deg', 'wrap' => '<a href="https://">|</a>'],
    ];
@endphp

@section('title', $editing ? 'Ubah Artikel' : 'Tulis Artikel')

@section('breadcrumb')
  <li class="breadcrumb-item"><a href="{{ route('admin.articles.index') }}">Artikel</a></li>
  <li class="breadcrumb-item active" aria-current="page">{{ $editing ? 'Ubah' : 'Tulis' }}</li>
@endsection

@section('actions')
  @if ($editing)
    @if ($article->is_published)
      <a href="{{ url('/artikel/'.$article->slug) }}" target="_blank" rel="noopener" class="btn btn-outline-secondary"><i class="bi bi-box-arrow-up-right"></i> Lihat</a>
    @endif
    <form method="POST" action="{{ route('admin.articles.destroy', $article) }}" data-confirm="Hapus artikel ini?">
      @csrf
      @method('DELETE')
      <button type="submit" class="btn btn-outline-danger"><i class="bi bi-trash"></i> Hapus</button>
    </form>
  @endif
  <button type="submit" form="article-form" class="btn btn-primary"><i class="bi bi-check2-circle"></i> Simpan</button>
@endsection

@section('content')
  <form id="article-form" method="POST" enctype="multipart/form-data" novalidate
        action="{{ $editing ? route('admin.articles.update', $article) : route('admin.articles.store') }}">
    @csrf
    @if ($editing) @method('PUT') @endif

    <div class="row g-4">
      <div class="col-lg-8">
        {{-- 1. Konten Utama --}}
        <x-admin.card title="Konten Utama Artikel">
          <div class="row g-3">
            <div class="col-12"><x-admin.input name="title" label="Judul artikel" :value="$article->title" required maxlength="255" data-slug-source="#f-slug" /></div>
            <div class="col-12"><x-admin.input name="slug" label="Slug URL" :value="$article->slug" help="Dipakai di URL /artikel/slug. Otomatis dari judul." /></div>
            <div class="col-12"><x-admin.textarea name="excerpt" label="Ringkasan / Excerpt" :value="$article->excerpt" rows="3" help="Ditampilkan pada card list artikel dan metadata SEO." /></div>
            <div class="col-12">
              <x-admin.textarea name="content" label="Isi Lengkap Artikel (Mendukung Bab HTML / H2)" :value="$article->content" rows="18" required mono help="Gunakan tag &lt;h2&gt; untuk judul bab agar Daftar Isi (TOC) otomatis terbuat di sidebar.">
                <x-slot:toolbar>
                  <div class="btn-toolbar admin-editor-toolbar" role="toolbar" aria-label="Format teks">
                    @foreach ($formatButtons as $button)
                      <button type="button" class="btn btn-sm btn-outline-secondary" data-wrap="{{ $button['wrap'] }}" data-target="#f-content" title="{{ $button['label'] }}" aria-label="{{ $button['label'] }}">
                        <i class="bi bi-{{ $button['icon'] }}"></i>
                      </button>
                    @endforeach
                  </div>
                </x-slot:toolbar>
              </x-admin.textarea>
            </div>
          </div>
        </x-admin.card>

        {{-- 2. Target Hero Profile Card (Opsional) --}}
        <x-admin.card title="Profil Hero Target (Opsional)" subtitle="Aktifkan card profil hero jika artikel ini merupakan panduan spesifik hero / counter pick." class="mt-4">
          <div class="row g-3">
            <div class="col-12">
              <x-admin.select name="target_hero_id" label="Hero Target" :options="$heroes" :value="$article->target_hero_id" placeholder="— Bukan Panduan Hero Khusus (Kosongkan) —" help="Jika dipilih, card statistik hero (Tier, Winrate, Banrate, tombol simulasi) otomatis muncul." />
            </div>
            <div class="col-md-6">
              <x-admin.input name="threat_level" label="Tingkat Ancaman" :value="$article->threat_level" placeholder="Contoh: Ekstrem (5/5) atau Tinggi (4/5)" />
            </div>
            <div class="col-md-6">
              <x-admin.input name="difficulty_rating" label="Tingkat Kesulitan" :value="$article->difficulty_rating" placeholder="Contoh: 5/5 atau 4/5" />
            </div>
            <div class="col-12">
              <x-admin.textarea name="hero_summary" label="Ringkasan Taktis Hero Target" :value="$article->hero_summary" rows="3" placeholder="Ringkasan singkat peran hero target, kekuatan utamanya, dan titik kelemahannya..." />
            </div>
          </div>
        </x-admin.card>

        {{-- 3. Quick Counter Cheat Sheet (JSON) --}}
        <x-admin.card title="Quick Counter Cheat Sheet (3 Kolom)" subtitle="Box rangkuman instan: 3 Hero Counter, 3 Item Defense Kunci, dan Battle Spell/Trik Early." class="mt-4">
          <div class="row g-3">
            <div class="col-12">
              <x-admin.textarea name="quick_counters" label="Data Cheat Sheet (JSON)" :value="old('quick_counters', $json($article->quick_counters))" rows="12" mono help="Format JSON dengan kunci 'heroes', 'items', dan 'tricks'. Kosongkan jika tidak memakai cheat sheet." />
            </div>
          </div>
        </x-admin.card>

        {{-- 4. Do's & Don'ts Comparison --}}
        <x-admin.card title="Do's & Don'ts Comparison Grid" subtitle="Tabel visual hijau (Hal Wajib Dilakukan) vs merah (Kesalahan Fatal)." class="mt-4">
          <div class="row g-3">
            <div class="col-12">
              <x-admin.textarea name="dos_and_donts" label="Data Do's & Don'ts (JSON)" :value="old('dos_and_donts', $json($article->dos_and_donts))" rows="10" mono help="Format JSON: { 'dos': ['...'], 'donts': ['...'] }. Kosongkan jika tidak ingin menampilkan box komparasi." />
            </div>
          </div>
        </x-admin.card>

        {{-- 5. Rekomendasi 6 Item Build --}}
        <x-admin.card title="Rekomendasi 6 Item Build Situasional" subtitle="Susunan 6 slot item counter / build rekomendasi beserta urutan cerdas." class="mt-4">
          <div class="row g-3">
            <div class="col-12">
              <x-admin.textarea name="build_recommendation" label="Data 6 Item Build (JSON)" :value="old('build_recommendation', $json($article->build_recommendation))" rows="10" mono help="Format JSON: { 'title': '...', 'subtitle': '...', 'items': [{'name': '...', 'tag': '...', 'image': '...'}], 'note': '...' }." />
            </div>
          </div>
        </x-admin.card>
      </div>

      <div class="col-lg-4">
        {{-- Publikasi & Metadata --}}
        <x-admin.card title="Publikasi & Kategori">
          <div class="row g-3">
            <div class="col-12"><x-admin.select name="category" label="Kategori" :options="AdminOptions::ARTICLE_CATEGORIES" :value="$article->category" required /></div>
            <div class="col-12"><x-admin.input name="tag" label="Tag" :value="$article->tag" placeholder="assassin, fanny, build, counter" help="Pisahkan dengan koma jika lebih dari satu." /></div>
            <div class="col-12"><x-admin.image name="thumbnail" label="Thumbnail Utama" :current="$article->thumbnail_url" help="JPG, PNG, atau WEBP, maks 5 MB." /></div>
            <div class="col-12"><x-admin.switch name="is_published" label="Publikasikan Artikel" :checked="$article->is_published" /></div>
            <div class="col-12"><x-admin.switch name="is_featured" label="⭐ Jadikan Artikel Unggulan (Hero Banner di /artikel)" :checked="$article->is_featured" /></div>
            <div class="col-12"><x-admin.input name="badge_text" label="Teks Badge Unggulan" :value="$article->badge_text" placeholder="Contoh: ⭐ PANDUAN UNGGULAN S35/S36" /></div>
            <div class="col-12"><x-admin.input name="published_at" label="Waktu Publikasi" type="datetime-local" :value="$article->published_at?->format('Y-m-d\TH:i')" /></div>
            <div class="col-12"><x-admin.select name="author_id" label="Penulis" :options="$authors" :value="$article->author_id" placeholder="—" /></div>
          </div>
        </x-admin.card>

        {{-- Statistik & Voting --}}
        <x-admin.card title="Statistik & Interaksi" class="mt-4">
          <div class="row g-3">
            <div class="col-12">
              <x-admin.input name="views_count" label="Total Dilihat (Views)" type="number" :value="$article->views_count ?? 0" />
            </div>
            <div class="col-12">
              <x-admin.input name="helpful_count" label="Voting 👍 Sangat Membantu" type="number" :value="$article->helpful_count ?? 428" />
            </div>
            <div class="col-12">
              <x-admin.input name="feedback_req_count" label="Voting 💡 Butuh Tambahan Tips" type="number" :value="$article->feedback_req_count ?? 19" />
            </div>
          </div>
        </x-admin.card>
      </div>
    </div>

    <x-admin.form-actions :cancel="route('admin.articles.index')" />
  </form>
@endsection