{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
Project detail — edit the generated copy, watch it re-render, then publish.

The generated content is model output and is treated as untrusted throughout:
it reaches the browser through |json_script, is edited with ng-model and is
displayed with ng-bind.  Nothing on this page uses |safe or ng-bind-html, and
the live preview is built from ng-repeat rather than from an HTML string, so a
prompt-injected <script> in a heading is text and stays text.

The field editor is generic on purpose.  The generator decides the section
schema, so siteBuilder.js walks whatever object it produced and emits an input
per string it finds, binding straight into the stored tree — unknown keys
survive a save untouched instead of being dropped by a hardcoded form.
{% endcomment %}

{% block title %}{{ project.name }}{% endblock %}

{% block styles %}
  <link rel="stylesheet" href="{% static 'siteBuilder/siteBuilder.css' %}">
{% endblock %}

{% block content %}
<div ng-controller="builderProjectController">

  {{ projectJSON|json_script:"cpBuilderProject" }}
  {{ contentJSON|json_script:"cpBuilderContent" }}
  {{ templateJSON|json_script:"cpBuilderTemplate" }}
  {{ availability|json_script:"cpBuilderAvailability" }}
  {{ quota|json_script:"cpBuilderQuota" }}
  {{ canDeploy|json_script:"cpBuilderCanDeploy" }}

  {# ---------------------------------------------------------------- #}
  {# Recursive field renderer                                          #}
  {# ---------------------------------------------------------------- #}
  <script type="text/ng-template" id="cpbFields.html">
    <div ng-repeat="field in fields">

      <div class="mb-3" ng-if="field.kind === 'text'">
        <label class="form-label small mb-1" ng-bind="field.label"></label>
        <input type="text" class="form-control" ng-model="field.obj[field.key]"
               ng-change="touch()" maxlength="500"
               ng-attr-aria-label="{$ field.label $}">
      </div>

      <div class="mb-3" ng-if="field.kind === 'textarea'">
        <label class="form-label small mb-1" ng-bind="field.label"></label>
        <textarea class="form-control" rows="{$ field.rows $}" maxlength="4000"
                  ng-model="field.obj[field.key]" ng-change="touch()"
                  ng-attr-aria-label="{$ field.label $}"></textarea>
      </div>

      <div class="cpb-fieldgroup" ng-if="field.kind === 'group'">
        <div class="cpb-fieldgroup__title" ng-bind="field.label"></div>
        <div ng-include="'cpbFields.html'" ng-init="fields = field.fields"></div>
      </div>

      <div class="cpb-fieldgroup" ng-if="field.kind === 'list'">
        <div class="cpb-fieldgroup__title" ng-bind="field.label"></div>
        <div class="cpb-entry" ng-repeat="entry in field.entries">
          <div class="small fw-semibold mb-2 cpb-muted" ng-bind="entry.label"></div>
          <div ng-include="'cpbFields.html'" ng-init="fields = entry.fields"></div>
        </div>
      </div>

    </div>
  </script>

  {# ---------------------------------------------------------------- #}
  {# Header                                                            #}
  {# ---------------------------------------------------------------- #}
  <nav aria-label="Breadcrumb" class="mb-3">
    <ol class="breadcrumb small mb-0">
      <li class="breadcrumb-item"><a href="/builder/">Website builder</a></li>
      <li class="breadcrumb-item"><a href="/builder/projects">My projects</a></li>
      <li class="breadcrumb-item active" aria-current="page">{{ project.name }}</li>
    </ol>
  </nav>

  <div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">
        {{ project.name }}
        <span class="badge rounded-pill align-middle" ng-class="{
              'text-bg-secondary': project.status === 'draft',
              'text-bg-info': project.status === 'generating',
              'text-bg-primary': project.status === 'generated',
              'text-bg-success': project.status === 'deployed',
              'text-bg-danger': project.status === 'failed'}"
              ng-bind="project.status" ng-cloak></span>
      </h1>
      <p class="cpb-muted mb-0 small">
        {{ project.businessName }} &middot;
        <span class="cpb-mono">{{ project.website.domain }}</span> &middot;
        template <span ng-bind="project.templateName" ng-cloak></span>
      </p>
    </div>

    <div class="d-flex flex-wrap gap-2">
      <button type="button" class="btn btn-outline-secondary btn-sm"
              ng-click="showPreview = !showPreview" ng-cloak>
        <i class="fas fa-eye me-1"></i>
        <span ng-bind="showPreview ? 'Hide preview' : 'Show preview'"></span>
      </button>

      <button type="button" class="btn btn-outline-primary btn-sm" ng-click="save()"
              ng-disabled="busy || !dirty" ng-cloak>
        <i class="fas fa-floppy-disk me-1"></i>
        <span ng-bind="dirty ? 'Save changes' : 'Saved'"></span>
      </button>

      {% if canDeploy == 1 %}
        <button type="button" class="btn btn-outline-secondary btn-sm" ng-click="generate()"
                ng-disabled="busy || job.running || !availability.available || estimate === null"
                ng-cloak>
          <i class="fas fa-wand-magic-sparkles me-1"></i>
          <span ng-bind="project.hasContent ? 'Regenerate' : 'Generate content'"></span>
        </button>

        <button type="button" class="btn btn-primary btn-sm" ng-click="deploy()"
                ng-disabled="busy || job.running || !project.hasContent" ng-cloak>
          <i class="fas fa-rocket me-1"></i>Publish to {{ project.website.domain }}
        </button>
      {% endif %}
    </div>
  </div>

  {% include "siteBuilder/_availability.html" %}

  <div class="alert alert-danger py-2 px-3" ng-show="errorMessage" ng-cloak role="alert">
    <i class="fas fa-triangle-exclamation me-1"></i><span ng-bind="errorMessage"></span>
  </div>

  {# ---------------------------------------------------------------- #}
  {# Running job                                                       #}
  {# ---------------------------------------------------------------- #}
  <div class="cpb-job mb-4" ng-if="job.running" ng-cloak>
    <div class="d-flex align-items-center gap-3 mb-2">
      <div class="fs-4" style="color: var(--cp-primary);" aria-hidden="true">
        <i class="fas" ng-class="job.kind === 'deploy' ? 'fa-rocket' : 'fa-wand-magic-sparkles'"></i>
      </div>
      <div>
        <div class="fw-semibold"
             ng-bind="job.kind === 'deploy' ? 'Publishing your site' : 'Writing your site'"></div>
        <div class="small cpb-muted" ng-bind="job.message"></div>
      </div>
      <div class="ms-auto cpb-mono"><span ng-bind="job.progress"></span>%</div>
    </div>
    <div class="progress" role="progressbar" aria-label="Job progress"
         aria-valuemin="0" aria-valuemax="100" aria-valuenow="{$ job.progress $}">
      <div class="progress-bar progress-bar-striped progress-bar-animated"
           ng-style="{width: job.progress + '%'}"></div>
    </div>
    <ul class="cpb-job__log" ng-if="job.log.length">
      <li ng-repeat="line in job.log track by $index" ng-bind="line"></li>
    </ul>
  </div>

  {# ---------------------------------------------------------------- #}
  {# Published                                                         #}
  {# ---------------------------------------------------------------- #}
  <div class="alert alert-success" ng-if="liveURL" ng-cloak role="status">
    <div class="d-flex flex-wrap align-items-center gap-2">
      <i class="fas fa-circle-check"></i>
      <strong>Your site is live.</strong>
      <a class="alert-link" ng-href="{$ liveURL $}" target="_blank" rel="noopener"
         ng-bind="liveURL"></a>
    </div>
    <div class="small mt-2" ng-if="backupPath">
      The previous index.html was backed up to
      <span class="cpb-mono" ng-bind="backupPath"></span>.
    </div>
    <div class="small mt-1" ng-if="deployedFiles.length">
      <span ng-bind="deployedFiles.length"></span> file(s) written:
      <span class="cpb-mono" ng-bind="deployedFiles.join(', ')"></span>
    </div>
  </div>

  {# ---------------------------------------------------------------- #}
  {# Nothing generated yet                                             #}
  {# ---------------------------------------------------------------- #}
  <div class="card" ng-if="!sections.length && !job.running" ng-cloak>
    <div class="card-body text-center py-5">
      <div class="fs-1 mb-3" style="color: var(--cp-primary);" aria-hidden="true">
        <i class="fas fa-wand-magic-sparkles"></i>
      </div>
      <h2 class="h5">No content yet</h2>
      <p class="cpb-muted small mb-4">
        This project has a brief and a template but no copy. Generate it and the
        builder will write every section for you — you can edit anything
        afterwards.
      </p>

      <div class="cpb-cost mx-auto text-start mb-3" style="max-width: 26rem;">
        <div class="cpb-section-title mb-1">Estimated cost</div>
        <div class="cpb-cost__figure" ng-bind="money(estimate)"></div>
        <div class="small mt-2" ng-if="!quota.unlimitedBudget">
          <strong ng-bind="money(quota.remainingUSD)"></strong> left of your
          <span ng-bind="money(quota.monthlyBudgetUSD)"></span> monthly budget.
        </div>
        <div class="small mt-2" ng-if="quota.unlimitedBudget">No monthly limit set.</div>
        <div class="small text-danger mt-2" ng-if="blockedReason" ng-bind="blockedReason"></div>
      </div>

      {% if canDeploy == 1 %}
        <button type="button" class="btn btn-primary" ng-click="generate()"
                ng-disabled="busy || !availability.available || blockedReason || estimate === null">
          <i class="fas fa-wand-magic-sparkles me-2"></i>
          Generate my content for <span ng-bind="money(estimate)"></span>
        </button>
      {% endif %}
    </div>
  </div>

  {# ---------------------------------------------------------------- #}
  {# Editor + live preview                                             #}
  {# ---------------------------------------------------------------- #}
  <div class="cpb-editor" ng-class="{'has-preview': showPreview}"
       ng-if="sections.length" ng-cloak>

    <div>
      <div class="card">
        <div class="card-body">
          <h2 class="h6 mb-3">Edit your content</h2>

          <div class="cpb-seclist" role="tablist" aria-label="Page sections">
            <button type="button" class="cpb-secbtn" role="tab"
                    ng-repeat="section in sections"
                    ng-class="{'is-active': activeSection === $index}"
                    ng-attr-aria-selected="{$ activeSection === $index $}"
                    ng-click="select($index)" ng-bind="section.label"></button>
          </div>

          <div ng-repeat="section in sections" ng-show="activeSection === $index">
            <div class="cpb-section-title" ng-bind="section.label"></div>
            <div ng-if="!section.fields.length" class="cpb-muted small">
              This section has no editable text.
            </div>
            <div ng-include="'cpbFields.html'" ng-init="fields = section.fields"></div>
          </div>

          <div class="d-flex flex-wrap justify-content-between gap-2 mt-3 pt-3"
               style="border-top: 1px solid var(--cp-border);">
            <div class="small cpb-muted align-self-center">
              <span ng-if="dirty"><i class="fas fa-circle text-warning me-1"
                    style="font-size:0.5rem;vertical-align:middle;"></i>Unsaved changes</span>
              <span ng-if="!dirty">All changes saved</span>
            </div>
            <div class="d-flex gap-2">
              <button type="button" class="btn btn-primary btn-sm" ng-click="save()"
                      ng-disabled="busy || !dirty">
                <i class="fas fa-floppy-disk me-1"></i>Save changes
              </button>
            </div>
          </div>
        </div>
      </div>

      <div class="card mt-3">
        <div class="card-body">
          <h2 class="h6 mb-2">Brief</h2>
          <dl class="row small mb-0">
            <dt class="col-4 cpb-muted">Business</dt>
            <dd class="col-8">{{ project.businessName }}</dd>
            <dt class="col-4 cpb-muted">Industry</dt>
            <dd class="col-8">{{ project.industry|default:"—" }}</dd>
            <dt class="col-4 cpb-muted">Tone</dt>
            <dd class="col-8">{{ project.tone }}</dd>
            <dt class="col-4 cpb-muted">Audience</dt>
            <dd class="col-8">{{ project.targetAudience|default:"—" }}</dd>
          </dl>
          <hr>
          <p class="small mb-0" style="white-space: pre-wrap;">{{ project.businessDescription }}</p>
        </div>
      </div>

      {% if generations %}
        <div class="card mt-3">
          <div class="card-body">
            <h2 class="h6 mb-2">Generation history</h2>
            <p class="cpb-muted small">What each run actually cost, not what it was estimated at.</p>
            <div class="table-responsive">
              <table class="table table-sm align-middle mb-0 small">
                <thead>
                  <tr>
                    <th scope="col">When</th>
                    <th scope="col">Model</th>
                    <th scope="col">Tokens</th>
                    <th scope="col" class="text-end">Cost</th>
                    <th scope="col">Result</th>
                  </tr>
                </thead>
                <tbody>
                  {% for run in generations %}
                    <tr>
                      <td class="cpb-muted">{{ run.dateCreated|date:"j M Y, H:i" }}</td>
                      <td class="cpb-mono">{{ run.model }}</td>
                      <td class="cpb-muted">
                        {{ run.promptTokens }} in / {{ run.outputTokens }} out
                      </td>
                      <td class="text-end cpb-mono">${{ run.costUSD|floatformat:4 }}</td>
                      <td>
                        <span class="badge rounded-pill
                          {% if run.status == 'success' %}text-bg-success
                          {% elif run.status == 'error' or run.status == 'refusal' %}text-bg-danger
                          {% elif run.status == 'truncated' or run.status == 'blocked' %}text-bg-warning
                          {% else %}text-bg-secondary{% endif %}">{{ run.status|default:"—" }}</span>
                        {% if run.errorMessage %}
                          <div class="cpb-muted mt-1">{{ run.errorMessage }}</div>
                        {% endif %}
                      </td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      {% endif %}
    </div>

    {# ---- live preview ---- #}
    <div ng-if="showPreview">
      <div class="cpb-preview">
        <div class="cpb-preview__bar">
          <span class="cpb-preview__dots" aria-hidden="true">
            <span></span><span></span><span></span>
          </span>
          <span class="cpb-mono flex-grow-1 text-truncate">{{ project.website.domain }}</span>
          <span class="btn-group btn-group-sm" role="group" aria-label="Preview width">
            <button type="button" class="btn btn-outline-secondary btn-sm py-0 px-2"
                    ng-class="{active: device === 'mobile'}" ng-click="setDevice('mobile')"
                    title="Phone width"><i class="fas fa-mobile-screen"></i></button>
            <button type="button" class="btn btn-outline-secondary btn-sm py-0 px-2"
                    ng-class="{active: device === 'tablet'}" ng-click="setDevice('tablet')"
                    title="Tablet width"><i class="fas fa-tablet-screen-button"></i></button>
            <button type="button" class="btn btn-outline-secondary btn-sm py-0 px-2"
                    ng-class="{active: device === 'desktop'}" ng-click="setDevice('desktop')"
                    title="Full width"><i class="fas fa-desktop"></i></button>
          </span>
        </div>

        <div class="cpb-preview__stage">
          <div class="cpb-page"
               ng-class="{'is-mobile': device === 'mobile', 'is-tablet': device === 'tablet'}">

            <div class="cpb-page__nav">
              <span ng-bind="project.businessName"></span>
              <span class="cpb-page__navlinks">
                <span ng-repeat="sec in preview | limitTo:4" ng-bind="sec.label"></span>
              </span>
            </div>

            <div class="cpb-sec" ng-repeat="sec in preview"
                 ng-class="{'is-hero': sec.hero}"
                 ng-style="sec.hero ? {'background-color': primaryColor()} : {}">

              <div class="cpb-sec__eyebrow" ng-if="sec.eyebrow" ng-bind="sec.eyebrow"></div>
              <h3 class="cpb-sec__heading" ng-if="sec.heading" ng-bind="sec.heading"></h3>
              <p class="cpb-sec__body" ng-if="sec.body" ng-bind="sec.body"></p>

              <div class="cpb-sec__items" ng-if="sec.items.length">
                <div class="cpb-sec__item" ng-repeat="item in sec.items">
                  <h4 ng-if="item.title" ng-bind="item.title"></h4>
                  <p ng-if="item.body" ng-bind="item.body"></p>
                </div>
              </div>

              <span class="cpb-sec__cta" ng-if="sec.cta" ng-bind="sec.cta"
                    ng-style="sec.hero ? {} : {'background-color': primaryColor()}"></span>
            </div>

            <div class="cpb-page__foot">
              &copy; <span ng-bind="project.businessName"></span> &middot;
              <span ng-bind="project.domain"></span>
            </div>
          </div>
        </div>
      </div>

      <p class="small cpb-muted mt-2 mb-0">
        An approximation of the finished page — the published site uses the
        <span ng-bind="project.templateName"></span> template's full layout,
        fonts and imagery.
      </p>
    </div>
  </div>

</div>
{% endblock %}

{% block scripts %}
  <script src="{% static 'siteBuilder/siteBuilder.js' %}"></script>
{% endblock %}