{% 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 hosting 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 id="restoreInProgressNotice"
         class="eenos-notice eenos-notice-warning d-none mb-4"
         role="status">
        <div class="eenos-notice-icon">
            <i data-lucide="loader-circle"></i>
        </div>
        <div class="eenos-notice-content">
            <div class="eenos-notice-title">{% translate "Backup restore in progress" %}</div>
            <div class="eenos-notice-text">{% translate "Please wait until the current restore finishes before sending another restore request." %}</div>
        </div>
    </div>
    <div class="eenos-card">
        <div class="d-flex align-items-start justify-content-between gap-3 mb-4">
            <div><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>
            <div class="eenos-card-action-icon"><i data-lucide="history"></i></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 id="restoreModalsContainer"></div>
    {{ schedules|json_script:"backupSchedulesData" }}
{% endblock %}
{% block extra_js %}
    <script>
$(function(){const esc=v=>$('<div>').text(v==null?'':v).html();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 'backups_data' %}",dataSrc:function(response){$('#restoreInProgressNotice').toggleClass('d-none',!response.restore_in_progress);return response.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 eenos-badge-success px-2 py-1 gap-1"><i data-lucide="shield-check" style="width:12px;height:12px"></i>{% translate "Secured" %}</span>':'<span class="badge eenos-badge-warning px-2 py-1 gap-1"><i data-lucide="shield-alert" style="width:12px;height:12px"></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)=>{if(t!=='display')return '';if(r.restore_in_progress)return '<span class="d-inline-flex align-items-center justify-content-end gap-1 small text-warning"><i data-lucide="loader-circle" style="width:14px;height:14px"></i>{% translate "Restore in progress" %}</span>';const available=actions.filter(a=>r[a[1]]);if(!available.length){const text=r.secured?'{% translate "Restore actions unavailable" %}':'{% translate "Administrator restore required" %}';return '<span class="d-inline-flex align-items-center justify-content-end gap-1 small text-muted"><i data-lucide="shield-lock" style="width:14px;height:14px"></i>'+text+'</span>'}return '<div class="eenos-dt-actions d-flex justify-content-end gap-1">'+available.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()});});
$(function(){const table=$('#backupRestoreTable').DataTable(),esc=v=>$('<div>').text(v==null?'':v).html(),methods={incremental:['eenos-badge-primary','layers-3'],compressed:['eenos-badge-success','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]+' px-2 py-1 gap-1"><i data-lucide="'+style[1]+'" style="width:12px;height:12px"></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();
    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>
    <script>
$(function(){
    const configs={
        full:{title:"{% translate 'Restore Full Account' %}"},
        home:{title:"{% translate 'Restore Home Directory' %}"},
        domain:{title:"{% translate 'Restore Website' %}",label:"{% translate 'Domain name' %}",type:"text",required:"{% translate 'Enter the domain name to restore.' %}",target:"#restoreDomain"},
        email:{title:"{% translate 'Restore Email Account' %}",label:"{% translate 'Email address' %}",type:"email",required:"{% translate 'Enter the email address to restore.' %}",typeMessage:"{% translate 'Enter a valid email address.' %}",target:"#restoreEmail"},
        mysql:{title:"{% translate 'Restore MySQL Database' %}",label:"{% translate 'Database name' %}",type:"text",required:"{% translate 'Enter the MySQL database name to restore.' %}",target:"#restoreDatabase"},
        pgsql:{title:"{% translate 'Restore PostgreSQL Database' %}",label:"{% translate 'Database name' %}",type:"text",required:"{% translate 'Enter the PostgreSQL database name to restore.' %}",target:"#restoreDatabase"},
        mongodb:{title:"{% translate 'Restore MongoDB Database' %}",label:"{% translate 'Database name' %}",type:"text",required:"{% translate 'Enter the MongoDB database name to restore.' %}",target:"#restoreDatabase"},
        file:{title:"{% translate 'Restore File' %}",label:"{% translate 'Relative file path' %}",type:"text",required:"{% translate 'Enter the relative file path to restore.' %}",target:"#restoreFile",path:true},
        dir:{title:"{% translate 'Restore Directory' %}",label:"{% translate 'Relative directory path' %}",type:"text",required:"{% translate 'Enter the relative directory path to restore.' %}",target:"#restoreDirectory",path:true}
    };
    const container=$("#restoreModalsContainer");
    function clearModalValidation(action){
        const input=$("#restore-"+action+"-input");
        const errors=$("#restore-"+action+"-errors");
        if(input.length){
            const field=input.data("Parsley");
            if(field)field.reset();
            input.removeClass("parsley-error parsley-success is-invalid is-valid")
                .removeAttr("aria-invalid aria-describedby");
        }
        errors.empty().removeClass("invalid-feedback d-block");
    }
    function showModalValidation(action,message){
        const input=$("#restore-"+action+"-input");
        const errors=$("#restore-"+action+"-errors");
        errors.empty().addClass("invalid-feedback d-block").text(message);
        input.addClass("parsley-error is-invalid")
            .attr({"aria-invalid":"true","aria-describedby":errors.attr("id")});
    }
    function modalMarkup(action,config){
        const inputId="restore-"+action+"-input";
        const errorsId="restore-"+action+"-errors";
        const input=config.label
            ?'<div class="mb-3"><label class="form-label" for="'+inputId+'">'+config.label+'</label><div class="'+(config.path?'input-group':'')+'">'+(config.path?'<span class="input-group-text" title="{% translate "Account home directory" %}"><i data-lucide="house" aria-hidden="true"></i><span class="ms-1" aria-hidden="true">/</span></span>':'')+'<input class="form-control" id="'+inputId+'" name="restore_'+action+'_value" type="'+config.type+'" autocomplete="off" required data-parsley-errors-container="#'+errorsId+'"></div><div id="'+errorsId+'"></div></div>'
            :'';
        return '<div class="modal fade restore-resource-modal" id="restore-'+action+'-modal" tabindex="-1" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><form id="restore-'+action+'-form" class="modal-content eenos-form" data-parsley-validate><div class="modal-header"><h2 class="modal-title fs-5">'+config.title+'</h2><button type="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 and backup before continuing." %}</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 restore-modal-account"></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 restore-modal-backup"></code></div></div></div>'+input+'<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 type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{% translate "Cancel" %}</button><button type="button" class="btn btn-warning restore-confirm" data-action="'+action+'">{% translate "Start Restore" %}</button></div></form></div></div>';
    }
    Object.keys(configs).forEach(function(action){
        const config=configs[action];
        container.append(modalMarkup(action,config));
        if(config.label){
            const input=$("#restore-"+action+"-input");
            input.attr("data-parsley-required-message",config.required);
            if(config.typeMessage)input.attr("data-parsley-type-message",config.typeMessage);
        }
    });
    if(typeof lucide!=="undefined")lucide.createIcons();
    $(document).on("click",".restore-action",function(){
        const action=String($(this).data("action"));
        const config=configs[action];
        if(!config)return;
        const modalElement=document.getElementById("restore-"+action+"-modal");
        const form=$("#restore-"+action+"-form");
        form.get(0).reset();
        form.parsley().reset();
        clearModalValidation(action);
        $(modalElement).find(".restore-modal-account").text($(this).data("user")||"—");
        $(modalElement).find(".restore-modal-backup").text($(this).data("id")||"—");
        $(modalElement).data({restoreId:$(this).data("id"),restoreUser:$(this).data("user")});
        bootstrap.Modal.getOrCreateInstance(modalElement).show();
    });
    $(".restore-resource-modal").each(function(){
        this.addEventListener("hidden.bs.modal",function(){
            const action=this.id.replace("restore-","").replace("-modal","");
            const form=$(this).find("form");
            form.get(0).reset();
            form.parsley().reset();
            clearModalValidation(action);
            $(this).removeData("restoreId restoreUser");
        });
    });
    $(document).on("input",".restore-resource-modal input",function(){
        const action=this.id.replace("restore-","").replace("-input","");
        clearModalValidation(action);
    });
    $(document).on("click",".restore-confirm",function(){
        const action=String($(this).data("action"));
        const config=configs[action];
        const modalElement=document.getElementById("restore-"+action+"-modal");
        const form=$("#restore-"+action+"-form");
        const validator=form.parsley();
        validator.validate();
        if(validator.isValid()!==true){
            const input=$("#restore-"+action+"-input");
            const message=config.typeMessage&&input.val().trim()?config.typeMessage:config.required;
            showModalValidation(action,message);
            return;
        }
        const value=config.label?$("#restore-"+action+"-input").val().trim():"";
        $(".restore-marker,.restore-value").prop("disabled",true);
        $("#restoreId").val($(modalElement).data("restoreId"));
        $("#restoreUser").val($(modalElement).data("restoreUser"));
        $('[name="restore_'+action+'"]').prop("disabled",false).val("yes");
        if(config.target)$(config.target).prop("disabled",false).val(value);
        document.getElementById("restoreActionForm").submit();
    });
});
    </script>
{% endblock %}