{% extends 'core/base.html' %}
{% load querystring %}
{% block content %}
<div class="mobile-create-nav gap-2 mb-3">
  <a class="btn btn-sm btn-primary flex-fill" href="{% url 'new_item' %}?kind=todo&next={{ request.get_full_path|urlencode }}">Aufgabe</a>
  <a class="btn btn-sm btn-secondary flex-fill" href="{% url 'new_item' %}?kind=note&next={{ request.get_full_path|urlencode }}">Notiz</a>
  <a class="btn btn-sm btn-success flex-fill" href="{% url 'new_item' %}?kind=link&next={{ request.get_full_path|urlencode }}">Link</a>
  <a class="btn btn-sm btn-info flex-fill" href="{% url 'new_item' %}?kind=journal&next={{ request.get_full_path|urlencode }}">Journal</a>
</div>
<div class="row g-4">
  <aside class="col-lg-3 order-lg-2">
    <div class="card item-card shadow-sm"><div class="card-body">
      <div class="fw-semibold mb-2">Filter</div>
      <div class="d-flex flex-wrap gap-2 mb-3">
        <a class="btn btn-sm {% if active_kind == 'todo' %}btn-primary{% else %}btn-outline-primary{% endif %}" href="{% if active_kind == 'todo' %}{% query_replace kind=None %}{% else %}{% query_replace kind='todo' %}{% endif %}">Todos{% if active_kind == 'todo' %} ×{% endif %}</a>
        <a class="btn btn-sm {% if active_kind == 'note' %}btn-secondary{% else %}btn-outline-secondary{% endif %}" href="{% if active_kind == 'note' %}{% query_replace kind=None %}{% else %}{% query_replace kind='note' %}{% endif %}">Notizen{% if active_kind == 'note' %} ×{% endif %}</a>
        <a class="btn btn-sm {% if active_kind == 'link' %}btn-success{% else %}btn-outline-success{% endif %}" href="{% if active_kind == 'link' %}{% query_replace kind=None %}{% else %}{% query_replace kind='link' %}{% endif %}">Links{% if active_kind == 'link' %} ×{% endif %}</a>
        <a class="btn btn-sm {% if active_status == 'open' %}btn-warning{% else %}btn-outline-warning{% endif %}" href="{% if active_status == 'open' %}{% query_replace status=None %}{% else %}{% query_replace status='open' %}{% endif %}">Unerledigt{% if active_status == 'open' %} ×{% endif %}</a>
        <a class="btn btn-sm {% if active_status == 'archive' %}btn-dark{% else %}btn-outline-dark{% endif %}" href="{% if active_status == 'archive' %}{% query_replace status=None %}{% else %}{% query_replace status='archive' %}{% endif %}">Archiv{% if active_status == 'archive' %} ×{% endif %}</a>
      </div>
      <form class="mb-3 position-relative" method="get" x-data="searchBox([{% for tag in tags %}'{{ tag.name|escapejs }}'{% if not forloop.last %},{% endif %}{% endfor %}])" x-on:keydown.window="if(($event.ctrlKey||$event.metaKey)&&$event.key==='f'){ $event.preventDefault(); $refs.search.focus(); $refs.search.select(); }">
        {% if active_tag %}<input type="hidden" name="tag" value="{{ active_tag }}">{% endif %}
        {% if active_kind %}<input type="hidden" name="kind" value="{{ active_kind }}">{% endif %}
        {% if active_status %}<input type="hidden" name="status" value="{{ active_status }}">{% endif %}
        <div class="input-group input-group-sm">
          <input x-ref="search" class="form-control" name="q" value="{{ q }}" placeholder="Suche (Ctrl+F, # für Tags)" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" @input="onInput($event)" @keydown="onKeydown($event)">
          {% if q %}<a class="btn btn-outline-secondary" href="{% query_replace q=None %}" title="Suche löschen">×</a>{% endif %}
        </div>
        <div class="slash-menu list-group shadow" x-show="open" @click.outside="open=false" x-cloak>
          <template x-for="(tag, idx) in filtered" :key="tag"><button type="button" class="list-group-item list-group-item-action" :class="{'active': idx === active}" @mouseenter="active=idx" @mousedown.prevent="select(tag)"><strong x-text="'#'+tag"></strong></button></template>
        </div>
      </form>
      <div class="d-none d-md-block">
        <div class="fw-semibold mb-2">Tags</div>
        <div hx-get="{% url 'tag_list' %}{% if request.GET.urlencode %}?{{ request.GET.urlencode }}{% endif %}" hx-trigger="tagsChanged from:body" hx-target="#tag-list" hx-swap="outerHTML">
          {% include 'core/_tags.html' %}
        </div>
      </div>
      <details class="d-md-none">
        <summary class="btn btn-sm btn-outline-secondary mb-2">Tags anzeigen</summary>
        <div class="d-flex flex-wrap gap-2">
          {% for tag in tags %}
            {% if active_tag == tag.name %}<a class="badge rounded-pill text-bg-dark text-decoration-none tag" href="{% query_replace tag=None %}">#{{ tag.name }} ×</a>{% else %}<a class="badge rounded-pill text-bg-light text-decoration-none tag" href="{% query_replace tag=tag.name %}">#{{ tag.name }}</a>{% endif %}
          {% empty %}<span class="text-muted small">Noch keine Tags</span>{% endfor %}
        </div>
      </details>
    </div></div>
  </aside>
  <section class="col-lg-9">
    <form class="desktop-quick-create position-relative mb-4" method="post" enctype="multipart/form-data" hx-post="{{ request.get_full_path }}" hx-target="#items" hx-swap="afterbegin" x-data="quickComposer([{% for tag in tags %}'{{ tag.name|escapejs }}'{% if not forloop.last %},{% endif %}{% endfor %}])" x-on:htmx:after-request="if($event.detail.successful){text='';open=false;$el.reset()}">
      {% csrf_token %}
      <div class="mobile-create-buttons gap-2 mb-2">
        <button type="button" class="btn btn-sm btn-primary flex-fill" @click="insert('/todo')">Aufgabe</button>
        <button type="button" class="btn btn-sm btn-secondary flex-fill" @click="$el.querySelector('textarea').focus()">Notiz</button>
        <button type="button" class="btn btn-sm btn-success flex-fill" @click="insert('/link')">Link</button>
        <button type="button" class="btn btn-sm btn-info flex-fill" @click="insert('/journal')">Journal</button>
      </div>
      <details class="mobile-tag-picker mb-2"><summary class="btn btn-sm btn-outline-secondary">Tags hinzufügen</summary><div class="mobile-tags flex-wrap gap-2 mt-2">{% for tag in tags %}<button type="button" class="btn btn-sm btn-outline-secondary" @click="addToken('#{{ tag.name|escapejs }}')">#{{ tag.name }}</button>{% endfor %}</div></details>
      {{ form.content }}
      <div class="slash-menu list-group shadow" x-show="open" @click.outside="open=false" x-cloak>
        <template x-for="(cmd, idx) in filtered" :key="cmd.token"><button type="button" class="list-group-item list-group-item-action" :class="{'active': idx === active}" @mouseenter="active=idx" @mousedown.prevent="insert(cmd.token)"><strong x-text="cmd.token"></strong> <span class="text-muted" x-text="cmd.label"></span></button></template>
      </div>
      <div class="d-flex align-items-center gap-2 mt-2 quick-actions">
        <input class="form-control desktop-file" type="file" name="files" multiple accept="image/*,.pdf,.txt,.md" x-ref="fileInput" @change="previewFile($event)">
        <div class="mobile-media gap-2 w-100"><label class="btn btn-outline-secondary flex-fill mb-0">Galerie<input class="d-none" type="file" name="files" multiple accept="image/*" @change="previewFile($event)"></label><label class="btn btn-outline-secondary flex-fill mb-0">Foto<input class="d-none" type="file" name="files" accept="image/*" capture="environment" @change="previewFile($event)"></label></div>
        <a class="btn btn-outline-secondary" href="{% url 'new_item' %}">Editor</a>
        <button class="btn btn-dark px-4">Speichern</button>
      </div>
      <template x-if="preview"><div class="mt-2 small"><span class="text-muted">Bild aus Zwischenablage:</span><br><img :src="preview" class="img-thumbnail mt-1" style="max-height:160px"></div></template>
    </form>
    <div id="items" class="vstack gap-3">
      {% for item in items %}{% include 'core/_item.html' %}{% empty %}<div class="text-center text-muted py-5">Noch nichts vorhanden.</div>{% endfor %}
    </div>
  </section>
</div>
<script>
function quickComposer(tags, itemId=null){
  return {
    open:false,
    text:'',
    active:0,
    query:'',
    currentEl:null,
    preview:null,
    linkSuggestions:[],
    attachmentSuggestions:[],
    pendingFiles:[],
    itemId:itemId,
    tags:tags||[],
    init(){
      document.body.addEventListener('htmx:afterRequest', (event) => {
        if(event.detail.successful && event.target === this.$el){ this.preview=null; }
      });
      document.body.addEventListener('tagsChanged', () => {
        fetch('{% url "api_tags" %}').then(r=>r.json()).then(data=>{this.tags=data.tags||[]});
      });
    },
    commands:[
      {token:'/todo',label:'Aufgabe erstellen'},
      {token:'/link',label:'Link speichern'},
      {token:'/journal',label:'Journal-Eintrag'},
      {token:'/public',label:'öffentlich'},
      {token:'/private',label:'privat'},
      {token:'/code',label:'Markdown Codeblock einfügen'},
      {token:'[[',label:'interne Aufgabe/Notiz suchen'},
      {token:'![[',label:'Bild aus Anhängen einfügen'}
    ],
    get filtered(){
      let q=this.query.toLowerCase();
      let list=q.startsWith('#')
        ? this.tags.filter(t=>('#'+t).toLowerCase().startsWith(q)).map(t=>({token:'#'+t,label:'Tag'}))
        : q.startsWith('![[')
          ? (this.itemId?this.attachmentSuggestions.map(a=>({token:`![[file:${a.id}]]`,label:`Bild: ${a.name}`})):this.pendingFiles.map(f=>({token:`![[paste:${f.name}]]`,label:`Bild: ${f.name}`})))
          : q.startsWith('[[')
            ? this.linkSuggestions.map(i=>({token:`[[${i.id}]]`,label:`${i.kind}: ${i.label}`}))
            : this.commands.filter(c=>!q||c.token.toLowerCase().startsWith(q));
      return list.length?list:[{token:this.query,label:'neu'}];
    },
    onInput(e){this.update(e.target)},
    handlePaste(e){
      let item=[...(e.clipboardData?.items||[])].find(i=>i.kind==='file'&&i.type.startsWith('image/'));
      if(!item) return;
      let file=item.getAsFile();
      let ext=(file.type.split('/')[1]||'png').replace('jpeg','jpg');
      let named=new File([file], `paste-${new Date().toISOString().replace(/[:.]/g,'-')}.${ext}`, {type:file.type});
      let dt=new DataTransfer();
      [...(this.$refs.fileInput.files||[])].forEach(f=>dt.items.add(f));
      dt.items.add(named);
      this.$refs.fileInput.files=dt.files;
      this.pendingFiles=[...dt.files].filter(f=>f.type.startsWith('image/'));
      this.preview=URL.createObjectURL(named);
    },
    previewFile(e){
      this.pendingFiles=[...e.target.files].filter(f=>f.type.startsWith('image/'));
      let file=this.pendingFiles[0];
      this.preview=file?URL.createObjectURL(file):null;
    },
    onKeydown(e){
      this.currentEl=e.target;
      if((e.ctrlKey||e.metaKey)&&e.key==='Enter'){
        e.preventDefault();
        this.open=false;
        e.target.form.requestSubmit();
        return;
      }
      if(this.open&&e.key==='ArrowDown'){
        e.preventDefault();
        this.active=(this.active+1)%this.filtered.length;
        return;
      }
      if(this.open&&e.key==='ArrowUp'){
        e.preventDefault();
        this.active=(this.active-1+this.filtered.length)%this.filtered.length;
        return;
      }
      if(this.open&&(e.key==='Enter'||e.key==='Tab')&&!e.shiftKey){
        e.preventDefault();
        this.insert(this.filtered[this.active].token);
        return;
      }
      if(e.key==='Escape'){
        this.open=false;
        return;
      }
      if(e.key===' '){
        this.open=false;
        return;
      }
      setTimeout(()=>this.update(e.target),0);
    },
    update(el){
      this.currentEl=el;
      this.text=el.value;
      let before=el.value.slice(0,el.selectionStart);
      let fragment=(before.match(/(^|\s)([^\s]*)$/)||['','',''])[2];
      this.query=fragment;
      this.active=0;
      this.open=fragment.startsWith('/')||fragment.startsWith('#')||fragment.startsWith('[[')||fragment.startsWith('![[');
      if(fragment.startsWith('![[')&&this.itemId){
        fetch(`/api/attachment-suggestions/?item=${this.itemId}`).then(r=>r.json()).then(data=>{this.attachmentSuggestions=data.attachments||[]});
      }else if(fragment.startsWith('[[')){
        let q=fragment.slice(2);
        fetch(`{% url "api_item_suggestions" %}?q=${encodeURIComponent(q)}`).then(r=>r.json()).then(data=>{this.linkSuggestions=data.items||[]});
      }
    },
    addToken(token){
      let el=this.currentEl || document.getElementById('id_content');
      if(!el) return;
      let pos=el.selectionStart??el.value.length;
      let before=el.value.slice(0,pos);
      let after=el.value.slice(pos);
      let prefix=before&&!before.endsWith(' ')&&!before.endsWith('\n')?' ':'';
      let value=before+prefix+token+' '+after;
      this.text=value;
      el.value=value;
      this.showTags=false;
      this.$nextTick(()=>{let p=before.length+prefix.length+token.length+1;el.focus();el.setSelectionRange(p,p)})
    },
    insert(token){
      let el=this.currentEl || document.getElementById('id_content');
      if(!el) return;
      let isCode=token==='/code';
      if(isCode) token='```\n\n```';
      let pos=el.selectionStart;
      let before=el.value.slice(0,pos);
      let after=el.value.slice(pos);
      let match=before.match(/(^|\s)([^\s]*)$/);
      let start=match?pos-match[2].length:pos;
      let needsPrefix=start>0&&el.value[start-1]!=='\n'&&el.value[start-1]!==' ';
      let prefix=isCode?(start>0&&el.value[start-1]!=='\n'?'\n':''):(needsPrefix?' ':'');
      let suffix=isCode?'':' ';
      let value=el.value.slice(0,start)+prefix+token+suffix+after;
      this.text=value;
      el.value=value;
      this.open=false;
      this.$nextTick(()=>{
        let p=isCode?start+prefix.length+4:start+prefix.length+token.length+suffix.length;
        el.focus();
        el.setSelectionRange(p,p);
      });
    }
  }
}
</script>
{% endblock %}