<?php
// components/Ui/Card.php
// Unified card container helper for list-style UI cards

namespace Components\Ui;

final class Card
{
    /**
     * Return the default container class list for clickable/non-clickable cards.
     * Matches the trigger_module.php styling by default.
     */
    public static function baseContainerClass(bool $interactive = false, string $extra = ''): string
    {
        $base = 'relative border border-divider ring-0 ring-inset transition-all bg-elevated hover:bg-elevated/50 rounded-2xl transition-[background,border-color] duration-500 overflow-hidden dark:bg-zinc-800';

        if ($interactive) {
            $base .= ' cursor-pointer select-none';
        }

        if ($extra !== '') {
            $base .= ' ' . trim($extra);
        }

        return trim($base);
    }

    /**
     * Return the default vertical stack container classes used for card lists.
     * This mirrors trigger_module list spacing (space-y-4) and should be used
     * wherever a vertical list of Card containers is rendered.
     */
    public static function listStackClass(string $extra = ''): string
    {
        $cls = 'space-y-4';
        if ($extra !== '') { $cls .= ' ' . trim($extra); }
        return trim($cls);
    }

    /**
     * Optional alternative: a single-column grid with unified gap matching stack spacing.
     * Useful when callers prefer grid semantics but want consistent spacing.
     */
    public static function listGridClass(string $extra = ''): string
    {
        $cls = 'grid grid-cols-1 gap-4';
        if ($extra !== '') { $cls .= ' ' . trim($extra); }
        return trim($cls);
    }


    public static function flowClasses(): string {
        return 'relative overflow-hidden rounded-lg mx-3 mb-3 border border-divider/50 dark:border-muted/10';
    }

    /**
     * Return Alpine.js attributes for highlighting an item (x-data and x-init).
     * Includes auto-scroll and auto-fadeout of the highlight.
     */
    public static function highlightNewData(bool $isHighlighted): string
    {
        $val = $isHighlighted ? 'true' : 'false';
        $data = 'x-data="{ highlighted: ' . $val . ', htimer: null }"';
        $init = 'x-init="$watch(\'highlighted\', v => { if (v) { if (htimer) clearTimeout(htimer); htimer = setTimeout(() => highlighted = false, 15000); } }); if (highlighted) { if (htimer) clearTimeout(htimer); htimer = setTimeout(() => highlighted = false, 15000); setTimeout(() => $el.scrollIntoView({behavior: \'smooth\', block: \'center\'}), 800); }"';
        $on = '@mb:highlight-step.window="const target = document.getElementById($event.detail.id); if ($event.detail.id === $el.id || (target && $el.contains(target))) { highlighted = false; $nextTick(() => highlighted = true); }"';
        return $data . ' ' . $init . ' ' . $on;
    }

    /**
     * Return Alpine.js :class rules for highlighting a new item.
     * Use within an object literal in a :class attribute.
     */
    public static function highlightNewXClassRules(): string
    {
        return "'highlight-new': highlighted, 'border-divider': !highlighted";
    }
}
