{% extends "base.html" %}

{% block title %}Import Data - Claude Code Project Tracker{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1>
                <i class="fas fa-download me-2"></i>
                Import Claude Code Data
            </h1>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-file-import me-2"></i>
                    Import from .claude.json
                </h5>
            </div>
            <div class="card-body">
                <p class="text-muted">
                    Import your historical Claude Code usage data from the <code>~/.claude.json</code> file.
                    This will create projects and estimate sessions based on your past usage.
                </p>
                
                <!-- Import Form -->
                <form id="import-form">
                    <div class="mb-3">
                        <label for="file-path" class="form-label">File Path (optional)</label>
                        <input type="text" class="form-control" id="file-path" 
                               placeholder="Leave empty to use ~/.claude.json">
                        <div class="form-text">
                            If left empty, will try to import from the default location: <code>~/.claude.json</code>
                        </div>
                    </div>
                    
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-outline-primary" onclick="previewImport()">
                            <i class="fas fa-eye me-1"></i>
                            Preview Import
                        </button>
                        <button type="button" class="btn btn-primary" onclick="runImport()">
                            <i class="fas fa-download me-1"></i>
                            Import Data
                        </button>
                    </div>
                </form>
                
                <!-- Results -->
                <div id="import-results" class="mt-4" style="display: none;">
                    <hr>
                    <div id="results-content"></div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-info-circle me-2"></i>
                    What gets imported?
                </h6>
            </div>
            <div class="card-body">
                <ul class="list-unstyled">
                    <li class="mb-2">
                        <i class="fas fa-folder text-primary me-2"></i>
                        <strong>Projects</strong><br>
                        <small class="text-muted">All project directories you've used with Claude Code</small>
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-chart-line text-success me-2"></i>
                        <strong>Usage Statistics</strong><br>
                        <small class="text-muted">Total startups and estimated session distribution</small>
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-comments text-info me-2"></i>
                        <strong>History Entries</strong><br>
                        <small class="text-muted">Brief conversation topics from your history</small>
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-code text-warning me-2"></i>
                        <strong>Language Detection</strong><br>
                        <small class="text-muted">Automatically detect programming languages used</small>
                    </li>
                </ul>
                
                <div class="alert alert-info">
                    <i class="fas fa-shield-alt me-1"></i>
                    <strong>Privacy:</strong> All data stays local. No external services are used.
                </div>
            </div>
        </div>
        
        <div class="card mt-3">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Important Notes
                </h6>
            </div>
            <div class="card-body">
                <ul class="small text-muted">
                    <li>Import creates estimated data based on available information</li>
                    <li>Timestamps are estimated based on usage patterns</li>
                    <li>This is safe to run multiple times (won't create duplicates)</li>
                    <li>Large files may take a few moments to process</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
async function previewImport() {
    const filePath = document.getElementById('file-path').value.trim();
    const resultsDiv = document.getElementById('import-results');
    const resultsContent = document.getElementById('results-content');
    
    // Show loading
    resultsContent.innerHTML = `
        <div class="text-center py-3">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Previewing...</span>
            </div>
            <p class="mt-2 text-muted">Analyzing .claude.json file...</p>
        </div>
    `;
    resultsDiv.style.display = 'block';
    
    try {
        const params = new URLSearchParams();
        if (filePath) {
            params.append('file_path', filePath);
        }
        
        const response = await fetch(`/api/import/claude-json/preview?${params}`);
        const data = await response.json();
        
        if (response.ok) {
            showPreviewResults(data);
        } else {
            showError(data.detail || 'Preview failed');
        }
    } catch (error) {
        showError('Network error: ' + error.message);
    }
}

async function runImport() {
    const filePath = document.getElementById('file-path').value.trim();
    const resultsDiv = document.getElementById('import-results');
    const resultsContent = document.getElementById('results-content');
    
    // Confirm import
    if (!confirm('This will import data into your tracker database. Continue?')) {
        return;
    }
    
    // Show loading
    resultsContent.innerHTML = `
        <div class="text-center py-3">
            <div class="spinner-border text-success" role="status">
                <span class="visually-hidden">Importing...</span>
            </div>
            <p class="mt-2 text-muted">Importing Claude Code data...</p>
        </div>
    `;
    resultsDiv.style.display = 'block';
    
    try {
        const requestBody = {};
        if (filePath) {
            requestBody.file_path = filePath;
        }
        
        const response = await fetch('/api/import/claude-json', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(requestBody)
        });
        
        const data = await response.json();
        
        if (response.ok) {
            showImportResults(data);
        } else {
            showError(data.detail || 'Import failed');
        }
    } catch (error) {
        showError('Network error: ' + error.message);
    }
}

function showPreviewResults(data) {
    const html = `
        <div class="alert alert-info">
            <h6><i class="fas fa-eye me-1"></i> Import Preview</h6>
            <hr>
            <div class="row">
                <div class="col-md-6">
                    <p><strong>File:</strong> <code>${data.file_path}</code></p>
                    <p><strong>Size:</strong> ${data.file_size_mb} MB</p>
                </div>
                <div class="col-md-6">
                    <p><strong>Projects:</strong> ${data.projects.total_count}</p>
                    <p><strong>History entries:</strong> ${data.history_entries}</p>
                </div>
            </div>
            
            <div class="mt-3">
                <strong>Claude Usage Statistics:</strong>
                <ul class="mt-2">
                    <li>Total startups: ${data.claude_usage.num_startups}</li>
                    <li>First start: ${data.claude_usage.first_start_time || 'N/A'}</li>
                    <li>Prompt queue uses: ${data.claude_usage.prompt_queue_use_count}</li>
                </ul>
            </div>
            
            ${data.projects.paths.length > 0 ? `
                <div class="mt-3">
                    <strong>Sample projects:</strong>
                    <ul class="mt-2">
                        ${data.projects.paths.map(path => `<li><code>${path}</code></li>`).join('')}
                        ${data.projects.has_more ? '<li><em>... and more</em></li>' : ''}
                    </ul>
                </div>
            ` : ''}
        </div>
        
        <div class="text-center">
            <button class="btn btn-success" onclick="runImport()">
                <i class="fas fa-check me-1"></i>
                Looks good - Import this data
            </button>
        </div>
    `;
    
    document.getElementById('results-content').innerHTML = html;
}

function showImportResults(data) {
    const results = data.results;
    const hasErrors = results.errors && results.errors.length > 0;
    
    const html = `
        <div class="alert alert-success">
            <h6><i class="fas fa-check me-1"></i> Import Completed Successfully!</h6>
            <hr>
            <div class="row">
                <div class="col-md-4 text-center">
                    <div class="display-6 text-primary">${results.projects_imported}</div>
                    <small>Projects</small>
                </div>
                <div class="col-md-4 text-center">
                    <div class="display-6 text-success">${results.sessions_estimated}</div>
                    <small>Sessions</small>
                </div>
                <div class="col-md-4 text-center">
                    <div class="display-6 text-info">${results.conversations_imported}</div>
                    <small>Conversations</small>
                </div>
            </div>
        </div>
        
        ${hasErrors ? `
            <div class="alert alert-warning">
                <h6><i class="fas fa-exclamation-triangle me-1"></i> Warnings</h6>
                <ul class="mb-0">
                    ${results.errors.map(error => `<li>${error}</li>`).join('')}
                </ul>
            </div>
        ` : ''}
        
        <div class="text-center">
            <a href="/dashboard" class="btn btn-primary">
                <i class="fas fa-tachometer-alt me-1"></i>
                View Dashboard
            </a>
            <a href="/dashboard/projects" class="btn btn-outline-primary ms-2">
                <i class="fas fa-folder me-1"></i>
                View Projects
            </a>
        </div>
    `;
    
    document.getElementById('results-content').innerHTML = html;
}

function showError(message) {
    const html = `
        <div class="alert alert-danger">
            <h6><i class="fas fa-exclamation-circle me-1"></i> Error</h6>
            <p class="mb-0">${message}</p>
        </div>
    `;
    
    document.getElementById('results-content').innerHTML = html;
}
</script>
{% endblock %}