{% extends "base.html" %}
{% block title %}{{ 'Edit' if not is_new else 'New' }} Form — ICDEV™{% endblock %}

{% block content %}
{% from "includes/classification_macros.html" import design_classification_banner %}
{{ design_classification_banner('CUI') }}

<div class="page-container" style="padding:16px">

  <!-- Breadcrumbs -->
  <div style="font-size:0.85rem;color:var(--text-secondary);margin-bottom:12px">
    <a href="/workflow-canvas/">Workflow &amp; Forms</a> /
    <a href="/workflow-canvas/forms">Forms</a> /
    {{ form.name if form else 'New Form' }}
  </div>

  <!-- Action bar -->
  <div style="display:flex;align-items:center;gap:8px;margin-bottom:16px">
    <input id="form-name-input" type="text" value="{{ form.name if form else '' }}" placeholder="Form name…"
           style="font-size:1rem;font-weight:600;padding:6px 10px;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);flex:1;min-width:150px">
    <button style="padding:7px 16px;background:#1d72ff;color:#fff;border:none;border-radius:6px;font-size:0.9rem;cursor:pointer;white-space:nowrap" onclick="saveForm()">💾 Save</button>
    {% if not is_new %}
    <div style="position:relative;display:inline-block">
      <button style="padding:7px 14px;background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:6px;font-size:0.9rem;cursor:pointer;white-space:nowrap" onclick="toggleExportMenu()">📤 Export ▾</button>
      <div id="export-menu" style="display:none;position:absolute;top:110%;left:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;min-width:180px;z-index:999;box-shadow:0 4px 12px rgba(0,0,0,.15)">
        {% for fmt in export_formats %}
        <div style="padding:10px 14px;cursor:pointer"
             onmouseenter="this.style.background='var(--bg-secondary)'"
             onmouseleave="this.style.background=''"
             onclick="exportForm('{{ fmt.id }}')">{{ fmt.label }}</div>
        {% endfor %}
      </div>
    </div>
    <button style="padding:7px 14px;background:#c0392b;color:#fff;border:none;border-radius:6px;font-size:0.9rem;cursor:pointer;white-space:nowrap" onclick="deleteForm()">🗑 Delete</button>
    {% endif %}
    <select id="status-select" style="padding:7px 10px;border-radius:6px;border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-primary);white-space:nowrap">
      <option value="draft" {{ 'selected' if not form or form.status=='draft' }}>Draft</option>
      <option value="published" {{ 'selected' if form and form.status=='published' }}>Published</option>
      <option value="archived" {{ 'selected' if form and form.status=='archived' }}>Archived</option>
    </select>
  </div>

  <!-- 3-panel builder -->
  <div style="display:grid;grid-template-columns:200px 1fr 280px;gap:16px;height:calc(100vh - 200px)">

    <!-- Left: Field palette + Templates -->
    <div style="background:var(--bg-secondary);border-radius:8px;overflow-y:auto;padding:12px">
      <div style="font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:8px">Field Types</div>
      {% for ft in field_types %}
      <div class="field-type-btn"
           draggable="true"
           data-type="{{ ft.type }}"
           data-label="{{ ft.label }}"
           ondragstart="onPaletteDragStart(event)"
           style="display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;margin-bottom:4px;cursor:grab;background:var(--bg-primary);border:1px solid var(--border-color)">
        <span style="font-weight:700;width:18px;text-align:center;color:var(--accent-blue)">{{ ft.icon }}</span>
        <span style="font-size:0.85rem">{{ ft.label }}</span>
      </div>
      {% endfor %}

      <div style="margin-top:16px;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:8px">Templates</div>
      <select id="industry-filter" style="width:100%;padding:5px 8px;border-radius:5px;border:1px solid var(--border-color);margin-bottom:6px;font-size:0.8rem" onchange="filterTemplates()">
        {% for cat in industry_categories %}
        <option value="{{ cat }}">{{ cat }}</option>
        {% endfor %}
      </select>
      <!-- AI Chat: describe your form -->
      <div style="margin-top:16px">
        <div style="font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:6px">✨ AI: Describe Your Form</div>
        <textarea id="ai-describe" rows="3" placeholder="e.g. 'A patient intake form with name, DOB, insurance info, chief complaint, and allergy list'"
                  style="width:100%;padding:6px 8px;border-radius:5px;border:1px solid var(--border-color);font-size:0.8rem;resize:vertical;margin-bottom:6px"></textarea>
        <button class="btn btn-secondary" style="width:100%;font-size:0.82rem" onclick="generateFromDescription()">Generate Fields</button>
        <div id="ai-status" style="font-size:0.75rem;color:var(--text-secondary);margin-top:4px;display:none"></div>
      </div>

      <!-- Import existing form template -->
      <div style="margin-top:16px">
        <div style="font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:6px">📎 Import Template</div>
        <label style="display:block;border:1px dashed #4a5568;border-radius:6px;padding:10px;text-align:center;cursor:pointer;font-size:0.8rem;color:var(--text-secondary)" ondragover="event.preventDefault()" ondrop="handleImportDrop(event)">
          Upload PDF, DOCX, or Image
          <input type="file" id="import-file-input" accept=".pdf,.docx,.png,.jpg,.jpeg" style="display:none" onchange="importFormFromFile(this.files[0])">
        </label>
        <div id="import-status" style="font-size:0.75rem;color:var(--text-secondary);margin-top:4px;display:none"></div>
      </div>

      <div style="margin-top:16px;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:8px">Templates</div>
        {% for tpl in templates %}
        <div class="tpl-card" data-industry="{{ tpl.industry|default('All') }}" data-category="{{ tpl.category }}"
             data-tpl-id="{{ tpl.id }}"
             style="padding:8px 10px;border-radius:6px;margin-bottom:4px;background:var(--bg-primary);border:1px solid var(--border-color);cursor:pointer;font-size:0.82rem"
             onclick="loadTemplateById(this.dataset.tplId)">
          <div style="font-weight:600">{{ tpl.name }}</div>
          <div style="color:var(--text-secondary);font-size:0.75rem">{{ tpl.fields|length }} fields · {{ tpl.category }}</div>
        </div>
        {% endfor %}
    </div>

    <!-- Center: Drop zone canvas -->
    <div style="display:flex;flex-direction:column;gap:0">
      <div id="form-canvas"
           ondragover="event.preventDefault()"
           ondrop="onCanvasDrop(event)"
           style="flex:1;background:var(--bg-secondary);border-radius:8px;padding:16px;overflow-y:auto;min-height:400px;border:2px dashed transparent"
           onmouseover="this.style.borderColor='var(--accent-blue-light)'"
           onmouseout="this.style.borderColor='transparent'">
        <div id="canvas-empty" style="text-align:center;padding:60px 20px;color:var(--text-secondary)">
          <div style="font-size:2rem;margin-bottom:8px">📋</div>
          <div>Drag fields here or choose a template</div>
        </div>
        <div id="fields-container"></div>
      </div>
    </div>

    <!-- Right: Properties + Branding -->
    <div style="background:var(--bg-secondary);border-radius:8px;overflow-y:auto;padding:12px">

      <!-- Field properties (shown when a field is selected) -->
      <div id="field-props" style="display:none">
        <div style="font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:10px">Field Properties</div>
        <label style="font-size:0.82rem;display:block;margin-bottom:4px">Label</label>
        <input id="prop-label" type="text" style="width:100%;padding:6px 8px;border-radius:5px;border:1px solid var(--border-color);margin-bottom:8px" oninput="updateSelectedField()">
        <label style="font-size:0.82rem;display:block;margin-bottom:4px">Placeholder</label>
        <input id="prop-placeholder" type="text" style="width:100%;padding:6px 8px;border-radius:5px;border:1px solid var(--border-color);margin-bottom:8px" oninput="updateSelectedField()">
        <label style="font-size:0.82rem;display:flex;align-items:center;gap:6px;margin-bottom:8px">
          <input id="prop-required" type="checkbox" onchange="updateSelectedField()"> Required
        </label>
        <div id="prop-options-block" style="display:none">
          <label style="font-size:0.82rem;display:block;margin-bottom:4px">Options (one per line)</label>
          <textarea id="prop-options" rows="4" style="width:100%;padding:6px 8px;border-radius:5px;border:1px solid var(--border-color);font-size:0.82rem" oninput="updateSelectedField()"></textarea>
        </div>
        <hr style="border:none;border-top:1px solid var(--border-color);margin:12px 0">
      </div>

      <!-- Enterprise Branding -->
      <div>
        <div style="font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:10px">Enterprise Branding</div>
        <label style="font-size:0.82rem;display:block;margin-bottom:4px">Organization Name</label>
        <input id="brand-org" type="text" value="{{ branding.org_name or '' }}" placeholder="Acme Corp"
               style="width:100%;padding:6px 8px;border-radius:5px;border:1px solid var(--border-color);margin-bottom:8px">
        <label style="font-size:0.82rem;display:block;margin-bottom:4px">Logo (paste base64 or URL)</label>
        <input id="brand-logo" type="text" value="{{ branding.logo_data or '' }}" placeholder="data:image/png;base64,…"
               style="width:100%;padding:6px 8px;border-radius:5px;border:1px solid var(--border-color);margin-bottom:8px">
        <label style="font-size:0.82rem;display:block;margin-bottom:4px">Primary Color</label>
        <div style="display:flex;gap:6px;margin-bottom:8px">
          <input id="brand-color" type="color" value="{{ branding.primary_color or '#1a365d' }}" style="width:40px;height:32px;border:none;cursor:pointer">
          <input id="brand-color-hex" type="text" value="{{ branding.primary_color or '#1a365d' }}" placeholder="#1a365d"
                 style="flex:1;padding:6px 8px;border-radius:5px;border:1px solid var(--border-color)" oninput="syncColorHex()">
        </div>
        <label style="font-size:0.82rem;display:block;margin-bottom:4px">Header HTML</label>
        <textarea id="brand-header" rows="2" placeholder="<div>Custom header content</div>"
                  style="width:100%;padding:6px 8px;border-radius:5px;border:1px solid var(--border-color);font-size:0.8rem;margin-bottom:8px">{{ branding.header_html or '' }}</textarea>
        <label style="font-size:0.82rem;display:block;margin-bottom:4px">Footer HTML</label>
        <textarea id="brand-footer" rows="2" placeholder="<div>Confidential — CUI</div>"
                  style="width:100%;padding:6px 8px;border-radius:5px;border:1px solid var(--border-color);font-size:0.8rem;margin-bottom:8px">{{ branding.footer_html or '' }}</textarea>
        <label style="font-size:0.82rem;display:flex;align-items:center;gap:6px">
          <input id="brand-show-cls" type="checkbox" {{ 'checked' if branding.show_classification else '' }}> Show Classification Banner
        </label>
      </div>

    </div>
  </div>
</div>

<script>
const FORM_ID = {{ ('"' ~ form.form_id ~ '"') | safe if form else 'null' }};
const IS_NEW = {{ 'true' if is_new else 'false' }};
let fields = {{ (form._fields | tojson) if form and form._fields else '[]' }};
let selectedIdx = null;
const TEMPLATES_DATA = {{ templates | tojson }};
function loadTemplateById(id) {
  const tpl = TEMPLATES_DATA.find(t => t.id === id);
  if (tpl) loadTemplate(tpl);
}

// ── Render ────────────────────────────────────────────────────────────────────
function render() {
  const container = document.getElementById('fields-container');
  const empty = document.getElementById('canvas-empty');
  empty.style.display = fields.length ? 'none' : 'block';
  container.innerHTML = '';
  fields.forEach((f, i) => {
    const div = document.createElement('div');
    div.style.cssText = 'background:var(--bg-primary);border:2px solid ' + (i===selectedIdx ? 'var(--accent-blue)' : 'var(--border-color)') + ';border-radius:7px;padding:12px 14px;margin-bottom:8px;cursor:pointer;display:flex;align-items:center;justify-content:space-between';
    div.onclick = () => selectField(i);
    const left = document.createElement('div');
    left.innerHTML = '<div style="font-weight:600;font-size:0.9rem">' + escHtml(f.label||f.id||'Field') +
      (f.required ? ' <span style="color:#ef4444">*</span>' : '') +
      '</div><div style="font-size:0.75rem;color:var(--text-secondary)">' + (f.type||'text') + '</div>';
    const btns = document.createElement('div');
    btns.style.cssText = 'display:flex;gap:4px';
    btns.innerHTML = '<button onclick="moveField(' + i + ',-1,event)" style="background:none;border:1px solid var(--border-color);border-radius:4px;padding:2px 6px;cursor:pointer">↑</button>' +
      '<button onclick="moveField(' + i + ',1,event)" style="background:none;border:1px solid var(--border-color);border-radius:4px;padding:2px 6px;cursor:pointer">↓</button>' +
      '<button onclick="removeField(' + i + ',event)" style="background:none;border:1px solid #ef4444;border-radius:4px;padding:2px 6px;cursor:pointer;color:#ef4444">✕</button>';
    div.appendChild(left);
    div.appendChild(btns);
    container.appendChild(div);
  });
}

function escHtml(s) { const d=document.createElement('div');d.textContent=s;return d.innerHTML; }

// ── Field operations ──────────────────────────────────────────────────────────
function addField(type, label) {
  const id = 'f' + (Date.now());
  fields.push({id, type, label: label || capitalize(type), required: false});
  selectedIdx = fields.length - 1;
  render();
  updatePropsPanel();
}

function selectField(i) {
  selectedIdx = i;
  render();
  updatePropsPanel();
}

function removeField(i, evt) {
  evt.stopPropagation();
  fields.splice(i, 1);
  if (selectedIdx >= fields.length) selectedIdx = fields.length - 1;
  render();
  updatePropsPanel();
}

function moveField(i, dir, evt) {
  evt.stopPropagation();
  const j = i + dir;
  if (j < 0 || j >= fields.length) return;
  [fields[i], fields[j]] = [fields[j], fields[i]];
  selectedIdx = j;
  render();
}

function updateSelectedField() {
  if (selectedIdx === null || selectedIdx >= fields.length) return;
  const f = fields[selectedIdx];
  f.label = document.getElementById('prop-label').value;
  f.placeholder = document.getElementById('prop-placeholder').value;
  f.required = document.getElementById('prop-required').checked;
  const optsRaw = document.getElementById('prop-options').value;
  f.options = optsRaw ? optsRaw.split('\n').map(s=>s.trim()).filter(Boolean) : undefined;
  render();
}

function updatePropsPanel() {
  const panel = document.getElementById('field-props');
  if (selectedIdx === null || selectedIdx >= fields.length) { panel.style.display='none'; return; }
  panel.style.display = 'block';
  const f = fields[selectedIdx];
  document.getElementById('prop-label').value = f.label || '';
  document.getElementById('prop-placeholder').value = f.placeholder || '';
  document.getElementById('prop-required').checked = !!f.required;
  const hasOpts = ['select','multiselect'].includes(f.type);
  document.getElementById('prop-options-block').style.display = hasOpts ? 'block' : 'none';
  document.getElementById('prop-options').value = (f.options||[]).join('\n');
}

function capitalize(s) { return s.charAt(0).toUpperCase() + s.slice(1); }

// ── Drag & drop from palette ──────────────────────────────────────────────────
function onPaletteDragStart(evt) {
  evt.dataTransfer.setData('field-type', evt.currentTarget.dataset.type);
  evt.dataTransfer.setData('field-label', evt.currentTarget.dataset.label);
}

function onCanvasDrop(evt) {
  evt.preventDefault();
  const type = evt.dataTransfer.getData('field-type');
  const label = evt.dataTransfer.getData('field-label');
  if (type) addField(type, label);
}

// ── AI generation from description ───────────────────────────────────────────
async function generateFromDescription() {
  const desc = document.getElementById('ai-describe').value.trim();
  if (!desc) { alert('Please describe your form first.'); return; }
  const status = document.getElementById('ai-status');
  status.style.display = 'block';
  status.textContent = '⏳ Generating fields…';
  const industry = document.getElementById('industry-filter').value;
  try {
    const resp = await fetch('/workflow-canvas/api/forms/generate', {
      method: 'POST',
      headers: {'Content-Type':'application/json'},
      body: JSON.stringify({description: desc, industry}),
    });
    const data = await resp.json();
    if (data.error) { status.textContent = '❌ ' + data.error; return; }
    if (!data.fields || data.fields.length === 0) { status.textContent = '⚠️ No fields generated.'; return; }
    if (fields.length > 0 && !confirm('Replace current fields with AI-generated fields?')) return;
    fields = data.fields.map((f, i) => Object.assign({id: 'f'+(Date.now()+i)}, f));
    selectedIdx = null;
    render();
    updatePropsPanel();
    status.textContent = `✅ Generated ${data.count} fields`;
    document.getElementById('ai-describe').value = '';
  } catch (e) {
    status.textContent = '❌ Error: ' + e.message;
  }
}

// ── Import form from uploaded file ────────────────────────────────────────────
function handleImportDrop(evt) {
  evt.preventDefault();
  const file = evt.dataTransfer && evt.dataTransfer.files && evt.dataTransfer.files[0];
  if (file) importFormFromFile(file);
}

async function importFormFromFile(file) {
  if (!file) return;
  const status = document.getElementById('import-status');
  status.style.display = 'block';
  status.textContent = '⏳ Extracting & analyzing…';
  const formData = new FormData();
  formData.append('file', file);
  try {
    const resp = await fetch('/workflow-canvas/api/forms/import', {method: 'POST', body: formData});
    const data = await resp.json();
    if (data.error) { status.textContent = '❌ ' + data.error; return; }
    if (!data.fields || data.fields.length === 0) { status.textContent = '⚠️ No fields found in file.'; return; }
    if (fields.length > 0 && !confirm('Replace current fields with imported fields from "' + file.name + '"?')) return;
    fields = data.fields.map((f, i) => Object.assign({id: 'f'+(Date.now()+i)}, f));
    selectedIdx = null;
    render();
    updatePropsPanel();
    // Auto-fill form name from filename if still blank
    const nameInput = document.getElementById('form-name-input');
    if (!nameInput.value || nameInput.value === 'Untitled Form') {
      nameInput.value = data.source_file || file.name.replace(/\.[^.]+$/, '');
    }
    status.textContent = `✅ Imported ${data.count} fields — edit below`;
    document.getElementById('import-file-input').value = '';
  } catch (e) {
    status.textContent = '❌ Error: ' + e.message;
  }
}

// ── Templates ─────────────────────────────────────────────────────────────────
function loadTemplate(tpl) {
  if (fields.length > 0 && !confirm('Replace current fields with template "' + tpl.name + '"?')) return;
  fields = tpl.fields.map((f,i) => Object.assign({id:'f'+(Date.now()+i)}, f));
  // Only auto-fill name if the field is empty
  const nameInput = document.getElementById('form-name-input');
  if (!nameInput.value.trim()) nameInput.value = tpl.name;
  selectedIdx = null;
  render();
  updatePropsPanel();
}

function filterTemplates() {
  const val = document.getElementById('industry-filter').value;
  document.querySelectorAll('.tpl-card').forEach(el => {
    el.style.display = (val==='All' || el.dataset.industry===val || el.dataset.category.includes(val.toLowerCase().split('/')[0])) ? '' : 'none';
  });
}

// ── Branding ──────────────────────────────────────────────────────────────────
function syncColorHex() {
  const hex = document.getElementById('brand-color-hex').value;
  if (/^#[0-9a-fA-F]{6}$/.test(hex)) document.getElementById('brand-color').value = hex;
}
document.getElementById('brand-color').addEventListener('input', function() {
  document.getElementById('brand-color-hex').value = this.value;
});

function getBranding() {
  return {
    org_name: document.getElementById('brand-org').value,
    logo_data: document.getElementById('brand-logo').value,
    primary_color: document.getElementById('brand-color-hex').value,
    header_html: document.getElementById('brand-header').value,
    footer_html: document.getElementById('brand-footer').value,
    show_classification: document.getElementById('brand-show-cls').checked ? 1 : 0,
  };
}

// ── Save ──────────────────────────────────────────────────────────────────────
async function saveForm() {
  const name = document.getElementById('form-name-input').value.trim();
  if (!name) { alert('Please enter a form name.'); return; }
  const payload = {
    name,
    fields,
    status: document.getElementById('status-select').value,
    branding: getBranding(),
  };
  let url, method;
  if (IS_NEW || !FORM_ID) { url = '/workflow-canvas/api/forms'; method = 'POST'; }
  else { url = '/workflow-canvas/api/forms/' + FORM_ID; method = 'PATCH'; }

  const resp = await fetch(url, {method, headers:{'Content-Type':'application/json'}, body: JSON.stringify(payload)});
  const data = await resp.json();
  if (data.status === 'ok' || data.form_id) {
    const id = data.form_id || FORM_ID;
    window.location.href = '/workflow-canvas/forms/' + id;
  } else {
    alert(data.error || 'Save failed');
  }
}

// ── Delete ────────────────────────────────────────────────────────────────────
async function deleteForm() {
  if (!FORM_ID) return;
  if (!confirm('Delete this form? This cannot be undone.')) return;
  const resp = await fetch('/workflow-canvas/api/forms/' + FORM_ID, {method:'DELETE'});
  const data = await resp.json();
  if (data.status === 'ok') window.location.href = '/workflow-canvas/forms';
  else alert(data.error || 'Delete failed');
}

// ── Export ────────────────────────────────────────────────────────────────────
function toggleExportMenu() {
  const m = document.getElementById('export-menu');
  m.style.display = m.style.display === 'none' ? 'block' : 'none';
}
document.addEventListener('click', e => {
  if (!e.target.closest('#export-menu') && !e.target.matches('[onclick*="toggleExportMenu"]')) {
    const m = document.getElementById('export-menu');
    if (m) m.style.display = 'none';
  }
});

async function exportForm(fmt) {
  if (!FORM_ID) { alert('Save the form first.'); return; }
  const resp = await fetch('/workflow-canvas/api/forms/' + FORM_ID + '/export/' + fmt, {method:'POST'});
  if (!resp.ok) { const d = await resp.json(); alert(d.error || 'Export failed'); return; }
  const blob = await resp.blob();
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = (document.getElementById('form-name-input').value||'form') + '.' + fmt;
  a.click();
  URL.revokeObjectURL(url);
}

// ── Init ──────────────────────────────────────────────────────────────────────
// Check for fields pre-loaded from the library Import button (via sessionStorage)
(function() {
  try {
    const raw = sessionStorage.getItem('wfc_import');
    if (raw) {
      sessionStorage.removeItem('wfc_import');
      const payload = JSON.parse(raw);
      if (payload.fields && payload.fields.length > 0) {
        fields = payload.fields.map((f, i) => Object.assign({id: 'f'+(Date.now()+i)}, f));
        selectedIdx = null;
        const nameInput = document.getElementById('form-name-input');
        if ((!nameInput.value || nameInput.value === 'Untitled Form') && payload.source_file) {
          nameInput.value = payload.source_file;
        }
        const st = document.getElementById('import-status');
        st.style.display = 'block';
        st.textContent = `✅ Imported ${fields.length} fields — edit below`;
      }
    }
  } catch(e) {}
})();
render();
</script>
{% endblock %}