{% extends "base.html" %}
{% block title %}Invoice #{{ invoice.id }} · InvoiceGuard{% endblock %}
{% block content %}
<a class="back" href="/">← All invoices</a>

<div class="detail-grid">
  <section class="card">
    <div class="card-head">
      <h1>Invoice #{{ invoice.id }}</h1>
      <span class="chip chip-{{ invoice.status }}">{{ invoice.status }}{% if invoice.paid_late %} · late{% endif %}</span>
    </div>
    <dl class="facts">
      <div><dt>Client</dt><dd>{{ invoice.client_name }}{% if invoice.client_email %} <span class="muted">{{ invoice.client_email }}</span>{% endif %}</dd></div>
      {% if invoice.freelancer_name %}<div><dt>Freelancer</dt><dd>{{ invoice.freelancer_name }}</dd></div>{% endif %}
      <div><dt>Project</dt><dd>{{ invoice.project_title }}</dd></div>
      <div><dt>Kind</dt><dd><span class="kind kind-{{ invoice.kind }}">{{ invoice.kind }}</span></dd></div>
      <div><dt>Amount</dt><dd class="mono big">{{ fmt(invoice.amount_cents, invoice.currency) }}</dd></div>
      <div><dt>Paid so far</dt><dd class="mono">{{ fmt(invoice.paid_cents, invoice.currency) }}</dd></div>
      <div><dt>Outstanding</dt><dd class="mono big">{{ fmt(invoice.outstanding_cents, invoice.currency) }}</dd></div>
      <div><dt>Due date</dt><dd class="mono">{{ invoice.due_date[:10] if invoice.due_date else "—" }}{% if invoice.days_overdue %} <span class="overdue-tag">{{ invoice.days_overdue }}d overdue</span>{% endif %}</dd></div>
      <div><dt>Sent</dt><dd class="mono">{{ invoice.sent_at[:10] if invoice.sent_at else "—" }}</dd></div>
      <div><dt>Paid in full on</dt><dd class="mono">{{ invoice.paid_at[:10] if invoice.paid_at else "—" }}</dd></div>
      <div><dt>Escalation stage</dt><dd>{% if invoice.stage %}<span class="stage stage-{{ invoice.stage }}">{{ stage_display[invoice.stage] }}</span>{% else %}<span class="muted">none</span>{% endif %}</dd></div>
      {% if invoice.stripe_url and invoice.status in ('sent', 'overdue', 'partially-paid') %}
      <div><dt>Payment link</dt><dd><a class="btn-pay" href="{{ invoice.stripe_url }}" target="_blank" rel="noopener">Open Stripe checkout</a></dd></div>
      {% endif %}
    </dl>
  </section>

  <section class="card">
    <div class="card-head"><h2>Contract &amp; terms</h2></div>
    <dl class="facts">
      <div><dt>Acknowledged</dt><dd>
        {% if invoice.contract_ack %}<span class="ack-yes">✓ acknowledged</span>{% if invoice.contract_ack_at %} <span class="muted mono">{{ invoice.contract_ack_at[:10] }}</span>{% endif %}
        {% else %}<span class="ack-no">✗ not acknowledged</span>{% endif %}
      </dd></div>
      <div><dt>Deposit</dt><dd class="mono">{{ invoice.deposit_pct }}%</dd></div>
      <div><dt>Late fee</dt><dd class="mono">{{ invoice.late_fee_pct }}% after {{ invoice.late_fee_grace_days }}-day grace</dd></div>
      <div><dt>Accrued late fees</dt><dd class="mono">
        {% if late.fees_cents %}{{ fmt(late.fees_cents, invoice.currency) }} <span class="muted">({{ late.months }} mo @ {{ late.rate_pct }}%/mo, from {{ late.accrual_start }})</span>
        {% else %}<span class="muted">none accruing</span>{% endif %}
      </dd></div>
      <div><dt>Total with fees</dt><dd class="mono big">{{ fmt(late.total_cents, invoice.currency) }}</dd></div>
      <div><dt>Project value</dt><dd class="mono">{{ fmt(invoice.project_amount_cents, invoice.project_currency) }}</dd></div>
    </dl>
  </section>
</div>

<section class="card payments-card">
  <div class="card-head"><h2>Payments</h2></div>
  {% if payments %}
  <table class="ledger">
    <thead><tr><th>Date</th><th class="num">Amount</th><th>Method</th><th>Note</th></tr></thead>
    <tbody>
      {% for p in payments %}
      <tr>
        <td class="mono">{{ p.paid_at[:10] }}</td>
        <td class="mono num">{{ fmt(p.amount_cents, invoice.currency) }}</td>
        <td>{{ p.method }}</td>
        <td class="muted">{{ p.note or "—" }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  <p class="muted">Recorded from the CLI (`invoiceguard invoice record-payment {{ invoice.id }} --amount …`), `mark-paid`, or the Stripe webhook.</p>
  {% else %}
  <p class="muted">No payments recorded yet.</p>
  {% endif %}
</section>

<section class="card timeline-card">
  <div class="card-head"><h2>Timeline</h2></div>
  {% if timeline %}
  <ol class="timeline">
    {% for t in timeline %}
    <li><span class="t-dot"></span><span class="t-label">{{ t.label }}</span><span class="t-date mono">{{ t.at[:10] if t.at|length > 10 else t.at }}</span></li>
    {% endfor %}
  </ol>
  {% else %}
  <p class="muted">No events yet — this invoice is still a draft.</p>
  {% endif %}
</section>
{% endblock %}