{{template "base.html" .}}

{{define "title"}}Mis Archivos — app_compartir{{end}}

{{define "content"}}
<div class="max-w-5xl mx-auto space-y-6">
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-slate-800 pb-5">
        <div>
            <h1 class="text-2xl font-bold text-white">Mis Archivos Guardados</h1>
            <p class="text-xs text-slate-400">
                Archivos y notas asociados a tu cuenta. Se conservan de forma <span class="text-emerald-400 font-semibold">permanente</span> hasta que decidas eliminarlos.
            </p>
        </div>
        <a href="/" class="px-4 py-2 rounded-xl bg-brand-600 hover:bg-brand-500 text-slate-950 font-bold text-xs transition flex items-center gap-2 shadow-lg shadow-brand-500/20 shrink-0">
            <i class="fa-solid fa-cloud-arrow-up"></i>
            <span>Subir nuevo archivo</span>
        </a>
    </div>

    {{if eq (len .Shares) 0}}
        <div class="bg-slate-900 border border-slate-800 rounded-3xl p-12 text-center space-y-4">
            <div class="w-16 h-16 mx-auto rounded-2xl bg-slate-800 text-slate-400 flex items-center justify-center text-2xl">
                <i class="fa-regular fa-folder-open"></i>
            </div>
            <div class="space-y-1">
                <h3 class="text-base font-semibold text-white">No tienes archivos guardados aún</h3>
                <p class="text-xs text-slate-400">Sube fotos, videos, documentos o notas para acceder a ellos en cualquier momento.</p>
            </div>
            <a href="/" class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-brand-400 text-xs font-semibold border border-slate-700 transition">
                <span>Comenzar a compartir</span>
            </a>
        </div>
    {{else}}
        <div class="bg-slate-900 border border-slate-800 rounded-3xl overflow-hidden shadow-xl">
            <div class="overflow-x-auto">
                <table class="w-full text-left text-xs">
                    <thead class="bg-slate-950/60 border-b border-slate-800 text-slate-400 uppercase font-semibold">
                        <tr>
                            <th class="py-3.5 px-4">Archivo / Título</th>
                            <th class="py-3.5 px-4">Tipo</th>
                            <th class="py-3.5 px-4">Tamaño</th>
                            <th class="py-3.5 px-4">Visitas</th>
                            <th class="py-3.5 px-4">Fecha</th>
                            <th class="py-3.5 px-4 text-right">Acciones</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-800/60 text-slate-200">
                        {{range .Shares}}
                        <tr class="hover:bg-slate-800/40 transition">
                            <td class="py-3.5 px-4 font-medium max-w-xs truncate">
                                <a href="/v/{{.ID}}" target="_blank" class="hover:text-brand-400 flex items-center gap-2 truncate" title="{{.Title}}">
                                    {{if eq .Type "text"}}
                                        <i class="fa-solid fa-code text-indigo-400 shrink-0"></i>
                                    {{else}}
                                        <i class="fa-solid fa-file text-slate-400 shrink-0"></i>
                                    {{end}}
                                    <span class="truncate">{{.Title}}</span>
                                </a>
                            </td>
                            <td class="py-3.5 px-4 text-slate-400">{{.MimeType}}</td>
                            <td class="py-3.5 px-4 font-mono text-slate-300">{{.FormattedSize}}</td>
                            <td class="py-3.5 px-4">{{.ViewsCount}}</td>
                            <td class="py-3.5 px-4 text-slate-400">{{.CreatedAt.Format "02/01/2006 15:04"}}</td>
                            <td class="py-3.5 px-4 text-right space-x-1">
                                <a href="/v/{{.ID}}" target="_blank" class="p-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 transition" title="Abrir visor">
                                    <i class="fa-solid fa-eye text-xs"></i>
                                </a>
                                {{if ne .Type "text"}}
                                <a href="/d/{{.ID}}" class="p-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 transition" title="Descargar">
                                    <i class="fa-solid fa-download text-xs"></i>
                                </a>
                                {{end}}
                                <button onclick="deleteShare('{{.ID}}')" class="p-1.5 rounded-lg bg-slate-800 hover:bg-rose-900/40 text-slate-400 hover:text-rose-400 transition" title="Eliminar definitivamente">
                                    <i class="fa-solid fa-trash text-xs"></i>
                                </button>
                            </td>
                        </tr>
                        {{end}}
                    </tbody>
                </table>
            </div>
        </div>
    {{end}}
</div>
{{end}}

{{define "scripts"}}
<script>
    async function deleteShare(id) {
        if (!confirm('¿Estás seguro de que deseas eliminar este archivo? Esta acción no se puede deshacer.')) {
            return;
        }

        try {
            const resp = await fetch(`/api/shares/${id}`, {
                method: 'DELETE'
            });
            if (resp.ok) {
                window.location.reload();
            } else {
                const data = await resp.json();
                alert('Error al eliminar: ' + (data.error || 'Desconocido'));
            }
        } catch (err) {
            alert('Error de red al intentar eliminar el archivo.');
        }
    }
</script>
{{end}}