{% extends "base.html" %}
{% load static %}

{% block title %}{{ page_title }}{% endblock %}
{% block meta_description %}{{ meta_description }}{% endblock %}

{% block content %}
<section class="hero-panel mb-5 overflow-hidden">
  <div class="row align-items-center g-4 g-lg-5">
    <div class="col-lg-7">
      <span class="eyebrow">Mobile money bookkeeping made clear</span>
      <h1 class="display-title">Run your MoMo business with branded reports, balanced wallets, and cleaner daily records.</h1>
      <p class="hero-copy">Track e-cash, physical cash, cash-in, cash-out, sending, airtime, transfer, debt, expenditure, and credit in one polished workflow. MoMoLedger updates balances automatically and keeps your daily, weekly, monthly, and yearly reports ready to print or export as PDF.</p>
      <div class="d-flex flex-wrap gap-3 mt-4">
        {% if request.user.is_authenticated %}
        <a class="btn btn-momo-primary btn-lg" href="{% url 'transaction_create' %}">Record a transaction</a>
        <a class="btn btn-momo-ghost btn-lg" href="{% url 'reports' %}">Open reports</a>
        {% else %}
        <a class="btn btn-momo-primary btn-lg" href="{% url 'signup' %}">Create agent account</a>
        <a class="btn btn-momo-ghost btn-lg" href="{% url 'login' %}">Sign in</a>
        {% endif %}
      </div>
      <div class="hero-metrics row row-cols-1 row-cols-sm-3 g-3 mt-4">
        <div class="col"><div class="metric-card"><strong>8</strong><span>Transaction types with smart balance rules</span></div></div>
        <div class="col"><div class="metric-card"><strong>1%</strong><span>Sending fee calculated automatically</span></div></div>
        <div class="col"><div class="metric-card"><strong>4</strong><span>Report ranges: day, week, month, year</span></div></div>
      </div>
    </div>
    <div class="col-lg-5">
      <div class="glass-card auth-showcase">
        <div class="row g-3 g-lg-4">
          <div class="col-md-6 col-lg-12 col-xl-6">
            <div class="soft-card h-100">
              <p class="card-kicker">Welcome page</p>
              <h2 class="section-title-sm">Sign up & login</h2>
              <p class="muted-copy">Start with a secure agent account, then return to your dashboard anytime.</p>
              <div class="d-grid gap-2 mt-3">
                <a class="btn btn-momo-primary" href="{% url 'signup' %}">Sign up</a>
                <a class="btn btn-momo-ghost" href="{% url 'login' %}">Log in</a>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-lg-12 col-xl-6">
            <div class="soft-card h-100">
              <p class="card-kicker">Brand your reports</p>
              <h2 class="section-title-sm">Business setup</h2>
              <p class="muted-copy">Add your business name, logo, and opening balances so every report looks official.</p>
              {% if request.user.is_authenticated and profile %}
              <div class="profile-mini mt-3">
                <div>
                  <strong>{{ profile.business_name|default:'Business name not set' }}</strong>
                  <span>{{ profile.owner_label }}</span>
                </div>
                <a class="btn btn-sm btn-momo-ghost" href="{% url 'profile' %}">Edit</a>
              </div>
              {% else %}
              <a class="btn btn-momo-ghost mt-3" href="{% url 'signup' %}">Create account to set profile</a>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="shape shape-one"></div>
  <div class="shape shape-two"></div>
</section>

{% if request.user.is_authenticated and profile %}
<section class="dashboard-grid mb-5">
  <div class="row g-4">
    <div class="col-lg-8">
      <div class="content-card mb-4">
        <div class="section-header d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
          <div>
            <p class="card-kicker mb-1">Live balances</p>
            <h2 class="section-title mb-0">{{ profile.business_name|default:'Your business dashboard' }}</h2>
          </div>
          <a class="btn btn-momo-primary" href="{% url 'transaction_create' %}">New transaction</a>
        </div>
        <div class="row g-3">
          <div class="col-md-4">
            <article class="balance-card balance-card-primary">
              <span>E-cash</span>
              <strong>{{ profile.current_ecash }}</strong>
              <small>Opening {{ profile.opening_ecash }}</small>
            </article>
          </div>
          <div class="col-md-4">
            <article class="balance-card balance-card-secondary">
              <span>Physical cash</span>
              <strong>{{ profile.current_physical_cash }}</strong>
              <small>Opening {{ profile.opening_physical_cash }}</small>
            </article>
          </div>
          <div class="col-md-4">
            <article class="balance-card balance-card-accent">
              <span>Today’s volume</span>
              <strong>{{ today_total }}</strong>
              <small>{{ today_count }} transactions · fees {{ today_fees }}</small>
            </article>
          </div>
        </div>
      </div>
      <div class="content-card">
        <div class="section-header d-flex justify-content-between align-items-center mb-4">
          <div>
            <p class="card-kicker mb-1">Recent activity</p>
            <h2 class="section-title mb-0">Latest transactions</h2>
          </div>
          <a class="text-link" href="{% url 'transaction_list' %}">View all</a>
        </div>
        {% if recent_transactions %}
        <div class="table-responsive">
          <table class="table align-middle momo-table">
            <thead>
              <tr>
                <th>Client</th>
                <th>Type</th>
                <th>Amount</th>
                <th>Fee</th>
                <th>When</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {% for transaction in recent_transactions %}
              <tr>
                <td>{{ transaction.client_name }}</td>
                <td><span class="badge momo-badge">{{ transaction.get_transaction_type_display }}</span></td>
                <td>{{ transaction.amount }}</td>
                <td>{{ transaction.service_charge }}</td>
                <td>{{ transaction.created_at|date:"M d, Y H:i" }}</td>
                <td><a class="text-link" href="{% url 'transaction_detail' transaction.id %}">Details</a></td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        {% else %}
        <div class="empty-state">
          <h3>No transactions yet</h3>
          <p>Record your first cash movement to see balance updates and report activity.</p>
          <a class="btn btn-momo-primary" href="{% url 'transaction_create' %}">Create first transaction</a>
        </div>
        {% endif %}
      </div>
    </div>
    <div class="col-lg-4">
      <div class="content-card mb-4">
        <p class="card-kicker mb-1">Quick workflow</p>
        <h2 class="section-title mb-3">What you can do now</h2>
        <div class="stack-list">
          <div class="stack-item">
            <strong>1. Business setup</strong>
            <span>Add name, logo, and opening balances.</span>
          </div>
          <div class="stack-item">
            <strong>2. Log transactions</strong>
            <span>Client name + amount + type updates wallets instantly.</span>
          </div>
          <div class="stack-item">
            <strong>3. Export reports</strong>
            <span>Daily, weekly, monthly, yearly, printable, and PDF-ready.</span>
          </div>
        </div>
      </div>
      <div class="content-card">
        <p class="card-kicker mb-1">Report shortcuts</p>
        <h2 class="section-title mb-3">Period summaries</h2>
        <div class="report-shortcuts d-grid gap-2">
          <a class="btn btn-momo-ghost text-start" href="{% url 'reports' %}?period=daily">Daily report</a>
          <a class="btn btn-momo-ghost text-start" href="{% url 'reports' %}?period=weekly">Weekly report</a>
          <a class="btn btn-momo-ghost text-start" href="{% url 'reports' %}?period=monthly">Monthly report</a>
          <a class="btn btn-momo-ghost text-start" href="{% url 'reports' %}?period=yearly">Yearly report</a>
        </div>
      </div>
    </div>
  </div>
</section>
{% else %}
<section class="content-card">
  <div class="row g-4 align-items-center">
    <div class="col-lg-6">
      <p class="card-kicker mb-1">First delivery included</p>
      <h2 class="section-title">A real workflow, not just a landing page</h2>
      <p class="muted-copy">This first version includes account access, business setup, transaction logging with balance rules, and a branded report center with print and PDF export.</p>
    </div>
    <div class="col-lg-6">
      <div class="row g-3">
        <div class="col-sm-6"><div class="mini-feature"><strong>Cash-in</strong><span>e-cash decreases, physical cash increases.</span></div></div>
        <div class="col-sm-6"><div class="mini-feature"><strong>Cash-out</strong><span>physical cash decreases, e-cash increases.</span></div></div>
        <div class="col-sm-6"><div class="mini-feature"><strong>Sending</strong><span>1% fee added automatically.</span></div></div>
        <div class="col-sm-6"><div class="mini-feature"><strong>Reports</strong><span>Daily to yearly export flow.</span></div></div>
      </div>
    </div>
  </div>
</section>
{% endif %}
{% endblock %}