{% extends "base.html" %}

{% block title %}
    {% if current_user.is_authenticated %}
        Travel Records - Your Destinations
    {% else %}
        Welcome to Travel Records
    {% endif %}
{% endblock %}

{% block content %}
{% if current_user.is_authenticated %}
    <!-- Authenticated User Dashboard -->
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div class="hero-title">
                    <h2 class="cinematic-title">
                        <i data-feather="map" class="me-3 travel-icon"></i>
                        Your Travel Records
                    </h2>
                    <p class="hero-subtitle">
                        Welcome back, {{ current_user.display_name }}! Explore your journey through the world
                    </p>
                
                <!-- Travel Statistics Dashboard -->
                {% if records %}
                <div class="travel-stats-dashboard mt-3">
                    <div class="row g-2">
                        <div class="col-md-3 col-6">
                            <div class="stat-card">
                                <div class="stat-icon trips-icon">
                                    ✈️
                                </div>
                                <div class="stat-number">{{ records|length }}</div>
                                <div class="stat-label">Total Trips</div>
                            </div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="stat-card">
                                <div class="stat-icon countries-icon">
                                    🌍
                                </div>
                                <div class="stat-number">{{ unique_countries|length }}</div>
                                <div class="stat-label">Countries</div>
                            </div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="stat-card">
                                <div class="stat-icon year-icon">
                                    📅
                                </div>
                                <div class="stat-number">{{ current_year_trips }}</div>
                                <div class="stat-label">This Year</div>
                            </div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="stat-card">
                                <div class="stat-icon photos-icon">
                                    📸
                                </div>
                                <div class="stat-number">{{ total_photos }}</div>
                                <div class="stat-label">Photos</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Toggle Buttons for More Stats -->
                    <div class="stats-toggles mt-3">
                        <button class="btn btn-secondary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#purposeBreakdown">
                            📊 Purpose Breakdown
                        </button>
                        <button class="btn btn-secondary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#monthlyStats">
                            📈 Monthly Trends
                        </button>
                        <button class="btn btn-secondary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#topDestinations">
                            ⭐ Top Destinations
                        </button>
                    </div>
                    
                    <!-- Collapsible Stats Sections -->
                    <div class="collapse mt-3" id="purposeBreakdown">
                        <div class="stats-panel">
                            <h6 class="stats-panel-title">Travel by Purpose</h6>
                            <div class="row g-2">
                                {% for purpose, count in purpose_stats.items() %}
                                <div class="col-md-2 col-4">
                                    <div class="purpose-stat">
                                        <span class="badge badge-{{ purpose }}">{{ count }}</span>
                                        <small class="purpose-name">{{ purpose|title }}</small>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    
                    <div class="collapse mt-3" id="monthlyStats">
                        <div class="stats-panel">
                            <h6 class="stats-panel-title">Travel Activity by Month</h6>
                            <div class="monthly-chart">
                                {% for month, count in monthly_stats.items() %}
                                <div class="month-bar">
                                    <div class="month-value" style="height: {{ (count / max_monthly * 100)|round }}%"></div>
                                    <div class="month-label">{{ month[:3] }}</div>
                                    <div class="month-count">{{ count }}</div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    
                    <div class="collapse mt-3" id="topDestinations">
                        <div class="stats-panel">
                            <h6 class="stats-panel-title">Most Visited</h6>
                            <div class="destination-list">
                                {% for destination, count in top_destinations %}
                                <div class="destination-item">
                                    <span class="destination-name">{{ destination }}</span>
                                    <span class="destination-count">{{ count }} visit{{ 's' if count > 1 else '' }}</span>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
            <div class="d-flex gap-2">
                <a href="{{ url_for('add_record') }}" class="btn btn-success floating-cta">
                    <i data-feather="plus" class="me-2"></i>
                    Add New Record
                </a>
                {% if current_user.is_authenticated %}
                <a href="{{ url_for('replit_auth.logout') }}" class="btn btn-outline-secondary">
                    <i data-feather="log-out" class="me-2"></i>
                    Sign Out
                </a>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Compact Search Form -->
<div class="search-form mb-compact">
    <form method="GET" action="{{ url_for('index') }}" class="row g-2 align-items-end">
        <div class="col-md-2">
            {{ search_form.search_country.label(class="form-label text-compact") }}
            {{ search_form.search_country(class="form-control", value=request.args.get('search_country', '')) }}
        </div>
        <div class="col-md-2">
            {{ search_form.search_city.label(class="form-label text-compact") }}
            {{ search_form.search_city(class="form-control", value=request.args.get('search_city', '')) }}
        </div>
        <div class="col-md-2">
            {{ search_form.search_purpose.label(class="form-label text-compact") }}
            {{ search_form.search_purpose(class="form-control") }}
        </div>
        <div class="col-md-2">
            {{ search_form.date_from.label(class="form-label text-compact") }}
            {{ search_form.date_from(class="form-control", value=request.args.get('date_from', '')) }}
        </div>
        <div class="col-md-2">
            {{ search_form.date_to.label(class="form-label text-compact") }}
            {{ search_form.date_to(class="form-control", value=request.args.get('date_to', '')) }}
        </div>
        <div class="col-md-2">
            <div class="d-flex gap-1">
                {{ search_form.submit(class="btn btn-primary btn-sm") }}
                <a href="{{ url_for('index') }}" class="btn btn-secondary btn-sm">
                    <i data-feather="x"></i>
                </a>
            </div>
        </div>
    </form>
</div>

<!-- Records Display -->
<div class="row">
    <div class="col-12">
        {% if records %}
            <!-- Enhanced Travel Records Table -->
            <div class="card travel-records-table">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span class="text-compact">{{ records|length }} Travel Record(s) Found</span>
                    <div class="d-flex gap-2">
                        {% if records %}
                            <a href="{{ url_for('export_csv') }}" class="btn btn-success btn-sm">
                                📥 Export CSV
                            </a>
                        {% endif %}
                        <a href="{{ url_for('import_records') }}" class="btn btn-info btn-sm">
                            📤 Import Data
                        </a>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover travel-table">
                        <thead>
                            <tr>
                                <th>🗺️ Destination</th>
                                <th>📅 Travel Dates</th>
                                <th>🎯 Purpose</th>
                                <th>📸 Photos</th>
                                <th>📝 Notes</th>
                                <th>⚙️ Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for record in records %}
                            <tr class="travel-row" data-country="{{ record.country|lower }}" data-city="{{ record.city|lower }}" data-purpose="{{ record.purpose }}">
                                <td class="destination-cell">
                                    <div class="destination-info">
                                        <div class="city-name">{{ record.city }}</div>
                                        <div class="country-name">{{ record.country }}</div>
                                    </div>
                                </td>
                                <td class="dates-cell">
                                    <div class="departure-date">
                                        <strong>{{ record.departure_date.strftime('%b %d, %Y') }}</strong>
                                    </div>
                                    {% if record.return_date %}
                                    <div class="return-date">
                                        to {{ record.return_date.strftime('%b %d, %Y') }}
                                    </div>
                                    {% endif %}
                                </td>
                                <td class="purpose-cell">
                                    <span class="badge badge-{{ record.purpose }}">{{ record.purpose|title }}</span>
                                </td>
                                <td class="photos-cell">
                                    {% if record.photos %}
                                    <div class="photo-preview-grid">
                                        {% for photo in record.photos[:3] %}
                                        <img src="/static/uploads/thumbnails/{{ photo.filename }}" 
                                             alt="{{ photo.original_filename }}" 
                                             class="mini-photo"
                                             onclick="openPhotoModal('{{ photo.filename }}', '{{ photo.original_filename }}')">
                                        {% endfor %}
                                        {% if record.photos|length > 3 %}
                                        <div class="photo-count-badge">+{{ record.photos|length - 3 }}</div>
                                        {% endif %}
                                    </div>
                                    {% else %}
                                    <span class="no-photos">No photos</span>
                                    {% endif %}
                                </td>
                                <td class="notes-cell">
                                    {% if record.flight_notes %}
                                    <div class="notes-preview" title="{{ record.flight_notes }}">
                                        {{ record.flight_notes[:40] }}{% if record.flight_notes|length > 40 %}...{% endif %}
                                    </div>
                                    {% else %}
                                    <span class="no-notes">-</span>
                                    {% endif %}
                                </td>
                                <td class="actions-cell">
                                    <div class="action-buttons">
                                        <a href="{{ url_for('view_record', record_id=record.id) }}" 
                                           class="btn btn-primary btn-xs" title="View Details">
                                            👁️
                                        </a>
                                        <a href="{{ url_for('edit_record', record_id=record.id) }}" 
                                           class="btn btn-secondary btn-xs" title="Edit Record">
                                            ✏️
                                        </a>
                                        <button type="button" class="btn btn-outline-danger btn-xs" 
                                                onclick="confirmDelete({{ record.id }}, '{{ record.city }}, {{ record.country }}')" 
                                                title="Delete Record">
                                            🗑️
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                
                <!-- Mobile Card View -->
                <div class="mobile-records-view">
                    {% for record in records %}
                    <div class="mobile-record-card">
                        <div class="mobile-record-header">
                            <div class="mobile-destination">
                                <div class="city-name">{{ record.city }}</div>
                                <div class="country-name">{{ record.country }}</div>
                            </div>
                            <div class="mobile-actions">
                                <a href="{{ url_for('view_record', record_id=record.id) }}" 
                                   class="btn btn-primary" title="View Details">
                                    👁️
                                </a>
                                <a href="{{ url_for('edit_record', record_id=record.id) }}" 
                                   class="btn btn-secondary" title="Edit Record">
                                    ✏️
                                </a>
                                <button type="button" class="btn btn-outline-danger" 
                                        onclick="confirmDelete({{ record.id }}, '{{ record.city }}, {{ record.country }}')" 
                                        title="Delete Record">
                                    🗑️
                                </button>
                            </div>
                        </div>
                        
                        <div class="mobile-record-details">
                            <div class="mobile-detail-item">
                                <div class="mobile-detail-label">📅 Travel Dates</div>
                                <div class="mobile-detail-value mobile-date-range">
                                    {{ record.departure_date.strftime('%b %d, %Y') }}
                                    {% if record.return_date %}
                                    <br><small>to {{ record.return_date.strftime('%b %d, %Y') }}</small>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <div class="mobile-detail-item">
                                <div class="mobile-detail-label">🎯 Purpose</div>
                                <div class="mobile-detail-value">
                                    <span class="badge badge-{{ record.purpose }}">{{ record.purpose|title }}</span>
                                </div>
                            </div>
                            
                            {% if record.photos %}
                            <div class="mobile-detail-item mobile-photos">
                                <div class="mobile-detail-label">📸 Photos ({{ record.photos|length }})</div>
                                <div class="mobile-photo-grid">
                                    {% for photo in record.photos[:4] %}
                                    <img src="/static/uploads/thumbnails/{{ photo.filename }}" 
                                         alt="{{ photo.original_filename }}" 
                                         class="mobile-photo"
                                         onclick="openPhotoModal('{{ photo.filename }}', '{{ photo.original_filename }}')">
                                    {% endfor %}
                                    {% if record.photos|length > 4 %}
                                    <div class="mobile-photo-count">+{{ record.photos|length - 4 }}</div>
                                    {% endif %}
                                </div>
                            </div>
                            {% endif %}
                            
                            {% if record.flight_notes %}
                            <div class="mobile-detail-item mobile-notes">
                                <div class="mobile-detail-label">📝 Notes</div>
                                <div class="mobile-notes-content">
                                    {{ record.flight_notes }}
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        {% else %}
            <!-- Cinematic Empty State -->
            <div class="text-center empty-state-container">
                <div class="mb-4">
                    <i data-feather="map-pin" style="width: 80px; height: 80px;" class="travel-icon"></i>
                </div>
                <h4 class="cinematic-title" style="font-size: 2rem;">No Travel Records Found</h4>
                <p class="hero-subtitle mb-4">Start documenting your travels and create memories that last forever.</p>
                <a href="{{ url_for('add_record') }}" class="btn btn-success floating-cta">
                    <i data-feather="plus" class="me-2"></i>
                    Begin Your Journey
                </a>
            </div>
        {% endif %}
    </div>
</div>

{% else %}
    <!-- Landing Page for Non-Authenticated Users -->
    <div class="row">
        <div class="col-12">
            <!-- Hero Section -->
            <div class="text-center py-5">
                <div class="mb-4">
                    <i data-feather="globe" style="width: 120px; height: 120px;" class="travel-icon"></i>
                </div>
                <h1 class="cinematic-title" style="font-size: 3.5rem;">Travel Records</h1>
                <p class="hero-subtitle mb-4" style="font-size: 1.3rem;">
                    Document, organize, and relive your global adventures with our comprehensive travel management system
                </p>
                <div class="d-flex gap-3 justify-content-center flex-wrap">
                    <a href="{{ url_for('register') }}" class="btn btn-primary btn-lg">
                        <i data-feather="user-plus" class="me-2"></i>
                        Get Started Free
                    </a>
                    <a href="{{ url_for('login') }}" class="btn btn-outline-primary btn-lg">
                        <i data-feather="log-in" class="me-2"></i>
                        Sign In
                    </a>
                    <a href="{{ url_for('replit_auth.login') }}" class="btn btn-outline-secondary btn-lg">
                        <i data-feather="external-link" class="me-2"></i>
                        Continue with Replit
                    </a>
                </div>
            </div>

            <!-- Features Section -->
            <div class="row mt-5">
                <div class="col-lg-4 mb-4">
                    <div class="card h-100">
                        <div class="card-body text-center">
                            <div class="mb-3">
                                <i data-feather="map-pin" style="width: 48px; height: 48px;" class="text-primary"></i>
                            </div>
                            <h5 class="card-title">Track Every Journey</h5>
                            <p class="card-text">
                                Record detailed travel information including destinations, dates, purposes, and personal notes. 
                                Never forget the details of your adventures.
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4 mb-4">
                    <div class="card h-100">
                        <div class="card-body text-center">
                            <div class="mb-3">
                                <i data-feather="camera" style="width: 48px; height: 48px;" class="text-success"></i>
                            </div>
                            <h5 class="card-title">Photo Memories</h5>
                            <p class="card-text">
                                Upload and organize photos from your trips. Create visual stories that bring your 
                                travel memories to life with thumbnail galleries and full-size viewing.
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4 mb-4">
                    <div class="card h-100">
                        <div class="card-body text-center">
                            <div class="mb-3">
                                <i data-feather="book-open" style="width: 48px; height: 48px;" class="text-warning"></i>
                            </div>
                            <h5 class="card-title">AI-Powered Stories</h5>
                            <p class="card-text">
                                Transform your travel records into engaging narratives. Generate adventure stories, 
                                travel journals, blog posts, and memoirs using advanced AI technology.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Additional Features -->
            <div class="row mt-4">
                <div class="col-lg-3 mb-3">
                    <div class="card bg-light">
                        <div class="card-body text-center">
                            <i data-feather="upload" class="mb-2 text-info"></i>
                            <h6 class="card-title">Import Data</h6>
                            <p class="card-text small">
                                Bulk import from CSV/Excel files with automatic column mapping
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-3 mb-3">
                    <div class="card bg-light">
                        <div class="card-body text-center">
                            <i data-feather="award" class="mb-2 text-primary"></i>
                            <h6 class="card-title">Milestones</h6>
                            <p class="card-text small">
                                Track achievements and travel goals with progress indicators
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-3 mb-3">
                    <div class="card bg-light">
                        <div class="card-body text-center">
                            <i data-feather="smartphone" class="mb-2 text-success"></i>
                            <h6 class="card-title">Mobile Friendly</h6>
                            <p class="card-text small">
                                Responsive design works perfectly on all devices
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-3 mb-3">
                    <div class="card bg-light">
                        <div class="card-body text-center">
                            <i data-feather="download" class="mb-2 text-warning"></i>
                            <h6 class="card-title">Export & Backup</h6>
                            <p class="card-text small">
                                Download your data anytime as CSV for backup or sharing
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Call to Action -->
            <div class="text-center mt-5 py-4">
                <div class="card bg-primary text-white">
                    <div class="card-body">
                        <h4 class="card-title">Ready to Start Your Travel Journal?</h4>
                        <p class="card-text">
                            Join thousands of travelers who trust us to preserve their precious memories
                        </p>
                        <div class="d-flex gap-3 justify-content-center flex-wrap">
                            <a href="{{ url_for('register') }}" class="btn btn-light btn-lg">
                                <i data-feather="user-plus" class="me-2"></i>
                                Create Free Account
                            </a>
                            <a href="{{ url_for('replit_auth.login') }}" class="btn btn-outline-light btn-lg">
                                <i data-feather="external-link" class="me-2"></i>
                                Quick Start with Replit
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endif %}

<!-- Photo Modal -->
<div id="photoModal" class="photo-modal">
    <span class="photo-modal-close" onclick="closePhotoModal()">&times;</span>
    <div class="photo-modal-content">
        <img id="modalImage" src="" alt="">
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm Deletion</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete the travel record for <strong id="deleteDestination"></strong>?</p>
                <p class="text-muted">This action cannot be undone.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form id="deleteForm" method="POST" style="display: inline;">
                    <button type="submit" class="btn btn-danger">
                        <i data-feather="trash-2" class="me-1"></i>
                        Delete Record
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
// Photo Modal Functions
function openPhotoModal(filename, originalName) {
    const modal = document.getElementById('photoModal');
    const modalImg = document.getElementById('modalImage');
    
    modal.style.display = 'block';
    modalImg.src = `/static/uploads/photos/${filename}`;
    modalImg.alt = originalName;
    
    // Add fade-in animation
    modal.style.opacity = '0';
    setTimeout(() => {
        modal.style.opacity = '1';
    }, 10);
}

function closePhotoModal() {
    const modal = document.getElementById('photoModal');
    modal.style.opacity = '0';
    setTimeout(() => {
        modal.style.display = 'none';
    }, 300);
}

// Close modal when clicking outside the image
window.onclick = function(event) {
    const modal = document.getElementById('photoModal');
    if (event.target == modal) {
        closePhotoModal();
    }
}

// Close modal with escape key
document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        closePhotoModal();
    }
});

// Delete confirmation function
function confirmDelete(recordId, destination) {
    const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
    document.getElementById('deleteDestination').textContent = destination;
    document.getElementById('deleteForm').action = `/delete/${recordId}`;
    modal.show();
}

// Initialize icons when page loads
document.addEventListener('DOMContentLoaded', function() {
    // Initialize any additional functionality here
    console.log('Travel Records page loaded');
});
</script>
{% endblock %}