{% extends "base.html" %}
{% block content %}
<style>
  .backup-card { background:#fff; border:1px solid #e9eef7; border-radius:16px; overflow:hidden; box-shadow:0 4px 14px rgba(15,23,42,.04); }
  .backup-card .card-head { padding:16px 20px; border-bottom:1px solid #eef2f7; }
  .backup-item { display:flex; justify-content:space-between; align-items:center; padding:12px 20px; border-bottom:1px solid #f1f5f9; }
  .backup-item:last-child { border-bottom:none; }
  .status-dot { width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:6px; }
  .dot-green { background:#16a34a; }
  .dot-red   { background:#dc2626; }
  .dot-gray  { background:#94a3b8; }
  .section-title { font-size:.7rem; font-weight:700; letter-spacing:.08em; color:#64748b; text-transform:uppercase; padding:10px 20px 4px; }
</style>

<div class="container-fluid py-3" style="max-width:860px">

  <!-- Page header -->
  <div class="mb-4 d-flex align-items-center gap-3">
    <a href="{{ url_for('dashboard') }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left"></i></a>
    <div>
      <h4 class="mb-0 fw-bold">{{ l('Backup Manager', 'ব্যাকআপ ম্যানেজার') }}</h4>
      <small class="text-muted">{{ l('Your data is safe here', 'আপনার সব ডেটা এখানে সুরক্ষিত') }}</small>
    </div>
  </div>

  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      {% for category, message in messages %}
        <div class="alert alert-{{ category }} alert-dismissible fade show rounded-3 mb-3" role="alert">
          {{ message }}
          <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
      {% endfor %}
    {% endif %}
  {% endwith %}

  <!-- Database Connection Status Header Card -->
  <div class="card border-0 shadow-sm rounded-4 mb-4 p-3 bg-white" style="border: 1px solid #e2e8f0 !important;">
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
      <div class="d-flex align-items-center gap-2">
        <i class="bi bi-database fs-4 text-primary"></i>
        <div>
          <h6 class="mb-0 fw-bold">{{ l('Database Connection Status', 'ডাটাবেজ কানেকশন স্ট্যাটাস') }}</h6>
          <small class="text-muted">{{ l('Live network connectivity', 'লাইভ নেটওয়ার্ক স্ট্যাটাস') }}</small>
        </div>
      </div>
      <div id="db-status-badge-container">
        {% if db_status and db_status.connected %}
          <span class="badge bg-success-subtle text-success border border-success-subtle px-3 py-2 rounded-pill fw-bold" style="font-size: 13px;">
            <i class="bi bi-circle-fill text-success me-1.5" style="font-size: 8px;"></i>{{ l(db_status.label_en, db_status.label_bn) }}
          </span>
        {% else %}
          <span class="badge bg-danger-subtle text-danger border border-danger-subtle px-3 py-2 rounded-pill fw-bold" style="font-size: 13px;">
            <i class="bi bi-circle-fill text-danger me-1.5" style="font-size: 8px;"></i>{{ l(db_status.label_en if db_status else 'Cloud DB Disconnected (Offline)', db_status.label_bn if db_status else 'ক্লাউড ডাটাবেজ অফলাইন') }}
          </span>
        {% endif %}
      </div>
    </div>
  </div>

  <!-- ══════════════════════════════════════
       SUPABASE CLOUD DATABASE AUTO-SYNC & RESTORE
  ══════════════════════════════════════ -->
  <div class="backup-card mb-4 border-0 shadow-sm" style="border: 1px solid #c7d2fe !important; background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%);">
    <div class="card-head d-flex justify-content-between align-items-center bg-white" style="border-bottom: 1px solid #e0e7ff;">
      <div class="d-flex align-items-center gap-2">
        <div class="p-2 rounded-3 bg-primary-subtle text-primary">
          <i class="bi bi-cloud-arrow-up-fill fs-5"></i>
        </div>
        <div>
          <h6 class="mb-0 fw-bold text-dark">{{ l('Supabase Cloud Database Backup & Restore', 'সুপাবেস ক্লাউড ডাটাবেজ ব্যাকআপ ও রিস্টোর') }}</h6>
          <small class="text-muted">{{ l('Central real-time database sync • No Google Drive required', 'সরাসরি অনলাইন ক্লাউড ডাটাবেজ • কোনো গুগল ড্রাইভ ছাড়াই রিকভারি সম্ভব') }}</small>
        </div>
      </div>
      <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-2 rounded-pill fw-bold">
        <i class="bi bi-shield-check me-1"></i>{{ l('Cloud Protected', 'ক্লাউড সুরক্ষিত') }}
      </span>
    </div>

    <div class="p-4">
      <div class="row g-3 align-items-center mb-3">
        <div class="col-md-7">
          <div class="d-flex flex-column gap-1">
            <span class="fw-bold text-dark fs-6">{{ l('Automatic Cloud Backup & Recovery', 'স্বয়ংক্রিয় ক্লাউড রিকভারি') }}</span>
            <p class="text-muted small mb-0">
              {{ l('Your shop products, customers, sales invoices, dues, and finances are synced to the central Supabase Cloud Database. If your computer crashes or local backups are deleted, click "Restore from Cloud" to recreate your entire shop database instantly.', 'আপনার দোকানের পণ্য, কাস্টমার, ইনভয়েস, বাকি ও হিসাব স্বয়ংক্রিয়ভাবে সুপাবেস ক্লাউড ডাটাবেজে জমা থাকে। লোকাল ফাইল ডিলিট হয়ে গেলেও ১-ক্লিকে ক্লাউড থেকে সব তথ্য রিকভার করুন।') }}
            </p>
          </div>
        </div>
        <div class="col-md-5 text-md-end">
          <div class="d-flex flex-wrap gap-2 justify-content-md-end">
            <!-- 1-Click Restore Button -->
            <form method="post" action="{{ url_for('cloud_restore_now') }}" class="d-inline"
                  onsubmit="return confirm('{{ l('Are you sure you want to restore all data from Supabase Cloud? This will update your local database with online records.', 'আপনি কি নিশ্চিত যে ক্লাউড ডাটাবেজ থেকে সব তথ্য রিস্টোর করতে চান? আপনার লোকাল ডাটাবেজ ক্লাউডের তথ্য দিয়ে আপডেট হবে।') }}')">
              <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
              <button type="submit" class="btn btn-primary px-3 py-2 fw-bold shadow-sm rounded-3">
                <i class="bi bi-arrow-clockwise me-1"></i>{{ l('Restore from Cloud', 'ক্লাউড থেকে রিস্টোর') }}
              </button>
            </form>

            <!-- Backup Now Button -->
            <form method="post" action="{{ url_for('cloud_backup_now') }}" class="d-inline">
              <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
              <button type="submit" class="btn btn-outline-primary px-3 py-2 fw-semibold rounded-3">
                <i class="bi bi-cloud-arrow-up me-1"></i>{{ l('Backup to Cloud Now', 'এখনই ক্লাউডে পাঠান') }}
              </button>
            </form>
          </div>
        </div>
      </div>

      <div class="p-2.5 rounded-3 bg-light border border-light-subtle d-flex align-items-center gap-2">
        <i class="bi bi-check-circle-fill text-success"></i>
        <small class="text-secondary fw-semibold">
          {{ l('Multi-device ready: Any changes made here are also accessible when logging in from other authorized devices.', 'মাল্টি-ডিভাইস সাপোর্ট: অন্য যে কোনো কম্পিউটার বা ফোনে লগইন করলেও এই ডেটা স্বয়ংক্রিয়ভাবে লোড হবে।') }}
        </small>
      </div>
    </div>
  </div>

  <!-- ══════════════════════════════════════
       GOOGLE DRIVE SECTION
  ══════════════════════════════════════ -->
  <div class="backup-card mb-4">
    <div class="card-head d-flex justify-content-between align-items-center">
      <div class="d-flex align-items-center gap-2">
        <i class="bi bi-google text-primary fs-5"></i>
        <div>
          <h6 class="mb-0 fw-bold">{{ l('Google Drive Backup', 'গুগল ড্রাইভ ব্যাকআপ') }}</h6>
          <small class="text-muted" id="driveStatusText">{{ l('Checking…', 'চেক করা হচ্ছে…') }}</small>
        </div>
      </div>
      <span id="driveStatusBadge" class="badge rounded-pill px-3 py-2" style="font-size:.78rem">…</span>
    </div>

    <!-- Connected state -->
    <div id="driveConnectedPanel" class="p-3 d-none">
      <div class="row g-2 mb-3">
        <div class="col-md-6">
          <div class="p-3 rounded-3 bg-success-subtle">
            <div class="small fw-bold text-success-emphasis mb-1"><i class="bi bi-cloud-check me-1"></i>{{ l('Last upload', 'সর্বশেষ আপলোড') }}</div>
            <div class="fw-semibold" id="lastUploadTime">—</div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="p-3 rounded-3 bg-info-subtle">
            <div class="small fw-bold text-info-emphasis mb-1"><i class="bi bi-clock me-1"></i>{{ l('Next auto backup', 'পরবর্তী স্বয়ংক্রিয় ব্যাকআপ') }}</div>
            <div class="fw-semibold">{{ l('Daily at 2:00 AM', 'প্রতিদিন রাত ২টায়') }}</div>
          </div>
        </div>
      </div>
      <div class="d-flex gap-2">
        <form method="post" action="{{ url_for('gdrive_backup_now') }}" class="d-inline">
          <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
          <button class="btn btn-success btn-sm"><i class="bi bi-cloud-upload me-1"></i>{{ l('Backup Now', 'এখনই ব্যাকআপ করুন') }}</button>
        </form>
        <form method="post" action="{{ url_for('gdrive_disconnect') }}" class="d-inline" onsubmit="return confirm('Disconnect Google Drive?')">
          <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
          <button class="btn btn-outline-danger btn-sm"><i class="bi bi-plug me-1"></i>{{ l('Disconnect', 'সংযোগ বিচ্ছিন্ন করুন') }}</button>
        </form>
      </div>
    </div>

    <!-- Not connected state -->
    <div id="driveDisconnectedPanel" class="p-3 d-none">
      <div class="alert alert-warning rounded-3 mb-3 py-2">
        <i class="bi bi-exclamation-triangle me-1"></i>
        {{ l('Google Drive is not connected. Your data is only on this PC.', 'গুগল ড্রাইভ সংযুক্ত নেই। ডেটা শুধু এই PC-তে আছে।') }}
      </div>
      <p class="text-muted small mb-3">
        {{ l('To enable cloud backup:', 'ক্লাউড ব্যাকআপ চালু করতে:') }}
        <ol class="mt-2 small text-muted">
          <li>{{ l('Go to', 'যান') }} <a href="https://console.cloud.google.com/" target="_blank">Google Cloud Console</a></li>
          <li>{{ l('Create a project → Enable Drive API → Create OAuth credentials (Desktop app)', 'Project তৈরি করুন → Drive API চালু করুন → OAuth credentials তৈরি করুন (Desktop app)') }}</li>
          <li>{{ l('Download the credentials JSON and upload it below', 'Credentials JSON ডাউনলোড করুন এবং নিচে আপলোড করুন') }}</li>
        </ol>
      </p>
      <form method="post" action="{{ url_for('gdrive_connect') }}" enctype="multipart/form-data">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
        <div class="d-flex gap-2 align-items-center flex-wrap">
          <input type="file" name="credentials_file" accept=".json" class="form-control form-control-sm" style="max-width:280px" required>
          <button class="btn btn-primary btn-sm"><i class="bi bi-google me-1"></i>{{ l('Connect Google Drive', 'গুগল ড্রাইভ সংযুক্ত করুন') }}</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ══════════════════════════════════════
       RESTORE FROM EXTERNAL / CLOUD BACKUP FILE
  ══════════════════════════════════════ -->
  <div class="backup-card mb-4">
    <div class="card-head d-flex justify-content-between align-items-center">
      <div class="d-flex align-items-center gap-2">
        <i class="bi bi-cloud-arrow-down-fill text-indigo fs-5"></i>
        <div>
          <h6 class="mb-0 fw-bold">{{ l('Upload & Restore Backup (.db)', 'ক্লাউড/ফাইল থেকে ব্যাকআপ রিস্টোর') }}</h6>
          <small class="text-muted">{{ l('Restore database from Google Drive or downloaded .db backup file', 'গুগল ড্রাইভ বা ডাউনলোড করা .db ফাইল দিয়ে ডাটা রিকভার করুন') }}</small>
        </div>
      </div>
    </div>
    <div class="p-3 bg-light-subtle">
      <form method="post" action="{{ url_for('upload_restore_backup') }}" enctype="multipart/form-data" 
            onsubmit="return confirm('{{ l('Are you sure? This will replace current data with the uploaded backup database.', 'আপনি কি নিশ্চিত? আপলোড করা ব্যাকআপ দিয়ে বর্তমান ডাটা প্রতিস্থাপিত হবে।') }}')">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
        <div class="d-flex gap-2 align-items-center flex-wrap">
          <input type="file" name="backup_file" accept=".db" class="form-control form-control-sm" style="max-width:320px" required>
          <button type="submit" class="btn btn-warning btn-sm fw-semibold">
            <i class="bi bi-arrow-counterclockwise me-1"></i>{{ l('Upload & Restore Now', 'আপলোড ও রিস্টোর করুন') }}
          </button>
        </div>
        <small class="text-muted d-block mt-2">
          <i class="bi bi-info-circle me-1"></i>{{ l('If your local PC is formatted, download the backup file from Google Drive and upload it here.', 'পিসি ফরম্যাট বা লোকাল ব্যাকআপ ডিলিট হলে গুগল ড্রাইভ থেকে ফাইলটি নামিয়ে এখানে আপলোড করুন।') }}
        </small>
      </form>
    </div>
  </div>

  <!-- ══════════════════════════════════════
       LOCAL BACKUPS SECTION
  ══════════════════════════════════════ -->
  <div class="backup-card">
    <div class="card-head d-flex justify-content-between align-items-center">
      <div>
        <h6 class="mb-0 fw-bold"><i class="bi bi-hdd me-1"></i>{{ l('Local Backups', 'লোকাল ব্যাকআপ') }}</h6>
        <small class="text-muted">{{ l('Auto backup every 6 hours • Last 7 kept', 'প্রতি ৬ ঘন্টায় স্বয়ংক্রিয় • সর্বশেষ ৭টি রাখা হয়') }}</small>
      </div>
      <form method="post" action="{{ url_for('run_backup') }}" class="d-inline">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
        <button class="btn btn-sm btn-dark"><i class="bi bi-save me-1"></i>{{ l('Backup Now', 'এখনই ব্যাকআপ') }}</button>
      </form>
    </div>

    {% if backups %}
      {% for file in backups|reverse %}
      <div class="backup-item">
        <div class="d-flex align-items-center gap-2">
          <i class="bi bi-database text-primary"></i>
          <div>
            <div class="fw-semibold small">{{ file }}</div>
            <div class="text-muted" style="font-size:.72rem">{{ l('Local backup', 'লোকাল ব্যাকআপ') }}</div>
          </div>
        </div>
        <form method="post" action="{{ url_for('restore_backup', filename=file) }}"
              onsubmit="return confirm('{{ l('Restore this backup? Current data will be replaced.', 'এই ব্যাকআপ রিস্টোর করবেন? বর্তমান ডেটা মুছে যাবে।') }}')">
          <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
          <button class="btn btn-sm btn-outline-warning"><i class="bi bi-arrow-counterclockwise me-1"></i>{{ l('Restore', 'রিস্টোর') }}</button>
        </form>
      </div>
      {% endfor %}
    {% else %}
      <div class="text-center text-muted py-4">
        <i class="bi bi-inbox fs-2 d-block mb-2 opacity-30"></i>
        {{ l('No local backups yet. Click "Backup Now" to create one.', 'এখনও কোনো লোকাল ব্যাকআপ নেই। "এখনই ব্যাকআপ" বাটনে ক্লিক করুন।') }}
      </div>
    {% endif %}
  </div>

</div>

<script>
const currentLang = "{{ current_lang or 'en' }}";

function renderOfflineBadge(enLabel, bnLabel) {
  const container = document.getElementById('db-status-badge-container');
  if (!container) return;
  const label = currentLang === 'bn' ? (bnLabel || 'ক্লাউড ডাটাবেজ অফলাইন') : (enLabel || 'Cloud DB Disconnected (Offline)');
  container.innerHTML = `
    <span class="badge bg-danger-subtle text-danger border border-danger-subtle px-3 py-2 rounded-pill fw-bold" style="font-size: 13px;">
      <i class="bi bi-circle-fill text-danger me-1.5" style="font-size: 8px;"></i>${label}
    </span>
  `;
}

function renderOnlineBadge(enLabel, bnLabel) {
  const container = document.getElementById('db-status-badge-container');
  if (!container) return;
  const label = currentLang === 'bn' ? (bnLabel || 'ডাটাবেজ কানেক্টেড (অনলাইন)') : (enLabel || 'Database Connected (Online)');
  container.innerHTML = `
    <span class="badge bg-success-subtle text-success border border-success-subtle px-3 py-2 rounded-pill fw-bold" style="font-size: 13px;">
      <i class="bi bi-circle-fill text-success me-1.5" style="font-size: 8px;"></i>${label}
    </span>
  `;
}

function checkLiveDbConnection() {
  if (!navigator.onLine) {
    renderOfflineBadge();
    return;
  }
  fetch("/api/db-status")
    .then(r => r.json())
    .then(data => {
      if (data && data.connected) {
        renderOnlineBadge(data.label_en, data.label_bn);
      } else {
        renderOfflineBadge(data ? data.label_en : null, data ? data.label_bn : null);
      }
    })
    .catch(() => {
      renderOfflineBadge();
    });
}

// Event Listeners for browser online/offline events & interval polling
window.addEventListener('online', checkLiveDbConnection);
window.addEventListener('offline', checkLiveDbConnection);
setInterval(checkLiveDbConnection, 4000);
checkLiveDbConnection();

// Poll Google Drive status on page load
fetch("{{ url_for('gdrive_status_api') }}")
  .then(r => r.json())
  .then(data => {
    const badge      = document.getElementById('driveStatusBadge');
    const statusText = document.getElementById('driveStatusText');
    const connected  = document.getElementById('driveConnectedPanel');
    const disconnected = document.getElementById('driveDisconnectedPanel');
    const lastUpload = document.getElementById('lastUploadTime');

    if (data.connected) {
      badge.textContent = '{{ l("Connected", "সংযুক্ত") }}';
      badge.className   = 'badge rounded-pill px-3 py-2 bg-success-subtle text-success';
      statusText.textContent = '{{ l("Syncing daily to your Google Drive", "প্রতিদিন আপনার গুগল ড্রাইভে সিঙ্ক হচ্ছে") }}';
      connected.classList.remove('d-none');
      disconnected.classList.add('d-none');
      lastUpload.textContent = data.last_upload || '{{ l("Not yet", "এখনো হয়নি") }}';
    } else {
      badge.textContent = '{{ l("Not connected", "সংযুক্ত নয়") }}';
      badge.className   = 'badge rounded-pill px-3 py-2 bg-danger-subtle text-danger';
      statusText.textContent = data.error || '{{ l("Connect Google Drive to enable cloud backup", "ক্লাউড ব্যাকআপের জন্য গুগল ড্রাইভ সংযুক্ত করুন") }}';
      connected.classList.add('d-none');
      disconnected.classList.remove('d-none');
    }
  })
  .catch(() => {
    document.getElementById('driveStatusBadge').textContent = 'Error';
  });
</script>
{% endblock %}