{% extends "base.html" %}
{% block content %}
<div class="toolbar privacy-toolbar">
  <div>
    <h1>{{ t('privacy.title') }}</h1>
    <p class="muted">{{ t('privacy.intro') }}</p>
  </div>
  <div class="toolbar-actions">
    <a class="button button-secondary" href="/settings/privacy/export.txt">{{ t('privacy.export_text') }}</a>
    <a class="button button-secondary" href="/settings/privacy/export.html">{{ t('privacy.export_html') }}</a>
    <a class="button" href="/settings/privacy/export.xlsx">{{ t('privacy.export_excel') }}</a>
  </div>
</div>

<div class="notice warning privacy-phase-notice">
  <strong>{{ t('privacy.phase2_title') }}</strong>
  {{ t('privacy.phase2_help') }}
</div>
{% if not can_edit %}<div class="notice info"><strong>{{ t('privacy.read_only_title') }}</strong> {{ t('privacy.read_only_help') }}</div>{% endif %}

<form method="post" action="/settings/privacy" class="settings-form privacy-settings-form" data-privacy-readonly="{{ 'false' if can_edit else 'true' }}">
  {% set activity = privacy_settings.processing_activity %}
  <section class="settings-section">
    <h2>{{ t('privacy.processing_activity') }}</h2>
    <div class="form-grid two-columns">
      <label>{{ t('privacy.activity_title') }}<input type="text" name="title" value="{{ activity.title }}" required></label>
      <label>{{ t('privacy.document_version') }}<input type="text" name="document_version" value="{{ activity.document_version }}"></label>
      <label>{{ t('privacy.controller') }}<input type="text" name="controller" value="{{ activity.controller }}"></label>
      <label>{{ t('privacy.responsible_department') }}<input type="text" name="responsible_department" value="{{ activity.responsible_department }}"></label>
      <label>{{ t('privacy.responsible_people') }}<input type="text" name="responsible_people" value="{{ activity.responsible_people }}"></label>
      <label>{{ t('privacy.data_protection_contact') }}<input type="text" name="data_protection_contact" value="{{ activity.data_protection_contact }}"></label>
    </div>
    <label>{{ t('privacy.legal_basis') }}<textarea name="legal_basis" rows="3">{{ activity.legal_basis }}</textarea></label>
    <label>{{ t('privacy.data_subject_groups') }}<textarea name="data_subject_groups" rows="3">{{ activity.data_subject_groups }}</textarea></label>
  </section>

  <section class="settings-section">
    <div class="settings-section-heading">
      <div><h2>{{ t('privacy.purposes') }}</h2><p class="muted">{{ t('privacy.purposes_help') }}</p></div>
      <button type="button" class="button-secondary" data-add-list-row="purposes-list">{{ t('common.add', 'Add') }}</button>
    </div>
    <div id="purposes-list" class="repeatable-list">
      {% for value in activity.purposes %}
      <div class="repeatable-row"><input type="text" name="purposes" value="{{ value }}"><button type="button" class="button-danger button-small" data-remove-row>×</button></div>
      {% endfor %}
    </div>
  </section>

  <section class="settings-section">
    <h2>{{ t('privacy.recipients_transfers') }}</h2>
    <div class="form-grid two-columns">
      <label>{{ t('privacy.internal_recipients') }}<textarea name="internal_recipients" rows="3">{{ activity.internal_recipients }}</textarea></label>
      <label>{{ t('privacy.external_recipients') }}<textarea name="external_recipients" rows="3">{{ activity.external_recipients }}</textarea></label>
    </div>
    <label class="checkbox-label"><input class="checkbox" type="checkbox" name="third_country_transfer" {% if activity.third_country_transfer %}checked{% endif %}> {{ t('privacy.third_country_transfer') }}</label>
    <label>{{ t('privacy.third_country_details') }}<textarea name="third_country_details" rows="3">{{ activity.third_country_details }}</textarea></label>
  </section>

  <section class="settings-section">
    <h2>{{ t('privacy.systems_backups') }}</h2>
    <label>{{ t('privacy.systems') }}<textarea name="systems" rows="3">{{ activity.systems }}</textarea></label>
    <div class="form-grid two-columns">
      <label>{{ t('privacy.backup_system') }}<input type="text" name="backup_system" value="{{ activity.backup_system }}"></label>
      <label>{{ t('privacy.backup_retention_days') }}<input type="number" min="0" max="36500" name="backup_retention_days" value="{{ activity.backup_retention_days if activity.backup_retention_days is not none else '' }}"></label>
    </div>
    <label>{{ t('privacy.restore_deletion_procedure') }}<textarea name="restore_deletion_procedure" rows="3">{{ activity.restore_deletion_procedure }}</textarea></label>
  </section>

  <section class="settings-section privacy-category-section">
    <div class="settings-section-heading">
      <div><h2>{{ t('privacy.data_categories') }}</h2><p class="muted">{{ t('privacy.data_categories_tabs_help') }}</p></div>
      {% if can_edit %}<button type="button" class="button-secondary" id="add-privacy-category">{{ t('privacy.add_category') }}</button>{% endif %}
    </div>
    <div class="privacy-category-workbook" data-category-workbook>
      <div class="privacy-category-tabs" role="tablist" aria-label="{{ t('privacy.data_categories') }}" data-category-tabs>
        {% for category in privacy_settings.categories %}
        <button type="button" class="privacy-category-tab{% if loop.first %} active{% endif %}" role="tab" aria-selected="{{ 'true' if loop.first else 'false' }}" aria-controls="privacy-category-panel-{{ loop.index0 }}" data-category-tab>
          <span data-category-tab-title>{{ category.name }}</span>{% if category.is_system %}<span class="privacy-system-badge" title="{{ t('privacy.system_category_help') }}">🔒</span>{% endif %}
        </button>
        {% endfor %}
      </div>
      <div id="privacy-category-list" class="privacy-category-panels" data-category-panels>
        {% for category in privacy_settings.categories %}
        <section id="privacy-category-panel-{{ loop.index0 }}" class="privacy-category-panel{% if loop.first %} active{% endif %}" role="tabpanel" {% if not loop.first %}hidden{% endif %} data-category-panel>
          <input type="hidden" name="category_key" value="{{ category.key }}">
          <div class="form-grid two-columns">
            <label>{{ t('privacy.category_name') }}<input type="text" name="category_name" value="{{ category.name }}" data-category-name></label>
            <label>{{ t('privacy.system') }}<input type="text" name="category_system" value="{{ category.system }}"></label>
          </div>
          <label>{{ t('privacy.data_subjects') }}<textarea name="category_data_subjects" rows="2">{{ category.data_subjects }}</textarea></label>
          <label>{{ t('privacy.personal_data') }}<textarea name="category_personal_data" rows="3">{{ category.personal_data }}</textarea></label>
          <label>{{ t('privacy.purpose') }}<textarea name="category_purpose" rows="2">{{ category.purpose }}</textarea></label>
          <div class="form-grid three-columns">
            <label>{{ t('privacy.retention_type') }}
              <select name="category_retention_type">
                {% for value, key in [
                  ('days','privacy.retention_days_type'),
                  ('manual_parent_delete','privacy.retention_manual_parent'),
                  ('overwrite_parent_delete','privacy.retention_overwrite_parent'),
                  ('external_days','privacy.retention_external_days'),
                  ('external_manual','privacy.retention_external_manual'),
                  ('external_overwrite_parent_delete','privacy.retention_external_overwrite'),
                  ('not_stored','privacy.retention_not_stored'),
                  ('manual','privacy.retention_manual')
                ] %}<option value="{{ value }}" {% if category.retention_type == value %}selected{% endif %}>{{ t(key) }}</option>{% endfor %}
              </select>
            </label>
            <label>{{ t('privacy.retention_days') }}<input type="number" min="0" max="36500" name="category_retention_days" value="{{ category.retention_days if category.retention_days is not none else '' }}"></label>
            <label>{{ t('privacy.automatic_possible') }}
              <select name="category_automatic_possible"><option value="0" {% if not category.automatic_possible %}selected{% endif %}>{{ t('common.no') }}</option><option value="1" {% if category.automatic_possible %}selected{% endif %}>{{ t('common.yes') }}</option></select>
            </label>
          </div>
          <label>{{ t('privacy.retention_trigger') }}<textarea name="category_retention_trigger" rows="2">{{ category.retention_trigger }}</textarea></label>
          <label>{{ t('privacy.manual_procedure') }}<textarea name="category_manual_procedure" rows="3">{{ category.manual_procedure }}</textarea></label>
          <label>{{ t('privacy.backup_handling') }}<textarea name="category_backup_handling" rows="2">{{ category.backup_handling }}</textarea></label>
          <div class="form-grid two-columns">
            <label>{{ t('privacy.responsible') }}<input type="text" name="category_responsible" value="{{ category.responsible }}"></label>
            <label>{{ t('privacy.notes') }}<textarea name="category_notes" rows="2">{{ category.notes }}</textarea></label>
          </div>
          <div class="privacy-retention-actions">
            {% if category.is_system %}<span class="muted privacy-system-note">🔒 {{ t('privacy.system_category_help') }}</span>{% endif %}
            {% if can_edit and category.key in implemented_retention_keys %}
              <button type="button" class="button-secondary" data-retention-check-url="/settings/privacy/retention/{{ category.key }}/check">{{ t('privacy.run_check') }}</button>
              <button type="button" class="button-danger" data-retention-delete-url="/settings/privacy/retention/{{ category.key }}/delete" data-category-name="{{ category.name }}">{{ t('privacy.run_manual_deletion') }}</button>
            {% elif category.automatic_possible %}
              <span class="muted">{{ t('privacy.handler_not_implemented') }}</span>
            {% endif %}
            {% if can_edit and not category.is_system %}<button type="button" class="button-danger" data-remove-category>{{ t('privacy.remove_category') }}</button>{% endif %}
          </div>
          {% set preview = preview_results.get(category.key) %}
          {% if preview %}
          <div class="notice info privacy-preview-result">
            <strong>{{ t('privacy.check_result') }}</strong>
            <span>{{ t('privacy.matched_records') }}: {{ preview.matched_records or 0 }}</span>
            <span>{{ t('privacy.approx_size') }}: {{ ((preview.approx_bytes or 0) / 1024 / 1024)|round(2) }} MB</span>
            <span>{{ t('privacy.cutoff') }}: {{ preview.cutoff_utc or '-' }}</span>
            {% if not preview.supported %}<span>{{ preview.reason }}</span>{% endif %}
          </div>
          {% endif %}
        </section>
        {% endfor %}
      </div>
    </div>
  </section>

  <section class="settings-section">
    <div class="settings-section-heading">
      <div><h2>{{ t('privacy.toms') }}</h2><p class="muted">{{ t('privacy.toms_help') }}</p></div>
      <button type="button" class="button-secondary" data-add-list-row="toms-list">{{ t('common.add', 'Add') }}</button>
    </div>
    <div id="toms-list" class="repeatable-list">
      {% for value in activity.toms %}
      <div class="repeatable-row"><textarea name="toms" rows="2">{{ value }}</textarea><button type="button" class="button-danger button-small" data-remove-row>×</button></div>
      {% endfor %}
    </div>
  </section>

  <section class="settings-section">
    <h2>{{ t('privacy.review') }}</h2>
    <div class="form-grid three-columns">
      <label>{{ t('privacy.review_interval_months') }}<input type="number" min="1" max="120" name="review_interval_months" value="{{ activity.review_interval_months }}"></label>
      <label>{{ t('privacy.last_reviewed_at') }}<input type="date" name="last_reviewed_at" value="{{ activity.last_reviewed_at }}"></label>
      <label>{{ t('privacy.approved_by') }}<input type="text" name="approved_by" value="{{ activity.approved_by }}"></label>
    </div>
  </section>

  {% if can_edit %}<div class="form-actions sticky-form-actions"><button type="submit" class="button-save">{{ t('common.save') }}</button></div>{% endif %}
</form>

<section class="settings-section">
  <h2>{{ t('privacy.policy_audit') }}</h2>
  <p class="muted">{{ t('privacy.policy_audit_help') }}</p>
  <div class="table-wrap"><table class="data-table" data-table-tools="true"><thead><tr><th>{{ t('common.date') }}</th><th>{{ t('privacy.action') }}</th><th>{{ t('privacy.changed_by') }}</th><th>{{ t('privacy.details') }}</th></tr></thead><tbody>
  {% for row in privacy_audit %}<tr><td data-local-datetime="{{ row.timestamp_utc }}">{{ row.timestamp_utc }}</td><td>{{ row.action }}</td><td>{{ row.changed_by }}</td><td><code>{{ row.details }}</code></td></tr>{% else %}<tr><td colspan="4" class="muted">{{ t('privacy.no_audit_entries') }}</td></tr>{% endfor %}
  </tbody></table></div>
</section>

<section class="settings-section">
  <h2>{{ t('privacy.deletion_audit') }}</h2>
  <p class="muted">{{ t('privacy.deletion_audit_help') }}</p>
  <div class="table-wrap"><table class="data-table" data-table-tools="true"><thead><tr><th>{{ t('common.date') }}</th><th>{{ t('privacy.run_id') }}</th><th>{{ t('privacy.action') }}</th><th>{{ t('privacy.category_name') }}</th><th>{{ t('privacy.changed_by') }}</th><th>{{ t('privacy.details') }}</th></tr></thead><tbody>
  {% for row in deletion_audit %}<tr><td data-local-datetime="{{ row.timestamp_utc }}">{{ row.timestamp_utc }}</td><td><code>{{ row.run_id }}</code></td><td>{{ row.action }}</td><td>{{ row.category_key }}</td><td>{{ row.changed_by }}</td><td><code>{{ row.result }}</code></td></tr>{% else %}<tr><td colspan="6" class="muted">{{ t('privacy.no_deletion_entries') }}</td></tr>{% endfor %}
  </tbody></table></div>
</section>

<template id="privacy-category-template">
  <section class="privacy-category-panel" role="tabpanel" hidden data-category-panel>
    <input type="hidden" name="category_key" value="">
    <div class="form-grid two-columns">
      <label>{{ t('privacy.category_name') }}<input type="text" name="category_name" value="" data-category-name></label>
      <label>{{ t('privacy.system') }}<input type="text" name="category_system" value=""></label>
    </div>
    <label>{{ t('privacy.data_subjects') }}<textarea name="category_data_subjects" rows="2"></textarea></label>
    <label>{{ t('privacy.personal_data') }}<textarea name="category_personal_data" rows="3"></textarea></label>
    <label>{{ t('privacy.purpose') }}<textarea name="category_purpose" rows="2"></textarea></label>
    <div class="form-grid three-columns">
      <label>{{ t('privacy.retention_type') }}
        <select name="category_retention_type">
          <option value="days">{{ t('privacy.retention_days_type') }}</option>
          <option value="manual_parent_delete">{{ t('privacy.retention_manual_parent') }}</option>
          <option value="overwrite_parent_delete">{{ t('privacy.retention_overwrite_parent') }}</option>
          <option value="external_days">{{ t('privacy.retention_external_days') }}</option>
          <option value="external_manual">{{ t('privacy.retention_external_manual') }}</option>
          <option value="external_overwrite_parent_delete">{{ t('privacy.retention_external_overwrite') }}</option>
          <option value="not_stored">{{ t('privacy.retention_not_stored') }}</option>
          <option value="manual" selected>{{ t('privacy.retention_manual') }}</option>
        </select>
      </label>
      <label>{{ t('privacy.retention_days') }}<input type="number" min="0" max="36500" name="category_retention_days"></label>
      <label>{{ t('privacy.automatic_possible') }}<select name="category_automatic_possible"><option value="0">{{ t('common.no') }}</option><option value="1">{{ t('common.yes') }}</option></select></label>
    </div>
    <label>{{ t('privacy.retention_trigger') }}<textarea name="category_retention_trigger" rows="2"></textarea></label>
    <label>{{ t('privacy.manual_procedure') }}<textarea name="category_manual_procedure" rows="3"></textarea></label>
    <label>{{ t('privacy.backup_handling') }}<textarea name="category_backup_handling" rows="2"></textarea></label>
    <div class="form-grid two-columns"><label>{{ t('privacy.responsible') }}<input type="text" name="category_responsible"></label><label>{{ t('privacy.notes') }}<textarea name="category_notes" rows="2"></textarea></label></div>
    <div class="form-actions"><button type="button" class="button-danger" data-remove-category>{{ t('privacy.remove_category') }}</button></div>
  </section>
</template>

<script>
(() => {
  const privacyForm = document.querySelector('.privacy-settings-form');
  const readOnly = privacyForm?.dataset.privacyReadonly === 'true';
  if (readOnly) {
    privacyForm.querySelectorAll('input, textarea').forEach(control => {
      if (control.type === 'hidden') return;
      control.readOnly = true;
      control.setAttribute('aria-readonly', 'true');
    });
    privacyForm.querySelectorAll('select').forEach(control => {
      control.disabled = true;
    });
    privacyForm.querySelectorAll('button:not([data-category-tab])').forEach(control => {
      control.disabled = true;
    });
  }
  document.addEventListener('click', event => {
    const checkButton = event.target.closest('[data-retention-check-url]');
    const deleteButton = event.target.closest('[data-retention-delete-url]');
    const url = checkButton?.dataset.retentionCheckUrl || deleteButton?.dataset.retentionDeleteUrl;
    if (!url) return;
    event.preventDefault();
    let confirmation = '';
    if (deleteButton) {
      const categoryName = deleteButton.dataset.categoryName || '';
      confirmation = window.prompt({{ t('privacy.delete_confirmation_prompt')|tojson }}.replace('{category}', categoryName), '');
      if (confirmation === null) return;
    }
    const form = document.createElement('form');
    form.method = 'post';
    form.action = url;
    if (deleteButton) {
      const input = document.createElement('input');
      input.type = 'hidden';
      input.name = 'confirmation';
      input.value = confirmation;
      form.appendChild(input);
    }
    document.body.appendChild(form);
    form.submit();
  });

  const workbook = document.querySelector('[data-category-workbook]');
  const tabs = workbook?.querySelector('[data-category-tabs]');
  const panels = workbook?.querySelector('[data-category-panels]');
  const newCategoryLabel = {{ t('privacy.new_category')|tojson }};
  let nextPanelId = document.querySelectorAll('[data-category-panel]').length;

  const activate = panel => {
    if (!panel || !tabs || !panels) return;
    panels.querySelectorAll('[data-category-panel]').forEach(item => {
      const active = item === panel;
      item.classList.toggle('active', active);
      item.hidden = !active;
    });
    tabs.querySelectorAll('[data-category-tab]').forEach(tab => {
      const active = tab.getAttribute('aria-controls') === panel.id;
      tab.classList.toggle('active', active);
      tab.setAttribute('aria-selected', active ? 'true' : 'false');
      tab.tabIndex = active ? 0 : -1;
    });
    tabs.querySelector(`[aria-controls="${CSS.escape(panel.id)}"]`)?.scrollIntoView({block: 'nearest', inline: 'nearest'});
  };

  const createTab = (panel, title) => {
    if (!tabs) return null;
    const tab = document.createElement('button');
    tab.type = 'button';
    tab.className = 'privacy-category-tab';
    tab.setAttribute('role', 'tab');
    tab.setAttribute('aria-selected', 'false');
    tab.setAttribute('aria-controls', panel.id);
    tab.tabIndex = -1;
    const label = document.createElement('span');
    label.dataset.categoryTabTitle = '';
    label.textContent = title || newCategoryLabel;
    tab.appendChild(label);
    tabs.appendChild(tab);
    return tab;
  };

  const bindPanel = panel => {
    if (!panel || panel.dataset.bound === 'true') return;
    panel.dataset.bound = 'true';
    const nameInput = panel.querySelector('[data-category-name]');
    const tab = tabs?.querySelector(`[aria-controls="${CSS.escape(panel.id)}"]`);
    nameInput?.addEventListener('input', () => {
      const label = tab?.querySelector('[data-category-tab-title]');
      if (label) label.textContent = nameInput.value.trim() || newCategoryLabel;
    });
    panel.querySelector('[data-remove-category]')?.addEventListener('click', () => {
      const allPanels = [...panels.querySelectorAll('[data-category-panel]')];
      const index = allPanels.indexOf(panel);
      const fallback = allPanels[index + 1] || allPanels[index - 1] || null;
      tab?.remove();
      panel.remove();
      if (fallback) activate(fallback);
    });
  };

  tabs?.addEventListener('click', event => {
    const tab = event.target.closest('[data-category-tab]');
    if (!tab) return;
    activate(document.getElementById(tab.getAttribute('aria-controls')));
  });
  tabs?.addEventListener('keydown', event => {
    const tab = event.target.closest('[data-category-tab]');
    if (!tab || !['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
    const allTabs = [...tabs.querySelectorAll('[data-category-tab]')];
    let index = allTabs.indexOf(tab);
    if (event.key === 'ArrowLeft') index = (index - 1 + allTabs.length) % allTabs.length;
    if (event.key === 'ArrowRight') index = (index + 1) % allTabs.length;
    if (event.key === 'Home') index = 0;
    if (event.key === 'End') index = allTabs.length - 1;
    event.preventDefault();
    allTabs[index]?.focus();
    allTabs[index]?.click();
  });

  document.querySelectorAll('[data-category-panel]').forEach(bindPanel);
  const initiallyActive = document.querySelector('[data-category-panel].active') || document.querySelector('[data-category-panel]');
  if (initiallyActive) activate(initiallyActive);

  const bindRemoveRows = root => root.querySelectorAll('[data-remove-row]').forEach(button => button.onclick = () => button.closest('.repeatable-row')?.remove());
  bindRemoveRows(document);
  document.querySelectorAll('[data-add-list-row]').forEach(button => button.addEventListener('click', () => {
    const list = document.getElementById(button.dataset.addListRow);
    if (!list) return;
    const name = list.id === 'purposes-list' ? 'purposes' : 'toms';
    const row = document.createElement('div');
    row.className = 'repeatable-row';
    row.innerHTML = name === 'purposes'
      ? `<input type="text" name="${name}"><button type="button" class="button-danger button-small" data-remove-row>×</button>`
      : `<textarea name="${name}" rows="2"></textarea><button type="button" class="button-danger button-small" data-remove-row>×</button>`;
    list.appendChild(row);
    bindRemoveRows(row);
  }));

  document.getElementById('add-privacy-category')?.addEventListener('click', () => {
    const template = document.getElementById('privacy-category-template');
    if (!template || !panels || !tabs) return;
    const fragment = template.content.cloneNode(true);
    const panel = fragment.querySelector('[data-category-panel]');
    panel.id = `privacy-category-panel-${nextPanelId++}`;
    panels.appendChild(fragment);
    const inserted = panels.lastElementChild;
    createTab(inserted, newCategoryLabel);
    bindPanel(inserted);
    activate(inserted);
    inserted.querySelector('[data-category-name]')?.focus();
  });
})();
</script>
{% endblock %}