{% 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">Getting Started</li>
                        </ol>
                    </nav>
                    <h2><i class="fas fa-rocket me-3"></i>Getting Started</h2>
                    <p class="lead text-muted">Learn the basics and get Claude Code Tracker up and running</p>
                </div>
                <div class="text-muted">
                    <i class="fas fa-clock me-1"></i>
                    5 min read
                </div>
            </div>

            <div class="row">
                <div class="col-lg-8">
                    <!-- Overview -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-body">
                            <h3><i class="fas fa-info-circle me-2 text-primary"></i>What is Claude Code Tracker?</h3>
                            <p>Claude Code Tracker is a development intelligence system that helps you understand and analyze your coding activity when using Claude Code. It automatically tracks your sessions, conversations, file modifications, and provides insights into your development patterns.</p>
                            
                            <div class="row mt-4">
                                <div class="col-md-6">
                                    <h5><i class="fas fa-check-circle me-2 text-success"></i>Key Benefits</h5>
                                    <ul class="list-unstyled">
                                        <li class="mb-2"><i class="fas fa-chart-line text-primary me-2"></i>Track development productivity</li>
                                        <li class="mb-2"><i class="fas fa-history text-info me-2"></i>Browse conversation history</li>
                                        <li class="mb-2"><i class="fas fa-folder text-warning me-2"></i>Analyze project patterns</li>
                                        <li class="mb-2"><i class="fas fa-shield-alt text-success me-2"></i>Keep data local and private</li>
                                    </ul>
                                </div>
                                <div class="col-md-6">
                                    <h5><i class="fas fa-cogs me-2 text-info"></i>Core Features</h5>
                                    <ul class="list-unstyled">
                                        <li class="mb-2"><i class="fas fa-upload text-secondary me-2"></i>Import existing Claude data</li>
                                        <li class="mb-2"><i class="fas fa-link text-success me-2"></i>Real-time hook integration</li>
                                        <li class="mb-2"><i class="fas fa-search text-primary me-2"></i>Advanced search and filtering</li>
                                        <li class="mb-2"><i class="fas fa-chart-bar text-warning me-2"></i>Visual analytics and insights</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Quick Start Steps -->
                    <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>Quick Start Guide</h3>
                        </div>
                        <div class="card-body">
                            <!-- Step 1: Import Data -->
                            <div class="d-flex align-items-start mb-4 pb-4 border-bottom">
                                <div class="bg-primary rounded-circle text-white d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px; min-width: 40px;">
                                    <strong>1</strong>
                                </div>
                                <div class="flex-grow-1">
                                    <h5 class="mb-2">Import Your Existing Data</h5>
                                    <p class="text-muted mb-3">Start by importing your existing Claude Code conversation history from your <code>~/.claude.json</code> file.</p>
                                    
                                    <div class="bg-light p-3 rounded mb-3">
                                        <h6><i class="fas fa-cloud-upload-alt me-2"></i>File Upload Method (Recommended):</h6>
                                        <ol class="mb-2">
                                            <li>Navigate to the <a href="/dashboard/import">Import Data</a> page</li>
                                            <li>Click "Select .claude.json file" and choose your file</li>
                                            <li>Click "Preview Upload" to review what will be imported</li>
                                            <li>Click "Import Upload" to complete the import</li>
                                        </ol>
                                        
                                        <div class="alert alert-success mt-2 mb-0">
                                            <i class="fas fa-lightbulb me-1"></i>
                                            <strong>New:</strong> File upload method works with any .claude.json file and provides detailed previews before importing.
                                        </div>
                                    </div>

                                    <div class="alert alert-info mb-0">
                                        <i class="fas fa-info-circle me-2"></i>
                                        <strong>Location:</strong> Your Claude data file is typically located at <code>~/.claude.json</code> on macOS/Linux or <code>%USERPROFILE%\.claude.json</code> on Windows.
                                    </div>
                                </div>
                            </div>

                            <!-- Step 2: Set Up Hooks -->
                            <div class="d-flex align-items-start mb-4 pb-4 border-bottom">
                                <div class="bg-success rounded-circle text-white d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px; min-width: 40px;">
                                    <strong>2</strong>
                                </div>
                                <div class="flex-grow-1">
                                    <h5 class="mb-2">Configure Claude Code Hooks</h5>
                                    <p class="text-muted mb-3">Set up hooks to automatically track new sessions and conversations in real-time.</p>
                                    
                                    <div class="bg-light p-3 rounded mb-3">
                                        <h6><i class="fas fa-magic me-2"></i>Automatic Installation (Recommended):</h6>
                                        <p class="mb-2">Use our automated installer for easy setup:</p>
                                        <pre class="bg-dark text-light p-3 rounded"><code># Set your domain and install hooks
export DOMAIN=your-domain.com
./setup-hooks</code></pre>
                                        
                                        <div class="alert alert-success mt-2 mb-0">
                                            <i class="fas fa-rocket me-1"></i>
                                            <strong>New:</strong> Automatic hook installer with 7+ pre-configured profiles available!
                                        </div>
                                    </div>

                                    <div class="alert alert-info mb-0">
                                        <i class="fas fa-info-circle me-2"></i>
                                        <strong>Alternative Methods:</strong> Manual configuration and detailed setup instructions are available in the <a href="/dashboard/docs/hook-setup">Hook Setup Guide</a>.
                                    </div>
                                </div>
                            </div>

                            <!-- Step 3: Explore Dashboard -->
                            <div class="d-flex align-items-start">
                                <div class="bg-info rounded-circle text-white d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px; min-width: 40px;">
                                    <strong>3</strong>
                                </div>
                                <div class="flex-grow-1">
                                    <h5 class="mb-2">Explore Your Data</h5>
                                    <p class="text-muted mb-3">Navigate through the dashboard to discover insights about your development activity.</p>
                                    
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="card border-0 bg-light">
                                                <div class="card-body p-3">
                                                    <h6><a href="/dashboard/projects" class="text-decoration-none"><i class="fas fa-folder-open me-2"></i>Projects</a></h6>
                                                    <small class="text-muted">View project statistics, timelines, and detailed analytics</small>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="card border-0 bg-light">
                                                <div class="card-body p-3">
                                                    <h6><a href="/dashboard/conversations" class="text-decoration-none"><i class="fas fa-comments me-2"></i>Conversations</a></h6>
                                                    <small class="text-muted">Search and browse through all your Claude conversations</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- System Requirements -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-body">
                            <h3><i class="fas fa-server me-2 text-info"></i>System Requirements</h3>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <h5>Software Requirements</h5>
                                    <ul class="list-unstyled">
                                        <li class="mb-2">
                                            <i class="fab fa-python text-primary me-2"></i>
                                            <strong>Python 3.8+</strong>
                                        </li>
                                        <li class="mb-2">
                                            <i class="fas fa-terminal text-secondary me-2"></i>
                                            <strong>Claude Code CLI</strong>
                                        </li>
                                        <li class="mb-2">
                                            <i class="fas fa-globe text-info me-2"></i>
                                            <strong>Web browser</strong> (modern browser recommended)
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-md-6">
                                    <h5>Hardware Recommendations</h5>
                                    <ul class="list-unstyled">
                                        <li class="mb-2">
                                            <i class="fas fa-memory text-warning me-2"></i>
                                            <strong>2GB+ RAM</strong>
                                        </li>
                                        <li class="mb-2">
                                            <i class="fas fa-hdd text-success me-2"></i>
                                            <strong>100MB+ disk space</strong>
                                        </li>
                                        <li class="mb-2">
                                            <i class="fas fa-network-wired text-primary me-2"></i>
                                            <strong>Network access</strong> for web interface
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Troubleshooting -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-body">
                            <h3><i class="fas fa-tools me-2 text-warning"></i>Common Issues</h3>
                            
                            <div class="accordion" id="troubleshootingAccordion">
                                <!-- Issue 1 -->
                                <div class="accordion-item border-0">
                                    <h2 class="accordion-header" id="issue1">
                                        <button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1">
                                            <i class="fas fa-file-import me-2 text-danger"></i>
                                            Import fails or shows errors
                                        </button>
                                    </h2>
                                    <div id="collapse1" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
                                        <div class="accordion-body">
                                            <p><strong>Possible causes:</strong></p>
                                            <ul>
                                                <li>Invalid or corrupted <code>.claude.json</code> file</li>
                                                <li>Insufficient disk space</li>
                                                <li>File permissions issues</li>
                                            </ul>
                                            <p><strong>Solutions:</strong></p>
                                            <ul>
                                                <li>Verify the JSON file is valid using a JSON validator</li>
                                                <li>Check available disk space (need ~100MB minimum)</li>
                                                <li>Ensure the application has read/write permissions</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <!-- Issue 2 -->
                                <div class="accordion-item border-0">
                                    <h2 class="accordion-header" id="issue2">
                                        <button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2">
                                            <i class="fas fa-link me-2 text-warning"></i>
                                            Hooks not working
                                        </button>
                                    </h2>
                                    <div id="collapse2" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
                                        <div class="accordion-body">
                                            <p><strong>Check these items:</strong></p>
                                            <ul>
                                                <li>Claude Code Tracker server is running on port 8000</li>
                                                <li>Hook URLs are correctly configured</li>
                                                <li>Network connectivity between Claude Code and the tracker</li>
                                                <li>Hook syntax is valid JSON</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <!-- Issue 3 -->
                                <div class="accordion-item border-0">
                                    <h2 class="accordion-header" id="issue3">
                                        <button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3">
                                            <i class="fas fa-chart-line me-2 text-info"></i>
                                            Statistics showing zeros
                                        </button>
                                    </h2>
                                    <div id="collapse3" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
                                        <div class="accordion-body">
                                            <p><strong>This can happen after import. Run the recalculation script:</strong></p>
                                            <pre class="bg-dark text-light p-3 rounded"><code>python recalculate_project_stats.py</code></pre>
                                            <p class="mt-2">This will recalculate all project statistics from your imported data.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="col-lg-4">
                    <div class="sticky-top" style="top: 2rem;">
                        <!-- Quick Actions -->
                        <div class="card border-0 shadow-sm mb-4">
                            <div class="card-header bg-success text-white">
                                <h5 class="mb-0"><i class="fas fa-rocket me-2"></i>Quick Actions</h5>
                            </div>
                            <div class="card-body">
                                <div class="d-grid gap-2">
                                    <a href="/dashboard/import" class="btn btn-success">
                                        <i class="fas fa-upload me-2"></i>
                                        Import Data Now
                                    </a>
                                    <a href="/dashboard/docs/hook-setup" class="btn btn-outline-primary">
                                        <i class="fas fa-link me-2"></i>
                                        Setup Hooks
                                    </a>
                                    <a href="/dashboard/projects" class="btn btn-outline-info">
                                        <i class="fas fa-folder-open me-2"></i>
                                        View Projects
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- Table of Contents -->
                        <div class="card border-0 shadow-sm mb-4">
                            <div class="card-header bg-light">
                                <h6 class="mb-0"><i class="fas fa-list me-2"></i>Contents</h6>
                            </div>
                            <div class="card-body">
                                <nav class="nav nav-pills flex-column">
                                    <a class="nav-link py-1 px-2 text-sm" href="#overview">What is Claude Code Tracker?</a>
                                    <a class="nav-link py-1 px-2 text-sm" href="#quickstart">Quick Start Guide</a>
                                    <a class="nav-link py-1 px-2 text-sm" href="#requirements">System Requirements</a>
                                    <a class="nav-link py-1 px-2 text-sm" href="#troubleshooting">Common Issues</a>
                                </nav>
                            </div>
                        </div>

                        <!-- Related Links -->
                        <div class="card border-0 shadow-sm">
                            <div class="card-header bg-light">
                                <h6 class="mb-0"><i class="fas fa-external-link-alt me-2"></i>Related</h6>
                            </div>
                            <div class="card-body">
                                <ul class="list-unstyled mb-0">
                                    <li class="mb-2">
                                        <a href="/dashboard/docs/hook-setup" class="text-decoration-none">
                                            <i class="fas fa-link me-2 text-success"></i>
                                            Hook Setup Guide
                                        </a>
                                    </li>
                                    <li class="mb-2">
                                        <a href="/dashboard/docs/api-reference" class="text-decoration-none">
                                            <i class="fas fa-code me-2 text-info"></i>
                                            API Reference
                                        </a>
                                    </li>
                                    <li class="mb-2">
                                        <a href="/dashboard/docs/faq" class="text-decoration-none">
                                            <i class="fas fa-question-circle me-2 text-warning"></i>
                                            FAQ
                                        </a>
                                    </li>
                                    <li>
                                        <a href="/docs" target="_blank" class="text-decoration-none">
                                            <i class="fas fa-external-link-alt me-2 text-primary"></i>
                                            API Documentation
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}