@extends('layouts.app')
@section('title', ($lesson ? 'レッスン編集' : 'レッスン追加') . ' — ' . $course->name)
@section('page-title', $course->name . ' — ' . ($lesson ? 'レッスン編集' : 'レッスン追加'))
@section('page-subtitle-heading', '【この画面でできること】')
@section('page-subtitle')
グループ「{{ $group->name }}」のレッスンを設定します。基本情報・本文・動画・公開条件を保存すると、付与済みの受講生に反映されます（結合未付与の会員には表示されません）。
@endsection
@section('content')
@php
  $isEdit = $lesson !== null;
  $commentsMode = $commentsMode ?? 'disabled';
  $commentsPerLesson = $commentsMode === 'per_lesson';
  $slugCustomize = $slugCustomize ?? (bool) old('slug_customize', false);
  $currentSlug = old('slug', $lesson?->slug ?? '');
  $status = old('status', $lesson?->status ?? ($defaultLessonStatus ?? 'published'));
  $publishedAt = old('published_at', $lesson?->published_at?->format('Y-m-d\TH:i'));
  $lessonDefaultsSettingsUrl = $lessonDefaultsSettingsUrl ?? route('site.course.workspace.show', [$site, $course, 'settings']).'#lesson-defaults-settings';
  $courseListButtonLabel = $courseListButtonLabel ?? '受講する';
  $courseSettingsUrl = $courseSettingsUrl ?? route('site.course.workspace.show', [$site, $course, 'settings']);
  $automation = $courseSettings['automation'] ?? [];
  $learningStyle = (string) ($automation['learning_style'] ?? 'all_unlocked');
  $audienceMode = \App\Support\BundleCourseSettings::resolveAudienceMode($automation);
  $commentsRequireApproval = \App\Support\BundleCourseSettings::commentsRequireApproval($courseSettings ?? []);
  $lessonType = $lessonType ?? old('lesson_type', $lesson?->lesson_type ?? \App\Models\Lesson::TYPE_NORMAL);
  $testSettings = $testSettings ?? \App\Support\LessonTestSettings::defaults();
@endphp
@include('site.course.partials._workspace_toolbar')

<div class="mb-3 d-flex flex-wrap gap-2 justify-content-between align-items-center">
  <a href="{{ route('site.course.workspace.show', [$site, $course, 'lessons']) }}" class="btn btn-outline-secondary btn-sm">← レッスン一覧へ戻る</a>
  @if($isEdit)
    <form method="POST" action="{{ route('site.bundle.lessons.destroy', [$site, $course, $group, $lesson]) }}" class="d-inline" onsubmit="return confirm('このレッスンを削除しますか？')">
      @csrf @method('DELETE')
      <button type="submit" class="btn btn-outline-danger btn-sm">削除</button>
    </form>
  @endif
</div>

<form method="POST"
  action="{{ $isEdit ? route('site.bundle.lessons.update', [$site, $course, $group, $lesson]) : route('site.bundle.lessons.store', [$site, $course, $group]) }}"
  id="lesson-form"
  enctype="multipart/form-data">
  @csrf
  @if($isEdit) @method('PUT') @endif

  <div class="card mb-4">
    <div class="card-header bg-white fw-semibold">基本設定</div>
    <div class="card-body">
      <div class="mb-3">
        <label class="form-label fw-semibold">レッスン種別</label>
        <select name="lesson_type" id="lesson_type" class="form-select" style="max-width: 20rem;">
          <option value="normal" @selected($lessonType === 'normal')>通常（教材・コンテンツ）</option>
          <option value="test" @selected($lessonType === 'test')>テスト（択一クイズ）</option>
        </select>
        <div class="form-text">テストは合格点以上で受講完了になります。順番受講のときは合格後に次のレッスンが解放されます。会員画面では<strong>アイキャッチの下にテストのみ</strong>表示されます（本文・動画は出しません）。</div>
      </div>
      <div class="mb-3">
        <label class="form-label fw-semibold">ページ名（管理用） <span class="text-danger">*</span></label>
        <input type="text" name="name" id="lesson_name" class="form-control" value="{{ old('name', $lesson?->name) }}" required maxlength="200">
        <div class="form-text">コース内のレッスン一覧・会員画面の見出しに使います。</div>
      </div>
      <div class="mb-3">
        <label class="form-label fw-semibold">タイトル（ブラウザ）</label>
        <input type="text" name="browser_title" class="form-control" value="{{ old('browser_title', $lesson?->browser_title) }}" maxlength="191" placeholder="空欄のときはページ名を使用">
      </div>
      <div class="mb-3">
        <label class="form-label fw-semibold">管理用URL（スラッグ）</label>
        <div class="input-group mb-2">
          <span class="input-group-text text-muted small font-monospace">slug</span>
          <input type="text"
            name="slug"
            id="lesson_slug"
            class="form-control font-monospace"
            value="{{ $currentSlug }}"
            maxlength="64"
            pattern="[a-zA-Z0-9_-]+"
            placeholder="自動生成"
            @readonly(! $slugCustomize)>
        </div>
        <div class="form-text mb-2">
          ページ名から<strong>自動で決まります</strong>（半角英数字・ハイフン・アンダースコア）。会員の閲覧URLは現状レッスンIDです。スラッグは管理・将来のURL用に保存します。
        </div>
        <div class="form-check">
          <input type="hidden" name="slug_customize" value="0">
          <input class="form-check-input" type="checkbox" name="slug_customize" value="1" id="lesson_slug_customize" @checked($slugCustomize)>
          <label class="form-check-label" for="lesson_slug_customize">URL（スラッグ）を自分で変更する</label>
        </div>
      </div>
      <div class="row g-3 mb-3">
        <div class="col-md-4">
          <label class="form-label fw-semibold">公開状態</label>
          <select name="status" class="form-select">
            <option value="published" @selected($status === 'published')>公開</option>
            <option value="draft" @selected($status === 'draft')>下書き</option>
            <option value="private" @selected($status === 'private')>非公開</option>
          </select>
          <div class="form-text">このレッスン単体の表示。新規時の初期値は <a href="{{ $lessonDefaultsSettingsUrl }}">レッスン基本設定</a> で変更できます。</div>
        </div>
        <div class="col-md-4">
          <label class="form-label fw-semibold">表示順</label>
          <input type="number" name="sort_order" class="form-control" value="{{ old('sort_order', $lesson?->sort_order ?? '') }}" min="0" placeholder="自動">
          <div class="form-text">空欄で追加時は末尾。小さいほど上に表示。</div>
        </div>
        <div class="col-md-4">
          <label class="form-label fw-semibold">親レッスン</label>
          <select name="parent_lesson_id" class="form-select">
            <option value="">なし（トップレベル）</option>
            @foreach($parentOptions as $opt)
              <option value="{{ $opt->id }}" @selected((int) old('parent_lesson_id', $lesson?->parent_lesson_id) === (int) $opt->id)>
                {{ $opt->name }}（順: {{ $opt->sort_order }}）
              </option>
            @endforeach
          </select>
        </div>
      </div>
      <div class="mb-0">
        <label class="form-label fw-semibold">説明文</label>
        <textarea name="summary" class="form-control" rows="2" maxlength="5000" placeholder="コース一覧などに表示する短い説明（任意）">{{ old('summary', $lesson?->summary) }}</textarea>
      </div>
    </div>
  </div>

  @include('site.course.partials._lesson_test_builder', ['testSettings' => $testSettings])

  <div class="card mb-4" id="lesson-content-card">
    <div class="card-header bg-white fw-semibold" id="lesson-content-card-header">コンテンツ</div>
    <div class="card-body">
      <div data-lesson-normal-content>
      <div class="row g-2 mb-3">
        <div class="col-md-4">
          <label class="form-label fw-semibold">動画タイプ</label>
          <select name="video_type" class="form-select">
            <option value="" @selected(! old('video_type', $lesson?->video_type))>なし</option>
            <option value="youtube" @selected(old('video_type', $lesson?->video_type) === 'youtube')>YouTube</option>
            <option value="vimeo" @selected(old('video_type', $lesson?->video_type) === 'vimeo')>Vimeo</option>
            <option value="url" @selected(old('video_type', $lesson?->video_type) === 'url')>動画URL（mp4等）</option>
            <option value="embed" @selected(old('video_type', $lesson?->video_type) === 'embed')>埋め込みHTML</option>
          </select>
        </div>
        <div class="col-md-8">
          <label class="form-label fw-semibold">動画URL / 埋め込みHTML</label>
          <input type="text" name="video_url" class="form-control" value="{{ old('video_url', $lesson?->video_url) }}" placeholder="https://www.youtube.com/watch?v=... など">
        </div>
      </div>
      <div class="mb-3 border rounded p-3 bg-light">
        <div class="fw-semibold small mb-2">動画の表示オプション</div>
        <p class="form-text small mb-2">コース基本設定の「動画オプションを会員画面に反映」がオンのときだけ適用されます。</p>
        <div class="row g-2">
          <div class="col-md-6">
            <div class="form-check">
              <input class="form-check-input" type="hidden" name="lesson_settings[video_autoplay]" value="0">
              <input class="form-check-input" type="checkbox" name="lesson_settings[video_autoplay]" value="1" id="ls_autoplay" @checked(old('lesson_settings.video_autoplay', $lessonSettings['video_autoplay'] ?? false))>
              <label class="form-check-label" for="ls_autoplay">動画の自動再生（YouTubeはミュート付き）</label>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-check">
              <input class="form-check-input" type="hidden" name="lesson_settings[video_allow_playback_speed]" value="0">
              <input class="form-check-input" type="checkbox" name="lesson_settings[video_allow_playback_speed]" value="1" id="ls_speed" @checked(old('lesson_settings.video_allow_playback_speed', $lessonSettings['video_allow_playback_speed'] ?? true))>
              <label class="form-check-label" for="ls_speed">再生速度の変更を許可（HTML5動画）</label>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-check">
              <input class="form-check-input" type="hidden" name="lesson_settings[video_show_seek]" value="0">
              <input class="form-check-input" type="checkbox" name="lesson_settings[video_show_seek]" value="1" id="ls_seek" @checked(old('lesson_settings.video_show_seek', $lessonSettings['video_show_seek'] ?? true))>
              <label class="form-check-label" for="ls_seek">シークバー（巻き戻し）を表示（HTML5動画）</label>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-check">
              <input class="form-check-input" type="hidden" name="lesson_settings[video_allow_download]" value="0">
              <input class="form-check-input" type="checkbox" name="lesson_settings[video_allow_download]" value="1" id="ls_dl" @checked(old('lesson_settings.video_allow_download', $lessonSettings['video_allow_download'] ?? true))>
              <label class="form-check-label" for="ls_dl">下の「資料ダウンロード」「関連リンク」を会員に表示する</label>
            </div>
          </div>
        </div>
      </div>
      <div class="mb-3">
        <label class="form-label fw-semibold">本文</label>
        @include('site.partials._tinymce_field', [
          'editorId' => 'lesson_content_editor',
          'inputName' => 'content',
          'value' => old('content', $lesson?->content),
          'minHeight' => 360,
        ])
      </div>

      <div class="border rounded p-3 mb-3 bg-light">
        <div class="fw-semibold mb-2">本文下のボタン（任意）</div>
        <p class="form-text small mb-3">
          レッスン本文の<strong>下</strong>に表示するボタンです（<a href="{{ $lessonDefaultsSettingsUrl }}">レッスン基本設定</a>の受講完了ボタンとは別）。
          コース一覧の「{{ $courseListButtonLabel }}」も <a href="{{ $courseSettingsUrl }}">基本設定</a>のコース一覧ボタンです。
          文言とリンク先URLの<strong>両方</strong>を入れたときだけ会員画面に表示されます。
        </p>
        <div class="row g-2">
          <div class="col-md-6">
            <label class="form-label fw-semibold">ボタンに表示する文言</label>
            <input type="text" name="button_label" class="form-control" maxlength="191"
              value="{{ old('button_label', $lesson?->button_label) }}"
              placeholder="例: 課題を提出する">
          </div>
          <div class="col-md-6">
            <label class="form-label fw-semibold">ボタンのリンク先URL</label>
            <input type="url" name="button_url" class="form-control" value="{{ old('button_url', $lesson?->button_url) }}" placeholder="https://example.com/form">
            <div class="form-text">クリックで別タブが開きます（申込フォーム・外部サイトなど）。</div>
          </div>
        </div>
      </div>

      <div class="border rounded p-3 mb-0 bg-light">
        <div class="fw-semibold mb-2">資料ダウンロード・関連リンク（任意）</div>
        <p class="form-text small mb-3">会員画面では本文の下にリスト表示されます。「資料ダウンロードを表示」がオフのときは出ません。</p>
        <div class="mb-3">
          @include('partials._lesson_attachment_upload', [
            'inputId' => 'lesson-attachment-file',
            'previewId' => 'lesson-attachment-preview',
            'currentUrl' => $lesson?->attachment_url,
            'showRemove' => (bool) $lesson?->attachment_url,
            'removeCheckboxId' => 'lesson-attachment-remove',
          ])
        </div>
        <div class="row g-2">
          <div class="col-md-6">
            <label class="form-label fw-semibold">資料の表示名</label>
            <input type="text" name="attachment_label" class="form-control" value="{{ old('attachment_label', $lesson?->attachment_label) }}" placeholder="例: 講義資料（PDF）">
            <div class="form-text">空欄のときは「添付ファイル」と表示します。</div>
          </div>
          <div class="col-md-6">
            <label class="form-label fw-semibold">関連リンクの表示名</label>
            <input type="text" name="link_label" class="form-control" value="{{ old('link_label', $lesson?->link_label) }}" placeholder="例: 公式サイト">
            <div class="form-text">空欄のときは「関連リンク」と表示します。</div>
          </div>
          <div class="col-12">
            <label class="form-label fw-semibold">関連リンクのURL</label>
            <input type="url" name="link_url" class="form-control" value="{{ old('link_url', $lesson?->link_url) }}" placeholder="https://example.com/">
            <div class="form-text">資料とは別の、参考サイト・補足ページなどへのリンクです。</div>
          </div>
        </div>
      </div>
      </div>
      <div class="mb-0">
        @include('partials._image_file_upload', [
          'inputId' => 'lesson-thumbnail-file',
          'previewId' => 'lesson-thumbnail-preview',
          'label' => 'アイキャッチ画像',
          'layout' => 'featured',
          'previewHint' => '16:9の比率でプレビューします（コース画像と同じ見え方）。任意・png / jpg / gif / webp・5MB以下。',
          'currentUrl' => old('thumbnail_media_url') ?: $lesson?->thumbnail_url,
          'showRemove' => (bool) $lesson?->thumbnail_url,
          'removeCheckboxId' => 'lesson-thumbnail-remove',
        ])
      </div>
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-header bg-white fw-semibold">このレッスンだけの公開タイミング</div>
    <div class="card-body">
      <div class="alert alert-light border small mb-3">
        <strong>コース全体のルール</strong>（受講対象者・コース開放日・締切・順番受講など）は
        <a href="{{ $courseSettingsUrl }}">コース基本設定 → 自動化</a>で決めます。
        ここで設定するのは<strong>レッスンごとの追加条件</strong>だけです。
        <ul class="mb-0 mt-2 ps-3">
          <li>受講対象者: @if($audienceMode === 'none') 付与済みは全員 @elseif($audienceMode === 'after_days') 付与から{{ (int) ($automation['audience_days_after_grant'] ?? 0) }}日後 @else 指定ラベル付き会員のみ @endif</li>
          <li>受講スタイル: {{ $learningStyle === 'sequential_completion' ? '受講完了にすると次のレッスンが受講可能' : '最初から開放済み（ドリップ・公開日時のみ）' }}</li>
        </ul>
      </div>
      <div class="row g-3">
        <div class="col-md-6">
          <label class="form-label fw-semibold">付与から何日後にこのレッスンを開く（ドリップ）</label>
          <input type="number" name="drip_days" class="form-control" value="{{ old('drip_days', (int) ($lesson?->drip_days ?? 0)) }}" min="0">
          <div class="form-text">コースの結合を付与した日から数えます。<strong>0</strong>＝付与直後から（コース開放日など他条件を満たせば）閲覧可。</div>
        </div>
        <div class="col-md-6">
          <label class="form-label fw-semibold">このレッスンの公開開始日時</label>
          <input type="datetime-local" name="published_at" class="form-control" value="{{ $publishedAt }}">
          <div class="form-text">この日時より前は会員に表示しません。空欄＝日時による制限なし。</div>
        </div>
      </div>
      <p class="text-muted small mb-0 mt-3">
        サイト全体のレッスン下部案内文・前後レッスン導線は
        <a href="{{ route('site.page-settings', ['site' => $site, 'tab' => 'lesson']) }}">ページ設定 → レッスンページ</a>です。
      </p>
    </div>
  </div>

  @if($commentsPerLesson)
    <div class="card mb-4">
      <div class="card-header bg-white fw-semibold">コメント</div>
      <div class="card-body">
        <div class="form-check">
          <input type="hidden" name="lesson_settings[comments_enabled]" value="0">
          <input class="form-check-input" type="checkbox" name="lesson_settings[comments_enabled]" value="1" id="ls_comments"
            @checked(old('lesson_settings.comments_enabled', $lessonSettings['comments_enabled'] ?? false))>
          <label class="form-check-label" for="ls_comments">このレッスンでコメントを有効にする</label>
        </div>
        @if($commentsRequireApproval)
          <p class="form-text mb-0 mt-2">このコースは<strong>コメント承認制</strong>です。投稿は管理者が承認するまで会員に表示されません。</p>
        @endif
      </div>
    </div>
  @elseif($commentsMode === 'enabled')
    <div class="alert alert-light border small mb-4">
      このコースでは<strong>すべてのレッスン</strong>でコメントが有効です（コース基本設定）。
      @if($commentsRequireApproval)
        <strong>承認制</strong>のため、投稿は管理者の承認後に表示されます。
      @endif
    </div>
  @endif

  <div class="d-flex gap-2">
    <button type="submit" class="btn btn-primary">{{ $isEdit ? '保存' : '追加' }}</button>
    <a href="{{ route('site.course.workspace.show', [$site, $course, 'lessons']) }}" class="btn btn-outline-secondary">キャンセル</a>
  </div>
</form>

@include('partials.monaka_image_picker')
@endsection

@push('scripts')
<script>
(function () {
  const form = document.getElementById('lesson-form');
  const title = document.getElementById('lesson_name');
  const slug = document.getElementById('lesson_slug');
  const customize = document.getElementById('lesson_slug_customize');
  if (!title || !slug || !customize) return;

  function slugifyClient(text) {
    const t = text.trim().toLowerCase();
    let s = t.replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(/^-+|-+$/g, '');
    if (!s) {
      let h = 0;
      for (let i = 0; i < t.length; i++) h = ((h << 5) - h) + t.charCodeAt(i);
      s = 'lesson-' + Math.abs(h).toString(16).slice(0, 8);
    }
    return s.slice(0, 48) || 'lesson';
  }

  function syncSlugFromTitle() {
    if (customize.checked) {
      slug.readOnly = false;
      return;
    }
    slug.readOnly = true;
    slug.value = slugifyClient(title.value);
  }

  customize.addEventListener('change', syncSlugFromTitle);
  title.addEventListener('input', syncSlugFromTitle);
  syncSlugFromTitle();

  form?.addEventListener('submit', function () {
    slug.readOnly = false;
  });
})();
</script>
@endpush