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

{% block title %}{{ ip.title }} – IP Details{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-2">
  <h4 class="mb-0">{{ ip.title }}</h4>
  {% if user == ip.owner %}
    <a href="{% url 'portfolio:ip_edit' ip.pk %}" class="btn btn-sm btn-outline-primary">Edit</a>
  {% endif %}
</div>

<div class="text-muted mb-3">
  Type: {{ ip.get_ip_type_display }} •
  IP Status: {{ ip.get_ip_status_display }} •
  Funding: {{ ip.get_funding_status_display }} •
  Workflow: {{ ip.get_status_display }}
</div>

<div class="row g-3">
  <div class="col-md-8">

    {# Summary Card #}
    <div class="card p-3 mb-3">
      <h6>Summary</h6>
      <p>{{ ip.abstract|default:"—" }}</p>
      <p><strong>Domain:</strong> {{ ip.domain|default:"—" }}</p>
      <p><strong>Keywords:</strong> {{ ip.keywords|default:"—" }}</p>
      <p><strong>Owning Unit:</strong> {{ ip.owning_unit|default:"—" }}</p>
    </div>

    {# Readiness + DOST Alignment Card #}
    <div class="card p-3 mb-3">
      <h6 class="mb-3">Technology Innovation Details</h6>

      <div class="row text-center mb-3">
        {# TRL #}
        <div class="col-md-4 mb-3 mb-md-0">
          <h6 class="text-muted mb-1">Technology Readiness Level (TRL)</h6>
          <div class="fs-3 mb-1">
            {% if ip.trl %}
              TRL {{ ip.trl }}
            {% else %}
              —
            {% endif %}
          </div>
          <div class="small text-muted">
            {{ ip.trl_level_label }}
          </div>
        </div>

        {# CRL #}
        <div class="col-md-4 mb-3 mb-md-0">
          <h6 class="text-muted mb-1">Commercial Readiness Level (CRL)</h6>
          <div class="fs-3 mb-1">
            {% if ip.crl %}
              CRL {{ ip.crl }}
            {% else %}
              —
            {% endif %}
          </div>
          <div class="small text-muted">
            {{ ip.crl_level_label }}
          </div>
        </div>

        {# Overall Readiness #}
        <div class="col-md-4">
          <h6 class="text-muted mb-1">Overall Readiness</h6>
          <div class="fs-3 mb-1">
            {{ readiness.overall_score|default:"0" }}%
          </div>
          <span class="badge
            {% if readiness.overall_score|default:0 < 40 %}
              bg-danger
            {% elif readiness.overall_score|default:0 < 70 %}
              bg-warning text-dark
            {% else %}
              bg-success
            {% endif %}
          ">
            {{ readiness.readiness_band|default:"" }}
          </span>
        </div>
      </div>

      {# Colored progress bar #}
      <div class="mt-3">
        
        {# Band labels: highlight the active band #}
        <div class="d-flex justify-content-between mb-1">
          <small
            class="
              {% if readiness.band == 'low' %}
                fw-bold text-danger
              {% else %}
                text-muted
              {% endif %}
            ">
            Low
          </small>

          <small
            class="
              {% if readiness.band == 'medium' %}
                fw-bold text-warning
              {% else %}
                text-muted
              {% endif %}
            ">
            Medium
          </small>

          <small
            class="
              {% if readiness.band == 'high' %}
                fw-bold text-success
              {% else %}
                text-muted
              {% endif %}
            ">
            High
          </small>
        </div>

        {# Main overall gradient bar #}
        <div class="progress" style="height: 16px;">
          <div
            class="progress-bar text-center"
            role="progressbar"
            style="
              width: {{ readiness.overall_score|default:0 }}%;
              background: linear-gradient(to right, #dc3545, #ffc107, #198754);
            "
            aria-valuenow="{{ readiness.overall_score|default:0 }}"
            aria-valuemin="0"
            aria-valuemax="100"
            data-bs-toggle="tooltip"
            data-bs-placement="top"
            title="Overall readiness combines TRL ({{ readiness.trl_score|default:0|floatformat:1 }}%) and CRL ({{ readiness.crl_score|default:0|floatformat:1 }}%)."
          >
            {{ readiness.overall_score|default:0|floatformat:1 }}%
          </div>
        </div>

        {# TRL / CRL contribution bars #}
        <div class="row mt-3 gx-3">
          <div class="col-md-6 mb-2">
            <small class="d-flex justify-content-between mb-1">
              <span>TRL contribution</span>
              <span>{{ readiness.trl_score|default:0|floatformat:1 }}%</span>
            </small>
            <div class="progress" style="height: 10px;">
              <div
                class="progress-bar bg-info"
                role="progressbar"
                style="width: {{ readiness.trl_score|default:0 }}%;"
                aria-valuenow="{{ readiness.trl_score|default:0 }}"
                aria-valuemin="0"
                aria-valuemax="100"
                data-bs-toggle="tooltip"
                data-bs-placement="top"
                title="Technical readiness based on TRL level."
              ></div>
            </div>
          </div>

          <div class="col-md-6 mb-2">
            <small class="d-flex justify-content-between mb-1">
              <span>CRL contribution</span>
              <span>{{ readiness.crl_score|default:0|floatformat:1 }}%</span>
            </small>
            <div class="progress" style="height: 10px;">
              <div
                class="progress-bar bg-primary"
                role="progressbar"
                style="width: {{ readiness.crl_score|default:0 }}%;"
                aria-valuenow="{{ readiness.crl_score|default:0 }}"
                aria-valuemin="0"
                aria-valuemax="100"
                data-bs-toggle="tooltip"
                data-bs-placement="top"
                title="Commercial readiness based on CRL level."
              ></div>
            </div>
          </div>
        </div>
      </div>

      <hr class="my-3">

      {# Explanation #}
      <h6>What this score means</h6>
      <p class="mb-2">
        {{ readiness.short_message|default:"This score combines technical and commercial readiness to help TTOs and industry partners decide the next steps." }}
      </p>

      <ul class="small text-muted mb-4">
        <li><strong>TRL</strong> follows the DOST TRL 1–9 scale (from basic principles observed to system proven in operational environment).</li>
        <li><strong>CRL</strong> reflects commercialization maturity: market validation, business case, IP/licensing, and market entry.</li>
        <li>The <strong>overall readiness score</strong> combines TRL and CRL to prioritize which IPs are closest to deployment or licensing.</li>
      </ul>

      {# DOST funding suggestions #}
      <h6>DOST Funding / Support Opportunities</h6>
      <ul class="small mb-0">
        {% for rec in readiness.funding_recommendations %}
          <li>{{ rec }}</li>
        {% empty %}
          <li>No specific DOST program suggested yet. Improve TRL and CRL to unlock more options.</li>
        {% endfor %}
      </ul>
    </div>

    {# TTO Assessment Section #}
    {% if ip.latest_assessment %}
      <div class="card mb-4">
        <div class="card-header">
          <strong>TTO Assessment (Latest)</strong>
        </div>
        <div class="card-body">
          
          <p><strong>Assessed by:</strong> {{ ip.latest_assessment.tto.username }}</p>
          <p><strong>Date:</strong> {{ ip.latest_assessment.date_scored|date:"Y-m-d H:i" }}</p>

          {% with assess=ip.latest_assessment %}
            <div class="row mb-3">
              <div class="col-md-4 text-center mb-3 mb-md-0">
                <h6 class="text-muted mb-1">TTO Overall Readiness</h6>
                <div class="display-6 fw-bold">
                  {{ assess.percentage }}%
                </div>

                {% with pct=assess.percentage %}
                  <span class="badge
                      {% if pct >= 70 %}bg-success
                      {% elif pct >= 40 %}bg-warning text-dark
                      {% else %}bg-danger{% endif %}">
                    {% if pct >= 70 %}High Readiness
                    {% elif pct >= 40 %}Medium Readiness
                    {% else %}Low Readiness{% endif %}
                  </span>
                {% endwith %}
              </div>

              <div class="col-md-8">
                <div class="small text-muted d-flex justify-content-between mb-1">
                  <span>Low</span>
                  <span>Medium</span>
                  <span>High</span>
                </div>
                <div class="progress" style="height: 16px;">
                  <div class="progress-bar"
                       role="progressbar"
                       style="width: {{ assess.percentage }}%;
                              background: linear-gradient(90deg, #dc3545 0%, #ffc107 50%, #198754 100%);">
                  </div>
                </div>
              </div>
            </div>
          {% endwith %}
          
          <table class="table table-sm mt-3">
            <thead>
              <tr>
                <th>Pillar</th>
                <th>Score (0–5)</th>
              </tr>
            </thead>
            <tbody>
              <tr><td>Novelty</td><td>{{ ip.latest_assessment.novelty_score }}</td></tr>
              <tr><td>Feasibility</td><td>{{ ip.latest_assessment.feasibility_score }}</td></tr>
              <tr><td>Market Potential</td><td>{{ ip.latest_assessment.market_score }}</td></tr>
              <tr><td>Team Capability</td><td>{{ ip.latest_assessment.team_score }}</td></tr>
              <tr><td>IP Status Strength</td><td>{{ ip.latest_assessment.ip_status_score }}</td></tr>
              <tr><td>Commercial Viability</td><td>{{ ip.latest_assessment.commercial_score }}</td></tr>
            </tbody>
          </table>

          <p class="mt-2"><strong>Total Score:</strong> {{ ip.latest_assessment_total }}</p>

          {% if ip.latest_assessment.remarks %}
            <p><strong>Remarks:</strong><br>{{ ip.latest_assessment.remarks }}</p>
          {% endif %}
        
        </div>
      </div>
    {% endif %}

    {# AI Readiness Score Section #}
    {% if ai_score %}
      <div class="card p-3 mb-3">
        <h6>AI Readiness Score</h6>

        <div class="d-flex align-items-center gap-2 mb-2">
          <span class="badge bg-{{ ai_color }} px-3 py-2">
            {{ ai_score|floatformat:1 }} / 100
          </span>
        </div>

        <div class="progress" style="height: 10px;">
          <div
            class="progress-bar bg-{{ ai_color }}"
            role="progressbar"
            style="width: {{ ai_score }}%;"
            aria-valuenow="{{ ai_score|floatformat:0 }}"
            aria-valuemin="0"
            aria-valuemax="100">
          </div>
        </div>
      </div>
    {% endif %}

    {# Other narrative fields #}
    <div class="card p-3 mb-3">
      <h6>Additional Details</h6>
      <p><strong>Prototype available:</strong> {{ ip.has_prototype|yesno:"Yes,No" }}</p>
      <p><strong>Prior Art Summary:</strong><br>{{ ip.prior_art_summary|linebreaksbr|default:"—" }}</p>
      <p><strong>Claimed Novelty:</strong><br>{{ ip.claimed_novelty|linebreaksbr|default:"—" }}</p>
      <p><strong>Target Market:</strong><br>{{ ip.target_market|linebreaksbr|default:"—" }}</p>
    </div>

  </div>

  {# Right Column - Documents #}
  <div class="col-md-4">
    <div class="card p-3">
      <h6>Documents</h6>
      <ul class="mb-0">
        {% for d in ip.documents.all %}
          <li>
            <small>{{ d.get_doc_type_display }}</small> –
            <a href="{{ d.file.url }}" target="_blank">
              {{ d.file.name|cut:"ip_docs/" }}
            </a>
          </li>
        {% empty %}
          <li>No documents uploaded yet.</li>
        {% endfor %}
      </ul>
    </div>
  </div>
</div>

{# Industry Partner Interest Button #}
{% if user|has_group:"Industry Partner" and ip.is_published %}
  <form method="post"
        action="{% url 'portfolio:partner_interest' ip.pk %}"
        class="mb-3">
    {% csrf_token %}
    {% if has_interest %}
      <button type="submit" class="btn btn-outline-danger">
        <i class="bi bi-x-circle"></i>
        Remove from My Interests
      </button>
    {% else %}
      <button type="submit" class="btn btn-outline-success">
        <i class="bi bi-hand-thumbs-up"></i>
        I'm Interested in this IP
      </button>
    {% endif %}
  </form>
{% endif %}

{% endblock %}