<?php
if (defined('BASE_PATH') && file_exists(BASE_PATH . '/app/helpers/toast.php')) {
    require_once BASE_PATH . '/app/helpers/toast.php';
}
$ecToasts = function_exists('ec_take_toasts') ? ec_take_toasts() : [];
?>

<style id="ec-toast-css">
.ec-toast-wrap{
    position:fixed;
    top:18px;
    inset-inline-end:18px;
    z-index:99999;
    display:flex;
    flex-direction:column;
    gap:12px;
    max-width:min(420px,calc(100vw - 36px));
}
.ec-toast{
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding:14px 16px;
    border-radius:18px;
    background:#fff;
    color:#0f172a;
    box-shadow:0 20px 50px rgba(15,23,42,.22);
    border:1px solid rgba(148,163,184,.35);
    animation:ecToastIn .22s ease-out;
    overflow:hidden;
    position:relative;
}
.ec-toast:before{
    content:"";
    position:absolute;
    inset-block:0;
    inset-inline-start:0;
    width:5px;
    background:#2563eb;
}
.ec-toast-success:before{background:#16a34a}
.ec-toast-error:before{background:#dc2626}
.ec-toast-warning:before{background:#d97706}
.ec-toast-info:before{background:#2563eb}
.ec-toast-icon{
    width:34px;
    height:34px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eef2ff;
    color:#1d4ed8;
    flex:0 0 auto;
}
.ec-toast-success .ec-toast-icon{background:#dcfce7;color:#15803d}
.ec-toast-error .ec-toast-icon{background:#fee2e2;color:#b91c1c}
.ec-toast-warning .ec-toast-icon{background:#fef3c7;color:#b45309}
.ec-toast-title{font-weight:900;margin-bottom:2px}
.ec-toast-msg{font-size:.92rem;color:#334155;line-height:1.55}
.ec-toast-close{
    border:0;
    background:transparent;
    font-size:20px;
    line-height:1;
    color:#64748b;
    cursor:pointer;
    margin-inline-start:auto;
}
@keyframes ecToastIn{
    from{opacity:0;transform:translateY(-8px) scale(.98)}
    to{opacity:1;transform:translateY(0) scale(1)}
}
</style>

<div class="ec-toast-wrap" id="ecToastWrap">
    <?php foreach ($ecToasts as $toast): ?>
        <?php
            $type = $toast['type'] ?? 'info';
            $title = $toast['title'] ?? '';
            $message = $toast['message'] ?? '';
            $icon = [
                'success' => 'fa-circle-check',
                'error' => 'fa-circle-xmark',
                'warning' => 'fa-triangle-exclamation',
                'info' => 'fa-circle-info',
            ][$type] ?? 'fa-circle-info';

            if (!$title && function_exists('ec_t')) {
                $title = ec_t('common.' . ($type === 'error' ? 'error' : $type), ucfirst($type));
            } elseif (!$title) {
                $title = ucfirst($type);
            }
        ?>
        <div class="ec-toast ec-toast-<?= htmlspecialchars($type, ENT_QUOTES, 'UTF-8') ?>">
            <div class="ec-toast-icon"><i class="fa <?= htmlspecialchars($icon, ENT_QUOTES, 'UTF-8') ?>"></i></div>
            <div>
                <div class="ec-toast-title"><?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8') ?></div>
                <div class="ec-toast-msg"><?= htmlspecialchars($message, ENT_QUOTES, 'UTF-8') ?></div>
            </div>
            <button class="ec-toast-close" type="button" onclick="this.closest('.ec-toast').remove()">×</button>
        </div>
    <?php endforeach; ?>
</div>

<script id="ec-toast-js">
document.addEventListener('DOMContentLoaded', function(){
    document.querySelectorAll('.ec-toast').forEach(function(t){
        setTimeout(function(){
            if(t && t.parentNode){
                t.style.opacity = '0';
                t.style.transform = 'translateY(-8px) scale(.98)';
                t.style.transition = 'all .25s ease';
                setTimeout(function(){ if(t.parentNode) t.remove(); }, 260);
            }
        }, 5200);
    });
});
</script>
