<?php
// components/Notification.php
namespace Components;

class Notification extends Base
{
    /**
     * Render a notification bar.
     * 
     * Options:
     * - id: (string) unique ID for persistence. If provided, dismissal state is tracked.
     * - dismissible: (bool) show a close button. Default false. Requires 'id'.
     * - linkLabel: (string) text for the link.
     * - href: (string) URL for the link.
     * - class: (string) extra CSS classes for the container.
     * - expandedClass: (string) extra CSS classes for the expanded notification wrapper.
     * - minimizedClass: (string) CSS classes for the minimized icon container.
     * - size: (string) size preset. xs|sm|md|lg (default: md).
     * - margin: (bool) apply margin my-4. Default true.
     */
    public static function render(string $message, array $options = []): string
    {
        $id = isset($options['id']) ? (string)$options['id'] : null;
        $extraClass = isset($options['class']) ? (string)$options['class'] : '';
        $expandedClass = isset($options['expandedClass'])
            ? (string)$options['expandedClass']
            : (isset($options['classes_expanded']) ? (string)$options['classes_expanded'] : '');
        $minimizedClass = isset($options['minimizedClass']) ? (string)$options['minimizedClass'] : 'absolute right-0 mt-0 z-50';
        $size = strtolower((string)($options['size'] ?? 'md'));
        $isInitiallyDismissed = $id !== null && self::isDismissed($id);
        $margin = isset($options['margin']) ? (bool)$options['margin'] : true;

        $linkLabel = isset($options['linkLabel']) ? (string)$options['linkLabel'] : null;
        $href = isset($options['href']) ? (string)$options['href'] : null;
        $dismissible = isset($options['dismissible']) ? (bool)$options['dismissible'] : false;
        $variant = isset($options['variant']) ? (string)$options['variant'] : 'brand';

        $variants = [
            'brand' => [
                'bg' => 'bg-brand-50',
                'outline' => 'outline-brand-500',
                'darkBg' => 'dark:bg-brand-500/10',
                'darkOutline' => 'dark:outline-brand-500/20',
                'text' => 'text-brand-700',
                'darkText' => 'dark:text-brand-300',
                'icon' => 'text-brand-500',
                'link' => 'text-brand-700 hover:text-brand-600 dark:text-blue-300 dark:hover:text-brand-200',
            ],
            'warning' => [
                'bg' => 'bg-warning-50',
                'outline' => 'outline-warning-500',
                'darkBg' => 'dark:bg-warning-500/10',
                'darkOutline' => 'dark:outline-warning-500/20',
                'text' => 'text-warning-700',
                'darkText' => 'dark:text-warning-300',
                'icon' => 'text-warning-500',
                'link' => 'text-warning-700 hover:text-warning-600 dark:text-warning-300 dark:hover:text-warning-200',
            ],
            'danger' => [
                'bg' => 'bg-danger-50',
                'outline' => 'outline-danger-500',
                'darkBg' => 'dark:bg-danger-500/10',
                'darkOutline' => 'dark:outline-danger-500/20',
                'text' => 'text-danger-700',
                'darkText' => 'dark:text-danger-300',
                'icon' => 'text-danger-500',
                'link' => 'text-danger-700 hover:text-danger-600 dark:text-danger-300 dark:hover:text-danger-200',
            ],
        ];

        $sizes = [
            'xs' => [
                'containerPadding' => 'p-2.5',
                'iconSize' => 'size-4',
                'contentMargin' => 'ml-2',
                'messageText' => 'text-xs',
                'actionsMargin' => 'mt-2 md:mt-0 md:ml-4',
                'actionsText' => 'text-xs',
                'actionsGap' => 'space-x-2',
                'closeIconSize' => 'size-4',
                'minimizedPadding' => 'p-0.5',
                'minimizedIconSize' => 'size-4',
            ],
            'sm' => [
                'containerPadding' => 'p-3',
                'iconSize' => 'size-4',
                'contentMargin' => 'ml-2.5',
                'messageText' => 'text-sm',
                'actionsMargin' => 'mt-2 md:mt-0 md:ml-5',
                'actionsText' => 'text-sm',
                'actionsGap' => 'space-x-3',
                'closeIconSize' => 'size-4',
                'minimizedPadding' => 'p-0.5',
                'minimizedIconSize' => 'size-4',
            ],
            'md' => [
                'containerPadding' => 'p-4',
                'iconSize' => 'size-5',
                'contentMargin' => 'ml-3',
                'messageText' => 'text-sm',
                'actionsMargin' => 'mt-3 md:mt-0 md:ml-6',
                'actionsText' => 'text-sm',
                'actionsGap' => 'space-x-4',
                'closeIconSize' => 'size-5',
                'minimizedPadding' => 'p-0.5',
                'minimizedIconSize' => 'size-5',
            ],
            'lg' => [
                'containerPadding' => 'p-5',
                'iconSize' => 'size-6',
                'contentMargin' => 'ml-4',
                'messageText' => 'text-base',
                'actionsMargin' => 'mt-3 md:mt-0 md:ml-7',
                'actionsText' => 'text-base',
                'actionsGap' => 'space-x-4',
                'closeIconSize' => 'size-6',
                'minimizedPadding' => 'p-1',
                'minimizedIconSize' => 'size-6',
            ],
        ];

        $v = $variants[$variant] ?? $variants['brand'];
        $s = $sizes[$size] ?? $sizes['md'];
        $messageEsc = self::h($message);
        $showJson = $isInitiallyDismissed ? 'false' : 'true';
        
        ob_start();
        ?>
        <div class="<?= self::h($extraClass) ?>" x-data="{ 
            show: <?= $showJson ?>, 
            expanded: <?= $showJson ?>,
            timeout: null,
            dismiss() {
                if (this.timeout) clearTimeout(this.timeout);
                this.show = false;
                this.timeout = setTimeout(() => { this.expanded = false; this.timeout = null; }, 200);
            },
            undismiss() {
                if (this.timeout) clearTimeout(this.timeout);
                this.expanded = true;
                this.timeout = setTimeout(() => { this.show = true; this.timeout = null; }, 300);
            }
        }" x-cloak>
            <!-- Full Notification -->
            <div x-show="expanded" x-collapse.duration.300ms x-cloak >
                <div x-show="show" 
                     x-cloak 
                     x-transition:enter="transition ease-out duration-300"
                     x-transition:enter-start="opacity-0 scale-95"
                     x-transition:enter-end="opacity-100 scale-100"
                     x-transition:leave="transition ease-in duration-200"
                     x-transition:leave-start="opacity-100 scale-100"
                     x-transition:leave-end="opacity-0 scale-95"
                     class="<?= self::h($expandedClass) ?> <?= $margin ? 'my-4' : '' ?> notification rounded-2xl <?= $v['bg'] ?> <?= $s['containerPadding'] ?> outline <?= $v['outline'] ?> <?= $v['darkBg'] ?> dark:outline <?= $v['darkOutline'] ?>">
                <div class="flex">
                    <div class="shrink-0">
<!--
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="<?= $s['iconSize'] ?> <?= $v['icon'] ?>">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
                        </svg>
-->
<!--                        <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" color="currentColor"  class="--><?php //= $s['iconSize'] ?><!-- --><?php //= $v['icon'] ?><!--" fill="none" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V11C12.75 10.5858 12.4142 10.25 12 10.25C11.5858 10.25 11.25 10.5858 11.25 11V17C11.25 17.4142 11.5858 17.75 12 17.75ZM12 7C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7Z" fill="currentColor"></path></svg>-->

                        <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" color="currentColor"  class="<?= $s['iconSize'] ?> <?= $v['icon'] ?>" fill="none" viewBox="0 0 24 24"><path d="M12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V11C12.75 10.5858 12.4142 10.25 12 10.25C11.5858 10.25 11.25 10.5858 11.25 11V17C11.25 17.4142 11.5858 17.75 12 17.75Z" fill="currentColor"></path><path d="M12 7C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12ZM12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75Z" fill="currentColor"></path></svg>

                    </div>
                    <div class="<?= $s['contentMargin'] ?> flex-1 md:flex md:justify-between">
                        <div class="<?= $s['messageText'] ?> <?= $v['text'] ?> <?= $v['darkText'] ?>"><?= $messageEsc ?></div>
                        <div class="<?= $s['actionsMargin'] ?> <?= $s['actionsText'] ?> flex items-center <?= $s['actionsGap'] ?>">
                            <?php if ($href && $linkLabel): ?>
                            <a href="<?= self::h($href) ?>" class="font-medium whitespace-nowrap <?= $v['link'] ?>">
                                <?= self::h($linkLabel) ?>
                                <span aria-hidden="true"> &rarr;</span>
                            </a>
                            <?php endif; ?>
                            
                            <?php if ($dismissible && $id): ?>
                            <button 
                                type="button"
                                @click="dismiss()"
                                hx-post="<?= Router::url('hide_notification', ['id' => $id, 'dismissed' => 1]) ?>" 
                                hx-swap="none"
                                data-no-global-loader="true"
                                data-no-local-loader="true"
                                class="<?= $v['icon'] ?> hover:opacity-80 transition-opacity"
                                aria-label="Dismiss"
                            >
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="<?= $s['closeIconSize'] ?>">
                                    <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
                                </svg>

                            </button>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>

            <!-- Minimized Icon -->
            <?php if ($id): ?>
            <div x-show="!show" 
                 x-cloak 
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="translate-x-full"
                 x-transition:enter-end="translate-x-0"
                 x-transition:leave="transition ease-in duration-200"
                 x-transition:leave-start="translate-x-0"
                 x-transition:leave-end="translate-x-full"
                 class="<?= self::h($minimizedClass) ?>">
                <button 
                    type="button"
                    @click="undismiss()"
                    hx-post="<?= Router::url('hide_notification', ['id' => $id, 'dismissed' => 0]) ?>" 
                    hx-swap="none"
                    data-no-global-loader="true"
                    data-no-local-loader="true"
                    class="<?= $s['minimizedPadding'] ?> rounded-full <?= $v['bg'] ?> <?= $v['icon'] ?> --outline <?= $v['outline'] ?> <?= $v['darkBg'] ?> dark:outline <?= $v['darkOutline'] ?> opacity-50 hover:opacity-100 transition-all"
                    title="Show notification"
                >
<!--
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="<?= $s['minimizedIconSize'] ?>">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
                    </svg>
-->
<!--                    <svg xmlns="http://www.w3.org/2000/svg" color="currentColor" class="--><?php //= $s['minimizedIconSize'] ?><!--" fill="none" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V11C12.75 10.5858 12.4142 10.25 12 10.25C11.5858 10.25 11.25 10.5858 11.25 11V17C11.25 17.4142 11.5858 17.75 12 17.75ZM12 7C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7Z" fill="currentColor"></path></svg>-->
                    <svg xmlns="http://www.w3.org/2000/svg" color="currentColor" class="<?= $s['minimizedIconSize'] ?>"  fill="none" viewBox="0 0 24 24"><path d="M12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V11C12.75 10.5858 12.4142 10.25 12 10.25C11.5858 10.25 11.25 10.5858 11.25 11V17C11.25 17.4142 11.5858 17.75 12 17.75Z" fill="currentColor"></path><path d="M12 7C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12ZM12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75Z" fill="currentColor"></path></svg>
                </button>
            </div>
            <?php endif; ?>
        </div>
        <?php
        return ob_get_clean();
    }

    private static function isDismissed(string $id): bool
    {
        try {
            $dismissed = \Components\Data\DataRegistry::config()->getDismissedNotifications();
            return !empty($dismissed[$id]);
        } catch (\Throwable $e) {
            return false;
        }
    }
}
