{% extends "base.html" %}

{% block title %}Cozinha - Produção (v{{ now.strftime('%H%M%S') }}){% endblock %}

{% block extra_css %}
<style data-version="v20260421-2258">
    body {
        background:
            radial-gradient(circle at top left, rgba(59, 130, 246, 0.14), transparent 28%),
            radial-gradient(circle at top right, rgba(139, 92, 246, 0.12), transparent 24%),
            linear-gradient(180deg, #f8fbff 0%, #eef4ff 45%, #e8eef9 100%) !important;
        min-height: 100vh;
        color: #1f2937;
        overflow-x: hidden;
    }

    body.modo-monitor {
        background:
            radial-gradient(circle at top left, rgba(59, 130, 246, 0.12), transparent 22%),
            linear-gradient(180deg, #f5f9ff 0%, #eef5ff 100%) !important;
    }

    .producao-page {
        max-width: 1680px;
        margin: 0 auto;
        padding: 18px;
    }

    body.modo-monitor .producao-page {
        max-width: 100%;
        padding: 14px 16px 28px;
    }

    .header-producao {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-bottom: 16px;
        padding: 18px;
        background: rgba(255, 255, 255, 0.82);
        border: 1px solid rgba(226, 232, 240, 0.95);
        border-radius: 28px;
        box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);
        backdrop-filter: blur(14px);
    }

    body.modo-monitor .header-producao {
        position: sticky;
        top: 12px;
        z-index: 30;
        border-radius: 24px;
    }

    .header-topo {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        flex-wrap: wrap;
    }

    .header-identidade {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: min(100%, 340px);
    }

    .header-identidade h3 {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 1.85rem;
        line-height: 1.05;
        letter-spacing: -0.03em;
        color: #0f172a;
        font-weight: 800;
    }

    .header-identidade h3 i {
        color: #f59e0b;
    }

    .header-subtitulo {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        color: #64748b;
        font-size: 0.95rem;
        font-weight: 600;
    }

    .header-subtitulo span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .monitor-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.42rem 0.82rem;
        border-radius: 999px;
        background: rgba(139, 92, 246, 0.12);
        border: 1px solid rgba(167, 139, 250, 0.22);
        color: #6d28d9;
        font-size: 0.8rem;
        font-weight: 800;
    }

    .painel-tools {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
        margin-left: auto;
    }

    .clock-monitor,
    .btn-monitor,
    .btn-toolbar-link,
    .menu-monitor-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 44px;
        padding: 10px 14px;
        border-radius: 14px;
        border: 1px solid rgba(226, 232, 240, 0.95);
        background: rgba(255, 255, 255, 0.92);
        color: #334155;
        font-weight: 700;
        text-decoration: none;
        box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06);
        transition: all 0.25s ease;
    }

    .clock-monitor {
        min-width: 148px;
    }

    .btn-monitor:hover,
    .btn-toolbar-link:hover,
    .menu-monitor-btn:hover {
        transform: translateY(-2px);
        border-color: rgba(96, 165, 250, 0.45);
        box-shadow: 0 14px 24px rgba(59, 130, 246, 0.12);
        color: #0f172a;
    }

    .btn-monitor.ativo {
        background: linear-gradient(135deg, #4a7cff, #6a5cff);
        border-color: transparent;
        color: #fff;
        box-shadow: 0 12px 22px rgba(74, 124, 255, 0.24);
    }

    .compact-controls {
        position: relative;
        margin-left: auto;
    }

    .menu-monitor-panel {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        width: min(340px, calc(100vw - 2rem));
        padding: 16px;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(226, 232, 240, 0.95);
        box-shadow: 0 24px 40px rgba(15, 23, 42, 0.16);
        z-index: 45;
        display: none;
    }

    .menu-monitor-panel.aberto {
        display: block;
    }

    .menu-monitor-titulo {
        color: #0f172a;
        font-weight: 800;
        font-size: 0.96rem;
        margin-bottom: 0.9rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .menu-monitor-bloco + .menu-monitor-bloco {
        margin-top: 0.9rem;
        padding-top: 0.9rem;
        border-top: 1px solid rgba(226, 232, 240, 0.95);
    }

    .menu-monitor-label {
        display: block;
        margin-bottom: 0.5rem;
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .menu-monitor-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .menu-chip,
    .menu-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        min-height: 38px;
        padding: 0.45rem 0.82rem;
        border-radius: 999px;
        border: 1px solid rgba(226, 232, 240, 0.95);
        background: rgba(248, 250, 252, 0.98);
        color: #334155;
        font-size: 0.82rem;
        font-weight: 800;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .menu-chip.active {
        background: linear-gradient(135deg, #4a7cff, #6a5cff);
        color: #fff;
        border-color: transparent;
    }

    .menu-clock {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        color: #0f172a;
        font-weight: 800;
        font-size: 0.92rem;
    }

    .stats-producao {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px;
    }

    .stat-box {
        padding: 15px 14px;
        min-height: 104px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid rgba(226, 232, 240, 0.95);
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
        text-align: center;
        transition: all 0.25s ease;
    }

    .stat-box:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 28px rgba(59, 130, 246, 0.12);
    }

    .stat-box .valor {
        font-size: 2.1rem;
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.04em;
    }

    .stat-box .label {
        margin-top: 8px;
        color: #64748b;
        font-size: 0.76rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .stat-pendente .valor { color: #d97706; }
    .stat-preparo .valor { color: #2563eb; }
    .stat-atrasado .valor { color: #dc2626; }

    .filtros-producao {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        padding: 10px 12px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(226, 232, 240, 0.95);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
    }

    .filtro-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 42px;
        padding: 9px 16px;
        border-radius: 999px;
        border: 1px solid rgba(203, 213, 225, 0.95);
        background: rgba(255, 255, 255, 0.92);
        color: #475569;
        font-weight: 800;
        font-size: 0.84rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        transition: all 0.2s ease;
        box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
        touch-action: manipulation;
    }

    .filtro-btn:hover {
        transform: translateY(-2px);
        color: #0f172a;
        border-color: rgba(96, 165, 250, 0.5);
        box-shadow: 0 12px 20px rgba(59, 130, 246, 0.12);
    }

    .filtro-btn.active {
        background: linear-gradient(135deg, #4a7cff, #6a5cff);
        border-color: transparent;
        color: #fff;
        box-shadow: 0 12px 22px rgba(74, 124, 255, 0.24);
    }

    .setores-producao {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 16px;
        padding: 2px 4px 0;
    }

    .setor-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 40px;
        padding: 9px 14px;
        border-radius: 999px;
        border: 1px solid rgba(226, 232, 240, 0.95);
        background: rgba(255, 255, 255, 0.92);
        color: #475569;
        font-size: 0.84rem;
        font-weight: 800;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
        transition: all 0.2s ease;
    }

    .setor-btn:hover {
        transform: translateY(-2px);
        color: #0f172a;
        border-color: rgba(96, 165, 250, 0.5);
    }

    .setor-btn.ativo {
        background: linear-gradient(135deg, #3b82f6, #6366f1);
        border-color: transparent;
        color: #fff;
        box-shadow: 0 12px 22px rgba(59, 130, 246, 0.24);
    }

    .producao-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: 18px;
        align-items: stretch;
        padding: 22px;
        background: rgba(255, 255, 255, 0.66);
        border: 1px solid rgba(226, 232, 240, 0.9);
        border-radius: 28px;
        box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
    }

    body.modo-monitor .producao-container {
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
        padding: 18px;
        gap: 16px;
    }

    .ordem-card {
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 100%;
        padding: 16px;
        border-radius: 24px;
        background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.98) 100%);
        border: 1px solid rgba(226, 232, 240, 0.95);
        box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
        transition: all 0.25s ease;
        overflow: hidden;
    }

    .ordem-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255,255,255,0.14), transparent 42%);
        pointer-events: none;
    }

    .ordem-card:hover {
        transform: translateY(-6px);
        border-color: rgba(96, 165, 250, 0.4);
        box-shadow: 0 22px 38px rgba(59, 130, 246, 0.14);
    }

    .ordem-card.status-pendente { border-top: 6px solid #f59e0b; }
    .ordem-card.status-em-preparo { border-top: 6px solid #3b82f6; }
    .ordem-card.status-pronto { border-top: 6px solid #10b981; }

    .ordem-card.urgente {
        box-shadow: 0 0 0 3px rgba(252, 165, 165, 0.5), 0 22px 40px rgba(239, 68, 68, 0.16);
    }

    .ordem-card.atencao {
        box-shadow: 0 0 0 3px rgba(253, 230, 138, 0.82), 0 18px 34px rgba(245, 158, 11, 0.14);
    }

    .ordem-card-top {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
    }

    .ordem-contexto {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .ordem-linha-superior {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .ordem-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }

    .ordem-status.pendente {
        background: rgba(245, 158, 11, 0.14);
        color: #b45309;
    }

    .ordem-status.em-preparo {
        background: rgba(59, 130, 246, 0.14);
        color: #1d4ed8;
    }

    .ordem-status.pronto {
        background: rgba(16, 185, 129, 0.16);
        color: #047857;
    }

    .ordem-prioridade {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .ordem-prioridade.alta {
        background: rgba(245, 158, 11, 0.15);
        color: #b45309;
    }

    .ordem-prioridade.urgente {
        background: rgba(239, 68, 68, 0.14);
        color: #b91c1c;
    }

    .ordem-mesa {
        margin: 0;
        font-size: 1.42rem;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.03em;
        color: #0f172a;
    }

    .ordem-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .ordem-meta span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 34px;
        padding: 6px 10px;
        border-radius: 999px;
        background: #f8fafc;
        border: 1px solid rgba(226, 232, 240, 0.92);
        color: #475569;
        font-size: 0.78rem;
        font-weight: 700;
    }

    .ordem-setor-chip {
        color: #fff !important;
        border-color: transparent !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
    }

    .ordem-tempo-box {
        min-width: 92px;
        padding: 10px 12px;
        border-radius: 18px;
        background: #f8fafc;
        border: 1px solid rgba(226, 232, 240, 0.95);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
        text-align: right;
        flex: 0 0 auto;
    }

    .ordem-tempo-box small {
        display: block;
        margin-bottom: 4px;
        color: #64748b;
        font-size: 0.7rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .ordem-tempo-box strong {
        display: block;
        color: #0f172a;
        font-size: 1.3rem;
        line-height: 1;
        font-weight: 900;
        letter-spacing: -0.04em;
    }

    .ordem-tempo-box strong span {
        font-size: 0.78rem;
        margin-left: 3px;
        color: #64748b;
        font-weight: 800;
        letter-spacing: 0;
    }

    .ordem-tempo-box.atencao strong { color: #b45309; }
    .ordem-tempo-box.critico strong { color: #b91c1c; }
    .ordem-tempo-box.ok strong { color: #047857; }

    .ordem-body {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
        flex: 1;
    }

    .ordem-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px;
        border-radius: 16px;
        background: #f8fafc;
        border: 1px solid rgba(226, 232, 240, 0.92);
    }

    .item-qtd {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        border-radius: 14px;
        background: linear-gradient(135deg, #1d4ed8, #4f46e5);
        color: white;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        box-shadow: 0 10px 18px rgba(79, 70, 229, 0.2);
    }

    .item-conteudo {
        flex: 1;
        min-width: 0;
    }

    .item-nome {
        color: #0f172a;
        font-weight: 800;
        font-size: 0.9rem;
        line-height: 1.3;
        letter-spacing: -0.01em;
        word-break: break-word;
    }

    .item-obs {
        margin-top: 6px;
        color: #64748b;
        font-size: 0.79rem;
        line-height: 1.35;
    }

    .ordem-footer {
        position: relative;
        z-index: 1;
        display: flex;
        gap: 10px;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid rgba(226, 232, 240, 0.95);
    }

    .btn-acao {
        flex: 1;
        min-height: 46px;
        padding: 10px 14px;
        border: none;
        border-radius: 14px;
        font-size: 0.84rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #fff;
        transition: all 0.22s ease;
        box-shadow: 0 12px 20px rgba(15, 23, 42, 0.12);
        touch-action: manipulation;
    }

    .btn-acao:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 28px rgba(15, 23, 42, 0.18);
    }

    .btn-prioridade {
        flex: 0 0 52px;
        background: linear-gradient(135deg, #64748b, #475569);
    }

    .btn-prioridade:hover {
        background: linear-gradient(135deg, #f59e0b, #d97706);
    }

    .btn-iniciar {
        background: linear-gradient(135deg, #2563eb, #4f46e5);
    }

    .btn-finalizar {
        background: linear-gradient(135deg, #10b981, #059669);
    }

    .btn-entregar {
        background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    }

    .sem-ordens {
        grid-column: 1 / -1;
        text-align: center;
        padding: 64px 20px;
        background: rgba(255,255,255,0.82);
        border: 1px dashed rgba(148, 163, 184, 0.35);
        border-radius: 24px;
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
    }

    .sem-ordens i {
        font-size: 4.6rem;
        color: #10b981;
        opacity: 0.9;
        margin-bottom: 18px;
    }

    .sem-ordens p {
        margin: 0;
        font-size: 1.45rem;
        font-weight: 800;
        color: #0f172a;
    }

    .sem-ordens small {
        display: block;
        margin-top: 10px;
        color: #64748b;
        font-size: 0.95rem;
        font-weight: 600;
    }

    @media (max-width: 1180px) {
        .header-topo {
            flex-direction: column;
            align-items: stretch;
        }

        .painel-tools,
        .compact-controls {
            margin-left: 0;
            justify-content: flex-start;
        }
    }

    @media (max-width: 900px) {
        .stats-producao {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .producao-container {
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        }
    }

    @media (max-width: 768px) {
        .producao-page {
            padding: 12px;
        }

        .header-producao,
        .producao-container {
            padding: 14px;
        }

        .header-identidade h3 {
            font-size: 1.45rem;
        }

        .stats-producao {
            grid-template-columns: 1fr;
        }

        .filtros-producao,
        .setores-producao {
            gap: 8px;
        }

        .filtro-btn,
        .setor-btn,
        .btn-monitor,
        .btn-toolbar-link,
        .menu-monitor-btn,
        .clock-monitor {
            width: 100%;
            justify-content: center;
        }

        .painel-tools,
        .compact-controls {
            width: 100%;
        }

        .producao-container {
            grid-template-columns: 1fr;
            gap: 14px;
        }

        .ordem-card {
            padding: 14px;
            border-radius: 20px;
        }

        .ordem-card-top {
            flex-direction: column;
        }

        .ordem-tempo-box {
            width: 100%;
            text-align: left;
        }

        .ordem-footer {
            flex-direction: column;
        }
    }

    @media (pointer: coarse) {
        .ordem-card:hover,
        .btn-acao:hover,
        .btn-monitor:hover,
        .btn-toolbar-link:hover,
        .menu-monitor-btn:hover,
        .stat-box:hover,
        .filtro-btn:hover,
        .setor-btn:hover {
            transform: none;
        }

        .ordem-card:active,
        .btn-acao:active,
        .btn-monitor:active,
        .btn-toolbar-link:active,
        .menu-monitor-btn:active,
        .stat-box:active,
        .filtro-btn:active,
        .setor-btn:active {
            transform: scale(0.985);
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="producao-page">
    <div class="header-producao">
        <div class="header-topo">
            <div class="header-identidade">
                <h3>
                    <i class="fas fa-fire"></i>
                    Painel de Produção
                </h3>
                <div class="header-subtitulo">
                    <span>
                        <i class="fas fa-utensils"></i>
                        <span id="setor-titulo">{{ setor_inicial_nome or 'Todos os setores' }}</span>
                    </span>
                    {% if monitor_travado %}
                    <div class="monitor-badge">
                        <i class="fas fa-lock"></i>Monitor travado neste setor
                    </div>
                    {% endif %}
                </div>
            </div>

            {% if monitor_travado %}
            <div class="compact-controls">
                <button type="button" class="menu-monitor-btn" id="btnCompactMenu" aria-expanded="false" onclick="alternarMenuCompacto()">
                    <i class="fas fa-sliders-h"></i>Menu
                </button>
                <div class="menu-monitor-panel" id="menuCompactoPainel">
                    <div class="menu-monitor-titulo">
                        <span><i class="fas fa-tv me-1"></i>Controles do monitor</span>
                        <button type="button" class="menu-chip" onclick="alternarMenuCompacto(false)">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>

                    <div class="menu-monitor-bloco">
                        <span class="menu-monitor-label">Relógio</span>
                        <div class="menu-clock">
                            <i class="fas fa-clock"></i>
                            <span data-monitor-clock>--:--:--</span>
                        </div>
                    </div>

                    <div class="menu-monitor-bloco">
                        <span class="menu-monitor-label">Filtros</span>
                        <div class="menu-monitor-grid">
                            <button type="button" class="menu-chip filtro-btn active" data-status="todos" onclick="filtrar('todos', this)">
                                <i class="fas fa-th-large"></i>Todos
                            </button>
                            <button type="button" class="menu-chip filtro-btn" data-status="pendente" onclick="filtrar('pendente', this)">
                                <i class="fas fa-clock"></i>Pendentes
                            </button>
                            <button type="button" class="menu-chip filtro-btn" data-status="em_preparo" onclick="filtrar('em_preparo', this)">
                                <i class="fas fa-fire"></i>Preparo
                            </button>
                            <button type="button" class="menu-chip filtro-btn" data-status="pronto" onclick="filtrar('pronto', this)">
                                <i class="fas fa-check"></i>Prontos
                            </button>
                        </div>
                    </div>

                    <div class="menu-monitor-bloco">
                        <span class="menu-monitor-label">Ações</span>
                        <div class="menu-monitor-grid">
                            <button type="button" class="menu-chip js-btn-monitor-mode" onclick="alternarModoMonitor()">
                                <i class="fas fa-tv"></i>Modo Monitor
                            </button>
                            <a href="{{ url_for('food.dashboard_food') }}" class="menu-link">
                                <i class="fas fa-arrow-left"></i>Voltar
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {% else %}
            <div class="painel-tools">
                <div class="clock-monitor">
                    <i class="fas fa-clock"></i>
                    <span data-monitor-clock>--:--:--</span>
                </div>
                <button type="button" class="btn-monitor js-btn-monitor-mode" onclick="alternarModoMonitor()">
                    <i class="fas fa-tv"></i>Modo Monitor
                </button>
                <a href="{{ url_for('food.dashboard_food') }}" class="btn-toolbar-link">
                    <i class="fas fa-arrow-left"></i>Voltar
                </a>
            </div>
            {% endif %}
        </div>

        <div class="stats-producao">
            <div class="stat-box stat-pendente" title="Pedidos aguardando início">
                <div class="valor" id="stat-pendente">0</div>
                <div class="label"><i class="fas fa-hourglass-half me-1"></i>Pendentes</div>
            </div>
            <div class="stat-box stat-preparo" title="Pedidos em andamento">
                <div class="valor" id="stat-preparo">0</div>
                <div class="label"><i class="fas fa-fire me-1"></i>Em preparo</div>
            </div>
            <div class="stat-box stat-atrasado" title="Pedidos atrasados">
                <div class="valor" id="stat-pronto">0</div>
                <div class="label"><i class="fas fa-exclamation-triangle me-1"></i>Atrasados</div>
            </div>
        </div>

        {% if not monitor_travado %}
        <div class="filtros-producao">
            <button class="filtro-btn active" data-status="todos" onclick="filtrar('todos', this)">
                <i class="fas fa-th-large"></i>Todos
            </button>
            <button class="filtro-btn" data-status="pendente" onclick="filtrar('pendente', this)">
                <i class="fas fa-clock"></i>Pendentes
            </button>
            <button class="filtro-btn" data-status="em_preparo" onclick="filtrar('em_preparo', this)">
                <i class="fas fa-fire"></i>Em preparo
            </button>
            <button class="filtro-btn" data-status="pronto" onclick="filtrar('pronto', this)">
                <i class="fas fa-check"></i>Prontos
            </button>
        </div>
        {% endif %}
    </div>

    {% if setores_monitor and not monitor_travado %}
    <div class="setores-producao">
        <button class="setor-btn {% if not setor_inicial_id %}ativo{% endif %}" onclick="selecionarSetor(null, this)">
            <i class="fas fa-layer-group"></i>Todos os setores
        </button>
        {% for setor in setores_monitor %}
        <button class="setor-btn {% if setor_inicial_id == setor.id %}ativo{% endif %}" onclick="selecionarSetor({{ setor.id }}, this)">
            <i class="fas fa-tv"></i>{{ setor.nome }}
        </button>
        {% endfor %}
    </div>
    {% endif %}

    <div class="producao-container" id="ordens-container">
        <div class="sem-ordens">
            <i class="fas fa-check-circle"></i>
            <p>Nenhuma ordem de produção</p>
            <small>Os pedidos aparecem aqui assim que entram na fila da cozinha.</small>
        </div>
    </div>
</div>

<!-- Som de notificação -->
<audio id="som-novo" preload="auto">
    <source src="/static/sounds/notification.mp3" type="audio/mpeg">
</audio>
{% endblock %}

{% block extra_js %}
<script>
let ordens = [];
let filtroAtual = 'todos';
let setorAtual = {{ setor_inicial_id if setor_inicial_id else 'null' }};
let ultimaAtualizacao = null;
let stats = { pendentes: 0, preparando: 0, atrasados: 0 };
let modoMonitor = false;
const monitorTravado = {{ 'true' if monitor_travado else 'false' }};
const setoresDisponiveis = {{ (setores_monitor or [])|tojson }};

document.addEventListener('DOMContentLoaded', function() {
    modoMonitor = new URLSearchParams(window.location.search).get('monitor') === '1';
    sincronizarModoMonitor();
    atualizarTituloSetor();
    atualizarRelogioMonitor();
    carregarOrdens();
    setInterval(atualizarRelogioMonitor, 1000);
    setInterval(carregarOrdens, 3000); // Atualiza a cada 3 segundos (mais frequente)

    document.addEventListener('click', function(event) {
        const painel = document.getElementById('menuCompactoPainel');
        const botao = document.getElementById('btnCompactMenu');
        if (!painel || !botao || !painel.classList.contains('aberto')) {
            return;
        }
        if (!painel.contains(event.target) && !botao.contains(event.target)) {
            alternarMenuCompacto(false);
        }
    });
});

function atualizarRelogioMonitor() {
    const horario = new Date().toLocaleTimeString('pt-BR', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    });
    document.querySelectorAll('[data-monitor-clock]').forEach(el => {
        el.textContent = horario;
    });
}

function alternarMenuCompacto(forceState = null) {
    const painel = document.getElementById('menuCompactoPainel');
    const botao = document.getElementById('btnCompactMenu');
    if (!painel) return;
    const abrir = typeof forceState === 'boolean' ? forceState : !painel.classList.contains('aberto');
    painel.classList.toggle('aberto', abrir);
    if (botao) {
        botao.setAttribute('aria-expanded', abrir ? 'true' : 'false');
    }
}

function isFullscreenAtivo() {
    return !!(document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
}

async function entrarFullscreenMonitor() {
    const elem = document.documentElement;
    try {
        if (elem.requestFullscreen) {
            await elem.requestFullscreen();
        } else if (elem.webkitRequestFullscreen) {
            await elem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) {
            await elem.msRequestFullscreen();
        }
    } catch (e) {
        console.log('Fullscreen não disponível:', e?.message || e);
    }
}

async function sairFullscreenMonitor() {
    try {
        if (document.exitFullscreen && document.fullscreenElement) {
            await document.exitFullscreen();
        } else if (document.webkitExitFullscreen && document.webkitFullscreenElement) {
            await document.webkitExitFullscreen();
        } else if (document.msExitFullscreen && document.msFullscreenElement) {
            await document.msExitFullscreen();
        }
    } catch (e) {
        console.log('Não foi possível sair do fullscreen:', e?.message || e);
    }
}

function sincronizarModoMonitor() {
    document.body.classList.toggle('modo-monitor', modoMonitor);
    document.querySelectorAll('.js-btn-monitor-mode').forEach(btn => {
        btn.classList.toggle('ativo', modoMonitor);
        btn.innerHTML = modoMonitor
            ? '<i class="fas fa-compress me-2"></i>Sair do Monitor'
            : '<i class="fas fa-tv me-2"></i>Modo Monitor';
    });
}

async function alternarModoMonitor() {
    modoMonitor = !modoMonitor;
    const url = new URL(window.location.href);
    if (modoMonitor) {
        url.searchParams.set('monitor', '1');
        if (monitorTravado) {
            url.searchParams.set('travado', '1');
        }
        window.history.replaceState({}, '', url.toString());
        sincronizarModoMonitor();
        await entrarFullscreenMonitor();
        return;
    }

    url.searchParams.delete('monitor');
    if (monitorTravado) {
        url.searchParams.set('travado', '1');
    }
    window.history.replaceState({}, '', url.toString());
    sincronizarModoMonitor();
    await sairFullscreenMonitor();
}

function obterNomeSetorAtual() {
    if (!setorAtual) {
        return 'Todos os setores';
    }
    const setor = setoresDisponiveis.find(item => Number(item.id) === Number(setorAtual));
    return setor ? setor.nome : 'Setor selecionado';
}

function atualizarTituloSetor() {
    const el = document.getElementById('setor-titulo');
    if (el) {
        el.textContent = obterNomeSetorAtual();
    }
}

function selecionarSetor(setorId, botao = null) {
    if (monitorTravado) {
        return;
    }
    setorAtual = setorId ? Number(setorId) : null;
    const url = new URL(window.location.href);
    if (setorAtual) {
        url.searchParams.set('setor_id', String(setorAtual));
    } else {
        url.searchParams.delete('setor_id');
    }
    window.history.replaceState({}, '', url.toString());

    document.querySelectorAll('.setor-btn').forEach(btn => btn.classList.remove('ativo'));
    if (botao) {
        botao.classList.add('ativo');
    }

    atualizarTituloSetor();
    carregarOrdens();
}

function carregarOrdens() {
    let url = '/food/api/producao/kds';
    if (setorAtual) {
        url += `?setor_id=${setorAtual}`;
    }
    
    fetch(url)
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                // Verificar se tem novas ordens
                const novasOrdens = data.ordens.filter(o => 
                    !ordens.find(old => old.id === o.id)
                );
                
                if (novasOrdens.length > 0 && ultimaAtualizacao) {
                    tocarNotificacao();
                }
                
                ordens = data.ordens;
                stats = data.stats;
                ultimaAtualizacao = new Date();
                renderizarOrdens();
                atualizarStats();
            }
        });
}

function renderizarOrdens() {
    const container = document.getElementById('ordens-container');
    
    let lista = ordens;
    if (filtroAtual !== 'todos') {
        lista = ordens.filter(o => o.status === filtroAtual);
    }
    
    if (lista.length === 0) {
        const legendaFiltro = {
            todos: 'pendente ou em preparo',
            pendente: 'pendente',
            em_preparo: 'em preparo',
            preparando: 'em preparo',
            pronto: 'pronto'
        };
        container.innerHTML = `
            <div class="sem-ordens">
                <i class="fas fa-check-circle"></i>
                <p>Tudo em dia!</p>
                <small>Nenhum pedido ${legendaFiltro[filtroAtual] || filtroAtual} no momento</small>
            </div>
        `;
        return;
    }
    
    container.innerHTML = lista.map(ordem => {
        const urgente = ordem.prioridade === 'urgente' || ordem.cor_alerta === 'vermelho';
        const atencao = ordem.prioridade === 'alta' || ordem.cor_alerta === 'amarelo';
        const statusNormalizado = ['preparando', 'em_preparo'].includes(ordem.status) ? 'em_preparo' : ordem.status;
        const statusCss = String(statusNormalizado || 'pendente').replace('_', '-');
        const statusLabel = {
            pendente: 'Pendente',
            em_preparo: 'Em preparo',
            pronto: 'Pronto'
        }[statusNormalizado] || 'Pendente';
        const prioridadeLabel = {
            urgente: 'Urgente',
            alta: 'Alta'
        }[ordem.prioridade] || '';
        const tempoClass = urgente ? 'critico' : atencao ? 'atencao' : statusNormalizado === 'pronto' ? 'ok' : '';
        
        let cardClass = '';
        if (urgente) cardClass = 'urgente';
        else if (atencao) cardClass = 'atencao';

        const prioridadeIcon = ordem.prioridade === 'urgente'
            ? '<i class="fas fa-bolt"></i>'
            : ordem.prioridade === 'alta'
                ? '<i class="fas fa-arrow-up"></i>'
                : '';
        
        return `
            <div class="ordem-card status-${statusCss} ${cardClass}">
                <div class="ordem-card-top">
                    <div class="ordem-contexto">
                        <div class="ordem-linha-superior">
                            <span class="ordem-status ${statusCss}">
                                <i class="fas ${statusNormalizado === 'pronto' ? 'fa-check-circle' : statusNormalizado === 'em_preparo' ? 'fa-fire' : 'fa-hourglass-half'}"></i>
                                ${statusLabel}
                            </span>
                            ${prioridadeLabel ? `<span class="ordem-prioridade ${ordem.prioridade}">${prioridadeIcon}${prioridadeLabel}</span>` : ''}
                        </div>
                        <h4 class="ordem-mesa">${ordem.mesa_label || (ordem.mesa_numero ? `Mesa ${ordem.mesa_numero}` : 'PDV Web')}</h4>
                        <div class="ordem-meta">
                            <span class="ordem-setor-chip" style="background: ${ordem.setor_cor || '#64748b'};">
                                <i class="fas fa-utensils"></i>${ordem.setor_nome}
                            </span>
                            <span>
                                <i class="fas fa-clock"></i>${ordem.hora_pedido}
                            </span>
                        </div>
                    </div>
                    <div class="ordem-tempo-box ${tempoClass}" title="Tempo desde o pedido">
                        <small>Espera</small>
                        <strong>${ordem.tempo_espera}<span>min</span></strong>
                    </div>
                </div>
                <div class="ordem-body">
                    ${ordem.itens.map(item => `
                        <div class="ordem-item">
                            <span class="item-qtd">${item.quantidade}x</span>
                            <div class="item-conteudo">
                                <div class="item-nome">${item.produto_nome}</div>
                                ${item.observacao ? `<div class="item-obs"><i class="fas fa-comment me-1"></i>${item.observacao}</div>` : ''}
                            </div>
                        </div>
                    `).join('')}
                </div>
                <div class="ordem-footer">
                    ${ordem.status === 'pendente' ? `
                        <button class="btn-acao btn-prioridade" onclick="alterarPrioridade(${ordem.id})" title="Alterar prioridade">
                            <i class="fas fa-flag"></i>
                        </button>
                        <button class="btn-acao btn-iniciar" onclick="iniciarOrdem(${ordem.id})">
                            <i class="fas fa-play me-2"></i>Iniciar
                        </button>
                    ` : ['preparando', 'em_preparo'].includes(ordem.status) ? `
                        <button class="btn-acao btn-finalizar" onclick="finalizarOrdem(${ordem.id})">
                            <i class="fas fa-check me-2"></i>Pronto
                        </button>
                    ` : `
                        <button class="btn-acao btn-entregar" onclick="entregarOrdem(${ordem.id})">
                            <i class="fas fa-motorcycle me-2"></i>Entregar
                        </button>
                    `}
                </div>
            </div>
        `;
    }).join('');
}

function atualizarStats() {
    document.getElementById('stat-pendente').textContent = stats.pendentes;
    document.getElementById('stat-preparo').textContent = stats.preparando;
    document.getElementById('stat-pronto').textContent = stats.atrasados;
}

function filtrar(status, botao = null) {
    filtroAtual = status;
    
    document.querySelectorAll('.filtro-btn').forEach(btn => {
        const ativo = btn.dataset.status === status;
        btn.classList.toggle('active', ativo);
    });

    if (monitorTravado) {
        alternarMenuCompacto(false);
    }
    
    renderizarOrdens();
}

function iniciarOrdem(ordemId) {
    fetch(`/food/producao/ordens/${ordemId}/iniciar`, {
        method: 'POST'
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            carregarOrdens();
        } else {
            alert(data.message);
        }
    });
}

function finalizarOrdem(ordemId) {
    fetch(`/food/producao/ordens/${ordemId}/finalizar`, {
        method: 'POST'
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            carregarOrdens();
        } else {
            alert(data.message);
        }
    });
}

function entregarOrdem(ordemId) {
    fetch(`/food/producao/ordens/${ordemId}/entregar`, {
        method: 'POST'
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            carregarOrdens();
        } else {
            alert(data.message);
        }
    });
}

function alterarPrioridade(ordemId) {
    const prioridades = ['normal', 'alta', 'urgente'];
    const ordem = ordens.find(o => o.id === ordemId);
    const atual = prioridades.indexOf(ordem.prioridade || 'normal');
    const nova = prioridades[(atual + 1) % prioridades.length];
    
    fetch(`/food/producao/ordens/${ordemId}/prioridade`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ prioridade: nova })
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            carregarOrdens();
        }
    });
}

function tocarNotificacao() {
    try {
        const som = document.getElementById('som-novo');
        som.currentTime = 0;
        som.play();
    } catch(e) {
        console.log('Não foi possível tocar som');
    }
}
</script>
{% endblock %}