<?php
/**
 * واجهة محادثة واتساب - بوابة الهوت سبوت
 * WhatsApp Walled Garden - Arabic RTL
 * 
 * التدفق:
 * 1. المستخدم يدخل رقم واتساب
 * 2. النظام يتحقق من الرقم عبر wifi2fm.com/api/check_number
 * 3. إذا كان الرقم صالح → يدخل المحادثة
 * 4. إذا كان غير صالح → رسالة خطأ
 */

session_start();

require_once __DIR__ . '/includes/config.php';
require_once __DIR__ . '/includes/functions.php';

$hasSession = isset($_SESSION['whatsapp_number']) && isset($_SESSION['whatsapp_verified']);
$whatsappNumber = $hasSession ? $_SESSION['whatsapp_number'] : '';
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>بوابة واتساب - محادثة</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/style.css">
</head>
<body>

<!-- ==================== شاشة تسجيل الدخول ==================== -->
<div id="loginScreen" class="screen <?php echo $hasSession ? 'hidden' : ''; ?>">
    <div class="login-container">
        <div class="login-glow"></div>
        <div class="login-card">
            <div class="login-icon">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z" fill="currentColor"/>
                    <path d="M12 2C6.477 2 2 6.477 2 12c0 1.89.525 3.66 1.438 5.168L2 22l4.832-1.438A9.955 9.955 0 0012 22c5.523 0 10-4.477 10-10S17.523 2 12 2zm0 18a7.96 7.96 0 01-4.106-1.138l-.294-.176-2.893.86.86-2.893-.176-.294A7.96 7.96 0 014 12c0-4.411 3.589-8 8-8s8 3.589 8 8-3.589 8-8 8z" fill="currentColor"/>
                </svg>
            </div>
            <h1 class="login-title">بوابة واتساب</h1>
            <p class="login-subtitle">أدخل رقم الواتساب الخاص بك للتحقق وبدء المحادثة مع البوت</p>
            
            <form id="loginForm" class="login-form">
                <div class="input-group">
                    <label for="phoneNumber">رقم الواتساب</label>
                    <div class="phone-input-wrapper">
                        <span class="phone-prefix">+</span>
                        <input 
                            type="tel" 
                            id="phoneNumber" 
                            name="phone" 
                            placeholder="970599123456"
                            pattern="[0-9]{10,15}"
                            required
                            autocomplete="tel"
                            dir="ltr"
                        >
                    </div>
                    <span class="input-hint">أدخل رمز الدولة بدون + (مثال: 970599123456)</span>
                </div>
                <button type="submit" id="loginBtn" class="btn-primary">
                    <span class="btn-text">تحقق وابدأ المحادثة</span>
                    <span class="btn-loader hidden">
                        <span class="dot"></span><span class="dot"></span><span class="dot"></span>
                    </span>
                </button>
                <!-- حالة التحقق -->
                <div id="verifyStatus" class="verify-status hidden">
                    <div class="verify-step" id="stepFormat">
                        <span class="step-icon">⏳</span>
                        <span class="step-text">التحقق من صيغة الرقم...</span>
                    </div>
                    <div class="verify-step" id="stepWhatsApp">
                        <span class="step-icon">⏳</span>
                        <span class="step-text">التحقق من تسجيل الرقم في واتساب...</span>
                    </div>
                    <div class="verify-step" id="stepSession">
                        <span class="step-icon">⏳</span>
                        <span class="step-text">إنشاء جلسة المحادثة...</span>
                    </div>
                </div>
            </form>
            <div id="loginError" class="error-msg hidden"></div>
        </div>
        <p class="login-footer">بوابة الهوت سبوت &bull; لا يتطلب إنترنت</p>
    </div>
</div>

<!-- ==================== شاشة المحادثة ==================== -->
<div id="chatScreen" class="screen <?php echo $hasSession ? '' : 'hidden'; ?>">
    <div class="chat-layout">

        <header class="chat-header">
            <button id="logoutBtn" class="header-btn" title="قطع الاتصال">
                <svg viewBox="0 0 24 24" fill="none" width="20" height="20"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><polyline points="16,17 21,12 16,7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><line x1="21" y1="12" x2="9" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </button>
            <div class="header-avatar">
                <svg viewBox="0 0 24 24" fill="none" width="22" height="22"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z" fill="currentColor"/><path d="M12 2C6.477 2 2 6.477 2 12c0 1.89.525 3.66 1.438 5.168L2 22l4.832-1.438A9.955 9.955 0 0012 22c5.523 0 10-4.477 10-10S17.523 2 12 2z" fill="currentColor"/></svg>
            </div>
            <div class="header-info">
                <h2 class="header-name">بوت واتساب</h2>
                <span class="header-status" id="connectionStatus">متصل</span>
            </div>
            <div class="header-phone" id="headerPhone"><?php echo htmlspecialchars($whatsappNumber); ?></div>
        </header>

        <div class="chat-messages" id="chatMessages">
            <div class="messages-inner" id="messagesInner">
                <div class="system-msg">
                    <span>بدأت جلسة المحادثة. يتم نقل الرسائل عبر واتساب.</span>
                </div>
            </div>
        </div>

        <div class="chat-input-area">
            <!-- معاينة الصورة قبل الإرسال -->
            <div id="imagePreview" class="image-preview hidden">
                <img id="previewImg" src="" alt="معاينة">
                <button type="button" id="cancelImage" class="cancel-image-btn" title="إلغاء">✕</button>
                <span class="preview-label">صورة مرفقة</span>
            </div>
            <form id="messageForm" class="message-form">
                <!-- زر رفع صورة -->
                <label for="imageInput" class="attach-btn" title="إرفاق صورة">
                    <svg viewBox="0 0 24 24" fill="none" width="22" height="22">
                        <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </label>
                <input type="file" id="imageInput" accept="image/*" class="hidden">
                <div class="input-wrapper">
                    <textarea 
                        id="messageInput" 
                        placeholder="اكتب رسالة..."
                        rows="1"
                        maxlength="4096"
                        autofocus
                    ></textarea>
                </div>
                <button type="submit" id="sendBtn" class="send-btn" disabled>
                    <svg viewBox="0 0 24 24" fill="none" width="22" height="22" class="send-icon">
                        <path d="M22 2L11 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
            </form>
        </div>

    </div>
</div>

<script src="assets/app.js"></script>
<?php if ($hasSession): ?>
<script>
    document.addEventListener('DOMContentLoaded', () => loadChatHistory());
</script>
<?php endif; ?>
</body>
</html>
