{{template "base" .}}

{{define "content"}}
<h1 class="mb-4"><i class="bi bi-key me-2"></i>APIキー管理</h1>

{{if .error}}<div class="alert alert-danger">{{.error}}</div>{{end}}

{{if .newKey}}
<div class="alert alert-success">
    <h5 class="alert-heading"><i class="bi bi-check-circle me-2"></i>APIキーが作成されました</h5>
    <p class="mb-2">キー名: <strong>{{.newKeyName}}</strong></p>
    <p class="mb-0">以下のキーを安全な場所に保存してください。このキーは二度と表示されません。</p>
    <hr>
    <div class="d-flex align-items-center">
        <code class="flex-grow-1 bg-dark text-light p-2 rounded me-2" id="newApiKey">{{.newKey}}</code>
        <button class="btn btn-outline-secondary" onclick="copyKey()"><i class="bi bi-clipboard"></i></button>
    </div>
</div>
{{end}}

<div class="card mb-4">
    <div class="card-header">
        <i class="bi bi-plus-circle me-2"></i>新規APIキー作成
    </div>
    <div class="card-body">
        <form action="/admin/api-keys" method="POST" class="row g-3">
            {{.csrfField}}
            <div class="col-md-8">
                <input type="text" class="form-control" name="name" placeholder="キー名（例: 外部連携用）" required>
            </div>
            <div class="col-md-4">
                <button type="submit" class="btn btn-primary w-100"><i class="bi bi-plus me-1"></i>作成</button>
            </div>
        </form>
    </div>
</div>

{{if .apiKeys}}
<div class="table-responsive">
    <table class="table table-hover">
        <thead class="table-light">
            <tr>
                <th>ID</th>
                <th>キー名</th>
                <th>作成者</th>
                <th>最終使用</th>
                <th>作成日</th>
                <th style="width: 100px">操作</th>
            </tr>
        </thead>
        <tbody>
            {{range .apiKeys}}
            <tr>
                <td>{{.ID}}</td>
                <td><i class="bi bi-key me-1"></i>{{.Name}}</td>
                <td>{{if .User}}{{.User.Name}}{{else}}-{{end}}</td>
                <td>{{if .LastUsed}}{{formatDateTime .LastUsed}}{{else}}<span class="text-muted">未使用</span>{{end}}</td>
                <td>{{formatDate .CreatedAt}}</td>
                <td>
                    <form action="/admin/api-keys/{{.ID}}/delete" method="POST" class="d-inline"
                        onsubmit="return confirm('このAPIキーを削除しますか？')">
                        <input type="hidden" name="_csrf" value="{{$.csrfToken}}">
                        <button type="submit" class="btn btn-sm btn-outline-danger" title="削除"><i
                                class="bi bi-trash"></i></button>
                    </form>
                </td>
            </tr>
            {{end}}
        </tbody>
    </table>
</div>
{{else}}
<div class="text-center py-5">
    <i class="bi bi-key display-1 text-muted"></i>
    <h3 class="mt-3">APIキーがありません</h3>
    <p class="text-muted">上のフォームから新しいAPIキーを作成してください。</p>
</div>
{{end}}

<div class="card mt-4">
    <div class="card-header">
        <i class="bi bi-info-circle me-2"></i>API使用方法
    </div>
    <div class="card-body">
        <p class="mb-2">APIにアクセスするには、<code>Authorization</code>ヘッダーにAPIキーを設定してください：</p>
        <pre
            class="bg-dark text-light p-3 rounded"><code>curl -H "Authorization: Bearer YOUR_API_KEY" http://localhost:8080/api/v1/assignments</code></pre>
        <h6 class="mt-3">利用可能なエンドポイント：</h6>
        <ul class="mb-0">
            <li><code>GET /api/v1/assignments</code> - 課題一覧取得</li>
            <li><code>GET /api/v1/assignments/pending</code> - 未完了の課題一覧</li>
            <li><code>GET /api/v1/assignments/completed</code> - 完了済みの課題一覧</li>
            <li><code>GET /api/v1/assignments/overdue</code> - 期限切れの課題一覧</li>
            <li><code>GET /api/v1/assignments/due-today</code> - 今日が期限の課題一覧</li>
            <li><code>GET /api/v1/assignments/due-this-week</code> - 今週中が期限の課題一覧</li>
            <li><code>GET /api/v1/assignments/:id</code> - 課題詳細取得</li>
            <li><code>POST /api/v1/assignments</code> - 課題作成</li>
            <li><code>PUT /api/v1/assignments/:id</code> - 課題更新</li>
            <li><code>DELETE /api/v1/assignments/:id</code> - 課題削除</li>
            <li><code>PATCH /api/v1/assignments/:id/toggle</code> - 完了状態切替</li>
        </ul>
    </div>
</div>
{{end}}

{{define "scripts"}}
<script>
    function copyKey() {
        const key = document.getElementById('newApiKey').innerText;
        navigator.clipboard.writeText(key).then(() => {
            alert('APIキーをコピーしました');
        });
    }
</script>
{{end}}