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

{% block title %}{{ meta_title }}{% endblock %}

{% block content %}
<div class="app-shell">
  <aside class="app-sidebar">
    <a class="brand-mark" href="{% url 'home' %}" aria-label="FlowDesk Sales home">
      <span class="brand-mark__core">F</span>
    </a>
    <nav class="sidebar-nav" aria-label="Primary navigation">
      {% for item in nav_items %}
      <a class="sidebar-link {% if item.label == 'Workspace' %}is-active{% endif %}" href="{{ item.url }}" data-label="{{ item.label }}">
        <i class="bi {{ item.icon }}"></i>
      </a>
      {% endfor %}
    </nav>
  </aside>

  <main class="app-main app-main--detail">
    <section class="detail-topbar">
      <div>
        <a href="{% url 'home' %}" class="back-link"><i class="bi bi-arrow-left"></i> Back to pipeline</a>
        <h1>{{ workspace.customer_name }}</h1>
        <p>{{ workspace.opportunity_title }}{% if workspace.project_number %} · {{ workspace.project_number }}{% elif workspace.project_name %} · {{ workspace.project_name }}{% endif %}</p>
      </div>
      <div class="detail-meta">
        <span class="stage-pill stage-{{ workspace.stage }}">{{ workspace.get_stage_display }}</span>
        <div class="detail-value">€{{ workspace.estimated_value|floatformat:0 }}</div>
      </div>
    </section>

    {% if messages %}
    <section class="message-stack" aria-live="polite">
      {% for message in messages %}
      <div class="alert custom-alert alert-{{ message.tags|default:'info' }}">{{ message }}</div>
      {% endfor %}
    </section>
    {% endif %}

    <section class="detail-toolbar">
      <div class="search-card search-card--static">
        <div class="search-field-wrap">
          <i class="bi bi-search"></i>
          <input type="text" class="search-field" value="{{ workspace.customer_name }} · {{ workspace.address }} · {{ workspace.project_number|default:workspace.project_name }}" disabled>
        </div>
      </div>
      <a class="admin-pill" href="/admin/">Admin</a>
    </section>

    <section class="workspace-grid template-{{ workspace.layout_template }}">
      <article class="surface-card panel panel-opportunity">
        <div class="panel-head">
          <div>
            <span class="eyebrow">Opportunity</span>
            <h2>Lead status</h2>
          </div>
          <span class="section-chip">Single-screen control</span>
        </div>
        <div class="info-stack">
          <div class="info-row"><span>Customer</span><strong>{{ workspace.customer_name }}</strong></div>
          <div class="info-row"><span>Contact</span><strong>{{ workspace.contact_name|default:"Not added yet" }}</strong></div>
          <div class="info-row"><span>Email</span><strong>{{ workspace.contact_email|default:"Not added yet" }}</strong></div>
          <div class="info-row"><span>Phone</span><strong>{{ workspace.contact_phone|default:"Not added yet" }}</strong></div>
          <div class="info-row"><span>Next step</span><strong>{{ workspace.next_step|default:"Define the next best action" }}</strong></div>
        </div>
        <form method="post" action="{% url 'update_stage' workspace.pk %}" class="compact-form compact-form--inline">
          {% csrf_token %}
          <div class="compact-form__field">
            <label for="{{ stage_form.stage.id_for_label }}">Stage</label>
            {{ stage_form.stage }}
          </div>
          <button type="submit" class="btn btn-accent">Update</button>
        </form>
        <div class="summary-box">{{ workspace.summary|default:"Add qualification notes, buying signals, and constraints here." }}</div>
      </article>

      <article class="surface-card panel panel-projects">
        <div class="panel-head">
          <div>
            <span class="eyebrow">Projects</span>
            <h2>Project context</h2>
          </div>
          <button class="panel-action" type="button">Collapse</button>
        </div>
        <div class="info-stack">
          <div class="info-row"><span>Project</span><strong>{{ workspace.project_name|default:"Current customer record" }}</strong></div>
          <div class="info-row"><span>Project #</span><strong>{{ workspace.project_number|default:"To be assigned" }}</strong></div>
          <div class="info-row"><span>Zip code</span><strong>{{ workspace.zipcode|default:"—" }}</strong></div>
          <div class="info-row"><span>Address</span><strong>{{ workspace.address|default:"No address yet" }}</strong></div>
          <div class="info-row"><span>City</span><strong>{{ workspace.city|default:"—" }}</strong></div>
        </div>
      </article>

      <article class="surface-card panel panel-quote">
        <div class="panel-head">
          <div>
            <span class="eyebrow">Quotations</span>
            <h2>Quotation focus</h2>
          </div>
          <span class="section-chip">Takes the most space when needed</span>
        </div>
        <form method="post" action="{% url 'add_quote_line' workspace.pk %}" class="compact-form">
          {% csrf_token %}
          <div class="form-grid form-grid--quote">
            {% for field in quote_form %}
            <div class="form-field {% if field.name == 'description' %}form-field--wide{% endif %}">
              <label for="{{ field.id_for_label }}">{{ field.label }}</label>
              {{ field }}
              {% if field.errors %}<div class="field-error">{{ field.errors|join:', ' }}</div>{% endif %}
            </div>
            {% endfor %}
          </div>
          <div class="form-actions form-actions--inline">
            <button type="submit" class="btn btn-accent">Add line</button>
            <p>Adding a quote line moves early leads into Proposal automatically.</p>
          </div>
        </form>

        {% if quote_lines %}
        <div class="quote-table-wrap">
          <table class="table quote-table">
            <thead>
              <tr>
                <th>Item</th>
                <th>Description</th>
                <th>Qty</th>
                <th>Unit</th>
                <th>Subtotal</th>
              </tr>
            </thead>
            <tbody>
              {% for line in quote_lines %}
              <tr>
                <td>{{ line.product_name }}</td>
                <td>{{ line.description|default:"—" }}</td>
                <td>{{ line.quantity }}</td>
                <td>€{{ line.unit_price|floatformat:2 }}</td>
                <td>€{{ line.subtotal|floatformat:2 }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        <div class="quote-total">Quote total <strong>€{{ workspace.quote_total|floatformat:2 }}</strong></div>
        {% else %}
        <div class="empty-state empty-state--small">
          <i class="bi bi-receipt"></i>
          <p>No quotation lines yet. Start with one service or product to preview the dense editor.</p>
        </div>
        {% endif %}
      </article>

      <article class="surface-card panel panel-agenda">
        <div class="panel-head">
          <div>
            <span class="eyebrow">Agenda</span>
            <h2>Meeting planning</h2>
          </div>
        </div>
        <div class="agenda-list">
          {% if workspace.next_meeting_at %}
          <div class="agenda-item">
            <div class="agenda-icon"><i class="bi bi-calendar-date"></i></div>
            <div>
              <strong>Next meeting</strong>
              <p>{{ workspace.next_meeting_at|date:"D d M · H:i" }}{% if workspace.next_meeting_is_upcoming %} · upcoming{% endif %}</p>
            </div>
          </div>
          {% endif %}
          {% if upcoming_activities %}
            {% for item in upcoming_activities|slice:":4" %}
            <div class="agenda-item">
              <div class="agenda-icon"><i class="bi bi-check2-square"></i></div>
              <div>
                <strong>{{ item.title }}</strong>
                <p>{{ item.get_activity_type_display }} · {{ item.due_at|date:"d M H:i" }}</p>
              </div>
            </div>
            {% endfor %}
          {% else %}
          <div class="empty-state empty-state--small">
            <i class="bi bi-calendar2-week"></i>
            <p>Add a call or meeting to keep the deal moving.</p>
          </div>
          {% endif %}
        </div>
      </article>

      <article class="surface-card panel panel-activities">
        <div class="panel-head">
          <div>
            <span class="eyebrow">Activities / Tasks</span>
            <h2>Schedule the next action</h2>
          </div>
        </div>
        <form method="post" action="{% url 'add_activity' workspace.pk %}" class="compact-form">
          {% csrf_token %}
          <div class="form-grid">
            {% for field in activity_form %}
            <div class="form-field {% if field.name == 'notes' %}form-field--full{% endif %}">
              <label for="{{ field.id_for_label }}">{{ field.label }}</label>
              {{ field }}
              {% if field.errors %}<div class="field-error">{{ field.errors|join:', ' }}</div>{% endif %}
            </div>
            {% endfor %}
          </div>
          <div class="form-actions form-actions--inline">
            <button type="submit" class="btn btn-dark-shell">Save activity</button>
          </div>
        </form>

        {% if activities %}
        <div class="activity-feed">
          {% for item in activities %}
          <div class="activity-row">
            <div>
              <strong>{{ item.title }}</strong>
              <p>{{ item.get_activity_type_display }} · {{ item.due_at|date:"d M H:i" }}{% if item.owner %} · {{ item.owner }}{% endif %}</p>
            </div>
            <span class="stage-pill {% if item.is_done %}stage-won{% else %}stage-qualified{% endif %}">{% if item.is_done %}Done{% else %}Open{% endif %}</span>
          </div>
          {% endfor %}
        </div>
        {% else %}
        <div class="empty-state empty-state--small">
          <i class="bi bi-lightning-charge"></i>
          <p>No activities yet. Add one to make the workspace actionable.</p>
        </div>
        {% endif %}
      </article>
    </section>
  </main>
</div>
{% endblock %}