<div class="row">
  <div class="col-lg-8">
    <!-- ユーザー情報カード -->
    <div class="card shadow mb-4">
      <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
        <h6 class="m-0 font-weight-bold text-primary">ユーザー情報</h6>
        <div>
          <button class="btn btn-sm btn-warning test-delivery-btn" data-user-id="<%= user._id %>" data-user-name="<%= user.displayName || user.lineUserId %>">
            <i class="fas fa-paper-plane"></i> テスト配信
          </button>
        </div>
      </div>
      <div class="card-body">
        <form id="userEditForm" action="/admin/users/<%= user._id %>" method="POST">
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="lineUserId" class="form-label">LINE ユーザーID</label>
              <input type="text" class="form-control" id="lineUserId" value="<%= user.lineUserId %>" readonly>
            </div>
            <div class="col-md-6">
              <label for="displayName" class="form-label">表示名</label>
              <input type="text" class="form-control" id="displayName" value="<%= user.displayName || '' %>" readonly>
            </div>
          </div>
          
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="birthdate" class="form-label">生年月日</label>
              <input type="text" class="form-control" id="birthdate" name="birthdate" value="<%= user.birthdate || '' %>">
            </div>
            <div class="col-md-6">
              <label for="birthtime" class="form-label">生まれた時間</label>
              <input type="text" class="form-control" id="birthtime" name="birthtime" value="<%= user.birthtime || '' %>">
            </div>
          </div>
          
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="gender" class="form-label">性別</label>
              <select class="form-select" id="gender" name="gender">
                <option value="未設定" <%= user.gender === '未設定' ? 'selected' : '' %>>未設定</option>
                <option value="男性" <%= user.gender === '男性' ? 'selected' : '' %>>男性</option>
                <option value="女性" <%= user.gender === '女性' ? 'selected' : '' %>>女性</option>
              </select>
            </div>
            <div class="col-md-6">
              <label for="registrationStatus" class="form-label">登録状態</label>
              <input type="text" class="form-control" id="registrationStatus" value="<%= user.registrationStatus %>" readonly>
            </div>
          </div>
          
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="notificationEnabled" class="form-label">通知設定</label>
              <select class="form-select" id="notificationEnabled" name="notificationEnabled">
                <option value="true" <%= user.notificationEnabled ? 'selected' : '' %>>オン</option>
                <option value="false" <%= !user.notificationEnabled ? 'selected' : '' %>>オフ</option>
              </select>
            </div>
            <div class="col-md-6">
              <label for="notificationTime" class="form-label">通知時間</label>
              <input type="text" class="form-control" id="notificationTime" name="notificationTime" value="<%= user.notificationTime || '08:45' %>">
              <small class="text-muted">形式: HH:MM（例: 08:45）</small>
            </div>
          </div>
          
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="createdAt" class="form-label">登録日時</label>
              <input type="text" class="form-control" id="createdAt" value="<%= new Date(user.createdAt).toLocaleString('ja-JP') %>" readonly>
            </div>
            <div class="col-md-6">
              <label for="lastInteraction" class="form-label">最終アクセス</label>
              <input type="text" class="form-control" id="lastInteraction" value="<%= user.lastInteraction ? new Date(user.lastInteraction).toLocaleString('ja-JP') : '未アクセス' %>" readonly>
            </div>
          </div>
          
          <div class="d-grid gap-2 d-md-flex justify-content-md-end">
            <button type="submit" class="btn btn-primary">
              <i class="fas fa-save"></i> 変更を保存
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
  
  <div class="col-lg-4">
    <!-- 四柱推命情報 -->
    <div class="card shadow mb-4">
      <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">四柱推命情報</h6>
      </div>
      <div class="card-body">
        <% if (user.birthdate) { %>
          <div id="fortuneInfo">
            <div class="text-center mb-3">
              <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
              <p>四柱推命情報を計算中...</p>
            </div>
          </div>
        <% } else { %>
          <div class="alert alert-warning">
            生年月日が設定されていないため、四柱推命情報を表示できません。
          </div>
        <% } %>
      </div>
    </div>
    
    <!-- 操作履歴 -->
    <div class="card shadow mb-4">
      <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">操作履歴</h6>
      </div>
      <div class="card-body">
        <div class="alert alert-info">
          操作履歴機能は現在開発中です。
        </div>
      </div>
    </div>
  </div>
</div>

<!-- テスト配信モーダル -->
<div class="modal fade" id="testDeliveryModal" tabindex="-1" aria-labelledby="testDeliveryModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="testDeliveryModalLabel">テスト配信</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>以下のユーザーにテスト配信を行います：</p>
        <p><strong id="testDeliveryUserName"></strong></p>
        <input type="hidden" id="testDeliveryUserId">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">キャンセル</button>
        <button type="button" class="btn btn-primary" id="sendTestBtn">送信</button>
      </div>
    </div>
  </div>
</div>

<!-- ユーザーデータを隠しフィールドとして保存 -->
<input type="hidden" id="userData" 
  data-has-birthdate="<%= user.birthdate ? 'true' : 'false' %>"
  data-birthdate="<%= user.birthdate || '' %>"
  data-birthtime="<%= user.birthtime || '' %>"
  data-gender="<%= user.gender || '未設定' %>">

<script>
  $(document).ready(function() {
    // 四柱推命情報の取得
    const userData = document.getElementById('userData');
    const hasBirthdate = userData.dataset.hasBirthdate === 'true';
    
    if (hasBirthdate) {
      const birthdate = userData.dataset.birthdate;
      const birthtime = userData.dataset.birthtime;
      const gender = userData.dataset.gender;
      
      $.ajax({
        url: '/admin/api/fortune-info',
        type: 'GET',
        data: {
          birthdate: birthdate,
          birthtime: birthtime,
          gender: gender
        },
        success: function(data) {
          if (data.success) {
            let html = '<table class="table table-bordered">';
            
            // 年柱
            html += '<tr><th>年柱</th><td>';
            if (data.yearPillar) {
              html += data.yearPillar.stem + data.yearPillar.animal + ' (' + data.yearPillar.element + ')';
            } else {
              html += '未計算';
            }
            html += '</td></tr>';
            
            // 月柱
            html += '<tr><th>月柱</th><td>';
            if (data.monthPillar) {
              html += data.monthPillar.stem + data.monthPillar.animal + ' (' + data.monthPillar.element + ')';
            } else {
              html += '未計算';
            }
            html += '</td></tr>';
            
            // 日柱
            html += '<tr><th>日柱</th><td>';
            if (data.dayPillar) {
              html += data.dayPillar.stem + data.dayPillar.animal + ' (' + data.dayPillar.element + ')';
            } else {
              html += '未計算';
            }
            html += '</td></tr>';
            
            // 時柱
            html += '<tr><th>時柱</th><td>';
            if (data.hourPillar) {
              html += data.hourPillar.stem + data.hourPillar.animal + ' (' + data.hourPillar.element + ')';
            } else {
              html += '未計算';
            }
            html += '</td></tr>';
            
            // 五行
            html += '<tr><th>五行</th><td>';
            if (data.elementCounts) {
              html += '木: ' + data.elementCounts.木 + ', ';
              html += '火: ' + data.elementCounts.火 + ', ';
              html += '土: ' + data.elementCounts.土 + ', ';
              html += '金: ' + data.elementCounts.金 + ', ';
              html += '水: ' + data.elementCounts.水;
            } else {
              html += '未計算';
            }
            html += '</td></tr>';
            
            html += '</table>';
            
            $('#fortuneInfo').html(html);
          } else {
            $('#fortuneInfo').html('<div class="alert alert-danger">四柱推命情報の計算に失敗しました。</div>');
          }
        },
        error: function() {
          $('#fortuneInfo').html('<div class="alert alert-danger">サーバーエラーが発生しました。</div>');
        }
      });
    }
    
    // テスト配信ボタンのクリックイベント
    $('.test-delivery-btn').click(function() {
      const userId = $(this).data('user-id');
      const userName = $(this).data('user-name');
      
      $('#testDeliveryUserId').val(userId);
      $('#testDeliveryUserName').text(userName);
      $('#testDeliveryModal').modal('show');
    });
    
    // テスト配信の送信
    $('#sendTestBtn').click(function() {
      const userId = $('#testDeliveryUserId').val();
      
      $.ajax({
        url: '/admin/test-delivery',
        type: 'POST',
        data: { userId },
        success: function(response) {
          if (response.success) {
            alert(response.message);
            $('#testDeliveryModal').modal('hide');
          } else {
            alert('エラー: ' + response.message);
          }
        },
        error: function() {
          alert('サーバーエラーが発生しました');
        }
      });
    });
    
    // フォームの送信
    $('#userEditForm').submit(function(e) {
      e.preventDefault();
      
      $.ajax({
        url: $(this).attr('action'),
        type: 'POST',
        data: $(this).serialize(),
        success: function(response) {
          alert('ユーザー情報を更新しました');
          location.reload();
        },
        error: function() {
          alert('ユーザー情報の更新に失敗しました');
        }
      });
    });
  });
</script>