@php
  $inSetupFlow = in_array($setupChannel ?? null, ['mail', 'line'], true);
@endphp
@extends($inSetupFlow ? 'layouts.setup' : 'layouts.app')
@section('title')
@if(($setupChannel ?? null) === 'mail')
メール設定
@elseif(($setupChannel ?? null) === 'line')
LINE設定
@else
メール・LINE配信 - 送信用アカウント
@endif
@endsection
@if(! $inSetupFlow)
  @section('delivery-primary-tabs')
  @include('account.partials.mail-delivery-primary-tabs', ['mailDeliveryTab' => 'accounts'])
  @endsection
@endif
@section('page-title')
@if(($setupChannel ?? null) === 'mail')
メール設定
@elseif(($setupChannel ?? null) === 'line')
LINE設定
@else
メール・LINE配信
@endif
@endsection
@if(! $inSetupFlow)
@section('page-subtitle')
@if(($setupChannel ?? null) === 'mail')
@if(! empty($archived ?? false))
メール送信（またはメール併用）のうち、アーカイブ済みだけを表示しています。初期設定の「メール設定」から絞り込み中です。
@else
初期設定の「メール設定」から開いている画面です。**メールのみ**および**メール+LINE**の送信用アカウントだけを一覧しています（複数登録可）。一覧の「各種設定」で送信者・SMTP 等を入力してください。
@endif
@elseif(($setupChannel ?? null) === 'line')
@if(! empty($archived ?? false))
LINE 向け（またはメール併用）のうち、アーカイブ済みだけを表示しています。初期設定の「LINE設定」から絞り込み中です。
@else
初期設定の「LINE設定」から開いている画面です。**LINEのみ**および**メール+LINE**の送信用アカウントだけを一覧しています（複数登録可）。シナリオ一覧の「LINEアカウント」で Messaging API を設定してください。
@endif
@elseif(! empty($archived ?? false))
アーカイブ済みの送信用アカウントだけを表示しています。復帰は「各種設定」から。画面上部のタブにマウスを乗せると、送信用アカウントと送信ドメイン認証の違いが表示されます。
@else
送信用アカウントの一覧です。**トップバー直下のタブ**が中項目（送信用アカウント／送信ドメイン認証）、注意事項の下に**小項目（一覧／アーカイブ）**があります。左メニューの「配信」や初期設定の「メール設定」「LINE設定」からも開けます。
@endif
@endsection
@endif
@push('styles')
<style>
.delivery-toolbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.delivery-list-card {
  border-radius: 8px;
  overflow: hidden;
}
.delivery-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #edf1f7;
}
.delivery-row:last-child { border-bottom: 0; }
.delivery-name { color: #2f3f59; font-size: 0.96rem; }
.delivery-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.delivery-type {
  color: #5f6d84;
  font-size: 0.86rem;
  white-space: nowrap;
}
.delivery-group-select {
  min-width: 130px;
  font-size: 0.82rem;
}
.sort-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #e5ebf5;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: #fff;
}
.sort-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 小項目（中項目＝トップバーの下の一覧／アーカイブ切替） */
.delivery-sub-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: center;
  border-bottom: 1px solid #d9dfeb;
  margin-bottom: 14px;
}
.delivery-sub-tabs .tab-item {
  text-decoration: none;
  color: #5f6d84;
  font-size: 0.88rem;
  padding: 8px 2px 10px;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.delivery-sub-tabs .tab-item .tab-sub-icon {
  font-size: 1rem;
  opacity: 0.88;
}
.delivery-sub-tabs .tab-item.active .tab-sub-icon {
  opacity: 1;
}
.delivery-sub-tabs .tab-item.active {
  color: #2b4f9b;
  border-bottom-color: #4f77cf;
  font-weight: 600;
}
.delivery-sub-tabs .tab-item[data-bs-toggle="tooltip"] { cursor: help; }
.delivery-sub-tabs .tab-item.active { cursor: pointer; }
</style>
@endpush
@if($inSetupFlow)
@section('setup_body')
@else
@section('content')
@endif
@php
  if ($inSetupFlow) {
      $tipList = ($setupChannel ?? null) === 'line'
          ? '運用中の LINE 設定だけを表示します。変更は各行の「各種設定」から。'
          : '運用中のメール設定だけを表示します。変更は各行の「各種設定」から。';
      $tipArchived = '一覧からアーカイブしたものだけを表示します。復帰は「各種設定」から。';
  } else {
      $tipList = '運用中の送信用アカウントだけを表示します（小項目）。アカウント名をクリックするとシナリオ一覧へ進みます。';
      $tipArchived = '一覧からアーカイブしたアカウントだけを表示します。復帰は各行の「各種設定」から。';
  }
  $listActiveQuery = array_filter(['setup_channel' => $setupChannel ?? null]);
  $listArchivedQuery = array_filter(['archived' => 1, 'setup_channel' => $setupChannel ?? null]);
  $createQuery = array_filter(['setup_channel' => $setupChannel ?? null]);
  $editQuery = array_filter(['setup_channel' => $setupChannel ?? null]);
@endphp
<nav class="delivery-sub-tabs" aria-label="送信用アカウントの表示切替">
  <a href="{{ route('account.index', $listActiveQuery) }}" class="tab-item {{ empty($archived ?? false) ? 'active' : '' }}" @if(! $inSetupFlow) data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-custom-class="mail-delivery-tab-tooltip" tabindex="0" data-bs-title="{{ e($tipList) }}" @endif><i class="bi bi-list-ul tab-sub-icon" aria-hidden="true"></i>{{ $inSetupFlow ? '一覧' : '送信用アカウント一覧' }}</a>
  <a href="{{ route('account.index', $listArchivedQuery) }}" class="tab-item {{ ! empty($archived ?? false) ? 'active' : '' }}" @if(! $inSetupFlow) data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-custom-class="mail-delivery-tab-tooltip" tabindex="0" data-bs-title="{{ e($tipArchived) }}" @endif><i class="bi bi-archive tab-sub-icon" aria-hidden="true"></i>アーカイブ済</a>
</nav>
@php
  $mailIncompleteCount = $accounts->filter(function($a){
    return in_array($a->type, ['email','both'], true) && (empty($a->from_email) || empty($a->from_name));
  })->count();
@endphp
@if(empty($archived ?? false) && ($setupChannel ?? null) !== 'line' && $mailIncompleteCount > 0)
  <div class="alert alert-warning py-2 mb-3">
    送信者名・送信元メールが未入力の設定が {{ $mailIncompleteCount }} 件あります。各行の「各種設定」から入力してください。
  </div>
@endif
<div class="{{ $inSetupFlow ? 'setup-toolbar' : 'delivery-toolbar' }}">
  @if(empty($archived ?? false))
    <a href="{{ route('account.create', $createQuery) }}" class="btn btn-primary btn-sm"><i class="bi bi-plus-lg me-1"></i>追加</a>
    <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#accountGroupModal">グループ管理</button>
    @if(empty($setupChannel ?? null))
    <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#accountSortModal">表示順変更</button>
    @endif
  @else
    <span class="text-muted small">アーカイブの解除は各行の「各種設定」から行えます。</span>
  @endif
</div>
@if($accounts->isEmpty())
<div class="{{ $inSetupFlow ? 'setup-form-card' : 'card' }}"><div class="card-body text-center py-5">
  <i class="bi bi-envelope" style="font-size:3rem;color:#ddd;"></i>
  <h5 class="mt-3 text-muted">
    @if(! empty($archived ?? false))
    アーカイブ済みの送信用アカウントはありません
    @elseif(($setupChannel ?? null) === 'mail')
    メール設定はまだありません
    @elseif(($setupChannel ?? null) === 'line')
    LINE設定はまだありません
    @else
    送信用アカウントがありません
    @endif
  </h5>
  @if(empty($archived ?? false))
    <a href="{{ route('account.create', $createQuery) }}" class="btn btn-primary mt-2">追加する</a>
  @endif
</div></div>
@else
<div class="row g-3">
  <div class="col-12">
    @php
      $groups = $groups ?? collect();
      $groupedAccounts = $accounts->groupBy(function($account) {
        return $account->group_id ? ('g_'.$account->group_id) : 'none';
      });
    @endphp
    @foreach($groupedAccounts as $groupKey => $items)
      @php
        $groupName = '未分類';
        if ($groupKey !== 'none') {
          $groupId = (int) str_replace('g_', '', $groupKey);
          $group = $groups->firstWhere('id', $groupId);
          $groupName = $group ? $group->name : 'グループ';
        }
      @endphp
      <div class="{{ $inSetupFlow ? 'setup-form-card delivery-list-card' : 'card delivery-list-card' }}">
        <div class="card-header">{{ $groupName }}</div>
        @foreach($items as $account)
          <div class="delivery-row">
            <div class="delivery-name-block">
              @if($inSetupFlow)
              <span class="delivery-name fw-semibold">{{ $account->name }}</span>
              @else
              <a href="{{ route('scenario.index', $account) }}" class="delivery-name text-decoration-none">{{ $account->name }}</a>
              @endif
              @if(in_array($account->type, ['line', 'both'], true) && filled($account->line_messaging_memo))
                <div class="small text-muted d-block text-truncate delivery-line-memo" title="{{ $account->line_messaging_memo }}">{{ $account->line_messaging_memo }}</div>
              @endif
              @if(in_array($account->type, ['line', 'both'], true))
                @include('account.partials.line-list-profile', ['account' => $account])
              @endif
            </div>
            <div class="delivery-right">
              <select class="form-select form-select-sm delivery-group-select" data-account-id="{{ $account->id }}">
                <option value="">未分類</option>
                @foreach($groups as $groupOption)
                  <option value="{{ $groupOption->id }}" {{ (int)($account->group_id ?? 0) === (int)$groupOption->id ? 'selected' : '' }}>{{ $groupOption->name }}</option>
                @endforeach
              </select>
              @if(in_array($account->type, ['email','both'], true) && (empty($account->from_email) || empty($account->from_name)))
                <span class="badge bg-warning text-dark">メール設定未完了</span>
              @endif
              @if(empty($setupChannel ?? null))
              <span class="delivery-type">{{ $account->type === 'email' ? 'メール用' : ($account->type === 'line' ? 'LINE用' : 'メール・LINE併用') }}</span>
              @endif
              <a href="{{ route('account.edit', array_merge(['account' => $account], $editQuery)) }}" class="btn btn-sm btn-outline-secondary text-nowrap" title="各種設定">各種設定</a>
            </div>
          </div>
        @endforeach
      </div>
    @endforeach
  </div>
</div>
@endif

<div class="modal fade" id="accountGroupModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">グループ管理</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form id="account-group-add-form" class="d-flex gap-2 mb-3">
          @csrf
          <input type="text" name="name" class="form-control" placeholder="新しいグループ名" maxlength="100" required>
          <button type="submit" class="btn btn-primary text-nowrap">追加</button>
        </form>
        <div id="account-group-list">
          @if(($groups ?? collect())->isEmpty())
            <p class="text-muted mb-0">グループがありません</p>
          @else
            <table class="table table-hover align-middle mb-0">
              <thead><tr><th>グループ名</th><th class="text-end">操作</th></tr></thead>
              <tbody>
                @foreach($groups as $group)
                  <tr id="account-group-row-{{ $group->id }}">
                    <td>
                      <span class="group-name-display">{{ $group->name }}</span>
                      <input type="text" class="form-control form-control-sm d-none group-name-input" value="{{ $group->name }}" data-group-id="{{ $group->id }}">
                    </td>
                    <td class="text-end">
                      <button type="button" class="btn btn-sm btn-outline-secondary me-1 btn-group-edit" data-group-id="{{ $group->id }}"><i class="bi bi-pencil"></i></button>
                      <button type="button" class="btn btn-sm btn-outline-success me-1 d-none btn-group-save" data-group-id="{{ $group->id }}"><i class="bi bi-check-lg"></i></button>
                      <button type="button" class="btn btn-sm btn-outline-danger btn-group-delete" data-group-id="{{ $group->id }}" data-group-name="{{ $group->name }}"><i class="bi bi-trash"></i></button>
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          @endif
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="accountSortModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">表示順変更</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        @foreach($accounts as $account)
          <div class="sort-item" data-account-id="{{ $account->id }}">
            <span class="sort-item-name">{{ $account->name }}</span>
            <div class="d-flex gap-1">
              <button type="button" class="btn btn-sm btn-outline-secondary btn-sort-up"><i class="bi bi-arrow-up"></i></button>
              <button type="button" class="btn btn-sm btn-outline-secondary btn-sort-down"><i class="bi bi-arrow-down"></i></button>
            </div>
          </div>
        @endforeach
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">キャンセル</button>
        <button type="button" class="btn btn-primary" id="account-sort-save-btn">保存</button>
      </div>
    </div>
  </div>
</div>

@push('scripts')
<script>
const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
const accountGroupStoreUrl = '{{ route("account.group.store") }}';
const accountSortUpdateUrl = '{{ route("account.sort.update") }}';
const accountGroupAssignUrlBase = '/account';

const addGroupForm = document.getElementById('account-group-add-form');
if (addGroupForm) {
  addGroupForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(addGroupForm);
    const res = await fetch(accountGroupStoreUrl, {
      method: 'POST',
      headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
      body: formData,
    });
    const data = await res.json();
    if (data.success) location.reload();
  });
}

document.querySelectorAll('.btn-group-edit').forEach((btn) => {
  btn.addEventListener('click', () => {
    const id = btn.dataset.groupId;
    const row = document.getElementById(`account-group-row-${id}`);
    row.querySelector('.group-name-display').classList.add('d-none');
    row.querySelector('.group-name-input').classList.remove('d-none');
    row.querySelector('.btn-group-save').classList.remove('d-none');
    btn.classList.add('d-none');
  });
});

document.querySelectorAll('.btn-group-save').forEach((btn) => {
  btn.addEventListener('click', async () => {
    const id = btn.dataset.groupId;
    const row = document.getElementById(`account-group-row-${id}`);
    const input = row.querySelector('.group-name-input');
    const res = await fetch(`/account/group/${id}`, {
      method: 'PUT',
      headers: { 'X-CSRF-TOKEN': csrfToken, 'Content-Type': 'application/json', 'Accept': 'application/json' },
      body: JSON.stringify({ name: input.value }),
    });
    const data = await res.json();
    if (data.success) location.reload();
  });
});

document.querySelectorAll('.btn-group-delete').forEach((btn) => {
  btn.addEventListener('click', async () => {
    const id = btn.dataset.groupId;
    const name = btn.dataset.groupName || 'このグループ';
    if (!confirm(`「${name}」を削除しますか？`)) return;
    const res = await fetch(`/account/group/${id}`, {
      method: 'DELETE',
      headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
    });
    const data = await res.json();
    if (data.success) location.reload();
  });
});

document.querySelectorAll('.btn-sort-up').forEach((btn) => {
  btn.addEventListener('click', () => {
    const item = btn.closest('.sort-item');
    const prev = item?.previousElementSibling;
    if (item && prev) item.parentNode.insertBefore(item, prev);
  });
});
document.querySelectorAll('.btn-sort-down').forEach((btn) => {
  btn.addEventListener('click', () => {
    const item = btn.closest('.sort-item');
    const next = item?.nextElementSibling;
    if (item && next) item.parentNode.insertBefore(next, item);
  });
});

const sortSaveBtn = document.getElementById('account-sort-save-btn');
if (sortSaveBtn) {
  sortSaveBtn.addEventListener('click', async () => {
    const ids = Array.from(document.querySelectorAll('#accountSortModal .sort-item')).map((el) => parseInt(el.dataset.accountId, 10)).filter(Boolean);
    if (!ids.length) return;
    const res = await fetch(accountSortUpdateUrl, {
      method: 'POST',
      headers: { 'X-CSRF-TOKEN': csrfToken, 'Content-Type': 'application/json', 'Accept': 'application/json' },
      body: JSON.stringify({ items: ids }),
    });
    const data = await res.json();
    if (data.success) location.reload();
  });
}

document.querySelectorAll('.delivery-group-select').forEach((select) => {
  select.addEventListener('change', async () => {
    const accountId = select.dataset.accountId;
    const groupId = select.value || null;
    const res = await fetch(`${accountGroupAssignUrlBase}/${accountId}/group`, {
      method: 'POST',
      headers: { 'X-CSRF-TOKEN': csrfToken, 'Content-Type': 'application/json', 'Accept': 'application/json' },
      body: JSON.stringify({ group_id: groupId }),
    });
    const data = await res.json();
    if (data.success) location.reload();
  });
});
</script>
@endpush
@endsection