{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Restore Backups" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "Restore Backups" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Restore a complete hosting account or selected resources from backups available to your reseller account." %}</div>
        </div>
    </div>
    <nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
        <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span>{% translate "Backups" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span>{% translate "Manage Backups" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span class="eenos-breadcrumb-current" aria-current="page">{% translate "Restore Backups" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-card">
        <div class="mb-4">
            <div class="eenos-panel-title">{% translate "Available Backups" %}</div>
            <div class="eenos-panel-subtitle">{% translate "Choose a restore action from a completed backup. Existing data may be replaced." %}</div>
        </div>
        <table id="backupRestoreTable"
               class="table table-hover align-middle w-100 mb-0">
            <thead>
                <tr>
                    <th>{% translate "Backup ID" %}</th>
                    <th>{% translate "Username" %}</th>
                    <th>{% translate "Method" %}</th>
                    <th>{% translate "Storage Pool" %}</th>
                    <th>{% translate "Reseller" %}</th>
                    <th>{% translate "Security" %}</th>
                    <th>{% translate "Date & Time" %}</th>
                    <th>{% translate "Size" %}</th>
                    <th class="none">{% translate "Backup" %}</th>
                    <th class="none">{% translate "Backup Type" %}</th>
                    <th class="none">{% translate "Schedule" %}</th>
                    <th class="none">{% translate "Schedule Owner" %}</th>
                    <th class="none">{% translate "Schedule Type" %}</th>
                    <th class="text-end">{% translate "Actions" %}</th>
                </tr>
            </thead>
        </table>
    </div>
    <form method="post" id="restoreActionForm" class="d-none">
        {% csrf_token %}
        <input name="id" id="restoreId"><input name="user" id="restoreUser"><input name="restore_full" class="restore-marker" disabled><input name="restore_home" class="restore-marker" disabled><input name="restore_domain" class="restore-marker" disabled><input name="restore_email" class="restore-marker" disabled><input name="restore_mysql" class="restore-marker" disabled><input name="restore_file" class="restore-marker" disabled><input name="restore_dir" class="restore-marker" disabled><input name="restore_pgsql" class="restore-marker" disabled><input name="restore_mongodb" class="restore-marker" disabled><input name="domain" id="restoreDomain" class="restore-value" disabled><input name="email"
       id="restoreEmail"
       class="restore-value"
       autocomplete="off"
       disabled><input name="db" id="restoreDatabase" class="restore-value" disabled><input name="file" id="restoreFile" class="restore-value" disabled><input name="dir" id="restoreDirectory" class="restore-value" disabled>
    </form>
    <div class="modal fade"
         id="backupDetailsModal"
         tabindex="-1"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h2 class="modal-title fs-5">{% translate "Backup Details" %}</h2>
                        <div class="small text-muted font-monospace" data-backup-field="backup_id"></div>
                    </div>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <dl class="row mb-0">
                        <dt class="col-sm-4">{% translate "Username" %}</dt>
                        <dd class="col-sm-8" data-backup-field="username">
                        </dd>
                        <dt class="col-sm-4">{% translate "Method" %}</dt>
                        <dd class="col-sm-8" data-backup-field="method">
                        </dd>
                        <dt class="col-sm-4">{% translate "Storage Pool" %}</dt>
                        <dd class="col-sm-8" data-backup-field="pool">
                        </dd>
                        <dt class="col-sm-4">{% translate "Pool Owner" %}</dt>
                        <dd class="col-sm-8" data-backup-field="pool_owner">
                        </dd>
                        <dt class="col-sm-4">{% translate "Reseller" %}</dt>
                        <dd class="col-sm-8" data-backup-field="reseller">
                        </dd>
                        <dt class="col-sm-4">{% translate "Security" %}</dt>
                        <dd class="col-sm-8" data-backup-field="secured">
                        </dd>
                        <dt class="col-sm-4">{% translate "Date & Time" %}</dt>
                        <dd class="col-sm-8" data-backup-field="created_at">
                        </dd>
                        <dt class="col-sm-4">{% translate "Size" %}</dt>
                        <dd class="col-sm-8" data-backup-field="size">
                        </dd>
                        <dt class="col-sm-4">{% translate "Backup" %}</dt>
                        <dd class="col-sm-8 font-monospace text-break" data-backup-field="backup">
                        </dd>
                        <dt class="col-sm-4">{% translate "Backup Type" %}</dt>
                        <dd class="col-sm-8" data-backup-field="backup_type">
                        </dd>
                        <dt class="col-sm-4">{% translate "Schedule Name" %}</dt>
                        <dd class="col-sm-8" data-backup-field="schedule_name">
                        </dd>
                        <dt class="col-sm-4">{% translate "Schedule ID" %}</dt>
                        <dd class="col-sm-8 font-monospace text-break"
                            data-backup-field="schedule_id">
                        </dd>
                        <dt class="col-sm-4">{% translate "Schedule Owner" %}</dt>
                        <dd class="col-sm-8" data-backup-field="schedule_owner">
                        </dd>
                        <dt class="col-sm-4">{% translate "Schedule Type" %}</dt>
                        <dd class="col-sm-8" data-backup-field="schedule_type">
                        </dd>
                    </dl>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">{% translate "Close" %}</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="restoreModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title fs-5" id="restoreTitle"></h2>
                    <button class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="border rounded-3 bg-body-tertiary p-3 mb-4">
                        <div class="d-flex align-items-center gap-3 mb-3">
                            <span class="eenos-modal-info-icon flex-shrink-0"><i data-lucide="archive-restore"></i></span>
                            <div>
                                <div class="fw-semibold">{% translate "Restore Source" %}</div>
                                <div class="small text-muted">{% translate "Confirm the account, backup, and originating schedule." %}</div>
                            </div>
                        </div>
                        <div class="row g-3">
                            <div class="col-sm-6">
                                <div class="small text-muted text-uppercase fw-semibold">{% translate "Account" %}</div>
                                <div class="fw-semibold text-break" id="restoreAccountName"></div>
                            </div>
                            <div class="col-sm-6">
                                <div class="small text-muted text-uppercase fw-semibold">{% translate "Backup ID" %}</div>
                                <code class="user-select-all text-break" id="restoreBackupId"></code>
                            </div>
                            <div class="col-sm-6" id="restoreScheduleNameWrap">
                                <div class="small text-muted text-uppercase fw-semibold">{% translate "Schedule Name" %}</div>
                                <div class="fw-semibold text-break" id="restoreScheduleName"></div>
                            </div>
                            <div class="col-sm-6">
                                <div class="small text-muted text-uppercase fw-semibold">{% translate "Schedule ID" %}</div>
                                <code class="user-select-all text-break" id="restoreScheduleId"></code>
                            </div>
                        </div>
                    </div>
                    <div id="restoreInputWrap" class="mb-3">
                        <label class="form-label" id="restoreInputLabel" for="restoreInput"></label>
                        <div class="input-group">
                            <span class="input-group-text"
                                  id="restorePathPrefix"
                                  title="{% translate 'Account home directory' %}"><i data-lucide="house" aria-hidden="true"></i><span class="visually-hidden">{% translate "Account home directory" %}</span><span class="ms-1" aria-hidden="true">/</span></span>
                            <input class="form-control" id="restoreInput" autocomplete="off">
                            <div class="invalid-feedback" id="restoreInputError"></div>
                        </div>
                    </div>
                    <div class="eenos-notice eenos-notice-warning">
                        <div class="eenos-notice-icon">
                            <i data-lucide="triangle-alert"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-text">{% translate "The restore operation may replace existing account data. Verify the backup and resource before continuing." %}</div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-outline-secondary" data-bs-dismiss="modal">{% translate "Cancel" %}</button><button class="btn btn-warning" id="confirmRestore">{% translate "Start Restore" %}</button>
                </div>
            </div>
        </div>
    </div>
    {{ schedules|json_script:"backupSchedulesData" }}
{% endblock %}
{% block extra_js %}
    <script>
$(function(){const esc=v=>$('<div>').text(v==null?'':v).html(),modal=bootstrap.Modal.getOrCreateInstance(document.getElementById('restoreModal'));let selected=null;const actions=[['full','can_restore_full','user-cog','primary','{% translate "Full account" %}'],['home','can_restore_home','house','secondary','{% translate "Home directory" %}'],['domain','can_restore_domain','globe','success','{% translate "Website" %}'],['email','can_restore_email','mail','warning','{% translate "Email account" %}'],['mysql','can_restore_mysql','database','success','{% translate "MySQL database" %}'],['file','can_restore_file','file','secondary','{% translate "File" %}'],['dir','can_restore_directory','folder','secondary','{% translate "Directory" %}'],['pgsql','can_restore_postgresql','database','primary','{% translate "PostgreSQL database" %}'],['mongodb','can_restore_mongodb','database','warning','{% translate "MongoDB database" %}']];const table=$('#backupRestoreTable').DataTable({responsive:{details:{renderer:DataTable.Responsive.renderer.listHiddenNodes()}},processing:true,pageLength:25,lengthMenu:[[10,25,50,100,-1],[10,25,50,100,"{% translate 'All' %}"]],ajax:{url:"{% url 'backup_restore_data' %}",dataSrc:'data'},order:[[6,'desc']],columns:[{data:'backup_id',responsivePriority:1,className:'text-nowrap',render:(d,t)=>t==='display'?'<span class="font-monospace">'+esc(d)+'</span>':d},{data:'username',responsivePriority:1,render:(d,t,r)=>t==='display'?'<span class="fw-semibold">'+esc(d)+'</span>'+(!r.account_exists?'<div class="small text-warning">{% translate "Account removed" %}</div>':''):d},{data:'method',responsivePriority:7,render:(d,t)=>t==='display'?esc(d||'—'):d},{data:'pool',responsivePriority:4,render:(d,t)=>t==='display'?'<span class="fw-semibold">'+esc(d||'—')+'</span>':d},{data:'reseller',responsivePriority:9,render:(d,t)=>t==='display'?esc(d||'—'):d},{data:'secured',responsivePriority:5,className:'text-nowrap',render:(d,t)=>t!=='display'?d:(d?'<span class="badge bg-success-subtle text-success border border-success-subtle"><i data-lucide="shield-check"></i>{% translate "Secured" %}</span>':'<span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle"><i data-lucide="shield-alert"></i>{% translate "Unsecured" %}</span>')},{data:'created_at',className:'text-nowrap',responsivePriority:2},{data:'size',className:'text-nowrap',responsivePriority:6},{data:'backup',responsivePriority:100,render:(d,t)=>t==='display'?'<span class="font-monospace small text-break">'+esc(d||'—')+'</span>':d},{data:'backup_type',responsivePriority:101},{data:'schedule_id',responsivePriority:102,className:'font-monospace',render:(d,t)=>t==='display'?esc(d||'—'):d},{data:'schedule_owner',responsivePriority:103,render:(d,t)=>t==='display'?esc(d||'—'):d},{data:'schedule_type',responsivePriority:104,render:(d,t)=>t==='display'?esc(d||'—'):d},{data:null,orderable:false,searchable:false,className:'text-end',responsivePriority:1,width:'250px',render:(d,t,r)=>t!=='display'?'':'<div class="eenos-dt-actions d-flex justify-content-end gap-1">'+actions.filter(a=>r[a[1]]).map(a=>'<button type="button" class="btn btn-sm btn-outline-'+a[3]+' restore-action" data-action="'+a[0]+'" data-id="'+esc(r.backup_id)+'" data-user="'+esc(r.username)+'" title="'+a[4]+'" aria-label="'+a[4]+'"><i data-lucide="'+a[2]+'"></i></button>').join('')+'</div>'}],language:{lengthMenu:"{% translate 'Show' %} _MENU_",loadingRecords:"&nbsp;",processing:"{% translate 'Loading...' %}"},drawCallback:()=>{if(typeof lucide!=='undefined')lucide.createIcons()}});table.on('responsive-display',()=>{if(typeof lucide!=='undefined')lucide.createIcons()});const config={full:['{% translate "Restore Full Account" %}',null,null],home:['{% translate "Restore Home Directory" %}',null,null],domain:['{% translate "Restore Website" %}','{% translate "Domain name" %}','domain'],email:['{% translate "Restore Email Account" %}','{% translate "Email address" %}','email'],mysql:['{% translate "Restore MySQL Database" %}','{% translate "Database name" %}','db'],file:['{% translate "Restore File" %}','{% translate "Relative file path" %}','file'],dir:['{% translate "Restore Directory" %}','{% translate "Relative directory path" %}','dir'],pgsql:['{% translate "Restore PostgreSQL Database" %}','{% translate "Database name" %}','db'],mongodb:['{% translate "Restore MongoDB Database" %}','{% translate "Database name" %}','db']};$(document).on('click','.restore-action',function(){selected={action:$(this).data('action'),id:$(this).data('id'),user:$(this).data('user')};const c=config[selected.action];$('#restoreTitle').text(c[0]);$('#restoreAccount').text(selected.user+' · '+selected.id);$('#restoreInputWrap').toggle(Boolean(c[1]));$('#restoreInputLabel').text(c[1]||'');$('#restoreInput').val('').removeClass('is-invalid').attr('type',c[2]==='email'?'email':'text');modal.show()});$('#confirmRestore').on('click',function(){const c=config[selected.action],value=$('#restoreInput').val().trim();if(c[1]&&!value){$('#restoreInput').addClass('is-invalid');$('#restoreInputError').text('{% translate "Enter the resource to restore." %}');return}$('.restore-marker,.restore-value').prop('disabled',true);$('#restoreId').val(selected.id);$('#restoreUser').val(selected.user);$('[name="restore_'+selected.action+'"]').prop('disabled',false).val('yes');const target={domain:'#restoreDomain',email:'#restoreEmail',mysql:'#restoreDatabase',pgsql:'#restoreDatabase',mongodb:'#restoreDatabase',file:'#restoreFile',dir:'#restoreDirectory'}[selected.action];if(target)$(target).prop('disabled',false).val(value);document.getElementById('restoreActionForm').submit()})});
$(function(){const table=$('#backupRestoreTable').DataTable(),esc=v=>$('<div>').text(v==null?'':v).html(),methods={incremental:['eenos-badge-primary','layers-3'],compressed:['bg-success-subtle text-success border border-success-subtle','package-check'],archive:['eenos-badge-neutral','archive']};function renderMethodBadges(){table.column(2,{page:'current'}).nodes().each(function(cell){const value=String(table.cell(cell).data()||'').trim(),style=methods[value.toLowerCase()]||['eenos-badge-neutral','archive'];cell.innerHTML=value?'<span class="badge '+style[0]+'"><i data-lucide="'+style[1]+'"></i>'+esc(value)+'</span>':'—'});if(typeof lucide!=='undefined')lucide.createIcons()}table.on('draw',renderMethodBadges);renderMethodBadges()});
$(function(){
    const table=$('#backupRestoreTable').DataTable();
    const modal=bootstrap.Modal.getOrCreateInstance(document.getElementById('backupDetailsModal'));
    const esc=value=>$('<div>').text(value==null?'':value).html();
    const schedules=JSON.parse(document.getElementById('backupSchedulesData').textContent||'{}');
    function scheduleName(row){
        const schedule=schedules[String(row.schedule_id)]||{};
        return schedule.name||'';
    }
    function renderBackupIds(){
        table.rows({page:'current'}).every(function(){
            const row=this.data(),cell=$(this.node()).children('td').first();
            const fullId=String(row.backup_id||''),shortId=fullId.length>12?fullId.slice(0,8)+'…':fullId;
            cell.html('<div class="d-inline-flex align-items-center gap-2"><span class="font-monospace user-select-all" title="'+esc(fullId)+'">'+esc(shortId)+'</span><button type="button" class="btn btn-sm btn-outline-secondary backup-details flex-shrink-0" title="{% translate "View backup details" %}" aria-label="{% translate "View backup details" %}"><i data-lucide="info"></i></button></div>');
            cell.find('.backup-details').on('click',openBackupDetails);
            const scheduleCell=table.cell(this.index(),10).node();
            if(scheduleCell){
                const name=scheduleName(row),id=esc(row.schedule_id||'—');
                $(scheduleCell).html(name?'<div class="fw-semibold">'+esc(name)+'</div><div class="small text-muted font-monospace">'+id+'</div>':'<span class="font-monospace">'+id+'</span>');
            }
        });
        if(typeof lucide!=='undefined')lucide.createIcons();
    }
    table.on('draw',renderBackupIds);
    renderBackupIds();
    $('#backupRestoreTable').on('click','.restore-action',function(){
        const row=table.row($(this).closest('tr')).data();
        if(!row)return;
        const action=String($(this).data('action'));
        const name=scheduleName(row),id=String(row.schedule_id||'').trim();
        $('#restorePathPrefix').toggle(action==='file'||action==='dir');
        $('#restoreAccountName').text(row.username||'—');
        $('#restoreBackupId').text(row.backup_id||'—');
        $('#restoreScheduleName').text(name);
        $('#restoreScheduleNameWrap').toggle(Boolean(name));
        $('#restoreScheduleId').text(id||'—');
    });
    function openBackupDetails(event){
        event.preventDefault();
        event.stopImmediatePropagation();
        const row=table.row($(this).closest('tr')).data();
        if(!row)return;
        $('[data-backup-field]').each(function(){
            const field=$(this).data('backup-field');
            if(field==='schedule_name'){
                const name=scheduleName(row);
                $(this).toggle(Boolean(name)).prev('dt').toggle(Boolean(name));
                if(name)$(this).text(name);
                return;
            }
            const value=field==='secured'?(row.secured?'{% translate "Secured" %}':'{% translate "Unsecured" %}'):row[field];
            $(this).text(value==null||value===''?'—':value);
        });
        modal.show();
    }
});
    </script>
{% endblock %}