<?php
// components/Ui/Tooltip.php

namespace Components\Ui;

use Components\Base;

class Tooltip extends Base
{
    /**
     * Render a tooltip UI component using popover element.
     * Supports HTML / multiline content.
     *
     * @param string $triggerHtml The HTML for the trigger element
     * @param string $contentHtml The HTML content for the tooltip
     * @param array $options {
     *     @var string $id Optional ID for the popover element
     *     @var string $anchor Anchor position (e.g., 'top', 'bottom', 'right', 'left', 'bottom start', etc.; default: 'top')
     *     @var string $trigger_tag The tag for the trigger element (default: 'span')
     *     @var array $trigger_attrs Extra attributes for the trigger element
     *     @var string $popover_class Extra classes for the popover element
     *     @var array $popover_attrs Extra attributes for the popover element
     *     @var bool $as_tooltip Whether to trigger on hover (default: true)
     * }
     * @return string
     */
    public static function render(string $triggerHtml, string $contentHtml, array $options = []): string
    {
        $id = $options['id'] ?? uniqid('tt-');
        $anchor = $options['anchor'] ?? 'top';
        $triggerTag = $options['trigger_tag'] ?? 'button'; // Default to button for better accessibility and anchoring
        $triggerAttrs = $options['trigger_attrs'] ?? [];
        $popoverClass = $options['popover_class'] ?? '';
        $popoverAttrs = $options['popover_attrs'] ?? [];
        $asTooltip = $options['as_tooltip'] ?? true;

        // Linking trigger to popover is important for automatic anchoring in <el-popover>
        $triggerAttrs['popovertarget'] = $id;

        if ($asTooltip) {
            // Hover behavior using Alpine.js and Popover API
            $triggerAttrs['@mouseenter'] = "document.getElementById('{$id}')?.showPopover()";
            $triggerAttrs['@mouseleave'] = "document.getElementById('{$id}')?.hidePopover()";
        }

        if ($triggerTag === 'button' && !isset($triggerAttrs['type'])) {
            $triggerAttrs['type'] = 'button';
        }

        // Default popover classes for a tooltip look (dark, small, rounded)
        $defaultPopoverClass = 'bg-gray-900 text-white text-[11px] font-medium rounded-md py-1.5 px-2.5 shadow-sm border-0 pointer-events-none';
        $combinedPopoverClass = trim($defaultPopoverClass . ' ' . $popoverClass);

        // Animations and discrete transitions
        $transitionClasses = 'transition transition-discrete data-closed:opacity-0 data-enter:duration-75 data-enter:ease-out data-leave:duration-100 data-leave:ease-in';
        $combinedPopoverClass .= ' ' . $transitionClasses;

        $popoverAttrsStr = self::attrs(array_merge([
            'popover' => 'manual',
            'id' => $id,
            'anchor' => $anchor,
            'class' => $combinedPopoverClass,
            'style' => '--anchor-gap: 6px;',
        ], $popoverAttrs));

        $triggerAttrsStr = self::attrs($triggerAttrs);

        ob_start();
        ?>
        <<?= $triggerTag ?> <?= $triggerAttrsStr ?> x-data>
            <?= $triggerHtml ?>
        </<?= $triggerTag ?>>

        <el-popover <?= $popoverAttrsStr ?>>
            <?= $contentHtml ?>
        </el-popover>
        <?php
        return ob_get_clean();
    }
}
