<div x-data="proyectoDetalle({{ .proyecto.ID }}, '{{ .proyecto.Slug }}')" x-init="init()" class="p-6">

  <!-- Header del proyecto -->
  <div class="flex items-center gap-3 mb-6">
    <a href="/app/proyectos" class="text-slate-400 hover:text-slate-600">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
    </a>
    <span class="w-4 h-4 rounded-full border" :style="`background:{{ .proyecto.Color }}`"></span>
    <div>
      <h1 class="text-xl font-bold text-slate-800">{{ .proyecto.Nombre }}</h1>
      <p class="text-xs text-slate-400">{{ if .proyecto.Cliente.Empresa }}{{ .proyecto.Cliente.Empresa }}{{ else if .proyecto.Cliente.Nombre }}{{ .proyecto.Cliente.Nombre }}{{ end }} &middot; slug: <code>{{ .proyecto.Slug }}</code></p>
    </div>
    <div class="ml-auto flex items-center gap-3">
      {{ if eq .proyecto.Estado "activo" }}<span class="badge badge-green">Activo</span>{{ else if eq .proyecto.Estado "pausado" }}<span class="badge badge-yellow">Pausado</span>{{ else if eq .proyecto.Estado "completado" }}<span class="badge badge-slate">Completado</span>{{ else }}<span class="badge badge-slate">{{ .proyecto.Estado }}</span>{{ end }}
      <span class="text-sm text-slate-500">
        <strong>{{ .proyecto.Progreso }}%</strong> completado
      </span>
    </div>
  </div>

  <!-- Tabs -->
  <div class="flex border-b border-slate-200 mb-6 gap-0">
    <template x-for="tab in ['Fases','Avances','Entregables','Documentos','Tickets']" :key="tab">
      <button @click="activeTab=tab" :class="activeTab===tab ? 'border-b-2 font-semibold text-primary' : 'text-slate-500'" class="px-4 py-2 text-sm border-b-2 border-transparent -mb-px transition-colors" x-text="tab" :style="activeTab===tab ? 'border-color:#8eb02f;color:#8eb02f' : ''"></button>
    </template>
  </div>

  <!-- ─── Tab Fases ─────────────────────────────────────────────────────────── -->
  <div x-show="activeTab==='Fases'" x-cloak>
    <div class="flex justify-between mb-4">
      <h2 class="font-semibold text-slate-700">Fases del proyecto</h2>
      <div class="flex gap-2">
        <button @click="applyTemplate()" class="btn-secondary text-xs">Aplicar plantilla</button>
        <button @click="openFaseModal()" class="btn-primary text-xs">+ Agregar fase</button>
      </div>
    </div>
    <div class="space-y-2">
      <template x-for="f in fases" :key="f.ID">
        <div class="bg-white border border-slate-200 rounded-xl p-4 flex items-start gap-4">
          <div class="flex-1">
            <div class="flex items-center gap-2 mb-1">
              <span class="text-xs font-bold text-slate-400" x-text="`#${f.orden}`"></span>
              <span class="font-semibold text-slate-800 text-sm" x-text="f.nombre"></span>
              <span class="badge" :class="faseBadgeClass(f.estado)" x-text="f.estado"></span>
            </div>
            <p class="text-xs text-slate-500" x-text="f.descripcion"></p>
            <div class="flex gap-4 mt-1 text-xs text-slate-400">
              <span x-show="f.fecha_estimada">Est: <span x-text="formatDate(f.fecha_estimada)"></span></span>
              <span x-show="f.fecha_completado">Completado: <span x-text="formatDate(f.fecha_completado)"></span></span>
            </div>
          </div>
          <div class="flex gap-1">
            <button @click="editFase(f)" class="btn-icon text-yellow-500"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg></button>
            <button @click="deleteFase(f.ID)" class="btn-icon text-red-500"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg></button>
          </div>
        </div>
      </template>
      <p x-show="fases.length===0" class="text-slate-400 text-sm text-center py-8">Sin fases. Agrega o aplica la plantilla por defecto.</p>
    </div>
  </div>

  <!-- ─── Tab Avances ───────────────────────────────────────────────────────── -->
  <div x-show="activeTab==='Avances'" x-cloak>
    <div class="flex justify-between mb-4">
      <h2 class="font-semibold text-slate-700">Avances y actualizaciones</h2>
      <button @click="openAvanceModal()" class="btn-primary text-xs">+ Publicar avance</button>
    </div>
    <div class="space-y-3">
      <template x-for="av in avances" :key="av.ID">
        <div class="bg-white border border-slate-200 rounded-xl p-4">
          <div class="flex items-start justify-between">
            <div>
              <span class="badge" :class="avanceBadgeClass(av.tipo)" x-text="av.tipo"></span>
              <h3 class="font-semibold text-slate-800 mt-1" x-text="av.titulo"></h3>
              <p class="text-sm text-slate-600 mt-1" x-text="av.contenido"></p>
            </div>
            <div class="flex gap-1 ml-4">
              <button @click="toggleAvanceVisible(av)"
                :title="av.visible ? 'Visible en portal · clic para ocultar' : 'Oculto en portal · clic para publicar'"
                class="btn-icon flex items-center gap-1 px-2 py-1 rounded-lg text-xs font-medium border transition-colors"
                :class="av.visible ? 'text-green-600 border-green-200 bg-green-50 hover:bg-green-100' : 'text-slate-400 border-slate-200 bg-slate-50 hover:bg-slate-100'">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                <span x-text="av.visible ? 'Visible' : 'Oculto'"></span>
              </button>
              <button @click="deleteAvance(av.ID)" class="btn-icon text-red-400"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg></button>
            </div>
          </div>
          <p class="text-xs text-slate-400 mt-2" x-text="formatDate(av.CreatedAt)"></p>
        </div>
      </template>
      <p x-show="avances.length===0" class="text-slate-400 text-sm text-center py-8">Sin avances publicados.</p>
    </div>
  </div>

  <!-- ─── Tab Entregables ───────────────────────────────────────────────────── -->
  <div x-show="activeTab==='Entregables'" x-cloak>
    <div class="flex justify-between mb-4">
      <h2 class="font-semibold text-slate-700">Entregables</h2>
      <button @click="openEntregableModal()" class="btn-primary text-xs">+ Subir entregable</button>
    </div>
    <div class="space-y-2">
      <template x-for="e in entregables" :key="e.ID">
        <div class="bg-white border border-slate-200 rounded-xl p-4 flex items-center gap-4">
          <div class="flex-1">
            <div class="font-semibold text-sm text-slate-800" x-text="e.nombre"></div>
            <div class="text-xs text-slate-500" x-text="e.descripcion"></div>
            <div class="text-xs text-slate-400 mt-1" x-text="`v${e.version} · ${formatBytes(e.tamanio)} · ${e.original_name}`"></div>
          </div>
          <div class="flex items-center gap-2">
            <button @click="toggleEntregableVisible(e)" :title="e.visible ? 'Visible al cliente' : 'Oculto'" class="btn-icon" :class="e.visible ? 'text-green-500' : 'text-slate-300'">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
            </button>
            <a :href="`/app/proyectos/{{ .proyecto.ID }}/entregables/${e.ID}/download`" class="btn-icon text-blue-500">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
            </a>
            <button @click="deleteEntregable(e.ID)" class="btn-icon text-red-400"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg></button>
          </div>
        </div>
      </template>
      <p x-show="entregables.length===0" class="text-slate-400 text-sm text-center py-8">Sin entregables.</p>
    </div>
  </div>

  <!-- ─── Tab Documentos ────────────────────────────────────────────────────── -->
  <div x-show="activeTab==='Documentos'" x-cloak>
    <div class="flex justify-between mb-4">
      <h2 class="font-semibold text-slate-700">Contratos y órdenes de servicio</h2>
      <button @click="openDocumentoModal()" class="btn-primary text-xs">+ Subir documento</button>
    </div>
    <div class="space-y-2">
      <template x-for="d in documentos" :key="d.ID">
        <div class="bg-white border border-slate-200 rounded-xl p-4 flex items-center gap-4">
          <div class="flex-shrink-0 w-9 h-9 rounded-lg flex items-center justify-center" :style="docTipoColor(d.tipo)">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
          </div>
          <div class="flex-1 min-w-0">
            <div class="font-semibold text-sm text-slate-800" x-text="d.nombre"></div>
            <div class="flex items-center gap-2 mt-0.5">
              <span class="badge" :class="docBadgeClass(d.tipo)" x-text="docTipoLabel(d.tipo)"></span>
              <span class="text-xs text-slate-400" x-text="formatBytes(d.tamanio)"></span>
              <span class="text-xs text-slate-400" x-text="formatDate(d.CreatedAt)"></span>
            </div>
            <div class="text-xs text-slate-500 mt-0.5" x-text="d.descripcion"></div>
          </div>
          <div class="flex items-center gap-2 flex-shrink-0">
            <a :href="`/app/proyectos/{{ .proyecto.ID }}/documentos/${d.ID}/download`" class="btn-icon text-blue-500" title="Descargar">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
            </a>
            <button @click="deleteDocumento(d.ID)" class="btn-icon text-red-400" title="Eliminar">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
            </button>
          </div>
        </div>
      </template>
      <p x-show="documentos.length===0" class="text-slate-400 text-sm text-center py-8">Sin documentos. Sube un contrato u orden de servicio.</p>
    </div>
  </div>

  <!-- ─── Tab Tickets ───────────────────────────────────────────────────────── -->
  <div x-show="activeTab==='Tickets'" x-cloak>
    <div class="flex justify-between mb-4">
      <h2 class="font-semibold text-slate-700">Tickets de soporte</h2>
    </div>
    <div class="space-y-3">
      <template x-for="t in tickets" :key="t.ID">
        <div class="bg-white border border-slate-200 rounded-xl overflow-hidden">
          <div class="p-4 flex items-start justify-between cursor-pointer" @click="t._open = !t._open">
            <div>
              <div class="flex items-center gap-2 mb-1">
                <span class="badge" :class="ticketBadge(t.estado)" x-text="t.estado"></span>
                <span class="badge" :class="prioridadBadge(t.prioridad)" x-text="t.prioridad"></span>
              </div>
              <h3 class="font-semibold text-sm text-slate-800" x-text="t.titulo"></h3>
              <p class="text-xs text-slate-500" x-text="`Por: ${t.autor_nombre} · ${formatDate(t.CreatedAt)}`"></p>
            </div>
            <div class="flex items-center gap-2">
              <select @click.stop @change="cambiarEstado(t, $event.target.value)" class="input-field text-xs py-1">
                <option value="abierto" :selected="t.estado==='abierto'">Abierto</option>
                <option value="en_progreso" :selected="t.estado==='en_progreso'">En progreso</option>
                <option value="resuelto" :selected="t.estado==='resuelto'">Resuelto</option>
                <option value="cerrado" :selected="t.estado==='cerrado'">Cerrado</option>
              </select>
            </div>
          </div>
          <!-- Thread -->
          <div x-show="t._open" class="border-t border-slate-100 px-4 pb-4">
            <p class="text-sm text-slate-600 py-3 border-b border-slate-100" x-text="t.descripcion"></p>
            <template x-if="t.mensajes && t.mensajes.length">
              <div class="space-y-2 mt-3">
                <template x-for="m in t.mensajes" :key="m.ID">
                  <div class="flex gap-2" :class="m.es_admin ? 'justify-end' : ''">
                    <div :class="m.es_admin ? 'bg-primary/10 text-slate-700' : 'bg-slate-100 text-slate-700'" class="rounded-xl px-3 py-2 text-sm max-w-sm">
                      <div class="text-xs font-semibold mb-1" x-text="m.autor_nombre" :style="m.es_admin ? 'color:#8eb02f' : 'color:#64748b'"></div>
                      <span x-text="m.contenido"></span>
                    </div>
                  </div>
                </template>
              </div>
            </template>
            <!-- Responder -->
            <div class="mt-3 flex gap-2">
              <input :x-model="`replyText_${t.ID}`" x-model="t._reply" type="text" placeholder="Escribir respuesta..." class="input-field flex-1 text-sm">
              <button @click="responder(t)" class="btn-primary text-xs">Enviar</button>
            </div>
          </div>
        </div>
      </template>
      <p x-show="tickets.length===0" class="text-slate-400 text-sm text-center py-8">Sin tickets.</p>
    </div>
  </div>

  <!-- ─── Modal Fase ────────────────────────────────────────────────────────── -->
  <div x-show="showFaseModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
    <div @click.outside="showFaseModal=false" class="bg-white rounded-2xl shadow-2xl w-full max-w-lg mx-4 p-6">
      <h2 class="text-lg font-bold mb-4" x-text="faseEditId ? 'Editar fase' : 'Nueva fase'"></h2>
      <form @submit.prevent="saveFase()">
        <div class="grid grid-cols-2 gap-3">
          <div class="col-span-2"><label class="label">Nombre</label><input x-model="faseForm.nombre" class="input-field w-full" required></div>
          <div class="col-span-2"><label class="label">Descripción</label><textarea x-model="faseForm.descripcion" class="input-field w-full" rows="2"></textarea></div>
          <div><label class="label">Orden</label><input x-model.number="faseForm.orden" type="number" class="input-field w-full"></div>
          <div>
            <label class="label">Estado</label>
            <select x-model="faseForm.estado" class="input-field w-full">
              <option value="pendiente">Pendiente</option>
              <option value="en_progreso">En progreso</option>
              <option value="completado">Completado</option>
              <option value="bloqueado">Bloqueado</option>
            </select>
          </div>
          <div><label class="label">Fecha estimada</label><input x-model="faseForm.fecha_estimada" type="date" class="input-field w-full"></div>
        </div>
        <div class="flex justify-end gap-3 mt-4">
          <button type="button" @click="showFaseModal=false" class="btn-secondary">Cancelar</button>
          <button type="submit" :disabled="saving" class="btn-primary" x-text="saving?'Guardando...':'Guardar'"></button>
        </div>
      </form>
    </div>
  </div>

  <!-- ─── Modal Avance ──────────────────────────────────────────────────────── -->
  <div x-show="showAvanceModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
    <div @click.outside="showAvanceModal=false" class="bg-white rounded-2xl shadow-2xl w-full max-w-lg mx-4 p-6">
      <h2 class="text-lg font-bold mb-4">Publicar avance</h2>
      <form @submit.prevent="saveAvance()">
        <div class="space-y-3">
          <div>
            <label class="label">Tipo</label>
            <select x-model="avanceForm.tipo" class="input-field w-full">
              <option value="update">Actualización</option>
              <option value="milestone">Hito</option>
              <option value="nota">Nota</option>
              <option value="alerta">Alerta</option>
            </select>
          </div>
          <div><label class="label">Título</label><input x-model="avanceForm.titulo" class="input-field w-full" required></div>
          <div><label class="label">Contenido</label><textarea x-model="avanceForm.contenido" class="input-field w-full" rows="3" required></textarea></div>
        </div>
        <div class="flex justify-end gap-3 mt-4">
          <button type="button" @click="showAvanceModal=false" class="btn-secondary">Cancelar</button>
          <button type="submit" :disabled="saving" class="btn-primary" x-text="saving?'Guardando...':'Publicar'"></button>
        </div>
      </form>
    </div>
  </div>

  <!-- ─── Modal Entregable ──────────────────────────────────────────────────── -->
  <div x-show="showEntregableModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
    <div @click.outside="showEntregableModal=false" class="bg-white rounded-2xl shadow-2xl w-full max-w-lg mx-4 p-6">
      <h2 class="text-lg font-bold mb-4">Subir entregable</h2>
      <form @submit.prevent="saveEntregable()" enctype="multipart/form-data">
        <div class="space-y-3">
          <div><label class="label">Nombre</label><input x-model="entregableForm.nombre" class="input-field w-full" required placeholder="Ej: Diseño final v2"></div>
          <div><label class="label">Descripción</label><input x-model="entregableForm.descripcion" class="input-field w-full"></div>
          <div><label class="label">Versión</label><input x-model="entregableForm.version" class="input-field w-full" placeholder="1.0"></div>
          <div><label class="label">Archivo</label><input type="file" @change="entregableFile=$event.target.files[0]" class="input-field w-full" required></div>
        </div>
        <p x-show="entregableError" x-text="entregableError" class="text-red-500 text-sm mt-2"></p>
        <div class="flex justify-end gap-3 mt-4">
          <button type="button" @click="showEntregableModal=false" class="btn-secondary">Cancelar</button>
          <button type="submit" :disabled="saving" class="btn-primary" x-text="saving?'Subiendo...':'Subir'"></button>
        </div>
      </form>
    </div>
  </div>

  <!-- ─── Modal Documento ────────────────────────────────────────────────────── -->
  <div x-show="showDocumentoModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
    <div @click.outside="showDocumentoModal=false" class="bg-white rounded-2xl shadow-2xl w-full max-w-lg mx-4 p-6">
      <h2 class="text-lg font-bold mb-4">Subir documento</h2>
      <form @submit.prevent="saveDocumento()" enctype="multipart/form-data">
        <div class="space-y-3">
          <div>
            <label class="label">Tipo</label>
            <select x-model="documentoForm.tipo" class="input-field w-full">
              <option value="contrato">Contrato</option>
              <option value="orden_servicio">Orden de servicio</option>
              <option value="otro">Otro</option>
            </select>
          </div>
          <div><label class="label">Nombre</label><input x-model="documentoForm.nombre" class="input-field w-full" placeholder="Ej: Contrato firmado cliente"></div>
          <div><label class="label">Descripción</label><input x-model="documentoForm.descripcion" class="input-field w-full" placeholder="Opcional"></div>
          <div><label class="label">Archivo</label><input type="file" @change="documentoFile=$event.target.files[0]" class="input-field w-full" required accept=".pdf,.doc,.docx,.png,.jpg,.jpeg,.xlsx,.xls"></div>
        </div>
        <p x-show="documentoError" x-text="documentoError" class="text-red-500 text-sm mt-2"></p>
        <div class="flex justify-end gap-3 mt-4">
          <button type="button" @click="showDocumentoModal=false" class="btn-secondary">Cancelar</button>
          <button type="submit" :disabled="saving" class="btn-primary" x-text="saving?'Subiendo...':'Subir'"></button>
        </div>
      </form>
    </div>
  </div>

  <!-- Toast -->
  <div x-show="toast.show" x-cloak x-transition
    class="fixed bottom-6 right-6 z-50 px-5 py-3 rounded-xl shadow-lg text-white text-sm font-medium flex items-center gap-2"
    :class="toast.type === 'error' ? 'bg-red-500' : 'bg-[#8eb02f]'">
    <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
      <path x-show="toast.type !== 'error'" stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
      <path x-show="toast.type === 'error'" stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
    </svg>
    <span x-text="toast.msg"></span>
  </div>

</div>

<script>
function proyectoDetalle(proyectoId, slug) {
  return {
    proyectoId, slug,
    activeTab: 'Fases',
    fases: [], avances: [], entregables: [], tickets: [], documentos: [],
    saving: false,
    showFaseModal: false, faseEditId: null,
    faseForm: { nombre:'', descripcion:'', estado:'pendiente', orden:1, fecha_estimada:'' },
    showAvanceModal: false,
    avanceForm: { tipo:'update', titulo:'', contenido:'', visible:true },
    showEntregableModal: false,
    entregableForm: { nombre:'', descripcion:'', version:'1.0' },
    entregableFile: null, entregableError:'',
    showDocumentoModal: false,
    documentoForm: { tipo:'contrato', nombre:'', descripcion:'' },
    documentoFile: null, documentoError:'',
    toast: { show: false, msg: '', type: 'ok' },

    async init() {
      await Promise.all([this.loadFases(), this.loadAvances(), this.loadEntregables(), this.loadTickets(), this.loadDocumentos()]);
    },

    async loadFases() {
      const r = await axios.get(`/app/proyectos/${this.proyectoId}/fases`);
      this.fases = r.data || [];
    },
    async loadAvances() {
      const r = await axios.get(`/app/proyectos/${this.proyectoId}/avances`);
      this.avances = r.data || [];
    },
    async loadEntregables() {
      const r = await axios.get(`/app/proyectos/${this.proyectoId}/entregables`);
      this.entregables = r.data || [];
    },
    async loadTickets() {
      const r = await axios.get(`/app/proyectos/${this.proyectoId}/tickets`);
      this.tickets = (r.data || []).map(t => ({ ...t, _open: false, _reply: '' }));
    },
    async loadDocumentos() {
      const r = await axios.get(`/app/proyectos/${this.proyectoId}/documentos`);
      this.documentos = r.data || [];
    },

    // ─── Fases ───
    openFaseModal() { this.faseEditId=null; this.faseForm={nombre:'',descripcion:'',estado:'pendiente',orden:this.fases.length+1,fecha_estimada:''}; this.showFaseModal=true; },
    editFase(f) { this.faseEditId=f.ID; this.faseForm={nombre:f.nombre,descripcion:f.descripcion||'',estado:f.estado,orden:f.orden,fecha_estimada:f.fecha_estimada?f.fecha_estimada.substring(0,10):''}; this.showFaseModal=true; },
    async saveFase() {
      this.saving=true;
      try {
        if(this.faseEditId) await axios.put(`/app/proyectos/${this.proyectoId}/fases/${this.faseEditId}`, this.faseForm);
        else await axios.post(`/app/proyectos/${this.proyectoId}/fases`, this.faseForm);
        this.showFaseModal=false;
        await this.loadFases();
      } finally { this.saving=false; }
    },
    async deleteFase(id) {
      if(!confirm('¿Eliminar esta fase?')) return;
      await axios.delete(`/app/proyectos/${this.proyectoId}/fases/${id}`);
      await this.loadFases();
    },
    async applyTemplate() {
      if(!confirm('Esto reemplazará todas las fases actuales con la plantilla. ¿Continuar?')) return;
      const r = await axios.post(`/app/proyectos/${this.proyectoId}/fases/template`);
      this.fases = r.data || [];
    },

    // ─── Avances ───
    openAvanceModal() { this.avanceForm={tipo:'update',titulo:'',contenido:'',visible:true}; this.showAvanceModal=true; },
    async saveAvance() {
      this.saving=true;
      try {
        await axios.post(`/app/proyectos/${this.proyectoId}/avances`, this.avanceForm);
        this.showAvanceModal=false;
        await this.loadAvances();
      } finally { this.saving=false; }
    },
    async deleteAvance(id) {
      if(!confirm('¿Eliminar avance?')) return;
      await axios.delete(`/app/proyectos/${this.proyectoId}/avances/${id}`);
      await this.loadAvances();
    },
    async toggleAvanceVisible(av) {
      const nuevoEstado = !av.visible;
      await axios.put(`/app/proyectos/${this.proyectoId}/avances/${av.ID}`, {...av, visible:nuevoEstado});
      await this.loadAvances();
      this.showToast(nuevoEstado ? 'Avance visible en el portal del cliente' : 'Avance oculto en el portal del cliente');
    },

    // ─── Entregables ───
    openEntregableModal() { this.entregableForm={nombre:'',descripcion:'',version:'1.0'}; this.entregableFile=null; this.entregableError=''; this.showEntregableModal=true; },
    async saveEntregable() {
      if(!this.entregableFile) { this.entregableError='Selecciona un archivo'; return; }
      this.saving=true; this.entregableError='';
      try {
        const fd = new FormData();
        fd.append('nombre', this.entregableForm.nombre);
        fd.append('descripcion', this.entregableForm.descripcion);
        fd.append('version', this.entregableForm.version);
        fd.append('archivo', this.entregableFile);
        await axios.post(`/app/proyectos/${this.proyectoId}/entregables`, fd, { headers:{'Content-Type':'multipart/form-data'} });
        this.showEntregableModal=false;
        await this.loadEntregables();
      } catch(e) {
        this.entregableError = e.response?.data?.error || 'Error al subir';
      } finally { this.saving=false; }
    },
    async deleteEntregable(id) {
      if(!confirm('¿Eliminar entregable?')) return;
      await axios.delete(`/app/proyectos/${this.proyectoId}/entregables/${id}`);
      await this.loadEntregables();
    },
    async toggleEntregableVisible(e) {
      await axios.put(`/app/proyectos/${this.proyectoId}/entregables/${e.ID}/visibilidad`, {visible: !e.visible});
      await this.loadEntregables();
    },

    // ─── Documentos ───
    openDocumentoModal() { this.documentoForm={tipo:'contrato',nombre:'',descripcion:''}; this.documentoFile=null; this.documentoError=''; this.showDocumentoModal=true; },
    async saveDocumento() {
      if(!this.documentoFile) { this.documentoError='Selecciona un archivo'; return; }
      this.saving=true; this.documentoError='';
      try {
        const fd = new FormData();
        fd.append('tipo', this.documentoForm.tipo);
        fd.append('nombre', this.documentoForm.nombre);
        fd.append('descripcion', this.documentoForm.descripcion);
        fd.append('archivo', this.documentoFile);
        await axios.post(`/app/proyectos/${this.proyectoId}/documentos`, fd, { headers:{'Content-Type':'multipart/form-data'} });
        this.showDocumentoModal=false;
        await this.loadDocumentos();
      } catch(e) {
        this.documentoError = e.response?.data?.error || 'Error al subir';
      } finally { this.saving=false; }
    },
    async deleteDocumento(id) {
      if(!confirm('¿Eliminar este documento?')) return;
      await axios.delete(`/app/proyectos/${this.proyectoId}/documentos/${id}`);
      await this.loadDocumentos();
    },
    docBadgeClass(t) { return {contrato:'badge-blue',orden_servicio:'badge-green',otro:'badge-slate'}[t]||'badge-slate'; },
    docTipoLabel(t) { return {contrato:'Contrato',orden_servicio:'Orden de servicio',otro:'Otro'}[t]||t; },
    docTipoColor(t) { const m={contrato:'background:#dbeafe;color:#1d4ed8',orden_servicio:'background:#dcfce7;color:#15803d',otro:'background:#f1f5f9;color:#475569'}; return m[t]||m.otro; },

    // ─── Tickets ───
    async cambiarEstado(t, estado) {
      await axios.put(`/app/proyectos/${this.proyectoId}/tickets/${t.ID}/estado`, {estado});
      t.estado = estado;
    },
    async responder(t) {
      if(!t._reply?.trim()) return;
      const r = await axios.post(`/app/proyectos/${this.proyectoId}/tickets/${t.ID}/mensaje`, {contenido: t._reply});
      if(!t.mensajes) t.mensajes=[];
      t.mensajes.push(r.data);
      t._reply='';
    },

    showToast(msg, type = 'ok') {
      this.toast = { show: true, msg, type };
      setTimeout(() => { this.toast.show = false; }, 3000);
    },

    // ─── Helpers ───
    faseBadgeClass(e) { return {pendiente:'badge-slate',en_progreso:'badge-yellow',completado:'badge-green',bloqueado:'badge-red'}[e]||'badge-slate'; },
    avanceBadgeClass(t) { return {update:'badge-blue',milestone:'badge-green',nota:'badge-slate',alerta:'badge-yellow'}[t]||'badge-slate'; },
    ticketBadge(e) { return {abierto:'badge-red',en_progreso:'badge-yellow',resuelto:'badge-green',cerrado:'badge-slate'}[e]||'badge-slate'; },
    prioridadBadge(p) { return {alta:'badge-red',media:'badge-yellow',baja:'badge-green'}[p]||'badge-slate'; },
    estadoColor(e) { return {activo:'green',pausado:'yellow',completado:'slate',cancelado:'red'}[e]||'slate'; },
    formatDate(d) { if(!d) return ''; return new Date(d).toLocaleDateString('es-CO',{day:'2-digit',month:'short',year:'numeric'}); },
    formatBytes(b) { if(!b) return '0B'; if(b<1024) return b+'B'; if(b<1048576) return (b/1024).toFixed(1)+'KB'; return (b/1048576).toFixed(1)+'MB'; },
  }
}
</script>

<style>
.btn-primary { background:#8eb02f; color:#fff; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:600; font-size:.875rem; }
.btn-primary:hover { background:#6d8c24; }
.btn-secondary { background:#f1f5f9; color:#475569; padding:0.5rem 1rem; border-radius:0.5rem; font-weight:500; font-size:.875rem; border:1px solid #e2e8f0; }
.btn-icon { display:inline-flex; align-items:center; padding:0.25rem; border-radius:0.375rem; }
.btn-icon:hover { background:#f1f5f9; }
.input-field { border:1px solid #e2e8f0; border-radius:0.5rem; padding:0.5rem 0.75rem; font-size:.875rem; outline:none; }
.input-field:focus { border-color:#8eb02f; }
.label { display:block; font-size:.75rem; font-weight:600; color:#475569; margin-bottom:.25rem; text-transform:uppercase; letter-spacing:.05em; }
.badge { display:inline-block; padding:.15rem .6rem; border-radius:9999px; font-size:.7rem; font-weight:600; text-transform:capitalize; }
.badge-green { background:#dcfce7; color:#15803d; }
.badge-yellow { background:#fef9c3; color:#854d0e; }
.badge-slate { background:#f1f5f9; color:#475569; }
.badge-red { background:#fee2e2; color:#991b1b; }
.badge-blue { background:#dbeafe; color:#1d4ed8; }
.bg-primary\/10 { background:rgba(142,176,47,.1); }
</style>
