{% extends 'base.html' %}
{% block content %}

<style>
  /* Page-specific polish */
  .demo-page-wrap {
    max-width: 1250px;
  }

  .demo-form-card .card-header {
    border-bottom: 0;
  }

  .demo-form-card .card-body {
    border-top: 1px solid #f1f3f5;
  }

  .demo-form-card {
    border-left: 4px solid #0d6efd;
  }

  .demo-company-pill {
    background: #f8fafc;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.75rem;
  }

  .demo-company-pill i {
    font-size: 0.8rem;
  }

  .demo-company-header {
    background: #f8fafc;
  }

  .demo-company-header.active {
    border-left: 4px solid #198754;
  }

  .demo-company-header.inactive {
    border-left: 4px solid #6c757d;
    opacity: 0.8;
  }

  .demo-status-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
  }

  .demo-expiry-chip {
    background: #fff;
    border-radius: 999px;
    border: 1px solid #dee2e6;
    padding: 3px 10px;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .demo-company-meta {
    font-size: 0.8rem;
  }

  .demo-table thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .demo-table td {
    font-size: 0.85rem;
  }

  .demo-username {
    color: #dc3545;
    font-weight: 600;
  }

  .demo-empty-state {
    border-radius: 0.5rem;
    border: 1px dashed #ced4da;
    background: #f8f9fa;
  }
</style>

<div class="container-fluid mt-3 demo-page-wrap">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <div>
      <h4 class="mb-0">
        <i class="bi bi-building me-2"></i> Demo Setup
      </h4>
      <small class="text-muted">
        Create short-lived demo companies and share ready-to-use admin logins.
      </small>
    </div>
  </div>

  <div class="row g-3">
    <!-- Left: New Demo Company -->
    <div class="col-lg-4">
      <div class="card shadow-sm demo-form-card">
        <div class="card-header bg-white d-flex align-items-center justify-content-between py-2">
          <div>
            <strong><i class="bi bi-plus-circle me-1 text-primary"></i> New Demo Company</strong>
            <div class="small text-muted">Auto-creates an Admin login for this company.</div>
          </div>
          <span class="demo-company-pill text-muted">
            <i class="bi bi-lightning-charge-fill me-1 text-warning"></i>
            1-click demo
          </span>
        </div>
        <form method="POST" class="card-body">
          <input type="hidden" name="action" value="add_company">

          <div class="mb-2">
            <label class="form-label mb-1">Company Name <span class="text-danger">*</span></label>
            <input type="text" name="company_name" class="form-control form-control-sm" required>
          </div>

          <div class="mb-2">
            <label class="form-label mb-1">Website</label>
            <div class="input-group input-group-sm">
              <span class="input-group-text">https://</span>
              <input type="text" name="company_website" class="form-control" placeholder="example.com">
            </div>
          </div>

          <div class="row">
            <div class="col-12 mb-2">
              <label class="form-label mb-1">Contact Person</label>
              <input type="text" name="company_contact_person" class="form-control form-control-sm">
            </div>
            <div class="col-12 mb-2">
              <label class="form-label mb-1">Contact Email</label>
              <input type="email" name="company_contact_email" class="form-control form-control-sm">
            </div>
          </div>

          <div class="mb-2">
            <label class="form-label mb-1">Contact Phone</label>
            <input type="text" name="company_contact_phone" class="form-control form-control-sm">
          </div>

          <div class="row">
            <div class="col-6 mb-2">
              <label class="form-label mb-1">Expiry Date</label>
              <input type="date" name="company_expires_on" class="form-control form-control-sm">
            </div>
            <div class="col-6 d-flex align-items-end mb-2">
              <small class="text-muted">
                After expiry, data can be cleaned using the auto-cleanup job.
              </small>
            </div>
          </div>

          <div class="mb-2">
            <label class="form-label mb-1">Internal Notes</label>
            <textarea name="company_notes" rows="2" class="form-control form-control-sm"
                      placeholder="E.g. contact details, scope of demo, features to highlight..."></textarea>
          </div>

          <div class="text-end pt-1">
            <button type="submit" class="btn btn-primary btn-sm px-3">
              <i class="bi bi-save me-1"></i> Save Company
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- Right: Existing Demo Companies & Accounts -->
    <div class="col-lg-8">
      <div class="card shadow-sm">
        <div class="card-header bg-white d-flex justify-content-between align-items-center py-2">
          <div>
            <strong><i class="bi bi-list-ul me-1"></i> Existing Demo Companies & Accounts</strong>
            <div class="small text-muted">Click a company to view its demo login details.</div>
          </div>
        </div>
        <div class="card-body p-0">
          {% if companies %}
            <div class="accordion" id="demoCompaniesAccordion">
              {% for c in companies %}
                {% set header_state_class = 'active' if c.is_active else 'inactive' %}
                <div class="accordion-item border-0 border-bottom">
                  <h2 class="accordion-header" id="heading{{ c.id }}">
                    <div class="d-flex align-items-center w-100 demo-company-header {{ header_state_class }}">
                      <button class="accordion-button collapsed py-2 flex-grow-1 bg-transparent shadow-none" type="button"
                              data-bs-toggle="collapse"
                              data-bs-target="#collapse{{ c.id }}"
                              aria-expanded="false"
                              aria-controls="collapse{{ c.id }}">
                        <div class="d-flex flex-column">
                          <span class="fw-semibold">{{ c.name }}</span>
                          <div class="demo-company-meta text-muted">
                            {% if c.website %}
                              <i class="bi bi-globe me-1"></i>{{ c.website }}
                            {% endif %}
                            {% if c.contact_person %}
                              {% if c.website %} · {% endif %}
                              <i class="bi bi-person me-1"></i>{{ c.contact_person }}
                            {% endif %}
                            {% if c.contact_email %}
                              {% if c.website or c.contact_person %} · {% endif %}
                              <i class="bi bi-envelope me-1"></i>{{ c.contact_email }}
                            {% endif %}
                          </div>
                        </div>
                      </button>

                      <!-- Status + toggle button -->
                      <div class="ms-2 me-3 d-flex align-items-center gap-2">
                        {% if c.expires_on %}
                          <span class="demo-expiry-chip">
                            <i class="bi bi-hourglass-split me-1 text-muted"></i>
                            Expires: {{ c.expires_on.strftime('%d-%m-%Y') }}
                          </span>
                        {% endif %}
                        <span class="badge demo-status-badge {{ 'bg-success' if c.is_active else 'bg-secondary' }}">
                          {{ 'Active' if c.is_active else 'Inactive' }}
                        </span>
                        <form method="POST" class="ms-1">
                          <input type="hidden" name="action" value="toggle_company_status">
                          <input type="hidden" name="company_id" value="{{ c.id }}">
                          <input type="hidden" name="new_status"
                                 value="{{ 'deactivate' if c.is_active else 'activate' }}">
                          <button type="submit"
                                  class="btn btn-sm px-2 {{ 'btn-outline-danger' if c.is_active else 'btn-outline-success' }}">
                            {{ 'Deactivate' if c.is_active else 'Activate' }}
                          </button>
                        </form>
                      </div>
                    </div>
                  </h2>

                  <div id="collapse{{ c.id }}" class="accordion-collapse collapse"
                       aria-labelledby="heading{{ c.id }}"
                       data-bs-parent="#demoCompaniesAccordion">
                    <div class="accordion-body">
                      {% if c.notes %}
                        <p class="small text-muted mb-3">
                          <i class="bi bi-sticky me-1"></i>{{ c.notes }}
                        </p>
                      {% endif %}

                      {% if c.demo_accounts %}
                        <div class="table-responsive">
                          <table class="table table-sm align-middle mb-0 demo-table">
                            <thead class="table-light">
                              <tr>
                                <th>Display</th>
                                <th>Role</th>
                                <th>Username</th>
                                <th>Password</th>
                                <th>Login URL</th>
                                <th>Expires</th>
                                <th>Notes</th>
                              </tr>
                            </thead>
                            <tbody>
                              {% for acc in c.demo_accounts %}
                                <tr class="{% if not acc.is_active %}table-secondary{% endif %}">
                                  <td>{{ acc.display_name }}</td>
                                  <td>{{ acc.role.name if acc.role else '-' }}</td>
                                  <td>
                                    {% if acc.login_username %}
                                      <span class="demo-username">{{ acc.login_username }}</span>
                                    {% else %}
                                      -
                                    {% endif %}
                                  </td>
                                  <td>
                                    {% if acc.login_password %}
                                      <span class="password-mask" data-password="{{ acc.login_password }}">
                                        ••••••••
                                      </span>
                                      <button type="button"
                                              class="btn btn-link btn-sm text-decoration-none toggle-password">
                                        Show
                                      </button>
                                    {% else %}
                                      -
                                    {% endif %}
                                  </td>
                                  <td>
                                    {% if acc.login_url and acc.is_active %}
                                      <a href="{{ acc.login_url }}" target="_blank">
                                        Open <i class="bi bi-box-arrow-up-right"></i>
                                      </a>
                                    {% elif acc.login_url %}
                                      <span class="text-muted small">Inactive</span>
                                    {% else %}
                                      -
                                    {% endif %}
                                  </td>
                                  <td>
                                    {% if acc.expires_on %}
                                      {{ acc.expires_on.strftime('%d-%m-%Y') }}
                                    {% else %}
                                      —
                                    {% endif %}
                                  </td>
                                  <td class="small text-muted">
                                    {{ acc.notes or '' }}
                                  </td>
                                </tr>
                              {% endfor %}
                            </tbody>
                          </table>
                        </div>
                      {% else %}
                        <p class="text-muted mb-0">No demo accounts added for this company yet.</p>
                      {% endif %}
                    </div>
                  </div>
                </div>
              {% endfor %}
            </div>
          {% else %}
            <div class="p-4 text-center text-muted demo-empty-state mx-3 my-3">
              <i class="bi bi-box-seam mb-2 d-block" style="font-size: 1.8rem;"></i>
              <div class="fw-semibold mb-1">No demo companies yet</div>
              <div class="small">
                Use the <strong>New Demo Company</strong> form on the left to create your first demo.
              </div>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.toggle-password').forEach(function (btn) {
      btn.addEventListener('click', function () {
        const row = btn.closest('td');
        const span = row.querySelector('.password-mask');
        if (!span) return;

        const isHidden = span.textContent.trim().startsWith('•');
        if (isHidden) {
          span.textContent = span.getAttribute('data-password') || '';
          btn.textContent = 'Hide';
        } else {
          span.textContent = '••••••••';
          btn.textContent = 'Show';
        }
      });
    });
  });
</script>

{% endblock %}