{% extends "base.html" %}

{% block extra_head %}
<style>
  .tto-table-wrapper {
    border-radius: 0.75rem;
    overflow: hidden;
  }
  .tto-table {
    font-size: 0.9rem;
  }
  .tto-table th {
    white-space: nowrap;
    font-weight: 600;
  }
  .tto-table td {
    vertical-align: middle;
  }
  .tto-col-numeric {
    text-align: center;
    white-space: nowrap;
  }
  .tto-col-actions {
    text-align: right;
    white-space: nowrap;
  }
  .tto-actions .btn {
    padding: 0.2rem 0.7rem;
    font-size: 0.8rem;
  }
  .tto-badge-readiness {
    min-width: 3.2rem;
  }
</style>
{% endblock %}

{% block title %}TTO Dashboard{% endblock %}

{% block content %}
<h3 class="mb-4">TTO Dashboard</h3>

{# Summary Cards #}
<div class="row mb-4 g-3">
  <div class="col-md-4">
    <div class="card p-3 h-100">
      <small class="text-muted">Total IPs</small>
      <div class="h4 mb-0">{{ total_ips }}</div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="card p-3 h-100">
      <small class="text-muted">Submitted to TTO</small>
      <div class="h4 mb-0">{{ submitted_ips }}</div>
    </div>
  </div>

  <div class="col-md-4">
    <a href="{% url 'portfolio:tto_high_readiness' %}"
       class="text-decoration-none text-reset">
      <div class="card p-3 h-100 shadow-sm">
        <small class="text-muted">IPs with High Predicted Readiness</small>
        <div class="h4 mb-0">{{ high_readiness }}</div>
      </div>
    </a>
  </div>
</div>

{# Removed Readiness Insights here #}

{# IP Portfolio Table - Full Width #}
<div class="card">
  <div class="card-body">
    <h6 class="card-title mb-3">IP Portfolio Overview</h6>

    <button
    type="button"
    class="btn btn-outline-primary btn-sm"
    data-bs-toggle="modal"
    data-bs-target="#bulkUploadModal">
    Bulk Upload CSV
    </button>

    {# Filter and Sort Controls #}
    <form method="get" class="row g-2 align-items-end mb-3">
      <div class="col-md-2">
        <label class="form-label mb-1 small">Min TRL</label>
        <input type="number" name="trl_min" min="0" max="9"
               value="{{ trl_min }}" class="form-control form-control-sm">
      </div>

      <div class="col-md-2">
        <label class="form-label mb-1 small">Min CRL</label>
        <input type="number" name="crl_min" min="0" max="7"
               value="{{ crl_min }}" class="form-control form-control-sm">
      </div>

      <div class="col-md-2">
        <label class="form-label mb-1 small">Min Readiness</label>
        <input type="number" name="score_min" min="0" max="100" step="0.1"
               value="{{ score_min }}" class="form-control form-control-sm">
      </div>

      <div class="col-md-2">
        <label class="form-label mb-1 small">Show</label>
        <select name="submitted_only" class="form-select form-select-sm">
          <option value="" {% if not submitted_only %}selected{% endif %}>All</option>
          <option value="1" {% if submitted_only == "1" %}selected{% endif %}>
            Submitted only
          </option>
        </select>
      </div>

      <div class="col-md-2">
        <label class="form-label mb-1 small">Sort by</label>
        <select name="sort" class="form-select form-select-sm">
          <option value="date_desc" {% if sort_key == "date_desc" %}selected{% endif %}>Date ↓</option>
          <option value="date_asc"  {% if sort_key == "date_asc"  %}selected{% endif %}>Date ↑</option>
          <option value="trl_desc"  {% if sort_key == "trl_desc"  %}selected{% endif %}>TRL ↓</option>
          <option value="trl_asc"   {% if sort_key == "trl_asc"   %}selected{% endif %}>TRL ↑</option>
          <option value="crl_desc"  {% if sort_key == "crl_desc"  %}selected{% endif %}>CRL ↓</option>
          <option value="crl_asc"   {% if sort_key == "crl_asc"   %}selected{% endif %}>CRL ↑</option>
          <option value="score_desc"{% if sort_key == "score_desc"%}selected{% endif %}>Readiness ↓</option>
          <option value="score_asc" {% if sort_key == "score_asc" %}selected{% endif %}>Readiness ↑</option>
        </select>
      </div>

      <div class="col-md-2 d-flex gap-2">
        <button type="submit" class="btn btn-sm btn-primary w-100">
          Apply
        </button>
        <a href="{% url 'portfolio:tto_dashboard' %}"
           class="btn btn-sm btn-outline-secondary">
          Reset
        </a>
      </div>
    </form>

    {# IP Table #}
    <div class="tto-table-wrapper">
      <table class="table table-sm table-hover align-middle mb-0 tto-table">
        <thead class="table-light">
          <tr>
            <th>Title</th>
            <th>Owner</th>
            <th class="tto-col-numeric">TRL</th>
            <th class="tto-col-numeric">CRL</th>
            <th class="tto-col-numeric">Readiness</th>
            <th>AI Readiness</th>
            <th>Status</th>
            <th class="tto-col-numeric">Interested</th>
            <th class="tto-col-numeric">Date Submitted</th>
            <th class="tto-col-actions">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for ip in ip_list %}
            <tr>
              {# Title #}
              <td>
                <div class="fw-semibold">{{ ip.title }}</div>
              </td>

              {# Owner #}
              <td>
                <small>{{ ip.owner.username }}</small>
              </td>

              {# TRL #}
              <td class="tto-col-numeric">
                {{ ip.trl|default:"—" }}
              </td>

              {# CRL #}
              <td class="tto-col-numeric">
                {{ ip.crl|default:"—" }}
              </td>

              {# Readiness Score #}
              <td class="tto-col-numeric">
                {% if ip.overall_score is not None %}
                  {% with score=ip.overall_score %}
                    {% if score >= 60 %}
                      <span class="badge bg-success tto-badge-readiness">
                        {{ score|floatformat:1 }}
                      </span>
                    {% elif score >= 40 %}
                      <span class="badge bg-warning text-dark tto-badge-readiness">
                        {{ score|floatformat:1 }}
                      </span>
                    {% else %}
                      <span class="badge bg-danger tto-badge-readiness">
                        {{ score|floatformat:1 }}
                      </span>
                    {% endif %}
                  {% endwith %}
                {% else %}
                  <span class="text-muted small">—</span>
                {% endif %}
              </td>

              {# AI Readiness #}
              <td>
               {% if ip.ai_score %}
               <span class="badge bg-{{ ip.ai_color }} px-2">
               {{ ip.ai_score|floatformat:1 }}
               </span>
              {% else %}
               <span class="text-muted">–</span>
              {% endif %}
              </td>

              {# Status + Simple Marketplace Toggle #}
              <td>
                <div class="fw-semibold">{{ ip.get_status_display }}</div>

                {% if ip.is_published %}
                  <span class="badge bg-success-subtle text-success small">
                   Live in Marketplace
                  </span>
                {% else %}
                  <span class="badge bg-secondary-subtle text-muted small">
                   Off the Marketplace
                  </span>
                {% endif %}

               <form method="post"
                action="{% url 'portfolio:tto_toggle_publish' ip.id %}"
                class="mt-1">
                {% csrf_token %}
                <div class="form-check form-switch">
                 <input
                 class="form-check-input"
                 type="checkbox"
                 name="is_published"
                onchange="this.form.submit()"
                {% if ip.is_published %}checked{% endif %}
                 >
               <label class="form-check-label small">
                Show in marketplace
               </label>
                </div>
              </form>
              </td>

              {# Interested Partners Count #}
              <td class="tto-col-numeric">
                {% if ip.interested_count %}
                  <a href="{% url 'portfolio:tto_partner_interests' ip.id %}">
                    {{ ip.interested_count }}
                  </a>
                {% else %}
                  <span class="text-muted">0</span>
                {% endif %}
              </td>

              {# Date Submitted #}
              <td class="tto-col-numeric">
                {{ ip.created_at|date:"Y-m-d" }}
              </td>

              {# Actions #}
              <td class="tto-col-actions">
                <div class="tto-actions d-inline-flex flex-column gap-1">
                  <a href="{% url 'portfolio:ip_detail' ip.id %}"
                     class="btn btn-outline-secondary btn-sm">
                    Open
                  </a>
                  <a href="{% url 'portfolio:tto_score_ip' ip.id %}"
                     class="btn btn-primary btn-sm">
                    Score
                  </a>
                </div>
              </td>
            </tr>
          {% empty %}
            <tr>
              <td colspan="9" class="text-center text-muted py-4">
                No IP submissions yet.
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="modal fade" id="bulkUploadModal" tabindex="-1" aria-labelledby="bulkUploadModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="post" action="{% url 'portfolio:bulk_upload_ips' %}" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="modal-header">
          <h5 class="modal-title" id="bulkUploadModalLabel">Bulk Upload IPs (CSV)</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>

        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">CSV File</label>
            <input type="file" name="file" class="form-control" accept=".csv" required>
            <div class="form-text">
              Expected columns:
              <code>title, ip_type, owner_username, trl_score, crl_score, overall_score, status, keywords, owning_unit, claimed_novelty, has_prototype</code>
            </div>
          </div>

          <div class="border rounded p-2 bg-light">
            <small class="text-muted">
              Example row:<br>
              <code>
                AI Solar Tracker,invention,test_TTO1,6,4,64.2,SUBMITTED,"solar,tracking,ai","CTU-RDE",3,1
              </code>
            </small>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Upload</button>
        </div>
      </form>
    </div>
  </div>
</div>


{% endblock %}