{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
Three step project wizard.

  1. Where and what — the caller's own websites (ACL scoped server side) and the
     template.
  2. About the business — the brief the generator works from.
  3. Review and cost — the estimated spend and the remaining monthly budget are
     shown ABOVE the Generate button, never after it.  If the estimate exceeds
     what is left, the button stays disabled and says why.

Step 4 is not a step the customer navigates to; it is the progress view the
wizard switches to once a generation is actually running.
{% endcomment %}

{% block title %}New site{% endblock %}

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

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

  {{ sitesJSON|json_script:"cpBuilderSites" }}
  {{ tonesJSON|json_script:"cpBuilderTones" }}
  {{ industriesJSON|json_script:"cpBuilderIndustries" }}
  {{ availability|json_script:"cpBuilderAvailability" }}
  {{ quota|json_script:"cpBuilderQuota" }}
  {{ descriptionPlaceholder|json_script:"cpBuilderPlaceholder" }}
  {{ preselectTemplate|json_script:"cpBuilderPreselectTemplate" }}
  {{ preselectDomain|json_script:"cpBuilderPreselectDomain" }}

  <div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Build a new site</h1>
      <p class="cpb-muted mb-0 small">
        Three steps. Nothing is generated — and nothing is charged — until you
        confirm on the last one.
      </p>
    </div>
    <a href="/builder/" class="btn btn-outline-secondary btn-sm">
      <i class="fas fa-arrow-left me-1"></i>Back to templates
    </a>
  </div>

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

  <div class="cpb-steps" ng-hide="step === 4" ng-cloak>
    <div class="cpb-step" ng-class="{'is-active': step === 1, 'is-done': step > 1}">
      <span class="cpb-step__num">1</span>
      <span class="cpb-step__label">Site &amp; template<small>Where it goes, how it looks</small></span>
    </div>
    <div class="cpb-step" ng-class="{'is-active': step === 2, 'is-done': step > 2}">
      <span class="cpb-step__num">2</span>
      <span class="cpb-step__label">Your business<small>What the copy should say</small></span>
    </div>
    <div class="cpb-step" ng-class="{'is-active': step === 3}">
      <span class="cpb-step__num">3</span>
      <span class="cpb-step__label">Review &amp; cost<small>Check before you spend</small></span>
    </div>
  </div>

  <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>

  {# ================================================================== #}
  {# STEP 1 — site + template                                           #}
  {# ================================================================== #}
  <div ng-show="step === 1" ng-cloak>

    <div class="card mb-4">
      <div class="card-body">
        <h2 class="h6 mb-3">1. Which website is this for?</h2>

        <div ng-if="sites.length === 0" class="alert alert-warning py-2 px-3 small mb-0">
          <i class="fas fa-triangle-exclamation me-1"></i>
          You do not have any websites yet. Create one first, then come back —
          the builder publishes into an existing site's document root.
          <a href="/websites/createWebsite" class="alert-link">Create a website</a>.
        </div>

        <div class="row g-2" ng-if="sites.length > 0">
          <div class="col-md-8">
            <label class="form-label" for="cpbDomain">Target website</label>
            <select class="form-select" id="cpbDomain" ng-model="form.domain"
                    ng-options="site.domain as site.domain for site in sites">
              <option value="">Choose a website…</option>
            </select>
          </div>
          <div class="col-md-4" ng-if="chosenSite()">
            <label class="form-label">Document root</label>
            <div class="form-control-plaintext cpb-mono small"
                 ng-bind="chosenSite().docRoot"></div>
          </div>
        </div>

        <div class="small cpb-muted mt-2" ng-if="chosenSite() && chosenSite().state !== 1">
          <i class="fas fa-circle-info me-1"></i>
          This site is currently suspended. You can still build and save a
          project, but visitors will not see it until it is active again.
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-body">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
          <h2 class="h6 mb-0">2. Choose a template</h2>
          <div class="input-group input-group-sm" style="max-width: 18rem;">
            <span class="input-group-text"><i class="fas fa-magnifying-glass"></i></span>
            <input type="search" class="form-control" placeholder="Search templates…"
                   ng-model="templateSearch" ng-change="loadTemplates()"
                   ng-model-options="{debounce: 250}" aria-label="Search templates">
          </div>
        </div>

        <div class="cpb-catrail mb-3">
          <button type="button" class="cpb-cat"
                  ng-class="{'is-active': templateCategory === 'all'}"
                  ng-click="pickCategory('all')">All</button>
          <button type="button" class="cpb-cat" ng-repeat="cat in categories"
                  ng-class="{'is-active': templateCategory === cat.slug}"
                  ng-click="pickCategory(cat.slug)">
            <span ng-bind="cat.name"></span>
          </button>
        </div>

        <div class="cpb-grid">
          <div class="cpb-card" ng-repeat="tpl in templates track by tpl.slug"
               ng-class="{'is-selected': form.templateSlug === tpl.slug}">
            <div class="cpb-card__shot" ng-class="{'is-empty': !tpl.thumbnail}">
              <div class="cpb-card__shot-placeholder" aria-hidden="true">
                <i class="fa-regular fa-image"></i>
              </div>
              <img class="cpb-card__shot-img" ng-if="tpl.thumbnail"
                   ng-src="{$ tpl.thumbnail $}" alt="" loading="lazy">
              <div class="cpb-card__overlay">
                <button type="button" class="btn btn-primary btn-sm w-100"
                        ng-click="chooseTemplate(tpl)">
                  <i class="fas fa-check me-1"></i>Select
                </button>
                <a class="btn btn-light btn-sm w-100" target="_blank" rel="noopener"
                   ng-href="/builder/preview/{$ tpl.slug $}">
                  <i class="fas fa-eye me-1"></i>Preview
                </a>
              </div>
            </div>
            <div class="cpb-card__body">
              <div class="d-flex align-items-start justify-content-between gap-2">
                <div class="cpb-card__name" ng-bind="tpl.name"></div>
                <i class="fas fa-circle-check" style="color: var(--cp-primary);"
                   ng-if="form.templateSlug === tpl.slug" aria-label="Selected"></i>
              </div>
              <div class="cpb-card__desc" ng-bind="tpl.description"></div>
              <div class="cpb-tags">
                <span class="cpb-tag" ng-bind="tpl.categoryName"></span>
                <span class="cpb-tag" ng-repeat="tag in tpl.tags | limitTo:2 track by $index" ng-bind="tag"></span>
              </div>
            </div>
          </div>
        </div>

        <div class="text-center cpb-muted py-4"
             ng-show="!loadingTemplates && templates.length === 0">
          No templates matched that search.
        </div>
      </div>
    </div>

    <div class="d-flex justify-content-end gap-2 mt-3">
      <button type="button" class="btn btn-primary" ng-click="goto(2)"
              ng-disabled="!step1Complete()">
        Next: describe your business<i class="fas fa-arrow-right ms-2"></i>
      </button>
    </div>
  </div>

  {# ================================================================== #}
  {# STEP 2 — the brief                                                 #}
  {# ================================================================== #}
  <div ng-show="step === 2" ng-cloak>
    <div class="card">
      <div class="card-body">
        <h2 class="h6 mb-1">Tell the builder about the business</h2>
        <p class="cpb-muted small mb-4">
          Everything the generated copy says comes from what you write here.
          Specific beats generic: real services, real places, real opening hours.
        </p>

        <div class="row g-3">
          <div class="col-md-6">
            <label class="form-label" for="cpbBusinessName">Business name</label>
            <input type="text" class="form-control" id="cpbBusinessName" maxlength="120"
                   ng-model="form.businessName" placeholder="Harbour Lane Dental">
          </div>

          <div class="col-md-6">
            <label class="form-label" for="cpbIndustry">Industry</label>
            <select class="form-select" id="cpbIndustry" ng-model="form.industry">
              <option value="">Choose an industry…</option>
              <option ng-repeat="industry in industries" ng-value="industry"
                      ng-bind="industry"></option>
            </select>
          </div>

          <div class="col-12">
            <label class="form-label" for="cpbDescription">
              What does the business do?
            </label>
            <textarea class="form-control" id="cpbDescription" rows="8" maxlength="4000"
                      ng-model="form.businessDescription"
                      placeholder="{$ descriptionPlaceholder $}"></textarea>
            <div class="d-flex justify-content-between small mt-1">
              <span class="cpb-muted">
                Services, location, what makes you different, anything a new
                customer would want to know.
              </span>
              <span ng-class="descriptionLength() < 40 ? 'text-danger' : 'cpb-muted'">
                <span ng-bind="descriptionLength()"></span>/4000
                <span ng-if="descriptionLength() < 40">— at least 40 characters</span>
              </span>
            </div>
          </div>

          <div class="col-md-6">
            <label class="form-label" for="cpbTone">Tone of voice</label>
            <select class="form-select" id="cpbTone" ng-model="form.tone"
                    ng-options="tone.value as tone.label for tone in tones"></select>
          </div>

          <div class="col-md-6">
            <label class="form-label" for="cpbAudience">Who are the customers?</label>
            <input type="text" class="form-control" id="cpbAudience" maxlength="500"
                   ng-model="form.targetAudience"
                   placeholder="Local families and nervous adult patients">
          </div>

          <div class="col-md-6">
            <label class="form-label" for="cpbColor">Primary colour</label>
            <div class="cpb-colorfield">
              <input type="color" id="cpbColor" ng-model="form.primaryColor"
                     aria-label="Primary colour">
              <input type="text" class="form-control cpb-mono" maxlength="9"
                     ng-model="form.primaryColor" aria-label="Primary colour hex value">
            </div>
          </div>

          <div class="col-md-6">
            <label class="form-label" for="cpbName">Project name <span class="cpb-muted">(optional)</span></label>
            <input type="text" class="form-control" id="cpbName" maxlength="120"
                   ng-model="form.name" placeholder="Defaults to the business name">
          </div>
        </div>
      </div>
    </div>

    <div class="d-flex justify-content-between gap-2 mt-3">
      <button type="button" class="btn btn-outline-secondary" ng-click="back()">
        <i class="fas fa-arrow-left me-2"></i>Back
      </button>
      <button type="button" class="btn btn-primary" ng-click="goto(3)"
              ng-disabled="!step2Complete()">
        Next: review &amp; cost<i class="fas fa-arrow-right ms-2"></i>
      </button>
    </div>
  </div>

  {# ================================================================== #}
  {# STEP 3 — review, cost, generate                                    #}
  {# ================================================================== #}
  <div ng-show="step === 3" ng-cloak>
    <div class="row g-4">

      <div class="col-lg-6">
        <div class="card h-100">
          <div class="card-body">
            <h2 class="h6 mb-3">Review</h2>
            <dl class="row small mb-0">
              <dt class="col-5 cpb-muted">Website</dt>
              <dd class="col-7 cpb-mono" ng-bind="form.domain"></dd>

              <dt class="col-5 cpb-muted">Template</dt>
              <dd class="col-7" ng-bind="chosenTemplate().name || form.templateSlug"></dd>

              <dt class="col-5 cpb-muted">Business</dt>
              <dd class="col-7" ng-bind="form.businessName"></dd>

              <dt class="col-5 cpb-muted">Industry</dt>
              <dd class="col-7" ng-bind="form.industry || '—'"></dd>

              <dt class="col-5 cpb-muted">Tone</dt>
              <dd class="col-7" ng-bind="form.tone"></dd>

              <dt class="col-5 cpb-muted">Audience</dt>
              <dd class="col-7" ng-bind="form.targetAudience || '—'"></dd>

              <dt class="col-5 cpb-muted">Primary colour</dt>
              <dd class="col-7">
                <span class="cpb-swatch d-inline-block align-middle me-1"
                      ng-style="{'background-color': form.primaryColor}"></span>
                <span class="cpb-mono" ng-bind="form.primaryColor"></span>
              </dd>
            </dl>

            <hr>
            <div class="cpb-section-title">Your brief</div>
            <p class="small mb-0" style="white-space: pre-wrap;"
               ng-bind="form.businessDescription"></p>
          </div>
        </div>
      </div>

      <div class="col-lg-6">
        {# ---- THE COST PANEL SITS ABOVE THE BUTTON, ALWAYS ---- #}
        <div class="cpb-cost mb-3">
          <div class="cpb-section-title mb-1">Estimated cost of this generation</div>

          <div ng-show="estimating">
            <i class="fas fa-circle-notch fa-spin me-1"></i>Working out the cost…
          </div>

          <div ng-hide="estimating">
            <div class="cpb-cost__figure" ng-bind="money(estimate)"></div>
            <div class="small cpb-muted" ng-if="estimateNote" ng-bind="estimateNote"></div>
            <div class="small cpb-muted" ng-if="!estimateNote">
              Charged against your account when the generation runs. You are not
              charged if it fails.
            </div>

            <div class="cpb-cost__grid">
              <div>
                <div class="cpb-section-title mb-1">Monthly budget</div>
                <div ng-if="quota.unlimitedBudget" class="small">No monthly limit set.</div>
                <div ng-if="!quota.unlimitedBudget">
                  <div class="small mb-1">
                    <span ng-bind="money(quota.monthSpentUSD)"></span> used of
                    <span ng-bind="money(quota.monthlyBudgetUSD)"></span>
                  </div>
                  <div class="cpb-meter">
                    <div class="cpb-meter__fill"
                         ng-class="{'is-warn': quota.monthSpentUSD / quota.monthlyBudgetUSD > 0.75,
                                    'is-danger': quota.monthSpentUSD / quota.monthlyBudgetUSD > 0.95}"
                         ng-style="{width: (100 * quota.monthSpentUSD / quota.monthlyBudgetUSD) + '%'}"></div>
                  </div>
                  <div class="small mt-1">
                    <strong ng-bind="money(quota.remainingUSD)"></strong> remaining
                  </div>
                </div>
              </div>

              <div>
                <div class="cpb-section-title mb-1">This hour</div>
                <div class="small" ng-if="quota.generationsPerHour">
                  <span ng-bind="quota.generationsThisHour"></span> of
                  <span ng-bind="quota.generationsPerHour"></span> generations used
                </div>
                <div class="small" ng-if="!quota.generationsPerHour">No hourly limit.</div>

                <div class="cpb-section-title mb-1 mt-3" ng-if="quota.perGenerationCapUSD">
                  Per-generation cap
                </div>
                <div class="small" ng-if="quota.perGenerationCapUSD"
                     ng-bind="money(quota.perGenerationCapUSD)"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="alert alert-warning py-2 px-3 small" ng-if="blockedReason" role="alert">
          <i class="fas fa-triangle-exclamation me-1"></i><span ng-bind="blockedReason"></span>
        </div>

        <div class="alert alert-danger py-2 px-3 small"
             ng-if="!availability.available" role="alert">
          <i class="fas fa-circle-exclamation me-1"></i>
          <span ng-bind="availability.reason"></span>
        </div>

        <div class="d-grid gap-2">
          <button type="button" class="btn btn-primary btn-lg" ng-click="generate()"
                  ng-disabled="!canGenerate()">
            <i class="fas fa-wand-magic-sparkles me-2"></i>
            Generate my site for <span ng-bind="money(estimate)"></span>
          </button>
          <button type="button" class="btn btn-outline-secondary" ng-click="refreshEstimate()"
                  ng-disabled="estimating">
            <i class="fas fa-rotate me-1"></i>Recalculate
          </button>
          <button type="button" class="btn btn-link btn-sm" ng-click="back()">
            <i class="fas fa-arrow-left me-1"></i>Back to the brief
          </button>
        </div>

        <p class="small cpb-muted mt-3 mb-0">
          Generating writes the copy into a project you can edit. Nothing is
          published to <span class="cpb-mono" ng-bind="form.domain"></span> until
          you press Publish on the next screen.
        </p>
      </div>
    </div>
  </div>

  {# ================================================================== #}
  {# STEP 4 — progress                                                  #}
  {# ================================================================== #}
  <div ng-show="step === 4" ng-cloak>
    <div class="cpb-job">
      <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 fa-wand-magic-sparkles"></i>
        </div>
        <div>
          <div class="fw-semibold">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="Generation 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>

      <p class="small cpb-muted mb-0 mt-3">
        This usually takes under a minute. You can leave this page open — we will
        take you to the editor as soon as it is done.
      </p>
    </div>
  </div>

</div>
{% endblock %}

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