<section class="project-form-shell">
  <div class="admin-header">
    <h1><%= prospect ? 'Edit Prospect' : 'New Prospect' %></h1>
    <a class="button button-secondary" href="/admin/crm">Back to pipeline</a>
  </div>

  <% if (prospect && prospect.needsReview) { %>
    <div class="flash flash-error" style="display: flex; align-items: center; justify-content: space-between; gap: 1rem;">
      <span>A new reply came in from this prospect - check the activity log below.</span>
      <form method="POST" action="/admin/crm/<%= prospect.id %>/mark-reviewed">
        <button type="submit" class="button button-secondary">Mark reviewed</button>
      </form>
    </div>
  <% } %>

  <form method="POST" action="<%= prospect ? '/admin/crm/' + prospect.id + '?_method=PUT' : '/admin/crm' %>">
    <div class="form-section">
      <h3 class="form-section-title">Company</h3>
      <label>
        Company name
        <input type="text" name="companyName" value="<%= prospect ? prospect.companyName : '' %>" required>
      </label>
      <label>
        Website
        <input type="text" name="website" value="<%= prospect && prospect.website ? prospect.website : '' %>" placeholder="e.g. example.com">
      </label>
      <label>
        Sector
        <input type="text" name="sector" value="<%= prospect && prospect.sector ? prospect.sector : '' %>" placeholder="e.g. Financial Services & Fintech">
      </label>
      <label>
        Region / country
        <input type="text" name="region" value="<%= prospect && prospect.region ? prospect.region : '' %>" placeholder="e.g. Kenya">
      </label>
    </div>

    <div class="form-section">
      <h3 class="form-section-title">Contact</h3>
      <label>
        Contact name <span class="hint">(optional)</span>
        <input type="text" name="contactName" value="<%= prospect && prospect.contactName ? prospect.contactName : '' %>">
      </label>
      <label>
        Email
        <input type="email" name="email" value="<%= prospect && prospect.email ? prospect.email : '' %>">
      </label>
      <label>
        Phone
        <input type="text" name="phone" value="<%= prospect && prospect.phone ? prospect.phone : '' %>">
      </label>
    </div>

    <div class="form-section">
      <h3 class="form-section-title">Pipeline</h3>
      <label>
        Stage
        <select name="stage">
          <% stages.forEach(function(s) { %>
            <option value="<%= s.key %>" <%= prospect && prospect.stage === s.key ? 'selected' : '' %>><%= s.label %></option>
          <% }) %>
        </select>
      </label>
      <label>
        Source <span class="hint">(optional)</span>
        <input type="text" name="source" placeholder="Research, Contact form, Referral..." value="<%= prospect && prospect.source ? prospect.source : '' %>">
      </label>
      <label>
        Last contacted <span class="hint">(optional)</span>
        <input type="date" name="lastContactedAt" value="<%= prospect && prospect.lastContactedAt ? prospect.lastContactedAt.toISOString().slice(0,10) : '' %>">
      </label>
      <label>
        Notes <span class="hint">(fit rationale, outreach history, call notes)</span>
        <textarea name="notes" rows="6"><%= prospect && prospect.notes ? prospect.notes : '' %></textarea>
      </label>
    </div>

    <button type="submit" class="button button-primary">Save Prospect</button>
    <% if (prospect) { %>
      <form action="/admin/crm/<%= prospect.id %>?_method=DELETE" method="POST" style="display:inline"
            onsubmit="return confirm('Delete this prospect?')">
        <button type="submit" class="button-ghost">Delete</button>
      </form>
    <% } %>
  </form>

  <% if (prospect) { %>
    <div class="form-section">
      <div class="admin-header" style="margin-bottom: 0.75rem;">
        <h3 class="form-section-title" style="margin: 0;">Outreach drafts</h3>
        <a class="button button-secondary" href="/admin/crm/<%= prospect.id %>/drafts/new">+ New draft</a>
      </div>
      <% if (!drafts.length) { %>
        <p class="hint">No drafts yet for this prospect.</p>
      <% } else { %>
        <table class="admin-table">
          <thead><tr><th>Direction</th><th>Subject</th><th>Status</th><th>Updated</th><th></th></tr></thead>
          <tbody>
            <% drafts.forEach(function(d) { %>
              <tr>
                <td><%= d.direction %></td>
                <td><%= d.subject %></td>
                <td><span class="tag"><%= d.status %><%= d.generatedBy === 'ai' ? ' · AI' : '' %></span></td>
                <td><%= d.updatedAt.toDateString() %></td>
                <td><a href="/admin/crm/drafts/<%= d.id %>">View</a></td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      <% } %>
    </div>

    <div class="form-section">
      <h3 class="form-section-title">Activity log</h3>
      <form method="POST" action="/admin/crm/<%= prospect.id %>/activities" style="margin-bottom: 1.25rem;">
        <label>
          Add a note
          <textarea name="body" rows="3" placeholder="Call notes, a meeting summary, anything worth recording..."></textarea>
        </label>
        <button type="submit" class="button button-secondary">Add note</button>
      </form>
      <% if (!activities.length) { %>
        <p class="hint">No activity recorded yet.</p>
      <% } else { %>
        <div class="activity-list">
          <% activities.forEach(function(a) { %>
            <div class="activity-item">
              <div class="activity-meta">
                <span class="tag"><%= a.type.replace('_', ' ') %></span>
                <span class="hint"><%= a.createdBy || 'System' %> &middot; <%= a.createdAt.toLocaleString() %></span>
              </div>
              <p class="activity-body"><%= a.body %></p>
            </div>
          <% }) %>
        </div>
      <% } %>
    </div>
  <% } %>
</section>
