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

/**
 * Reusable Popover component using Tailwind Plus Elements (<el-popover>).
 *
 * Options (all optional unless stated otherwise):
 * - id: string             // unique ID for the popover (required for trigger connection)
 * - trigger_html: string   // raw HTML for the trigger button
 * - trigger_attrs: array   // attributes for the trigger button
 * - trigger_tag: string    // tag for the trigger (default: button)
 * - content_html: string   // raw HTML for the popover content
 * - popover_attrs: array   // attributes for the <el-popover> element
 */
class Popover extends Base
{
    /** Render popover with provided options */
    public static function render(array $opts = []): string
    {
        $id = $opts['id'] ?? 'popover-' . bin2hex(random_bytes(4));
        $triggerHtml = (string)($opts['trigger_html'] ?? '');
        $triggerTag = isset($opts['trigger_tag']) ? (string)$opts['trigger_tag'] : 'button';
        $triggerAttrs = is_array($opts['trigger_attrs'] ?? null) ? $opts['trigger_attrs'] : [];
        $contentHtml = (string)($opts['content_html'] ?? '');
        $popoverAttrs = is_array($opts['popover_attrs'] ?? null) ? $opts['popover_attrs'] : [];

        // Connect trigger to popover if tag is present
        if ($triggerTag !== '') {
            $triggerAttrs['popovertarget'] = $id;
            if ($triggerTag === 'button' && !isset($triggerAttrs['type'])) {
                $triggerAttrs['type'] = 'button';
            }
        }

        // Popover defaults
        $popoverAttrs['id'] = $id;
        if (!isset($popoverAttrs['popover'])) {
            $popoverAttrs['popover'] = 'auto';
        }
        
        $popoverClassDefault = 'min-w-32 py-1 rounded-2xl bg-white shadow-lg outline-1 outline-black/5 ' .
            'transition transition-discrete [--anchor-gap:--spacing(1)] ' .
            'backdrop:bg-transparent ' .
            'data-closed:opacity-0 data-closed:translate-y-1 ' .
            'data-enter:duration-200 data-enter:ease-out ' .
            'data-leave:duration-150 data-leave:ease-in ' .
            'dark:bg-gray-800 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10';

        $popoverClass = trim((string)($popoverAttrs['class'] ?? ''));
        if ($popoverClass !== '') {
            $popoverAttrs['class'] = $popoverClassDefault . ' ' . $popoverClass;
        } else {
            $popoverAttrs['class'] = $popoverClassDefault;
        }

        $triggerAttrStr = self::attrs($triggerAttrs);
        $popoverAttrStr = self::attrs($popoverAttrs);

        $out = '';
        if ($triggerTag !== '') {
            $out .= "<{$triggerTag} {$triggerAttrStr}>" . PHP_EOL;
            $out .= "    {$triggerHtml}" . PHP_EOL;
            $out .= "</{$triggerTag}>" . PHP_EOL;
        } else {
            $out .= "{$triggerHtml}" . PHP_EOL;
        }

        $out .= "<el-popover {$popoverAttrStr}>" . PHP_EOL;
        $out .= "    {$contentHtml}" . PHP_EOL;
        $out .= "</el-popover>";

        return $out;
    }
}
