{% extends "base.html" %}
{% block title %}{{inc.ref}}{% endblock %}
{% block breadcrumb %}{{inc.ref}}{% endblock %}

{% block content %}
<!-- Page header -->
<div class="page-header">
  <div class="page-header-left">
    <div style="display:flex;align-items:center;gap:10px;margin-bottom:8px">
      <span class="ref-chip">{{inc.ref}}</span>
      <span class="badge badge-{{inc.severity|lower}}">{{inc.severity}}</span>
      {% if inc.status=='Open' %}<span class="badge badge-open">Open</span>
      {% elif inc.status=='In Progress' %}<span class="badge badge-progress">In Progress</span>
      {% elif inc.status=='Resolved' %}<span class="badge badge-resolved">Resolved</span>
      {% else %}<span class="badge badge-closed">{{inc.status}}</span>{% endif %}
      <span style="font-size:12px;color:var(--gray-400)">{{inc.category}}</span>
    </div>
    <div class="page-title">{{inc.title}}</div>
    <div class="page-subtitle">Reported by {{inc.reported_by}} · {{inc.created_at[:16]}}</div>
  </div>
  <div class="page-header-actions">
    <a href="/incidents" class="btn btn-ghost btn-sm">← All incidents</a>
    <a href="/incident/{{inc.ref}}/edit" class="btn btn-outline btn-sm">Edit</a>
    <a href="/incident/{{inc.ref}}/report" class="btn btn-gold btn-sm" target="_blank">
      <svg width="13" height="13" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
        <path d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
      </svg>
      Download PDF
    </a>
    <button class="btn btn-danger btn-sm" onclick="confirmDelete('{{inc.ref}}')">Delete</button>
  </div>
</div>

<div style="display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start">

  <!-- Left -->
  <div style="display:flex;flex-direction:column;gap:20px">

    <!-- Meta card -->
    <div class="card">
      <div class="card-header"><div class="card-title">Incident Details</div></div>
      <div class="card-body">
        <div class="detail-grid">
          <div class="detail-field">
            <div class="df-label">Reported By</div>
            <div class="df-value">{{inc.reported_by}}</div>
          </div>
          <div class="detail-field">
            <div class="df-label">Assigned To</div>
            <div class="df-value">{{inc.assigned_to or '—'}}</div>
          </div>
          <div class="detail-field">
            <div class="df-label">Location / Site</div>
            <div class="df-value">{{inc.location or '—'}}</div>
          </div>
          <div class="detail-field">
            <div class="df-label">Affected Systems</div>
            <div class="df-value">{{inc.affected or '—'}}</div>
          </div>
          <div class="detail-field">
            <div class="df-label">Start Time</div>
            <div class="df-value mono">{{inc.start_time or '—'}}</div>
          </div>
          <div class="detail-field">
            <div class="df-label">End Time</div>
            <div class="df-value mono">{{inc.end_time or '—'}}</div>
          </div>
          {% if inc.start_time and inc.end_time %}
          <div class="detail-field">
            <div class="df-label">Duration (approx)</div>
            <div class="df-value" id="duration-val">—</div>
          </div>
          {% endif %}
          <div class="detail-field">
            <div class="df-label">Last Updated</div>
            <div class="df-value mono">{{inc.updated_at[:16]}}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Description -->
    <div class="card">
      <div class="card-header"><div class="card-title">Description</div></div>
      <div class="card-body">
        <p style="line-height:1.75;color:var(--gray-700);font-size:13.5px">{{inc.description or '—'}}</p>
      </div>
    </div>

    {% if inc.root_cause %}
    <div class="card" style="border-left:3px solid var(--amber-600)">
      <div class="card-header"><div class="card-title" style="color:var(--amber-600)">Root Cause Analysis</div></div>
      <div class="card-body">
        <p style="line-height:1.75;color:var(--gray-700);font-size:13.5px">{{inc.root_cause}}</p>
      </div>
    </div>
    {% endif %}

    {% if inc.resolution %}
    <div class="card" style="border-left:3px solid #16a34a">
      <div class="card-header"><div class="card-title" style="color:#16a34a">Resolution</div></div>
      <div class="card-body">
        <p style="line-height:1.75;color:var(--gray-700);font-size:13.5px">{{inc.resolution}}</p>
      </div>
    </div>
    {% endif %}

    <!-- Add note -->
    <div class="card">
      <div class="card-header"><div class="card-title">Add Timeline Note</div></div>
      <div class="card-body">
        <form method="POST" action="/incident/{{inc.ref}}/add-note">
          <div class="form-row-2" style="margin-bottom:12px">
            <div class="form-group">
              <label class="form-label">Your Name</label>
              <input class="form-control" name="actor" required placeholder="Engineer / technician">
            </div>
            <div class="form-group">
              <label class="form-label">Note</label>
              <input class="form-control" name="note" required placeholder="Action taken or observation…">
            </div>
          </div>
          <button type="submit" class="btn btn-primary btn-sm">Add Note</button>
        </form>
      </div>
    </div>

  </div>

  <!-- Right -->
  <div style="display:flex;flex-direction:column;gap:20px;position:sticky;top:calc(var(--header-h) + 16px)">

    <!-- Status panel -->
    <div class="card">
      <div class="card-header"><div class="card-title">Update Status</div></div>
      <div class="card-body">
        <div class="status-panel">
          {% for s, dot_color in [('Open','#C8971A'),('In Progress','#D97706'),('Resolved','#16A34A'),('Closed','#6B7280')] %}
          <button class="status-btn {% if inc.status==s %}active{% endif %}"
                  onclick="setStatus('{{inc.ref}}','{{s}}')"
                  {% if inc.status==s %}disabled{% endif %}>
            <span class="dot" style="background:{{dot_color}}"></span>
            {{s}}
            {% if inc.status==s %}<span style="margin-left:auto;font-size:11px;color:var(--green-700)">Current</span>{% endif %}
          </button>
          {% endfor %}
        </div>
      </div>
    </div>

    <!-- Quick actions -->
    <div class="card">
      <div class="card-header"><div class="card-title">Quick Actions</div></div>
      <div class="card-body" style="display:flex;flex-direction:column;gap:8px">
        <a href="/incident/{{inc.ref}}/edit" class="btn btn-outline btn-sm" style="width:100%;justify-content:center">
          Edit full report
        </a>
        <a href="/incident/{{inc.ref}}/report" class="btn btn-gold btn-sm" style="width:100%;justify-content:center" target="_blank">
          Download PDF report
        </a>
        <a href="/incident/new" class="btn btn-primary btn-sm" style="width:100%;justify-content:center">
          Log new incident
        </a>
      </div>
    </div>

    <!-- Timeline -->
    <div class="card">
      <div class="card-header"><div class="card-title">Timeline ({{timeline|length}})</div></div>
      <div class="card-body">
        {% if timeline %}
        <div class="timeline">
          {% for e in timeline %}
          <div class="tl-item">
            <div class="tl-dot {% if 'created' in e.action|lower %}gold{% endif %}">
              <svg viewBox="0 0 12 12"><circle cx="6" cy="6" r="3"/></svg>
            </div>
            <div class="tl-body">
              <div class="tl-meta">{{e.timestamp[:16]}} · <strong>{{e.actor}}</strong></div>
              <div class="tl-action">{{e.action}}</div>
              {% if e.note %}<div class="tl-note">{{e.note}}</div>{% endif %}
            </div>
          </div>
          {% endfor %}
        </div>
        {% else %}
        <div style="font-size:12px;color:var(--gray-400);text-align:center;padding:12px 0">No entries yet</div>
        {% endif %}
      </div>
    </div>

  </div>
</div>

{% if inc.start_time and inc.end_time %}
<script>
  try {
    const s = new Date('{{inc.start_time}}'), e = new Date('{{inc.end_time}}');
    const diffMs = e - s; const hrs = Math.floor(diffMs/3600000); const mins = Math.floor((diffMs%3600000)/60000);
    const el = document.getElementById('duration-val');
    if (el && diffMs > 0) el.textContent = hrs > 0 ? `${hrs}h ${mins}m` : `${mins} minutes`;
  } catch(e){}
</script>
{% endif %}
{% endblock %}