{% extends "base.html" %}
{% load static %}

{% block title %}Jingle Detections - Stream Processor{% endblock %}

{% block page_title %}
<i class="fas fa-search text-primary me-2"></i>
Jingle Detections
{% endblock %}

{% block extra_css %}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-lg-between">
                <div class="flex-fill">
                    <h1 class="h3 fw-bold text-dark mb-1">Jingle Detections</h1>
                    <p class="text-muted mb-3 mb-lg-0">Monitor and analyze jingle detection results from stream processing</p>
                </div>
                <div class="d-flex flex-column flex-sm-row gap-2">
                    <a href="{% url 'jingles:template_list' %}" class="btn btn-outline-secondary d-flex align-items-center justify-content-center">
                        <i class="fas fa-image me-2"></i>
                        Templates
                    </a>
                    <a href="{% url 'jingles:adbreak_list' %}" class="btn btn-outline-secondary d-flex align-items-center justify-content-center">
                        <i class="fas fa-play-circle me-2"></i>
                        Ad Breaks
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Info Panel -->
    <div class="alert alert-info d-flex mb-4">
        <div class="flex-shrink-0">
            <i class="fas fa-info-circle"></i>
        </div>
        <div class="ms-3">
            <h6 class="alert-heading fw-medium">About Jingle Detections</h6>
            <p class="mb-0 small">Jingle detections are individual instances where the AI system has identified a jingle template match in the stream content. Each detection includes confidence scores, timing information, and extracted frames for verification.</p>
        </div>
            </div>
        </div>

        <!-- Statistics Cards -->
        <div class="row g-3 mb-4">
            <div class="col-12 col-md-6 col-lg-3">
                <div class="card shadow-sm h-100">
                    <div class="card-body d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-search text-primary fs-2"></i>
                        </div>
                        <div class="ms-3 flex-fill">
                            <h6 class="text-muted mb-1 small">Total Detections</h6>
                            <h4 class="mb-0 fw-bold">{{ detections|length|default:0 }}</h4>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-6 col-lg-3">
                <div class="card shadow-sm h-100">
                    <div class="card-body d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-check-circle text-success fs-2"></i>
                        </div>
                        <div class="ms-3 flex-fill">
                            <h6 class="text-muted mb-1 small">Confirmed</h6>
                            <h4 class="mb-0 fw-bold">
                                {% for detection in detections %}{% if detection.is_confirmed %}{{ forloop.counter0|add:1 }}{% endif %}{% empty %}0{% endfor %}
                            </h4>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-6 col-lg-3">
                <div class="card shadow-sm h-100">
                    <div class="card-body d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-percentage text-warning fs-2"></i>
                        </div>
                        <div class="ms-3 flex-fill">
                            <h6 class="text-muted mb-1 small">Avg Confidence</h6>
                            <h4 class="mb-0 fw-bold">
                                {% if detections %}
                                    {% for detection in detections %}{{ detection.confidence_score|floatformat:3 }}{% if not forloop.last %},{% endif %}{% endfor %}
                                {% else %}
                                    0.000
                                {% endif %}
                            </h4>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-6 col-lg-3">
                <div class="card shadow-sm h-100">
                    <div class="card-body d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-image text-info fs-2"></i>
                        </div>
                        <div class="ms-3 flex-fill">
                            <h6 class="text-muted mb-1 small">Templates Used</h6>
                            <h4 class="mb-0 fw-bold">{{ templates|length|default:0 }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filters -->
        <div class="card shadow-sm mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">Filters</h5>
            </div>
            <div class="card-body">
                <form method="get">
                    <div class="row g-3">
                        <div class="col-12 col-lg-4">
                            <label for="template" class="form-label">Template</label>
                            <select name="template" id="template" class="form-select">
                                <option value="">All Templates</option>
                                {% for template in templates %}
                                    <option value="{{ template.id }}" {% if request.GET.template == template.id|stringformat:"s" %}selected{% endif %}>
                                        {{ template.name }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-12 col-lg-4">
                            <label for="confidence" class="form-label">Min Confidence</label>
                            <select name="confidence" id="confidence" class="form-select">
                                <option value="">Any Confidence</option>
                                <option value="0.5" {% if request.GET.confidence == "0.5" %}selected{% endif %}>≥ 0.5</option>
                                <option value="0.7" {% if request.GET.confidence == "0.7" %}selected{% endif %}>≥ 0.7</option>
                                <option value="0.8" {% if request.GET.confidence == "0.8" %}selected{% endif %}>≥ 0.8</option>
                                <option value="0.9" {% if request.GET.confidence == "0.9" %}selected{% endif %}>≥ 0.9</option>
                            </select>
                        </div>
                        <div class="col-12 col-lg-4">
                            <label for="confirmed" class="form-label">Confirmation Status</label>
                            <select name="confirmed" id="confirmed" class="form-select">
                                <option value="">All Detections</option>
                                <option value="true" {% if request.GET.confirmed == "true" %}selected{% endif %}>Confirmed Only</option>
                                <option value="false" {% if request.GET.confirmed == "false" %}selected{% endif %}>Unconfirmed Only</option>
                            </select>
                        </div>
                    </div>
                    <div class="d-flex flex-column flex-sm-row justify-content-end gap-2 mt-3">
                        <a href="{% url 'jingles:detection_list' %}" class="btn btn-outline-secondary">
                            Clear Filters
                        </a>
                        <button type="submit" class="btn btn-primary">
                            Apply Filters
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Detections List -->
        <div class="card shadow-sm">
            <div class="card-header">
                <h5 class="card-title mb-0">Detection Results</h5>
            </div>
            
            {% if detections %}
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th scope="col">Template</th>
                                <th scope="col">Session</th>
                                <th scope="col">Detection Time</th>
                                <th scope="col">Confidence</th>
                                <th scope="col">Status</th>
                                <th scope="col">Frame</th>
                                <th scope="col">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for detection in detections %}
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0">
                                                <div class="rounded-circle bg-primary bg-opacity-10 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                                    <i class="fas fa-image text-primary"></i>
                                                </div>
                                            </div>
                                            <div class="ms-3">
                                                <div class="fw-medium text-truncate">{{ detection.template.name }}</div>
                                                <div class="text-muted small text-truncate">{{ detection.template.category|capfirst }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="fw-medium">
                                            <a href="{% url 'streams:session_detail' detection.session.id %}" class="text-primary text-decoration-none">
                                                {{ detection.session.id|truncatechars:8 }}
                                            </a>
                                        </div>
                                        <div class="text-muted small text-truncate">{{ detection.session.channel.name }}</div>
                                    </td>
                                    <td>
                                        <div class="small">{{ detection.detection_time|date:"M d, Y" }}</div>
                                        <div class="text-muted small">{{ detection.detection_time|time:"H:i:s" }}</div>
                                    </td>
                                    <td>
                                        <div class="d-flex flex-column flex-lg-row align-items-lg-center">
                                            <div class="fw-medium small">{{ detection.confidence_score|floatformat:3 }}</div>
                                            <div class="ms-lg-2">
                                                {% if detection.confidence_score >= 0.9 %}
                                                    <span class="badge bg-success">
                                                        High
                                                    </span>
                                                {% elif detection.confidence_score >= 0.7 %}
                                                    <span class="badge bg-warning">
                                                        Medium
                                                    </span>
                                                {% else %}
                                                    <span class="badge bg-danger">
                                                        Low
                                                    </span>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        {% if detection.is_confirmed %}
                                            <span class="badge bg-success">
                                                <i class="fas fa-check-circle me-1"></i>
                                                <span class="d-none d-lg-inline">Confirmed</span>
                                            </span>
                                        {% else %}
                                            <span class="badge bg-secondary">
                                                <i class="fas fa-question-circle me-1"></i>
                                                <span class="d-none d-lg-inline">Pending</span>
                                            </span>
                                        {% endif %}
                                    </td>
                                    <td class="text-center">
                                        {% if detection.frame_path %}
                                            <button class="btn btn-sm btn-outline-primary" title="View Frame">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                        {% else %}
                                            <span class="text-muted">
                                                <i class="fas fa-times"></i>
                                            </span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="d-flex gap-1">
                                            <a href="{% url 'jingles:detection_detail' detection.id %}" class="btn btn-sm btn-outline-info" title="View Details">
                                                <i class="fas fa-info-circle"></i>
                                            </a>
                                            {% if not detection.is_confirmed %}
                                                <button class="btn btn-sm btn-outline-success" title="Confirm Detection">
                                                    <i class="fas fa-check"></i>
                                                </button>
                                            {% endif %}
                                            <button class="btn btn-sm btn-outline-danger" title="Delete">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                {% if is_paginated %}
                    <div class="card-footer">
                        <div class="d-flex flex-column flex-sm-row align-items-center justify-content-between">
                            <div class="mb-2 mb-sm-0">
                                <small class="text-muted">
                                    Showing <span class="fw-medium">{{ page_obj.start_index }}</span> to <span class="fw-medium">{{ page_obj.end_index }}</span> of <span class="fw-medium">{{ page_obj.paginator.count }}</span> results
                                </small>
                            </div>
                            <nav aria-label="Pagination">
                                <ul class="pagination pagination-sm mb-0">
                                    {% if page_obj.has_previous %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ page_obj.previous_page_number }}">
                                                <i class="fas fa-chevron-left"></i>
                                            </a>
                                        </li>
                                    {% endif %}
                                    
                                    {% for num in page_obj.paginator.page_range %}
                                        {% if page_obj.number == num %}
                                            <li class="page-item active">
                                                <span class="page-link">{{ num }}</span>
                                            </li>
                                        {% else %}
                                            <li class="page-item">
                                                <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                                            </li>
                                        {% endif %}
                                    {% endfor %}
                                    
                                    {% if page_obj.has_next %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ page_obj.next_page_number }}">
                                                <i class="fas fa-chevron-right"></i>
                                            </a>
                                        </li>
                                    {% endif %}
                                </ul>
                            </nav>
                        </div>
                    </div>
                {% endif %}
            {% else %}
                <!-- Empty State -->
                <div class="card-body text-center py-5">
                    <div class="mx-auto d-flex align-items-center justify-content-center bg-light rounded-circle mb-3" style="width: 48px; height: 48px;">
                        <i class="fas fa-search text-muted"></i>
                    </div>
                    <h5 class="mb-2">No Detections Found</h5>
                    <p class="text-muted mb-4">No jingle detections have been recorded yet.</p>
                    <div class="d-flex flex-column flex-sm-row justify-content-center gap-2">
                        <a href="{% url 'jingles:template_list' %}" class="btn btn-primary">
                            <i class="fas fa-image me-2"></i>
                            Manage Templates
                        </a>
                        <a href="{% url 'streams:session_list' %}" class="btn btn-outline-secondary">
                            <i class="fas fa-play me-2"></i>
                            View Sessions
                        </a>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}