<?php
if (session_status() === PHP_SESSION_NONE) { session_start(); }
date_default_timezone_set('America/Sao_Paulo');

// PADRONIZAÇÃO: Usar o mesmo arquivo que o entregador usa
$arquivo_chat = 'mensagens_chat.json'; 
$pedido_id = isset($_GET['pedido_id']) ? trim((string)$_GET['pedido_id']) : '';

if (empty($pedido_id)) { die("Erro: ID do pedido não identificado."); }

// 1. IDENTIFICAÇÃO MELHORADA
// Se existe 'cliente_id', ele é cliente. Se existe 'usuario_id' ou 'usuario_cpf', ele é entregador.
if (isset($_SESSION['cliente_id'])) {
    $meu_tipo = 'cliente';
    $meu_nome = $_SESSION['cliente_nome'] ?? 'Cliente';
} else {
    $meu_tipo = 'entregador';
    $meu_nome = $_SESSION['usuario_nome'] ?? 'Entregador';
}

// 2. CARREGAR MENSAGENS (ESTRUTURA DE LISTA SIMPLES)
$mensagens_filtradas = [];
if (file_exists($arquivo_chat)) {
    $todas_msgs = json_decode(file_get_contents($arquivo_chat), true) ?? [];
    // Filtra apenas as mensagens deste pedido
    foreach ($todas_msgs as $m) {
        if (isset($m['id_pedido']) && (string)$m['id_pedido'] === (string)$pedido_id) {
            $mensagens_filtradas[] = $m;
        }
    }
}

// 3. ENVIO DE MENSAGEM (PADRONIZADO COM ADMIN.PHP)
if ($_SERVER['REQUEST_METHOD'] == 'POST' && !empty($_POST['mensagem'])) {
    $todas_msgs = file_exists($arquivo_chat) ? json_decode(file_get_contents($arquivo_chat), true) : [];
    
    $nova_msg = [
        'id_pedido' => (string)$pedido_id,
        'nome'      => $meu_nome,
        'tipo'      => $meu_tipo, // Adicionado para diferenciar no CSS
        'texto'     => htmlspecialchars($_POST['mensagem']),
        'hora'      => date('H:i')
    ];
    
    $todas_msgs[] = $nova_msg;
    file_put_contents($arquivo_chat, json_encode(array_values($todas_msgs), JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE));
    
    header("Location: chat.php?pedido_id=$pedido_id");
    exit;
}
?>

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&display=swap');
        body, html { height: 100%; margin: 0; overflow: hidden; font-family: 'Montserrat', sans-serif; background: #f3f4f6; }
        
        #caixa-chat {
            flex: 1;
            overflow-y: auto;
            padding: 15px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        /* BALÃO DE QUEM ESTÁ VENDO A TELA (PRETO) */
        .balao-meu { 
            background: #000; color: #fff; 
            align-self: flex-end; 
            border-radius: 18px 18px 2px 18px; 
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        /* BALÃO DA OUTRA PESSOA (AMARELO BRT) */
        .balao-outro { 
            background: #FFD100; color: #000; 
            align-self: flex-start; 
            border-radius: 18px 18px 18px 2px;
            box-shadow: 0 4px 12px rgba(255,209,0,0.2);
        }
    </style>
</head>
<body class="flex flex-col">

    <div class="bg-black p-4 text-white flex items-center gap-3 shadow-lg">
        <a href="javascript:history.back()" class="text-white mr-2"><i class="fas fa-arrow-left"></i></a>
        <div class="w-10 h-10 bg-yellow-400 rounded-full flex items-center justify-center text-black font-black">
            <i class="fas fa-comments"></i>
        </div>
        <div>
            <h1 class="text-xs font-black uppercase">Chat do Pedido</h1>
            <p class="text-[10px] text-yellow-400 font-bold uppercase">ID: #<?php echo $pedido_id; ?></p>
        </div>
    </div>

    <div id="caixa-chat">
        <?php foreach ($mensagens_filtradas as $m): ?>
            <?php 
                // Verifica se a mensagem foi enviada por este usuário logado
                $sou_eu = ($m['nome'] === $meu_nome);
            ?>
            <div class="p-4 max-w-[85%] text-[13px] font-bold <?php echo $sou_eu ? 'balao-meu' : 'balao-outro'; ?>">
                <?php echo $m['texto']; ?>
                <div class="text-[9px] opacity-40 mt-1 text-right italic font-black">
                    <?php echo mb_strtoupper($m['nome']); ?> • <?php echo $m['hora']; ?>
                </div>
            </div>
        <?php endforeach; ?>
    </div>

    <form method="POST" class="bg-white p-3 border-top border-gray-200 flex gap-2">
        <input type="text" name="mensagem" placeholder="Sua mensagem..." required autocomplete="off"
               class="flex-1 bg-gray-100 rounded-2xl px-5 py-4 text-xs font-bold outline-none">
        <button type="submit" class="bg-black text-yellow-400 w-14 h-14 rounded-2xl flex items-center justify-center shadow-xl">
            <i class="fas fa-paper-plane text-lg"></i>
        </button>
    </form>

    <script>
        const chat = document.getElementById('caixa-chat');
        chat.scrollTop = chat.scrollHeight;

        // Atualização em tempo real
        setInterval(() => {
            fetch(window.location.href)
                .then(r => r.text())
                .then(html => {
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(html, 'text/html');
                    const novo = doc.getElementById('caixa-chat').innerHTML;
                    if (chat.innerHTML !== novo) {
                        chat.innerHTML = novo;
                        chat.scrollTop = chat.scrollHeight;
                    }
                });
        }, 3000);
    </script>
</body>
</html>