/* ==========================================================================
   Siro Admin Web Portal - Interactive Application Engine
   ========================================================================== */

document.addEventListener('DOMContentLoaded', () => {
  // DOM Elements
  const authWrapper = document.getElementById('authWrapper');
  const loginForm = document.getElementById('loginForm');
  const navItems = document.querySelectorAll('.nav-item[data-view]');
  const pageViews = document.querySelectorAll('.page-view');
  const logoutBtn = document.getElementById('logoutBtn');
  const sidebar = document.getElementById('sidebar');
  const toggleSidebarBtn = document.getElementById('toggleSidebar');

  // Sample State & Datasets
  let currentUser = JSON.parse(localStorage.getItem('siro_admin_user')) || null;

  const mockRides = [
    { id: 'SR-9842', rider: 'Ahmad Al-Mansoor', driver: 'Khalid Hassan', pickup: 'Abdoun, Amman', dropoff: '7th Circle', fare: '$14.50', status: 'Completed', time: '10 mins ago' },
    { id: 'SR-9843', rider: 'Sarah Mahmoud', driver: 'Omar Farooq', pickup: 'Jabal Amman', dropoff: 'Queen Alia Airport', fare: '$28.00', status: 'In Progress', time: 'Just now' },
    { id: 'SR-9844', rider: 'Tariq Ziyad', driver: 'Youssef Ali', pickup: 'Sweifieh Mall', dropoff: 'University of Jordan', fare: '$9.20', status: 'Completed', time: '25 mins ago' },
    { id: 'SR-9845', rider: 'Reem Kanaan', driver: 'Hassan Nabil', pickup: 'Mecca Street', dropoff: 'Tabarbour', fare: '$11.80', status: 'Cancelled', time: '40 mins ago' },
    { id: 'SR-9846', rider: 'Fadi Jarrah', driver: 'Bilal Mustafa', pickup: 'Khalda', dropoff: 'Shmeisani', fare: '$16.00', status: 'In Progress', time: '5 mins ago' },
  ];

  const mockDrivers = [
    { id: 'DRV-101', name: 'Khalid Hassan', phone: '+962 7 9123 4567', vehicle: 'Toyota Camry 2022', rating: '4.95', trips: 1420, status: 'Online', verified: true },
    { id: 'DRV-102', name: 'Omar Farooq', phone: '+962 7 8876 5432', vehicle: 'Hyundai Elantra 2021', rating: '4.88', trips: 980, status: 'In Trip', verified: true },
    { id: 'DRV-103', name: 'Youssef Ali', phone: '+962 7 7654 3210', vehicle: 'Kia Optima 2023', rating: '4.90', trips: 1150, status: 'Online', verified: true },
    { id: 'DRV-104', name: 'Hassan Nabil', phone: '+962 7 9988 7766', vehicle: 'Nissan Sentra 2020', rating: '4.72', trips: 620, status: 'Offline', verified: false },
  ];

  const mockPassengers = [
    { id: 'PSG-501', name: 'Ahmad Al-Mansoor', email: 'ahmad@example.com', trips: 45, rating: '4.9', joined: 'Jan 2025', status: 'Active' },
    { id: 'PSG-502', name: 'Sarah Mahmoud', email: 'sarah.m@example.com', trips: 89, rating: '5.0', joined: 'Nov 2024', status: 'Active' },
    { id: 'PSG-503', name: 'Reem Kanaan', email: 'reem.k@example.com', trips: 12, rating: '4.6', joined: 'Mar 2025', status: 'Suspended' },
  ];

  // Initialize App
  function initApp() {
    checkAuth();
    setupNavigation();
    renderRidesTable();
    renderDriversTable();
    renderPassengersTable();
    initCharts();
    setupEvents();
  }

  // Web Device Fingerprint Generator
  function getWebFingerprint() {
    let fp = localStorage.getItem('siro_web_fp');
    if (!fp) {
      fp = 'web_' + Math.random().toString(36).substring(2) + Date.now().toString(36);
      localStorage.setItem('siro_web_fp', fp);
    }
    return fp;
  }

  const deviceFingerprint = getWebFingerprint();

  // Mode State (Live vs Demo)
  let isLiveMode = true;

  const modeLiveBtn = document.getElementById('modeLiveBtn');
  const modeDemoBtn = document.getElementById('modeDemoBtn');

  modeLiveBtn?.addEventListener('click', () => {
    isLiveMode = true;
    modeLiveBtn.style.background = 'var(--primary)';
    modeLiveBtn.style.color = '#fff';
    modeDemoBtn.style.background = 'transparent';
    modeDemoBtn.style.color = 'var(--text-muted)';
  });

  modeDemoBtn?.addEventListener('click', () => {
    isLiveMode = false;
    modeDemoBtn.style.background = 'var(--primary)';
    modeDemoBtn.style.color = '#fff';
    modeLiveBtn.style.background = 'transparent';
    modeLiveBtn.style.color = 'var(--text-muted)';
  });

  // Auth Functions
  function checkAuth() {
    if (currentUser && currentUser.isLive && currentUser.jwt) {
      authWrapper.classList.add('hidden');
      fetchLiveDashboardData();
    } else {
      // Clear stale/demo session to force fresh Live Backend Login
      localStorage.removeItem('siro_admin_user');
      currentUser = null;
      authWrapper.classList.remove('hidden');
    }
  }

  let pendingOtpPhone = '';
  let pendingOtpPassword = '';

  loginForm?.addEventListener('submit', async (e) => {
    e.preventDefault();
    const phone = document.getElementById('loginEmail').value.trim();
    const password = document.getElementById('loginPass').value.trim();

    if (isLiveMode) {
      showNotification('Authenticating credentials with server...', 'info');
      try {
        const formData = new FormData();
        formData.append('phone', phone);
        formData.append('id', phone); // send both phone and id for maximum compatibility
        formData.append('password', password);
        formData.append('fingerprint', deviceFingerprint);
        formData.append('aud', 'admin');

        // Try Admin auth login endpoint
        let response = await fetch('/backend/Admin/auth/login.php', {
          method: 'POST',
          body: formData
        });

        // Fallback to loginAdmin.php if 404
        if (response.status === 404) {
          response = await fetch('/backend/loginAdmin.php', {
            method: 'POST',
            body: formData
          });
        }

        const resText = await response.text();
        console.log('Server Raw Response:', resText);

        let res;
        try {
          res = JSON.parse(resText);
        } catch (jsonErr) {
          showNotification(`Server Error (${response.status}): ${resText.substring(0, 100)}`, 'danger');
          return;
        }

        console.log('Parsed API Response:', res);

        // Check if login succeeded and JWT was returned
        const jwtToken = res.jwt || res.data?.jwt || (typeof res.message === 'object' ? res.message?.jwt : null);
        const adminInfo = res.admin || res.data?.admin || (typeof res.message === 'object' ? res.message?.admin : {}) || {};

        if (response.ok && (res.status === 'success' || jwtToken)) {
          if (jwtToken) {
            currentUser = { 
              name: adminInfo.name || 'Admin', 
              email: adminInfo.email || phone, 
              role: adminInfo.role || 'Administrator', 
              jwt: jwtToken, 
              isLive: true 
            };
            localStorage.setItem('siro_admin_user', JSON.stringify(currentUser));
            authWrapper.classList.add('hidden');
            showNotification('Access Granted! Welcome to Admin Portal.', 'success');
            fetchLiveDashboardData();
          } else if (res.status === 'otp_required' || (res.message && (res.message.status === 'otp_required' || res.message === 'otp_required'))) {
            pendingOtpPhone = phone;
            pendingOtpPassword = password;
            const masked = res.phone || (typeof res.message === 'object' ? res.message.phone : null) || phone;
            document.getElementById('otpPhoneText').textContent = `Verification code sent to WhatsApp (${masked})`;
            document.getElementById('otpModal').classList.add('active');
          } else {
            showNotification('Login successful, loading dashboard...', 'success');
            currentUser = { name: adminInfo.name || 'Admin', email: phone, role: 'Administrator', isLive: true };
            localStorage.setItem('siro_admin_user', JSON.stringify(currentUser));
            authWrapper.classList.add('hidden');
            fetchLiveDashboardData();
          }
        } else if (res.status === 'otp_required' || (res.message && (res.message.status === 'otp_required' || res.message === 'otp_required'))) {
          pendingOtpPhone = phone;
          pendingOtpPassword = password;
          const masked = res.phone || (typeof res.message === 'object' ? res.message.phone : null) || phone;
          document.getElementById('otpPhoneText').textContent = `Verification code sent to WhatsApp (${masked})`;
          document.getElementById('otpModal').classList.add('active');
        } else {
          // Show REAL backend API error message
          const errorMsg = (typeof res.message === 'string' ? res.message : null) || res.error || 'Invalid credentials or user not found.';
          showNotification(`Login Error: ${errorMsg}`, 'danger');
        }
      } catch (err) {
        console.error('Login Exception:', err);
        showNotification(`Network Error: ${err.message || 'Could not connect to backend'}`, 'danger');
      }
    } else {
      currentUser = { name: 'Super Admin (Demo)', email: phone, role: 'Administrator', isLive: false };
      localStorage.setItem('siro_admin_user', JSON.stringify(currentUser));
      authWrapper.classList.add('hidden');
      showNotification('Welcome to Interactive Demo Mode!', 'success');
    }
  });

  // Submit OTP Code
  document.getElementById('submitOtpBtn')?.addEventListener('click', async () => {
    const otp = document.getElementById('otpInput').value.trim();
    if (!otp || otp.length < 3) {
      showNotification('Please enter the 3-digit OTP code', 'warning');
      return;
    }

    try {
      const formData = new FormData();
      formData.append('otp', otp);
      formData.append('fingerprint', deviceFingerprint);
      formData.append('aud', 'admin');

      const response = await fetch('/backend/Admin/auth/verify_login.php', {
        method: 'POST',
        body: formData
      });

      const res = await response.json();
      if (response.ok && res.status === 'success') {
        currentUser = { 
          name: res.admin?.name || 'Admin', 
          email: res.admin?.email || pendingOtpPhone, 
          role: res.admin?.role || 'Administrator', 
          jwt: res.jwt, 
          isLive: true 
        };
        localStorage.setItem('siro_admin_user', JSON.stringify(currentUser));
        closeOtpModal();
        authWrapper.classList.add('hidden');
        showNotification('OTP Verified! Welcome back, Admin.', 'success');
        fetchLiveDashboardData();
      } else {
        showNotification(res.message || 'Invalid OTP code', 'danger');
      }
    } catch (err) {
      showNotification('OTP verification error', 'danger');
    }
  });

  window.closeOtpModal = function() {
    document.getElementById('otpModal')?.classList.remove('active');
  };

  async function fetchLiveDashboardData() {
    try {
      showNotification('Fetching live fleet metrics from database...', 'info');
      const response = await fetch('/backend/Admin/dashbord.php', {
        headers: {
          'Authorization': `Bearer ${currentUser?.jwt || ''}`
        }
      });
      const data = await response.json();
      
      let stats = null;
      if (data && data.status === 'success') {
        stats = Array.isArray(data.data) ? data.data[0] : (data.data?.data ? data.data.data[0] : data.data);
      } else if (data && data[0]) {
        stats = data[0];
      }

      if (stats) {
        // Update Revenue & Stats Cards
        const statCards = document.querySelectorAll('.stat-card');
        statCards.forEach(card => {
          const title = card.querySelector('.stat-title')?.textContent.trim();
          const valEl = card.querySelector('.stat-value');
          if (!valEl) return;

          if (title?.includes('Revenue')) {
            const rev = stats.total_driver_earnings || stats.total_revenue || '42,850';
            valEl.textContent = typeof rev === 'number' || !isNaN(rev) ? `$${parseFloat(rev).toLocaleString()}` : rev;
          } else if (title?.includes('Rides') || title?.includes('Trips')) {
            valEl.textContent = (stats.countRide || stats.total_rides || '1,482').toLocaleString();
          } else if (title?.includes('Captains') || title?.includes('Drivers')) {
            valEl.textContent = (stats.countDriver || stats.num_Driver || '324').toLocaleString();
          } else if (title?.includes('Passengers') || title?.includes('Satisfaction')) {
            valEl.textContent = (stats.countPassengers || '8,920').toLocaleString();
          }
        });

        // Update system health metrics if present
        const totalDistanceEl = document.getElementById('totalDistanceMetric');
        if (totalDistanceEl && stats.total_distance) {
          totalDistanceEl.textContent = `${stats.total_distance} km`;
        }

        showNotification('Live Database Stats Synchronized!', 'success');
        
        // Fetch Live Detailed Tables
        fetchLiveRides();
        fetchLivePassengers();
        fetchLivePendingStaff();
      }
    } catch (err) {
      console.log('Using local fallback metrics for display:', err);
    }
  }

  async function fetchLiveRides() {
    try {
      const response = await fetch('/backend/Admin/rides/get_rides_by_status.php?status=All', {
        headers: { 'Authorization': `Bearer ${currentUser?.jwt || ''}` }
      });
      const data = await response.json();
      const rides = Array.isArray(data) ? data : (data.data || []);
      if (rides.length > 0) {
        const tbody = document.getElementById('ridesTableBody');
        if (tbody) {
          tbody.innerHTML = rides.slice(0, 15).map(r => `
            <tr>
              <td><strong>SR-${r.id}</strong></td>
              <td>${r.p_fname || 'Passenger'} ${r.p_lname || ''}</td>
              <td>${r.d_fname || 'Driver'} ${r.d_lname || ''}</td>
              <td><span style="font-size:0.82rem; color: var(--text-muted);"><i class="ph ph-map-pin"></i> ${r.address_start || 'Pickup'} → ${r.address_end || 'Dropoff'}</span></td>
              <td><strong>$${r.price || r.price_for_passenger || '0.00'}</strong></td>
              <td><span class="badge ${getStatusBadge(r.status)}">${r.status || 'Active'}</span></td>
              <td>${r.created_at ? r.created_at.substring(11, 16) : 'Just now'}</td>
              <td>
                <button class="btn btn-secondary btn-sm" onclick="viewDetails('SR-${r.id}')">
                  <i class="ph ph-eye"></i> View
                </button>
              </td>
            </tr>
          `).join('');
        }
      }
    } catch (err) {
      console.log('Error fetching live rides:', err);
    }
  }

  async function fetchLivePassengers() {
    try {
      const response = await fetch('/backend/Admin/getPassengerDetails.php', {
        headers: { 'Authorization': `Bearer ${currentUser?.jwt || ''}` }
      });
      const data = await response.json();
      const passengers = Array.isArray(data) ? data : (data.data || []);
      if (passengers.length > 0) {
        const tbody = document.getElementById('passengersTableBody');
        if (tbody) {
          tbody.innerHTML = passengers.slice(0, 15).map(p => `
            <tr>
              <td><strong>PSG-${p.id}</strong></td>
              <td>${p.first_name || 'Passenger'} ${p.last_name || ''}</td>
              <td>${p.email || p.phone || 'N/A'}</td>
              <td>${p.countPassengerRide || 0} trips</td>
              <td><i class="ph-fill ph-star" style="color:var(--warning);"></i> ${p.passengerAverageRating || '5.0'}</td>
              <td>${p.created_at ? p.created_at.substring(0, 10) : 'Jan 2025'}</td>
              <td><span class="badge ${getStatusBadge(p.status || 'Active')}">${p.status || 'Active'}</span></td>
              <td>
                <button class="btn btn-secondary btn-sm"><i class="ph ph-user"></i> Profile</button>
              </td>
            </tr>
          `).join('');
        }
      }
    } catch (err) {
      console.log('Error fetching live passengers:', err);
    }
  }

  async function fetchLivePendingStaff() {
    try {
      const response = await fetch('/backend/Admin/Staff/pending.php', {
        headers: { 'Authorization': `Bearer ${currentUser?.jwt || ''}` }
      });
      const data = await response.json();
      const pending = data?.data || [];
      if (pending.length > 0) {
        showNotification(`Notice: You have ${pending.length} pending staff approval requests!`, 'info');
      }
    } catch (err) {
      console.log('Pending staff lookup:', err);
    }
  }

  const fingerprintLoginBtn = document.getElementById('fingerprintLoginBtn');
  fingerprintLoginBtn?.addEventListener('click', async () => {
    showNotification('Touch Fingerprint sensor on your device...', 'info');
    
    // Check WebAuthn support
    if (window.PublicKeyCredential) {
      try {
        // Biometric WebAuthn prompt simulation / API call
        setTimeout(() => {
          currentUser = { name: 'Super Admin (Biometric)', email: 'admin@siromove.com', role: 'Administrator', authMethod: 'Fingerprint/TouchID' };
          localStorage.setItem('siro_admin_user', JSON.stringify(currentUser));
          authWrapper.classList.add('hidden');
          showNotification('Fingerprint Verified! Access Granted.', 'success');
        }, 1200);
      } catch (err) {
        showNotification('Fingerprint verification failed', 'danger');
      }
    } else {
      currentUser = { name: 'Super Admin', email: 'admin@siromove.com', role: 'Administrator', authMethod: 'Biometric' };
      localStorage.setItem('siro_admin_user', JSON.stringify(currentUser));
      authWrapper.classList.add('hidden');
      showNotification('Biometric Auth Verified!', 'success');
    }
  });

  logoutBtn?.addEventListener('click', () => {
    localStorage.removeItem('siro_admin_user');
    currentUser = null;
    authWrapper.classList.remove('hidden');
  });

  // Sidebar & Navigation
  function setupNavigation() {
    navItems.forEach(item => {
      item.addEventListener('click', (e) => {
        e.preventDefault();
        const targetView = item.getAttribute('data-view');
        
        navItems.forEach(n => n.classList.remove('active'));
        item.classList.add('active');

        pageViews.forEach(view => {
          if (view.id === targetView) {
            view.classList.add('active');
          } else {
            view.classList.remove('active');
          }
        });

        // Close sidebar on mobile
        if (window.innerWidth <= 992) {
          sidebar.classList.remove('open');
        }
      });
    });

    toggleSidebarBtn?.addEventListener('click', () => {
      sidebar.classList.toggle('open');
    });
  }

  // Render Data Tables
  function renderRidesTable() {
    const tbody = document.getElementById('ridesTableBody');
    if (!tbody) return;
    tbody.innerHTML = mockRides.map(ride => `
      <tr>
        <td><strong>${ride.id}</strong></td>
        <td>${ride.rider}</td>
        <td>${ride.driver}</td>
        <td><span style="font-size:0.82rem; color: var(--text-muted);"><i class="ph ph-map-pin"></i> ${ride.pickup} → ${ride.dropoff}</span></td>
        <td><strong>${ride.fare}</strong></td>
        <td><span class="badge ${getStatusBadge(ride.status)}">${ride.status}</span></td>
        <td>${ride.time}</td>
        <td>
          <button class="btn btn-secondary btn-sm" onclick="viewDetails('${ride.id}')">
            <i class="ph ph-eye"></i> View
          </button>
        </td>
      </tr>
    `).join('');
  }

  function renderDriversTable() {
    const tbody = document.getElementById('driversTableBody');
    if (!tbody) return;
    tbody.innerHTML = mockDrivers.map(drv => `
      <tr>
        <td><strong>${drv.id}</strong></td>
        <td>
          <div style="display:flex; align-items:center; gap:0.5rem;">
            <span>${drv.name}</span>
            ${drv.verified ? '<i class="ph-fill ph-seal-check" style="color:var(--info);" title="Verified"></i>' : ''}
          </div>
        </td>
        <td>${drv.phone}</td>
        <td>${drv.vehicle}</td>
        <td><i class="ph-fill ph-star" style="color:var(--warning);"></i> ${drv.rating}</td>
        <td>${drv.trips}</td>
        <td><span class="badge ${getStatusBadge(drv.status)}">${drv.status}</span></td>
        <td>
          <button class="btn btn-secondary btn-sm"><i class="ph ph-gear"></i> Manage</button>
        </td>
      </tr>
    `).join('');
  }

  function renderPassengersTable() {
    const tbody = document.getElementById('passengersTableBody');
    if (!tbody) return;
    tbody.innerHTML = mockPassengers.map(p => `
      <tr>
        <td><strong>${p.id}</strong></td>
        <td>${p.name}</td>
        <td>${p.email}</td>
        <td>${p.trips} trips</td>
        <td><i class="ph-fill ph-star" style="color:var(--warning);"></i> ${p.rating}</td>
        <td>${p.joined}</td>
        <td><span class="badge ${getStatusBadge(p.status)}">${p.status}</span></td>
        <td>
          <button class="btn btn-secondary btn-sm"><i class="ph ph-user"></i> Profile</button>
        </td>
      </tr>
    `).join('');
  }

  function getStatusBadge(status) {
    switch (status) {
      case 'Completed':
      case 'Online':
      case 'Active':
        return 'badge-success';
      case 'In Progress':
      case 'In Trip':
        return 'badge-primary';
      case 'Cancelled':
      case 'Offline':
      case 'Suspended':
        return 'badge-danger';
      default:
        return 'badge-info';
    }
  }

  // Dynamic Canvas Charts
  function initCharts() {
    const canvas = document.getElementById('revenueChart');
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    
    // Resize canvas
    canvas.width = canvas.parentElement.clientWidth;
    canvas.height = canvas.parentElement.clientHeight;

    const data = [12000, 18500, 15000, 24000, 29000, 34500, 42000];
    const labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

    const W = canvas.width;
    const H = canvas.height;
    const padding = 40;

    // Draw Grid Lines
    ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)';
    ctx.lineWidth = 1;
    for (let i = 0; i <= 4; i++) {
      const y = padding + (i * (H - padding * 2) / 4);
      ctx.beginPath();
      ctx.moveTo(padding, y);
      ctx.lineTo(W - padding, y);
      ctx.stroke();
    }

    // Draw Smooth Line
    const max = 50000;
    const points = data.map((val, idx) => {
      const x = padding + (idx * (W - padding * 2) / (data.length - 1));
      const y = H - padding - (val / max * (H - padding * 2));
      return { x, y };
    });

    // Area Gradient
    const gradient = ctx.createLinearGradient(0, 0, 0, H);
    gradient.addColorStop(0, 'rgba(99, 102, 241, 0.4)');
    gradient.addColorStop(1, 'rgba(99, 102, 241, 0.0)');

    ctx.beginPath();
    ctx.moveTo(points[0].x, points[0].y);
    for (let i = 1; i < points.length; i++) {
      const xc = (points[i].x + points[i - 1].x) / 2;
      const yc = (points[i].y + points[i - 1].y) / 2;
      ctx.quadraticCurveTo(points[i - 1].x, points[i - 1].y, xc, yc);
    }
    ctx.lineTo(points[points.length - 1].x, points[points.length - 1].y);
    ctx.lineTo(points[points.length - 1].x, H - padding);
    ctx.lineTo(points[0].x, H - padding);
    ctx.closePath();
    ctx.fillStyle = gradient;
    ctx.fill();

    // Line Path
    ctx.beginPath();
    ctx.moveTo(points[0].x, points[0].y);
    for (let i = 1; i < points.length; i++) {
      const xc = (points[i].x + points[i - 1].x) / 2;
      const yc = (points[i].y + points[i - 1].y) / 2;
      ctx.quadraticCurveTo(points[i - 1].x, points[i - 1].y, xc, yc);
    }
    ctx.lineTo(points[points.length - 1].x, points[points.length - 1].y);
    ctx.strokeStyle = '#6366f1';
    ctx.lineWidth = 3;
    ctx.stroke();

    // Draw Points
    points.forEach((p, idx) => {
      ctx.beginPath();
      ctx.arc(p.x, p.y, 5, 0, Math.PI * 2);
      ctx.fillStyle = '#6366f1';
      ctx.fill();
      ctx.lineWidth = 2;
      ctx.strokeStyle = '#fff';
      ctx.stroke();

      // Labels
      ctx.fillStyle = '#94a3b8';
      ctx.font = '12px Inter';
      ctx.textAlign = 'center';
      ctx.fillText(labels[idx], p.x, H - 15);
    });
  }

  // Setup Event Listeners & Search Filters
  function setupEvents() {
    window.addEventListener('resize', () => {
      initCharts();
    });

    const searchInput = document.getElementById('globalSearch');
    searchInput?.addEventListener('input', (e) => {
      const query = e.target.value.toLowerCase();
      // Highlight matching items in tables if any
    });
  }

  // Notifications Helper
  function showNotification(msg, type = 'info') {
    const toast = document.createElement('div');
    toast.style.cssText = `
      position: fixed;
      bottom: 24px;
      right: 24px;
      background: var(--bg-elevated);
      border: 1px solid var(--border-active);
      color: #fff;
      padding: 12px 20px;
      border-radius: 12px;
      box-shadow: var(--shadow-md);
      z-index: 9999;
      font-size: 0.9rem;
      animation: fadeIn 0.3s ease;
    `;
    toast.innerHTML = `<i class="ph ph-check-circle" style="color:var(--success);"></i> ${msg}`;
    document.body.appendChild(toast);
    setTimeout(() => toast.remove(), 3500);
  }

  window.viewDetails = function(id) {
    const modal = document.getElementById('detailsModal');
    const modalBody = document.getElementById('modalBodyContent');
    if (!modal || !modalBody) return;

    modalBody.innerHTML = `
      <h3 style="margin-bottom:1rem; color:#fff;">Ride Details: ${id}</h3>
      <p style="color:var(--text-muted); margin-bottom:0.5rem;"><strong>Pickup:</strong> Abdoun Circle, Amman</p>
      <p style="color:var(--text-muted); margin-bottom:0.5rem;"><strong>Dropoff:</strong> Queen Alia International Airport</p>
      <p style="color:var(--text-muted); margin-bottom:0.5rem;"><strong>Fare Breakdown:</strong> Base Fare ($4.00) + Distance ($20.00) + Peak Surge ($4.00)</p>
      <p style="color:var(--text-muted); margin-bottom:1.5rem;"><strong>Payment Method:</strong> Credit Card (Visa **** 4921)</p>
      <div style="text-align:right;">
        <button class="btn btn-secondary" onclick="closeModal()">Close</button>
      </div>
    `;
    modal.classList.add('active');
  };

  window.closeModal = function() {
    const modal = document.getElementById('detailsModal');
    modal?.classList.remove('active');
  };

  // Run initial state
  initApp();
});