@extends('layouts.app')
@section('title', 'アカウント設定')
@section('page-title', 'アカウント設定')

@section('content')
<div class="container-fluid py-3" style="max-width: 860px;">

  {{-- フラッシュ・バリデーションエラーは layouts.app が全画面共通で表示するため、ここでは出さない（二重表示防止）。 --}}

  <div class="card mb-3">
    <div class="card-header">AI画像編集の連携（APIキー）</div>
    <div class="card-body">
      <div class="mb-3">
        <x-help-section title="この設定について（クリックで開く）" variant="info">
          <div class="text-muted lh-base">
            ファネルのページ編集で、<strong>選択した画像をAIで編集</strong>するための連携です。
            使いたいサービス（Google Gemini または OpenAI）の<strong>APIキー</strong>をここに登録してください。
            <ul class="mb-0 ps-3 mt-1">
              <li>キーは<strong>暗号化して保存</strong>し、この画面には二度と表示しません（差し替えは新しいキーを入力）。</li>
              <li>APIの利用料金は、登録したキーの持ち主（あなたのアカウント）に請求されます。</li>
              <li>画像編集の機能そのものは順次追加します。まずはここでキーを登録しておけます。</li>
            </ul>
          </div>
        </x-help-section>
      </div>

      <form method="POST" action="{{ route('account-settings.update') }}">
        @csrf
        @method('PUT')

        @foreach(\App\Models\AiProviderCredential::PROVIDERS as $provider)
          @php($cred = $creds[$provider] ?? null)
          @php($hasKey = $cred && $cred->hasKey())
          <div class="border rounded p-3 mb-3">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-2">
              <div class="fw-semibold">{{ \App\Models\AiProviderCredential::displayName($provider) }}</div>
              @if($hasKey)
                <span class="badge bg-success">設定済み</span>
              @else
                <span class="badge bg-secondary">未設定</span>
              @endif
            </div>

            <div class="mb-2">
              <label class="form-label small mb-1">APIキー{{ $hasKey ? '（変更するときだけ入力）' : '' }}</label>
              <div class="input-group">
                <input type="password" name="{{ $provider }}_api_key" class="form-control js-key-input" autocomplete="off"
                       placeholder="{{ $hasKey ? '●●●●●●（設定済み。変更する場合のみ新しいキーを入力）' : ($provider === 'gemini' ? 'AIza... など' : 'sk-... など') }}">
                <button type="button" class="btn btn-outline-secondary js-key-toggle" tabindex="-1" aria-label="APIキーの表示を切り替え" title="表示を切り替え">
                  <i class="bi bi-eye" aria-hidden="true"></i>
                </button>
              </div>
            </div>

            <div class="form-check">
              <input type="hidden" name="{{ $provider }}_enabled" value="0">
              <input type="checkbox" class="form-check-input" id="{{ $provider }}_enabled" name="{{ $provider }}_enabled" value="1" @checked($cred ? $cred->enabled : true)>
              <label class="form-check-label small" for="{{ $provider }}_enabled">このサービスを有効にする</label>
            </div>

            @if($hasKey)
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="{{ $provider }}_clear" name="{{ $provider }}_clear" value="1">
              <label class="form-check-label small text-danger" for="{{ $provider }}_clear">登録済みのキーを削除する</label>
            </div>
            @endif

            <div class="mt-2 d-flex align-items-center gap-2 flex-wrap">
              <button type="button" class="btn btn-primary btn-sm js-key-verify" data-provider="{{ $provider }}" @disabled(! $hasKey)>
                <i class="bi bi-check2-circle me-1" aria-hidden="true"></i>キーを確認（接続テスト）
              </button>
              <span class="small js-key-verify-result" data-provider="{{ $provider }}"></span>
            </div>
            @unless($hasKey)
              <div class="form-text">※ 確認するには、先にキーを入力して保存してください。</div>
            @endunless
            <div class="form-text">※ 確認では実際にテスト用の画像を1枚生成します（お支払い設定の有無まで判定するため。ごく少額の利用料がかかります）。</div>

            <div class="form-text mt-1">
              @if($provider === 'gemini')
                キーの取得: Google AI Studio（<code>aistudio.google.com</code>）でAPIキーを発行できます。
              @else
                キーの取得: OpenAI のダッシュボード（<code>platform.openai.com</code>）でAPIキーを発行できます。
              @endif
            </div>
          </div>
        @endforeach

        <button type="submit" class="btn btn-primary">保存する</button>
      </form>
    </div>
  </div>

</div>
@endsection

@push('scripts')
<script>
document.querySelectorAll('.js-key-toggle').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var group = btn.closest('.input-group');
    var input = group ? group.querySelector('.js-key-input') : null;
    var icon = btn.querySelector('i');
    if (!input) return;
    if (input.type === 'password') {
      input.type = 'text';
      if (icon) icon.className = 'bi bi-eye-slash';
    } else {
      input.type = 'password';
      if (icon) icon.className = 'bi bi-eye';
    }
  });
});

// キーの接続テスト（登録済みキーが正しいか確認）
(function () {
  var meta = document.querySelector('meta[name="csrf-token"]');
  var csrf = meta ? meta.getAttribute('content') : '';
  var verifyUrl = @json(route('account-settings.verify-key'));

  document.querySelectorAll('.js-key-verify').forEach(function (btn) {
    btn.addEventListener('click', function () {
      var provider = btn.getAttribute('data-provider');
      var result = document.querySelector('.js-key-verify-result[data-provider="' + provider + '"]');
      btn.disabled = true;
      if (result) { result.className = 'small js-key-verify-result text-muted'; result.textContent = '確認中…'; }
      fetch(verifyUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
        credentials: 'same-origin',
        body: JSON.stringify({ provider: provider })
      })
      .then(function (r) { return r.json(); })
      .then(function (data) {
        if (result) {
          result.className = 'small js-key-verify-result ' + (data.ok ? 'text-success' : 'text-danger');
          result.textContent = (data.ok ? '✓ ' : '✕ ') + (data.message || '');
        }
      })
      .catch(function () {
        if (result) { result.className = 'small js-key-verify-result text-danger'; result.textContent = '✕ 確認中にエラーが発生しました。'; }
      })
      .finally(function () { btn.disabled = false; });
    });
  });
})();
</script>
@endpush