{% extends "base.html" %}
{% block title %}Import — Battery Tracker{% endblock %}

{% block content %}
<h1 style="margin-bottom:1.25rem;">Import Data</h1>

<div class="card" style="margin-bottom:1rem;">
  <p style="color:var(--text-muted,#6b7280);margin-bottom:1rem;">
    Upload a JSON file exported from Battery Tracker.
    Devices are matched by name and batteries by label — existing records are skipped (not overwritten).
    Charge logs, capacity tests, and percentage logs are always appended.
  </p>
  <form method="POST" action="{{ url_for('import_page') }}" enctype="multipart/form-data">
    <div class="form-group">
      <label for="file">JSON Export File</label>
      <input type="file" id="file" name="file" accept=".json,application/json" required
             style="width:100%;padding:0.45rem 0.65rem;border:1px solid var(--border-input,#d1d5db);
                    border-radius:4px;font-size:0.9rem;background:var(--bg-input,#fff);
                    color:var(--text-body,#111827);">
    </div>
    <div class="form-actions">
      <button type="submit" class="btn btn-primary">Import</button>
      <a href="{{ url_for('export_page') }}" class="btn btn-secondary">Back to Export</a>
    </div>
  </form>
</div>

{% if results is not none %}
<div class="card">
  <h2 style="margin-bottom:1rem;">Import Results</h2>
  <table style="border-collapse:collapse;width:100%;max-width:480px;">
    <thead>
      <tr style="border-bottom:2px solid var(--border,#e5e7eb);">
        <th style="text-align:left;padding:0.4rem 0.75rem 0.4rem 0;font-size:0.85rem;color:var(--text-muted,#6b7280);font-weight:600;">Category</th>
        <th style="text-align:right;padding:0.4rem 0.75rem;font-size:0.85rem;color:var(--text-muted,#6b7280);font-weight:600;">Created / Appended</th>
        <th style="text-align:right;padding:0.4rem 0;font-size:0.85rem;color:var(--text-muted,#6b7280);font-weight:600;">Skipped</th>
      </tr>
    </thead>
    <tbody>
      <tr style="border-bottom:1px solid var(--border,#e5e7eb);">
        <td style="padding:0.45rem 0.75rem 0.45rem 0;">Devices</td>
        <td style="text-align:right;padding:0.45rem 0.75rem;">{{ results.devices_created }}</td>
        <td style="text-align:right;padding:0.45rem 0;">{{ results.devices_skipped }}</td>
      </tr>
      <tr style="border-bottom:1px solid var(--border,#e5e7eb);">
        <td style="padding:0.45rem 0.75rem 0.45rem 0;">Batteries</td>
        <td style="text-align:right;padding:0.45rem 0.75rem;">{{ results.batteries_created }}</td>
        <td style="text-align:right;padding:0.45rem 0;">{{ results.batteries_skipped }}</td>
      </tr>
      <tr style="border-bottom:1px solid var(--border,#e5e7eb);">
        <td style="padding:0.45rem 0.75rem 0.45rem 0;">Charge Logs</td>
        <td style="text-align:right;padding:0.45rem 0.75rem;">{{ results.charge_logs_appended }}</td>
        <td style="text-align:right;padding:0.45rem 0;">{{ results.charge_logs_skipped }}</td>
      </tr>
      <tr style="border-bottom:1px solid var(--border,#e5e7eb);">
        <td style="padding:0.45rem 0.75rem 0.45rem 0;">Capacity Tests</td>
        <td style="text-align:right;padding:0.45rem 0.75rem;">{{ results.capacity_tests_appended }}</td>
        <td style="text-align:right;padding:0.45rem 0;">{{ results.capacity_tests_skipped }}</td>
      </tr>
      <tr>
        <td style="padding:0.45rem 0.75rem 0.45rem 0;">% Logs</td>
        <td style="text-align:right;padding:0.45rem 0.75rem;">{{ results.pct_logs_appended }}</td>
        <td style="text-align:right;padding:0.45rem 0;">{{ results.pct_logs_skipped }}</td>
      </tr>
    </tbody>
  </table>
  <div style="margin-top:1.25rem;display:flex;gap:0.75rem;flex-wrap:wrap;">
    <a href="{{ url_for('home') }}" class="btn btn-primary">Go to Home</a>
    <a href="{{ url_for('import_page') }}" class="btn btn-secondary">Import Another File</a>
  </div>
</div>
{% endif %}
{% endblock %}
