{% extends 'base.html' %}

{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto px-4 py-8 space-y-6">

  <!-- Header -->
  <div class="flex items-center justify-between mb-4">
    <div>
      <h1 class="text-2xl md:text-3xl font-bold">Starlink Kenya</h1>
      <p class="text-gray-400 text-sm">Monitor your internet experience and choose a data plan</p>
    </div>
    <div class="flex items-center gap-2">
      <i data-lucide="user" class="w-7 h-7 text-accent"></i>
      <span class="text-sm">Guest access</span>
    </div>
  </div>

  <!-- IP Address and Carrier -->
  <div class="bg-soft rounded-xl p-5 shadow flex flex-col gap-2 mb-6">
    <div class="flex items-center justify-between">
      <span class="text-sm text-gray-400">Private IP</span>
    </div>
    <p class="text-2xl font-bold text-gray-500">{{ private_ip }}</p>

    <div class="flex items-center justify-between">
      <span class="text-sm text-gray-400">Public IP</span>
    </div>
    <p class="text-2xl font-bold text-gray-500">{{ public_ip }}</p>

    <div class="flex items-center justify-between">
      <span class="text-sm text-gray-400">Carrier</span>
    </div>
    <p class="text-2xl font-bold text-gray-500">{{ carrier }}</p>
  </div>

  <!-- Subscription Toggle -->
  <div class="bg-soft rounded-2xl p-5 flex items-center justify-between shadow-md mb-6">
    <div>
      <h2 class="text-lg font-semibold">Subscription</h2>
      <p class="text-gray-400 text-sm">
        {{ subscription.start_date|date:"M d, Y" }} → 
        {% if subscription.end_date %}{{ subscription.end_date|date:"M d, Y" }}{% else %}∞{% endif %}
      </p>
    </div>
    
    <form method="POST" action="{% url 'package_list' %}">
      {% csrf_token %}
      <button type="submit" class="bg-green-500 text-white px-4 py-2 rounded-full hover:bg-green-600 focus:outline-none">
        {% if subscription.is_active %}Unsubscribe{% else %}Subscribe{% endif %}
      </button>
    </form>
  </div>

  <!-- Stat Cards -->
  <div class="grid grid-cols-2 md:grid-cols-3 gap-4">

    <!-- Download Speed -->
    <div class="bg-soft rounded-xl p-5 shadow flex flex-col gap-2">
      <div class="flex items-center justify-between">
        <span class="text-sm text-gray-400">Download</span>
        <i data-lucide="download" class="w-5 h-5 text-cyan-400"></i>
      </div>
      <p class="text-2xl font-bold text-cyan-400">{{ stats.download_speed }} Mbps</p>
    </div>

    <!-- Upload Speed -->
    <div class="bg-soft rounded-xl p-5 shadow flex flex-col gap-2">
      <div class="flex items-center justify-between">
        <span class="text-sm text-gray-400">Upload</span>
        <i data-lucide="upload" class="w-5 h-5 text-blue-400"></i>
      </div>
      <p class="text-2xl font-bold text-blue-400">{{ stats.upload_speed }} Mbps</p>
    </div>

    <!-- Data Used -->
    <div class="bg-soft rounded-xl p-5 shadow flex flex-col gap-2">
      <div class="flex items-center justify-between">
        <span class="text-sm text-gray-400">Data Used</span>
        <i data-lucide="database" class="w-5 h-5 text-pink-400"></i>
      </div>
      <p class="text-2xl font-bold text-pink-400">{{ stats.data_used }} GB</p>
    </div>

    <!-- Devices Connected -->
    <div class="bg-soft rounded-xl p-5 shadow flex flex-col gap-2">
      <div class="flex items-center justify-between">
        <span class="text-sm text-gray-400">Devices</span>
        <i data-lucide="router" class="w-5 h-5 text-yellow-400"></i>
      </div>
      <p class="text-2xl font-bold text-yellow-400">{{ stats.devices_connected }}</p>
    </div>

    <!-- Total Spent -->
    <div class="bg-soft rounded-xl p-5 shadow flex flex-col gap-2">
      <div class="flex items-center justify-between">
        <span class="text-sm text-gray-400">Amount Spent</span>
        <i data-lucide="credit-card" class="w-5 h-5 text-green-400"></i>
      </div>
      <p class="text-2xl font-bold text-green-400">KSh {{ stats.total_spent }}</p>
    </div>

    <!-- Connection Status -->
    <div class="bg-soft rounded-xl p-5 shadow flex flex-col gap-2">
      <div class="flex items-center justify-between">
        <span class="text-sm text-gray-400">Status</span>
        <i data-lucide="signal" class="w-5 h-5 text-purple-400"></i>
      </div>
      <p class="text-2xl font-bold text-purple-400">
        {% if subscription.is_active %}Online{% else %}Offline{% endif %}
      </p>
    </div>

  </div>

  <!-- Footer Note -->
  <p class="text-xs text-center text-gray-500 mt-6">
    Starlink ISP Dashboard · Guest access
  </p>
</div>

<script>lucide.createIcons();</script>
{% endblock %}