{% extends "base.html" %}
{% block page_title %}{{ workspace_name }}{% endblock %}
{% block page_icon %}📁{% endblock %}

{% block topbar %}
<header class="topbar">
  <div class="topbar-left">
    <span class="breadcrumb" style="color:rgba(255,255,255,.5)">Workspace</span>
    <span class="page-title-topbar">{{ workspace_name }}</span>
  </div>
  <div class="topbar-right"></div>
</header>
{% endblock %}

{% block content %}
<style>
.ws-layout{max-width:800px;margin:0 auto;padding:40px 24px;}
.ws-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
.ws-header h1{font-size:24px;}
.ws-toolbar{display:flex;gap:8px;}

.ws-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;cursor:pointer;transition:background 150ms;border:1px solid transparent;}
.ws-item:hover{background:var(--bg-tertiary);border-color:var(--border);}
.ws-item .icon{font-size:18px;width:24px;text-align:center;}
.ws-item .name{flex:1;font-size:14px;color:var(--text);}
.ws-item .actions{display:flex;gap:4px;opacity:0;transition:opacity 150ms;}
.ws-item:hover .actions{opacity:1;}
.ws-act{background:none;border:none;color:var(--text-tertiary);cursor:pointer;padding:4px 8px;border-radius:4px;font-size:12px;}
.ws-act:hover{background:var(--bg-hover);color:var(--text);}
.ws-act.danger:hover{color:var(--danger);}

.empty-state{text-align:center;padding:80px 20px;color:var(--text-tertiary);}
.empty-state .empty-icon{font-size:64px;margin-bottom:16px;opacity:.5;}
.empty-state h2{font-size:18px;color:var(--text-secondary);margin-bottom:8px;}
.empty-state p{font-size:13px;margin-bottom:24px;max-width:400px;margin-left:auto;margin-right:auto;}
.empty-actions{display:flex;gap:10px;justify-content:center;}

.btn{padding:10px 20px;border-radius:8px;font-size:13px;cursor:pointer;border:none;font-weight:500;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-hover);}
.btn-secondary{background:var(--bg-tertiary);color:var(--text);border:1px solid var(--border);}
.btn-secondary:hover{background:var(--bg-hover);}
.btn-danger{background:rgba(255,80,80,.1);color:var(--danger);}
.btn-danger:hover{background:rgba(255,80,80,.2);}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:999;backdrop-filter:blur(4px);}
.modal-box{background:#1F1F1F;border:1px solid var(--border-strong);border-radius:16px;padding:28px;width:420px;max-width:90vw;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.modal-box h3{font-size:16px;margin-bottom:6px;display:flex;align-items:center;gap:8px;}
.modal-box .modal-sub{font-size:12px;color:var(--text-tertiary);margin-bottom:20px;}
.modal-input{width:100%;padding:12px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:14px;outline:none;}
.modal-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(35,131,226,.15);}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;}
.delete-confirm{padding:12px;background:rgba(255,80,80,.08);border-radius:8px;margin-top:12px;font-size:13px;color:var(--text-secondary);}
</style>

<div class="ws-layout" x-data="wsPage()">

  <div class="ws-header">
    <h1>📁 {{ workspace_name }}</h1>
    <div class="ws-toolbar">
      <button class="btn btn-primary" @click="openCreateModal('file')">📄 New File</button>
      <button class="btn btn-secondary" @click="openCreateModal('folder')">📁 New Folder</button>
    </div>
  </div>

  <!-- File/Folder list -->
  <div x-show="items.length">
    <template x-for="item in items" :key="item.id">
      <div class="ws-item">
        <span class="icon" x-text="item.icon"></span>
        <span class="name" x-text="item.name" @dblclick="rename(item)"></span>
        <div class="actions">
          <button class="ws-act" @click="openItem(item)" title="Open">Open</button>
          <button class="ws-act" @click="rename(item)" title="Rename">✏️</button>
          <button class="ws-act danger" @click="confirmDelete(item)" title="Delete">🗑</button>
        </div>
      </div>
    </template>
  </div>

  <!-- Empty state -->
  <div class="empty-state" x-show="!items.length">
    <div class="empty-icon">📁</div>
    <h2>Empty workspace</h2>
    <p>Create a new file to start writing, or a folder to organize your content</p>
    <div class="empty-actions">
      <button class="btn btn-primary" @click="openCreateModal('file')">📄 New File</button>
      <button class="btn btn-secondary" @click="openCreateModal('folder')">📁 New Folder</button>
    </div>
  </div>

  <!-- Create Modal (shared for file and folder) -->
  <div class="modal-overlay" x-show="showCreateModal" @click.away="showCreateModal=false" @keydown.escape="showCreateModal=false">
    <div class="modal-box">
      <h3>
        <span x-text="createType==='folder'?'📁':'📄'"></span>
        <span x-text="createType==='folder'?'New Folder':'New File'"></span>
      </h3>
      <p class="modal-sub">
        Create in <strong>{{ workspace_name }}</strong>
        <span x-show="parentFolder"> / <span x-text="parentFolder.name"></span></span>
      </p>
      <input class="modal-input" x-model="newName" :placeholder="createType==='folder'?'Folder name':'File name'" @keydown.enter="doCreate" x-ref="createInput">
      <div class="modal-actions">
        <button class="btn btn-secondary" @click="showCreateModal=false">Cancel</button>
        <button class="btn btn-primary" @click="doCreate" :disabled="!newName.trim()">Create</button>
      </div>
    </div>
  </div>

  <!-- Rename Modal -->
  <div class="modal-overlay" x-show="showRenameModal" @click.away="showRenameModal=false" @keydown.escape="showRenameModal=false">
    <div class="modal-box">
      <h3>✏️ Rename</h3>
      <p class="modal-sub">Rename <strong x-text="renameTarget?.name"></strong></p>
      <input class="modal-input" x-model="newName" @keydown.enter="doRename" x-ref="renameInput">
      <div class="modal-actions">
        <button class="btn btn-secondary" @click="showRenameModal=false">Cancel</button>
        <button class="btn btn-primary" @click="doRename">Rename</button>
      </div>
    </div>
  </div>

  <!-- Delete Confirm Modal -->
  <div class="modal-overlay" x-show="showDeleteModal" @click.away="showDeleteModal=false" @keydown.escape="showDeleteModal=false">
    <div class="modal-box">
      <h3>🗑 Delete</h3>
      <p class="modal-sub">Delete <strong x-text="deleteTarget?.name"></strong>?</p>
      <div class="delete-confirm">This cannot be undone. All content will be permanently deleted.</div>
      <div class="modal-actions">
        <button class="btn btn-secondary" @click="showDeleteModal=false">Cancel</button>
        <button class="btn btn-danger" @click="doDelete">Delete</button>
      </div>
    </div>
  </div>

</div>

<script>
function wsPage() {
  return {
    items: [],
    showCreateModal: false,
    showRenameModal: false,
    showDeleteModal: false,
    createType: 'file',
    newName: '',
    parentFolder: null,
    renameTarget: null,
    deleteTarget: null,

    async init() { await this.load(); },

    async load() {
      try {
        const r = await fetch('/api/local-workspace/tree');
        const data = await r.json();
        const flat = [];
        for (const node of (data.tree || [])) {
          flat.push({id:node.id, name:node.name, icon:node.type==='folder'?'📁':'📄', type:node.type, parentId:null});
          for (const child of (node.children || [])) {
            flat.push({id:child.id, name:'  '+child.name, icon:'📄', type:'page', parentId:node.id});
          }
        }
        this.items = flat;
      } catch(e) { console.error(e); }
    },

    openCreateModal(type, parent) {
      this.createType = type;
      this.parentFolder = parent || null;
      this.newName = '';
      this.showCreateModal = true;
      this.$nextTick(() => {
        const el = this.$refs.createInput;
        if (el) setTimeout(() => el.focus(), 100);
      });
    },

    async doCreate() {
      if (!this.newName.trim()) return;
      const body = { name: this.newName.trim(), type: this.createType };
      if (this.parentFolder) body.parent_id = this.parentFolder.id;
      const r = await fetch('/api/local-workspace/items', {
        method:'POST', headers:{'Content-Type':'application/json'},
        body: JSON.stringify(body)
      });
      if (r.ok) {
        this.newName = ''; this.showCreateModal = false; this.parentFolder = null;
        await this.load();
      } else {
        const e = await r.json();
        alert(e.error || 'Failed to create');
      }
    },

    async createFileOrFolder(type, name) {
      // Used by sidebar buttons
      return await fetch('/api/local-workspace/items', {
        method:'POST', headers:{'Content-Type':'application/json'},
        body: JSON.stringify({ name, type })
      });
    },

    openItem(item) {
      window.location = `/pages/${item.id}`;
    },

    rename(item) {
      this.renameTarget = item;
      this.newName = item.name.trim();
      this.showRenameModal = true;
      this.$nextTick(() => {
        const el = this.$refs.renameInput;
        if (el) setTimeout(() => el.focus(), 100);
      });
    },

    async doRename() {
      if (!this.newName.trim() || !this.renameTarget) return;
      await fetch(`/api/local-workspace/items/${this.renameTarget.id}`, {
        method:'PUT', headers:{'Content-Type':'application/json'},
        body: JSON.stringify({name:this.newName.trim()})
      });
      this.showRenameModal = false; this.renameTarget = null; this.newName = '';
      await this.load();
    },

    confirmDelete(item) {
      this.deleteTarget = item;
      this.showDeleteModal = true;
    },

    async doDelete() {
      if (!this.deleteTarget) return;
      await fetch(`/api/local-workspace/items/${this.deleteTarget.id}`, {method:'DELETE'});
      this.showDeleteModal = false; this.deleteTarget = null;
      await this.load();
    }
  };
}
</script>
{% endblock %}