{% extends "base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <!-- Header -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="/dashboard/docs">Documentation</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Complete Hook Reference</li>
                        </ol>
                    </nav>
                    <h2><i class="fas fa-book-open me-3"></i>Complete Hook Reference</h2>
                    <p class="lead text-muted">Comprehensive guide to all available Claude Code hooks</p>
                </div>
                <div class="text-muted">
                    <i class="fas fa-info-circle me-1"></i>
                    30+ Hook Types
                </div>
            </div>

            <div class="row">
                <div class="col-lg-8">
                    <!-- Quick Overview -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-body">
                            <h3><i class="fas fa-lightning-bolt me-2 text-primary"></i>Hook Categories Overview</h3>
                            <p>Claude Code Tracker supports comprehensive development intelligence through these hook categories:</p>
                            
                            <div class="row">
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="card border-0 bg-primary bg-opacity-10">
                                        <div class="card-body p-3 text-center">
                                            <i class="fas fa-play-circle fa-2x text-primary mb-2"></i>
                                            <h6>Essential (5)</h6>
                                            <small class="text-muted">Core session & tool tracking</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="card border-0 bg-warning bg-opacity-10">
                                        <div class="card-body p-3 text-center">
                                            <i class="fas fa-tachometer-alt fa-2x text-warning mb-2"></i>
                                            <h6>Performance (5)</h6>
                                            <small class="text-muted">System & debug monitoring</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="card border-0 bg-success bg-opacity-10">
                                        <div class="card-body p-3 text-center">
                                            <i class="fas fa-code-branch fa-2x text-success mb-2"></i>
                                            <h6>Code Quality (4)</h6>
                                            <small class="text-muted">Linting, testing, builds</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="card border-0 bg-info bg-opacity-10">
                                        <div class="card-body p-3 text-center">
                                            <i class="fas fa-project-diagram fa-2x text-info mb-2"></i>
                                            <h6>Workflow (4)</h6>
                                            <small class="text-muted">Development patterns</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="card border-0 bg-secondary bg-opacity-10">
                                        <div class="card-body p-3 text-center">
                                            <i class="fas fa-users fa-2x text-secondary mb-2"></i>
                                            <h6>Collaboration (4)</h6>
                                            <small class="text-muted">External interactions</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="card border-0 bg-dark bg-opacity-10">
                                        <div class="card-body p-3 text-center">
                                            <i class="fas fa-brain fa-2x text-dark mb-2"></i>
                                            <h6>Intelligence (5)</h6>
                                            <small class="text-muted">High-level project insights</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Essential Hooks -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-primary text-white">
                            <h3 class="mb-0"><i class="fas fa-play-circle me-2"></i>Essential Hooks</h3>
                        </div>
                        <div class="card-body">
                            <p class="text-muted mb-4">Core hooks that every user should enable for basic session and development tracking.</p>
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <div class="card border-0 bg-light">
                                        <div class="card-body">
                                            <h6><code>session_start</code></h6>
                                            <p class="small text-muted mb-2">Triggered when a new Claude Code session begins</p>
                                            <div class="badge bg-success">Required</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="card border-0 bg-light">
                                        <div class="card-body">
                                            <h6><code>session_end</code></h6>
                                            <p class="small text-muted mb-2">Triggered when a Claude Code session ends</p>
                                            <div class="badge bg-success">Required</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="card border-0 bg-light">
                                        <div class="card-body">
                                            <h6><code>conversation_update</code></h6>
                                            <p class="small text-muted mb-2">Logs conversation messages and interactions</p>
                                            <div class="badge bg-warning">Recommended</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="card border-0 bg-light">
                                        <div class="card-body">
                                            <h6><code>tool_call</code></h6>
                                            <p class="small text-muted mb-2">Tracks which tools are used and their performance</p>
                                            <div class="badge bg-warning">Recommended</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="card border-0 bg-light">
                                        <div class="card-body">
                                            <h6><code>file_modified</code></h6>
                                            <p class="small text-muted mb-2">Records file creations, modifications, and deletions</p>
                                            <div class="badge bg-info">Optional</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Performance & Debugging Hooks -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-warning text-dark">
                            <h3 class="mb-0"><i class="fas fa-tachometer-alt me-2"></i>Performance & Debugging</h3>
                        </div>
                        <div class="card-body">
                            <p class="text-muted mb-4">Monitor system performance and track debugging activities.</p>
                            
                            <div class="accordion" id="performanceAccordion">
                                <div class="accordion-item border-0">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#perf1">
                                            <i class="fas fa-exclamation-triangle me-2 text-danger"></i>
                                            <code>tool_error</code> - Track failed tool calls
                                        </button>
                                    </h2>
                                    <div id="perf1" class="accordion-collapse collapse show" data-bs-parent="#performanceAccordion">
                                        <div class="accordion-body">
                                            <p><strong>Purpose:</strong> Record when tools fail with detailed error information.</p>
                                            <div class="bg-dark text-light p-3 rounded mb-3">
                                                <h6 class="text-light">Hook Configuration:</h6>
                                                <code class="small">
"tool_error": "curl -X POST http://localhost:8000/api/hooks/tool-error -H 'Content-Type: application/json' -d '{\"tool_name\": \"$TOOL_NAME\", \"error_type\": \"$ERROR_TYPE\", \"error_message\": \"$ERROR_MESSAGE\", \"stack_trace\": \"$STACK_TRACE\"}'"
                                                </code>
                                            </div>
                                            <p><strong>Variables:</strong> <code>$TOOL_NAME</code>, <code>$ERROR_TYPE</code>, <code>$ERROR_MESSAGE</code>, <code>$STACK_TRACE</code></p>
                                        </div>
                                    </div>
                                </div>

                                <div class="accordion-item border-0">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#perf2">
                                            <i class="fas fa-clock me-2 text-primary"></i>
                                            <code>waiting_period_start/end</code> - Track thinking time
                                        </button>
                                    </h2>
                                    <div id="perf2" class="accordion-collapse collapse" data-bs-parent="#performanceAccordion">
                                        <div class="accordion-body">
                                            <p><strong>Purpose:</strong> Monitor periods when Claude is processing vs actively working.</p>
                                            <div class="bg-dark text-light p-3 rounded mb-3">
                                                <h6 class="text-light">Hook Configurations:</h6>
                                                <code class="small d-block mb-2">
"waiting_period_start": "curl -X POST .../api/hooks/waiting-period -d '{\"reason\": \"thinking\", \"context\": \"$CONTEXT\"}'"
                                                </code>
                                                <code class="small d-block">
"waiting_period_end": "curl -X POST .../api/hooks/waiting-period -d '{\"duration_ms\": $DURATION_MS, \"end_time\": \"$TIMESTAMP\"}'"
                                                </code>
                                            </div>
                                            <p><strong>Use Cases:</strong> Identify bottlenecks, optimize prompts, understand processing patterns</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="accordion-item border-0">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#perf3">
                                            <i class="fas fa-memory me-2 text-info"></i>
                                            <code>memory_usage</code> - Monitor system resources
                                        </button>
                                    </h2>
                                    <div id="perf3" class="accordion-collapse collapse" data-bs-parent="#performanceAccordion">
                                        <div class="accordion-body">
                                            <p><strong>Purpose:</strong> Track memory, CPU, and disk usage during development.</p>
                                            <div class="bg-dark text-light p-3 rounded mb-3">
                                                <h6 class="text-light">Hook Configuration:</h6>
                                                <code class="small">
"memory_usage": "curl -X POST .../api/hooks/performance -d '{\"metric_type\": \"memory\", \"value\": $MEMORY_MB, \"unit\": \"MB\", \"threshold_exceeded\": $THRESHOLD_EXCEEDED}'"
                                                </code>
                                            </div>
                                            <p><strong>Metrics:</strong> memory, cpu, disk, network</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Code Quality Hooks -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-success text-white">
                            <h3 class="mb-0"><i class="fas fa-code-branch me-2"></i>Code Quality & Testing</h3>
                        </div>
                        <div class="card-body">
                            <p class="text-muted mb-4">Track linting, testing, builds, and dependency changes.</p>
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <div class="card border-0 bg-light">
                                        <div class="card-body">
                                            <h6><i class="fas fa-search me-2 text-primary"></i><code>code_analysis</code></h6>
                                            <p class="small text-muted">ESLint, Prettier, type checking results</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="card border-0 bg-light">
                                        <div class="card-body">
                                            <h6><i class="fas fa-vial me-2 text-success"></i><code>test_execution</code></h6>
                                            <p class="small text-muted">Unit tests, integration tests, coverage</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="card border-0 bg-light">
                                        <div class="card-body">
                                            <h6><i class="fas fa-hammer me-2 text-warning"></i><code>build_process</code></h6>
                                            <p class="small text-muted">Compilation, bundling, deployment</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="card border-0 bg-light">
                                        <div class="card-body">
                                            <h6><i class="fas fa-boxes me-2 text-info"></i><code>dependency_change</code></h6>
                                            <p class="small text-muted">Package installs, updates, removals</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Workflow Hooks -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-info text-white">
                            <h3 class="mb-0"><i class="fas fa-project-diagram me-2"></i>Development Workflow</h3>
                        </div>
                        <div class="card-body">
                            <p class="text-muted mb-4">Understand development patterns and workflow efficiency.</p>
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <div class="card border-0 bg-light">
                                        <div class="card-body">
                                            <h6><i class="fas fa-exchange-alt me-2 text-primary"></i><code>context_switch</code></h6>
                                            <p class="small text-muted">Track project/context changes</p>
                                            <div class="small">
                                                <strong>Impact:</strong> Measure multitasking overhead
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="card border-0 bg-light">
                                        <div class="card-body">
                                            <h6><i class="fas fa-search me-2 text-success"></i><code>search_query</code></h6>
                                            <p class="small text-muted">What you search for in code/files</p>
                                            <div class="small">
                                                <strong>Insights:</strong> Common patterns, knowledge gaps
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="card border-0 bg-light">
                                        <div class="card-body">
                                            <h6><i class="fas fa-globe me-2 text-warning"></i><code>browser_tab</code></h6>
                                            <p class="small text-muted">Documentation, StackOverflow visits</p>
                                            <div class="small">
                                                <strong>Analysis:</strong> Research patterns, learning topics
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="card border-0 bg-light">
                                        <div class="card-body">
                                            <h6><i class="fas fa-copy me-2 text-info"></i><code>copy_paste</code></h6>
                                            <p class="small text-muted">Code copying patterns</p>
                                            <div class="small">
                                                <strong>Quality:</strong> Identify repetitive work
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Pre-configured Setups -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-dark text-white">
                            <h3 class="mb-0"><i class="fas fa-download me-2"></i>Pre-configured Hook Setups</h3>
                        </div>
                        <div class="card-body">
                            <p class="text-muted mb-4">Download ready-to-use configurations for different development styles:</p>
                            
                            <div class="row">
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="card border-0 bg-primary bg-opacity-10">
                                        <div class="card-body text-center">
                                            <i class="fas fa-rocket fa-2x text-primary mb-2"></i>
                                            <h6>Essential</h6>
                                            <p class="small text-muted">Core tracking only</p>
                                            <a href="/static/claude-hooks-essential.json" download class="btn btn-sm btn-primary">
                                                <i class="fas fa-download me-1"></i>Download
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="card border-0 bg-success bg-opacity-10">
                                        <div class="card-body text-center">
                                            <i class="fas fa-code fa-2x text-success mb-2"></i>
                                            <h6>Developer</h6>
                                            <p class="small text-muted">Code quality focused</p>
                                            <a href="/static/claude-hooks-developer.json" download class="btn btn-sm btn-success">
                                                <i class="fas fa-download me-1"></i>Download
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="card border-0 bg-warning bg-opacity-10">
                                        <div class="card-body text-center">
                                            <i class="fas fa-bolt fa-2x text-warning mb-2"></i>
                                            <h6>Power User</h6>
                                            <p class="small text-muted">Advanced analytics</p>
                                            <a href="/static/claude-hooks-power_user.json" download class="btn btn-sm btn-warning">
                                                <i class="fas fa-download me-1"></i>Download
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="card border-0 bg-info bg-opacity-10">
                                        <div class="card-body text-center">
                                            <i class="fas fa-graduation-cap fa-2x text-info mb-2"></i>
                                            <h6>Research</h6>
                                            <p class="small text-muted">Learning focused</p>
                                            <a href="/static/claude-hooks-research.json" download class="btn btn-sm btn-info">
                                                <i class="fas fa-download me-1"></i>Download
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="card border-0 bg-secondary bg-opacity-10">
                                        <div class="card-body text-center">
                                            <i class="fas fa-users fa-2x text-secondary mb-2"></i>
                                            <h6>Team</h6>
                                            <p class="small text-muted">Collaboration tracking</p>
                                            <a href="/static/claude-hooks-team.json" download class="btn btn-sm btn-secondary">
                                                <i class="fas fa-download me-1"></i>Download
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="card border-0 bg-dark bg-opacity-10">
                                        <div class="card-body text-center">
                                            <i class="fas fa-cogs fa-2x text-dark mb-2"></i>
                                            <h6>Comprehensive</h6>
                                            <p class="small text-muted">All hooks enabled</p>
                                            <a href="/static/claude-hooks-comprehensive.json" download class="btn btn-sm btn-dark">
                                                <i class="fas fa-download me-1"></i>Download
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="col-lg-4">
                    <div class="sticky-top" style="top: 2rem;">
                        <!-- Quick Navigation -->
                        <div class="card border-0 shadow-sm mb-4">
                            <div class="card-header bg-primary text-white">
                                <h5 class="mb-0"><i class="fas fa-list me-2"></i>Hook Categories</h5>
                            </div>
                            <div class="card-body">
                                <nav class="nav nav-pills flex-column">
                                    <a class="nav-link py-1 px-2 text-sm" href="#essential">Essential (5)</a>
                                    <a class="nav-link py-1 px-2 text-sm" href="#performance">Performance (5)</a>
                                    <a class="nav-link py-1 px-2 text-sm" href="#code-quality">Code Quality (4)</a>
                                    <a class="nav-link py-1 px-2 text-sm" href="#workflow">Workflow (4)</a>
                                    <a class="nav-link py-1 px-2 text-sm" href="#collaboration">Collaboration (4)</a>
                                    <a class="nav-link py-1 px-2 text-sm" href="#intelligence">Intelligence (5)</a>
                                    <a class="nav-link py-1 px-2 text-sm" href="#environment">Environment (4)</a>
                                    <a class="nav-link py-1 px-2 text-sm" href="#learning">Learning (4)</a>
                                    <a class="nav-link py-1 px-2 text-sm" href="#testing">Testing (4)</a>
                                </nav>
                            </div>
                        </div>

                        <!-- Hook Statistics -->
                        <div class="card border-0 shadow-sm mb-4">
                            <div class="card-header bg-success text-white">
                                <h6 class="mb-0"><i class="fas fa-chart-bar me-2"></i>Hook Statistics</h6>
                            </div>
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="small">Total Hooks Available:</span>
                                    <span class="badge bg-primary">39</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="small">API Endpoints:</span>
                                    <span class="badge bg-success">10</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="small">Pre-built Configs:</span>
                                    <span class="badge bg-info">7</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="small">Hook Variables:</span>
                                    <span class="badge bg-warning">25+</span>
                                </div>
                            </div>
                        </div>

                        <!-- Quick Setup -->
                        <div class="card border-0 shadow-sm mb-4">
                            <div class="card-header bg-warning text-dark">
                                <h6 class="mb-0"><i class="fas fa-zap me-2"></i>Quick Setup</h6>
                            </div>
                            <div class="card-body">
                                <ol class="small">
                                    <li>Download a pre-configured setup above</li>
                                    <li>Copy JSON content to your Claude settings</li>
                                    <li>Ensure tracker is running on port 8000</li>
                                    <li>Start Claude Code - hooks activate automatically!</li>
                                </ol>
                                <div class="d-grid gap-2 mt-3">
                                    <a href="/dashboard/docs/hook-setup" class="btn btn-sm btn-primary">
                                        <i class="fas fa-cogs me-1"></i>Setup Guide
                                    </a>
                                    <a href="/dashboard/docs/api-reference" class="btn btn-sm btn-outline-info">
                                        <i class="fas fa-code me-1"></i>API Reference
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- Variable Reference -->
                        <div class="card border-0 shadow-sm">
                            <div class="card-header bg-info text-white">
                                <h6 class="mb-0"><i class="fas fa-dollar-sign me-2"></i>Key Variables</h6>
                            </div>
                            <div class="card-body">
                                <div class="small">
                                    <div class="mb-2">
                                        <code>$SESSION_ID</code>
                                        <div class="text-muted">Current session ID</div>
                                    </div>
                                    <div class="mb-2">
                                        <code>$TOOL_NAME</code>
                                        <div class="text-muted">Tool being called</div>
                                    </div>
                                    <div class="mb-2">
                                        <code>$TIMESTAMP</code>
                                        <div class="text-muted">Current timestamp</div>
                                    </div>
                                    <div class="mb-2">
                                        <code>$FILE_PATH</code>
                                        <div class="text-muted">Modified file path</div>
                                    </div>
                                    <div class="mb-2">
                                        <code>$ERROR_MESSAGE</code>
                                        <div class="text-muted">Error details</div>
                                    </div>
                                    <div>
                                        <a href="/dashboard/docs/hook-setup#variables" class="text-decoration-none small">
                                            <i class="fas fa-external-link-alt me-1"></i>
                                            View all variables
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}