@extends('admin.layouts.app')

@php
    use App\Support\AdminOptions;

    $editing = $news->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 / Quote', 'icon' => 'quote', 'wrap' => "<blockquote>|</blockquote>"],
        ['label' => 'Link', 'icon' => 'link-45deg', 'wrap' => '<a href="https://">|</a>'],
    ];
@endphp

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

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

@section('actions')
  @if ($editing)
    @if ($news->is_published)
      <a href="{{ url('/berita/'.$news->slug) }}" target="_blank" rel="noopener" class="btn btn-outline-secondary"><i class="bi bi-box-arrow-up-right"></i> Lihat di Web</a>
    @endif
    <form method="POST" action="{{ route('admin.news.destroy', $news) }}" data-confirm="Hapus berita 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="news-form" class="btn btn-primary"><i class="bi bi-check2-circle"></i> Simpan Berita</button>
@endsection

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

    <div class="row g-4">
      <div class="col-lg-8">
        {{-- Pilihan Template Berita --}}
        <div class="card admin-card mb-4 border-primary">
          <div class="card-header bg-primary-subtle d-flex align-items-center justify-content-between">
            <div class="fw-bold text-primary-emphasis">
              <i class="bi bi-layout-text-window-reverse me-1"></i> Format &amp; Template Tampilan Berita
            </div>
            <button type="button" id="btn-load-match-sample" class="btn btn-sm btn-outline-primary">
              <i class="bi bi-magic me-1"></i> Isi Contoh Rekap Grand Final MPL
            </button>
          </div>
          <div class="card-body">
            <x-admin.select name="template" label="Pilih Template Berita" :options="AdminOptions::NEWS_TEMPLATES" :value="$news->template" required help="Pilih jenis layout berita yang ingin ditampilkan pada halaman web." id="select-news-template" />
          </div>
        </div>

        {{-- Konten Utama --}}
        <x-admin.card title="Konten Berita">
          <div class="row g-3">
            <div class="col-12"><x-admin.input name="title" label="Judul Berita" :value="$news->title" required maxlength="255" data-slug-source="#f-slug" /></div>
            <div class="col-12"><x-admin.input name="slug" label="Slug URL" :value="$news->slug" help="Dipakai di URL /berita/slug. Otomatis dibuat dari judul." /></div>
            <div class="col-12"><x-admin.textarea name="excerpt" label="Ringkasan Berita (Excerpt)" :value="$news->excerpt" rows="3" help="Ditampilkan pada headline magazine, kartu katalog berita, dan meta preview." /></div>
            <div class="col-12">
              <x-admin.textarea name="content" label="Isi Narasi / Berita Lengkap (Mendukung HTML &amp; H2)" :value="$news->content" rows="16" mono help="Gunakan tag &lt;h2&gt; untuk membagi bab berita.">
                <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>

        {{-- Section Khusus Template 1: Rekap Match & Scoreboard Turnamen --}}
        <div id="section-template-match" class="mt-4">
          <x-admin.card title="Detail Match &amp; Scoreboard (Khusus Template 1)">
            <div class="alert alert-info py-2 small mb-3">
              <i class="bi bi-info-circle me-1"></i> Bagian ini aktif untuk <b>Template 1: Rekap Turnamen &amp; Match</b>. Menampilkan widget scoreboard interaktif, rekapitulasi game 1-7, kartu roster tim, dan spotlight MVP.
            </div>

            <div class="row g-3 mb-4">
              <div class="col-md-5"><x-admin.input name="tournament_name" label="Nama Turnamen" :value="$news->tournament_name" placeholder="cth: MPL Indonesia Season 14" /></div>
              <div class="col-md-4"><x-admin.input name="tournament_stage" label="Babak / Format" :value="$news->tournament_stage" placeholder="cth: Grand Final (Best of 7)" /></div>
              <div class="col-md-3"><x-admin.input name="tournament_venue" label="Venue / Lokasi" :value="$news->tournament_venue" placeholder="cth: Eldorado Dome, Bandung" /></div>
            </div>

            <h6 class="fw-bold text-primary border-bottom pb-2 mb-3"><i class="bi bi-shield-fill"></i> Tim A (Pemenang / Sisi Kiri)</h6>
            <div class="row g-3 mb-4">
              <div class="col-md-4"><x-admin.input name="team_a_name" label="Nama Tim A" :value="$news->team_a_name" placeholder="cth: Team Liquid ID" /></div>
              <div class="col-md-2"><x-admin.input name="team_a_short" label="Singkatan" :value="$news->team_a_short" placeholder="cth: TLID" /></div>
              <div class="col-md-2"><x-admin.input name="team_a_score" label="Skor Akhir" type="number" :value="$news->team_a_score" placeholder="4" /></div>
              <div class="col-md-4"><x-admin.input name="team_a_rank_text" label="Status Juara" :value="$news->team_a_rank_text" placeholder="cth: 👑 JUARA 1 (M6 DIRECT PASS)" /></div>
              <div class="col-md-6"><x-admin.input name="team_a_coach" label="Pelatih / Coach" :value="$news->team_a_coach" placeholder="cth: SaintDeLucaz & Facehugger" /></div>
              <div class="col-md-6">
                <x-admin.textarea name="team_a_roster" label="Roster 5 Pemain Tim A (JSON)" :value="$json($news->team_a_roster)" rows="3" mono help='Format: [{"ign":"Aran","role":"EXP Laner","heroes":["Terizla","Paquito"],"main_hero":"terizla","sub_hero":"paquito"},...]' />
              </div>
            </div>

            <h6 class="fw-bold text-warning border-bottom pb-2 mb-3"><i class="bi bi-shield"></i> Tim B (Lawan / Sisi Kanan)</h6>
            <div class="row g-3 mb-4">
              <div class="col-md-4"><x-admin.input name="team_b_name" label="Nama Tim B" :value="$news->team_b_name" placeholder="cth: RRQ Hoshi" /></div>
              <div class="col-md-2"><x-admin.input name="team_b_short" label="Singkatan" :value="$news->team_b_short" placeholder="cth: RRQ" /></div>
              <div class="col-md-2"><x-admin.input name="team_b_score" label="Skor Akhir" type="number" :value="$news->team_b_score" placeholder="3" /></div>
              <div class="col-md-4"><x-admin.input name="team_b_rank_text" label="Status Peringkat" :value="$news->team_b_rank_text" placeholder="cth: 🥈 RUNNER-UP (M6 PASS)" /></div>
              <div class="col-md-6"><x-admin.input name="team_b_coach" label="Pelatih / Coach" :value="$news->team_b_coach" placeholder="cth: Khezcute & NMM" /></div>
              <div class="col-md-6">
                <x-admin.textarea name="team_b_roster" label="Roster 5 Pemain Tim B (JSON)" :value="$json($news->team_b_roster)" rows="3" mono help='Format: [{"ign":"Dyrennn","role":"EXP Laner","heroes":["Cici","Ruby"],"main_hero":"cici","sub_hero":"ruby"},...]' />
              </div>
            </div>

            <h6 class="fw-bold text-info border-bottom pb-2 mb-3"><i class="bi bi-controller"></i> Rekapitulasi Game per Game (JSON Match Games)</h6>
            <div class="row g-3 mb-4">
              <div class="col-12">
                <x-admin.textarea name="match_games" label="Daftar Game (Game 1 s/d Game 7)" :value="$json($news->match_games)" rows="8" mono help="Menyimpan durasi, skor kill, gold, MVP, dan 5v5 hero pick tiap game. Klik tombol 'Isi Contoh' di atas untuk melihat struktur lengkapnya." />
              </div>
            </div>

            <h6 class="fw-bold text-success border-bottom pb-2 mb-3"><i class="bi bi-star"></i> Spotlight Pemain Terbaik (Finals MVP)</h6>
            <div class="row g-3 mb-2">
              <div class="col-md-4"><x-admin.input name="mvp_player_name" label="Nama Pemain MVP" :value="$news->mvp_player_name" placeholder="cth: TLID FAVIANNN" /></div>
              <div class="col-md-4"><x-admin.input name="mvp_role" label="Role / Julukan" :value="$news->mvp_role" placeholder="cth: Rookie Monster Jungler" /></div>
              <div class="col-md-4"><x-admin.input name="mvp_hero_name" label="Hero Andalan MVP" :value="$news->mvp_hero_name" placeholder="cth: Suyou" /></div>
              <div class="col-md-6"><x-admin.input name="mvp_avatar" label="Path Foto / Avatar Hero" :value="$news->mvp_avatar" placeholder="/images/heroes/suyou.webp" /></div>
              <div class="col-md-6">
                <x-admin.textarea name="mvp_stats" label="Statistik MVP (JSON)" :value="$json($news->mvp_stats)" rows="2" mono placeholder='{"kp":"82.4%","kda":"7.6","kills":"38 Kills","status":"Promosi MDL S9"}' />
              </div>
              <div class="col-12">
                <x-admin.textarea name="mvp_quote" label="Kutipan Pernyataan MVP di Panggung" :value="$news->mvp_quote" rows="2" placeholder="Gelar ini untuk semua orang yang sudah percaya sama kami dari awal musim..." />
              </div>
            </div>
          </x-admin.card>
        </div>

        {{-- Polling Pembaca Komunitas --}}
        <div class="mt-4">
          <x-admin.card title="Polling Interaktif Pembaca (Opsional)">
            <x-admin.textarea name="poll_data" label="Data Polling Komunitas (JSON)" :value="$json($news->poll_data)" rows="4" mono help='Format: {"question":"Pertanyaan polling?","options":[{"text":"Opsi 1","pct":"68%"},{"text":"Opsi 2","pct":"24%"},{"text":"Opsi 3","pct":"8%"}]}' />
          </x-admin.card>
        </div>
      </div>

      {{-- Sidebar Pengaturan --}}
      <div class="col-lg-4">
        <x-admin.card title="Status Publikasi">
          <div class="d-flex flex-column gap-3">
            <x-admin.checkbox name="is_published" label="Publikasikan berita" :checked="$news->is_published" help="Jika tidak dicentang, berita tersimpan sebagai draft." />
            <x-admin.checkbox name="is_featured" label="Jadikan Berita Utama (Hero Banner)" :checked="$news->is_featured" help="Menampilkan berita ini pada banner paling besar di bagian atas hub berita." />
            <x-admin.input name="badge_text" label="Badge Sorotan" :value="$news->badge_text" placeholder="cth: 🏆 JUARA MPL ID S14" help="Label teks kecil di atas judul berita." />
            <x-admin.select name="category" label="Kategori Berita" :options="AdminOptions::NEWS_CATEGORIES" :value="$news->category" required />
            <x-admin.input name="tag" label="Tag / Topik" :value="$news->tag" placeholder="cth: MPL ID S14" />
            <x-admin.input name="read_time" label="Estimasi Waktu Baca" :value="$news->read_time" placeholder="6 menit baca" />
            <x-admin.input name="published_at" label="Tanggal &amp; Waktu Terbit" type="datetime-local" :value="$news->published_at?->format('Y-m-d\TH:i')" />
            <x-admin.select name="author_id" label="Penulis / Redaksi" :options="$authors" :value="$news->author_id" placeholder="Pilih penulis" />
          </div>
        </x-admin.card>

        <div class="mt-4">
          <x-admin.card title="Gambar Thumbnail / Cover">
            <x-admin.file name="thumbnail" label="Upload gambar thumbnail" :current-url="$news->thumbnail_url" help="Format: WebP, PNG, JPG (Maks. 5MB). Rasio 16:9 disarankan." />
          </x-admin.card>
        </div>
      </div>
    </div>
  </form>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      var selectTemplate = document.getElementById('select-news-template');
      var matchSection = document.getElementById('section-template-match');

      function toggleTemplateFields() {
        if (!selectTemplate || !matchSection) return;
        var isMatch = selectTemplate.value === 'tournament_recap';
        matchSection.classList.toggle('d-none', !isMatch);
      }

      if (selectTemplate) {
        selectTemplate.addEventListener('change', toggleTemplateFields);
        toggleTemplateFields();
      }

      // Helper untuk mengisi contoh Grand Final MPL ID
      var btnSample = document.getElementById('btn-load-match-sample');
      if (btnSample) {
        btnSample.addEventListener('click', function () {
          if (!confirm('Muat contoh data Grand Final MPL ID S14 ke dalam form? Data yang belum disimpan akan digantikan.')) return;

          selectTemplate.value = 'tournament_recap';
          toggleTemplateFields();

          document.querySelector('input[name="title"]').value = 'Sejarah Baru! Team Liquid ID Juara MPL ID Season 14 Usai Tumbangkan RRQ Hoshi 4-3 di Grand Final';
          document.querySelector('input[name="slug"]').value = 'team-liquid-id-juara-mpl-id-season-14';
          document.querySelector('textarea[name="excerpt"]').value = 'Melalui pertarungan epik 7 game penuh ketegangan di hadapan ribuan penggemar di Eldorado Dome Bandung, The Cavalry (Team Liquid ID) resmi dinobatkan sebagai Raja Galaksi baru Mobile Legends Indonesia dan mengamankan slot M6 World Championship.';
          document.querySelector('input[name="badge_text"]').value = '🏆 JUARA MPL ID S14';
          document.querySelector('input[name="tag"]').value = 'MPL ID S14';
          document.querySelector('input[name="tournament_name"]').value = 'MPL Indonesia Season 14';
          document.querySelector('input[name="tournament_stage"]').value = 'Grand Final (Best of 7)';
          document.querySelector('input[name="tournament_venue"]').value = 'Eldorado Dome, Bandung';

          document.querySelector('input[name="team_a_name"]').value = 'Team Liquid ID';
          document.querySelector('input[name="team_a_short"]').value = 'TLID';
          document.querySelector('input[name="team_a_score"]').value = 4;
          document.querySelector('input[name="team_a_rank_text"]').value = '👑 JUARA 1 (M6 DIRECT PASS)';
          document.querySelector('input[name="team_a_coach"]').value = 'SaintDeLucaz & Facehugger';

          var rosterA = [
            {"role": "EXP Laner", "ign": "Aran", "heroes": ["Terizla", "Paquito"], "main_hero": "terizla", "sub_hero": "paquito"},
            {"role": "Jungler (MVP ⭐)", "ign": "Faviannn", "heroes": ["Suyou", "Alpha"], "main_hero": "suyou", "sub_hero": "alpha"},
            {"role": "Mid Laner", "ign": "Yehezkiel", "heroes": ["Pharsa", "Yve"], "main_hero": "pharsa", "sub_hero": "yve"},
            {"role": "Gold Laner", "ign": "Aeronnshikii", "heroes": ["Moskov", "Harith"], "main_hero": "moskov", "sub_hero": "harith"},
            {"role": "Roamer", "ign": "Widy", "heroes": ["Tigreal", "Khufra"], "main_hero": "tigreal", "sub_hero": "khufra"}
          ];
          document.querySelector('textarea[name="team_a_roster"]').value = JSON.stringify(rosterA, null, 2);

          document.querySelector('input[name="team_b_name"]').value = 'RRQ Hoshi';
          document.querySelector('input[name="team_b_short"]').value = 'RRQ';
          document.querySelector('input[name="team_b_score"]').value = 3;
          document.querySelector('input[name="team_b_rank_text"]').value = '🥈 RUNNER-UP (M6 PASS)';
          document.querySelector('input[name="team_b_coach"]').value = 'Khezcute & NMM';

          var rosterB = [
            {"role": "EXP Laner", "ign": "Dyrennn", "heroes": ["Cici", "Ruby"], "main_hero": "cici", "sub_hero": "ruby"},
            {"role": "Jungler", "ign": "Sutsujin", "heroes": ["Baxia", "Hayabusa"], "main_hero": "baxia", "sub_hero": "hayabusa"},
            {"role": "Mid Laner", "ign": "Rinz", "heroes": ["Zhuxin", "Vexana"], "main_hero": "zhuxin", "sub_hero": "vexana"},
            {"role": "Gold Laner", "ign": "Skylar", "heroes": ["Claude", "Beatrix"], "main_hero": "claude", "sub_hero": "beatrix"},
            {"role": "Roamer", "ign": "Idok", "heroes": ["Gatotkaca", "Chou"], "main_hero": "gatotkaca", "sub_hero": "chou"}
          ];
          document.querySelector('textarea[name="team_b_roster"]').value = JSON.stringify(rosterB, null, 2);

          document.querySelector('input[name="mvp_player_name"]').value = 'TLID FAVIANNN';
          document.querySelector('input[name="mvp_role"]').value = 'Rookie Monster Jungler';
          document.querySelector('input[name="mvp_hero_name"]').value = 'Suyou';
          document.querySelector('input[name="mvp_avatar"]').value = '/images/heroes/suyou.webp';
          document.querySelector('textarea[name="mvp_stats"]').value = JSON.stringify({"kp": "82.4%", "kda": "7.6", "kills": "38 Kills", "status": "Promosi MDL S9"}, null, 2);
          document.querySelector('textarea[name="mvp_quote"]').value = 'Gelar ini untuk semua orang yang sudah percaya sama kami dari awal musim. Kami membuktikan bahwa dengan kerja keras, disiplin, dan rasa saling percaya antar kawan tim, kami bisa berdiri di sini sebagai juara.';

          var poll = {
            "question": "Menurut kamu, seberapa besar peluang Team Liquid ID dan RRQ Hoshi membawa pulang trofi M6 World Championship di Malaysia ke tanah air?",
            "options": [
              {"text": "🔥 Sangat Besar! Mentalitas juara rookie Liquid & konsistensi RRQ di puncak", "pct": "68%"},
              {"text": "⚡ 50:50, tim Filipina (Fnatic ONIC PH & Falcons AP.Bren) masih sangat tangguh", "pct": "24%"},
              {"text": "🛡️ Butuh adaptasi global ban M-Series yang ekstra ketat", "pct": "8%"}
            ]
          };
          document.querySelector('textarea[name="poll_data"]').value = JSON.stringify(poll, null, 2);

          alert('Contoh data rekap turnamen berhasil dimuat ke dalam form!');
        });
      }
    });
  </script>
@endsection