<?php
/**
 * TTS UI Components Class
 * 
 * Provides reusable UI components for the Text to Speech plugin
 * using the design system.
 * 
 * @package TTSWP
 * @since 1.0.0
 */

if (!defined('ABSPATH')) {
    exit;
}

class TTS_UI_Components {
    
    /**
     * Render a card component
     * 
     * @param string $title Card title
     * @param string $content Card content HTML
     * @param string $footer Optional footer content
     * @param array $args Additional arguments
     * @return string HTML output
     */
    public static function render_card($title, $content, $footer = '', $args = array()) {
        $defaults = array(
            'class' => '',
            'icon' => '',
            'header_actions' => '',
            'id' => ''
        );
        
        $args = wp_parse_args($args, $defaults);
        
        $card_classes = 'tts-card';
        if (!empty($args['class'])) {
            $card_classes .= ' ' . esc_attr($args['class']);
        }
        
        $card_id = !empty($args['id']) ? 'id="' . esc_attr($args['id']) . '"' : '';
        
        ob_start();
        ?>
        <div class="<?php echo esc_attr($card_classes); ?>" <?php echo $card_id; ?>>
            <?php if (!empty($title)) : ?>
            <div class="tts-card__header">
                <h3 class="tts-card__title">
                    <?php if (!empty($args['icon'])) : ?>
                        <span class="tts-card__icon"><?php echo $args['icon']; ?></span>
                    <?php endif; ?>
                    <?php echo esc_html($title); ?>
                </h3>
                <?php if (!empty($args['header_actions'])) : ?>
                    <div class="tts-card__actions">
                        <?php echo $args['header_actions']; ?>
                    </div>
                <?php endif; ?>
            </div>
            <?php endif; ?>
            
            <div class="tts-card__body">
                <?php echo $content; ?>
            </div>
            
            <?php if (!empty($footer)) : ?>
            <div class="tts-card__footer">
                <?php echo $footer; ?>
            </div>
            <?php endif; ?>
        </div>
        <?php
        return ob_get_clean();
    }
    
    /**
     * Render a form group
     * 
     * @param string $label Field label
     * @param string $input Input HTML
     * @param array $args Additional arguments
     * @return string HTML output
     */
    public static function render_form_group($label, $input, $args = array()) {
        $defaults = array(
            'help_text' => '',
            'required' => false,
            'class' => ''
        );
        
        $args = wp_parse_args($args, $defaults);
        
        $group_classes = 'tts-form-group';
        if (!empty($args['class'])) {
            $group_classes .= ' ' . esc_attr($args['class']);
        }
        
        ob_start();
        ?>
        <div class="<?php echo esc_attr($group_classes); ?>">
            <?php if (!empty($label)) : ?>
            <label class="tts-form-label">
                <?php echo esc_html($label); ?>
                <?php if ($args['required']) : ?>
                    <span class="tts-required">*</span>
                <?php endif; ?>
            </label>
            <?php endif; ?>
            
            <?php echo $input; ?>
            
            <?php if (!empty($args['help_text'])) : ?>
            <p class="tts-form-help"><?php echo esc_html($args['help_text']); ?></p>
            <?php endif; ?>
        </div>
        <?php
        return ob_get_clean();
    }
    
    /**
     * Render a text input field
     * 
     * @param string $name Input name
     * @param string $value Input value
     * @param array $args Additional arguments
     * @return string HTML output
     */
    public static function render_input($name, $value = '', $args = array()) {
        $defaults = array(
            'type' => 'text',
            'placeholder' => '',
            'class' => '',
            'id' => $name,
            'required' => false,
            'readonly' => false,
            'disabled' => false,
            'data' => array()
        );
        
        $args = wp_parse_args($args, $defaults);
        
        $input_classes = 'tts-form-input';
        if (!empty($args['class'])) {
            $input_classes .= ' ' . esc_attr($args['class']);
        }
        
        $attributes = array(
            'type="' . esc_attr($args['type']) . '"',
            'name="' . esc_attr($name) . '"',
            'id="' . esc_attr($args['id']) . '"',
            'value="' . esc_attr($value) . '"',
            'class="' . esc_attr($input_classes) . '"'
        );
        
        if (!empty($args['placeholder'])) {
            $attributes[] = 'placeholder="' . esc_attr($args['placeholder']) . '"';
        }
        
        if ($args['required']) {
            $attributes[] = 'required';
        }
        
        if ($args['readonly']) {
            $attributes[] = 'readonly';
        }
        
        if ($args['disabled']) {
            $attributes[] = 'disabled';
        }
        
        foreach ($args['data'] as $key => $val) {
            $attributes[] = 'data-' . esc_attr($key) . '="' . esc_attr($val) . '"';
        }
        
        return '<input ' . implode(' ', $attributes) . ' />';
    }
    
    /**
     * Render a select dropdown
     * 
     * @param string $name Select name
     * @param array $options Options array
     * @param string $selected Selected value
     * @param array $args Additional arguments
     * @return string HTML output
     */
    public static function render_select($name, $options, $selected = '', $args = array()) {
        $defaults = array(
            'class' => '',
            'id' => $name,
            'placeholder' => '-- Select --',
            'required' => false,
            'disabled' => false
        );
        
        $args = wp_parse_args($args, $defaults);
        
        $select_classes = 'tts-form-select';
        if (!empty($args['class'])) {
            $select_classes .= ' ' . esc_attr($args['class']);
        }
        
        ob_start();
        ?>
        <select 
            name="<?php echo esc_attr($name); ?>" 
            id="<?php echo esc_attr($args['id']); ?>"
            class="<?php echo esc_attr($select_classes); ?>"
            <?php echo $args['required'] ? 'required' : ''; ?>
            <?php echo $args['disabled'] ? 'disabled' : ''; ?>
        >
            <?php if (!empty($args['placeholder'])) : ?>
                <option value=""><?php echo esc_html($args['placeholder']); ?></option>
            <?php endif; ?>
            
            <?php foreach ($options as $value => $label) : ?>
                <option value="<?php echo esc_attr($value); ?>" <?php selected($selected, $value); ?>>
                    <?php echo esc_html($label); ?>
                </option>
            <?php endforeach; ?>
        </select>
        <?php
        return ob_get_clean();
    }
    
    /**
     * Render a toggle switch
     * 
     * @param string $name Toggle name
     * @param bool $checked Whether toggle is checked
     * @param array $args Additional arguments
     * @return string HTML output
     */
    public static function render_toggle($name, $checked = false, $args = array()) {
        $defaults = array(
            'id' => $name,
            'class' => '',
            'disabled' => false,
            'label' => ''
        );
        
        $args = wp_parse_args($args, $defaults);
        
        ob_start();
        ?>
        <label class="tts-toggle <?php echo esc_attr($args['class']); ?>">
            <input 
                type="checkbox" 
                name="<?php echo esc_attr($name); ?>" 
                id="<?php echo esc_attr($args['id']); ?>"
                class="tts-toggle__input"
                <?php checked($checked); ?>
                <?php echo $args['disabled'] ? 'disabled' : ''; ?>
            />
            <span class="tts-toggle__slider"></span>
            <?php if (!empty($args['label'])) : ?>
                <span class="tts-toggle__label"><?php echo esc_html($args['label']); ?></span>
            <?php endif; ?>
        </label>
        <?php
        return ob_get_clean();
    }
    
    /**
     * Render a button
     * 
     * @param string $text Button text
     * @param array $args Additional arguments
     * @return string HTML output
     */
    public static function render_button($text, $args = array()) {
        $defaults = array(
            'type' => 'button',
            'variant' => 'primary',
            'size' => 'md',
            'class' => '',
            'id' => '',
            'disabled' => false,
            'icon' => '',
            'href' => '',
            'target' => '',
            'data' => array()
        );
        
        $args = wp_parse_args($args, $defaults);
        
        $button_classes = 'tts-btn tts-btn--' . esc_attr($args['variant']);
        
        if ($args['size'] !== 'md') {
            $button_classes .= ' tts-btn--' . esc_attr($args['size']);
        }
        
        if (!empty($args['class'])) {
            $button_classes .= ' ' . esc_attr($args['class']);
        }
        
        $tag = !empty($args['href']) ? 'a' : 'button';
        
        $attributes = array(
            'class="' . esc_attr($button_classes) . '"'
        );
        
        if ($tag === 'button') {
            $attributes[] = 'type="' . esc_attr($args['type']) . '"';
            if ($args['disabled']) {
                $attributes[] = 'disabled';
            }
        } else {
            $attributes[] = 'href="' . esc_url($args['href']) . '"';
            if (!empty($args['target'])) {
                $attributes[] = 'target="' . esc_attr($args['target']) . '"';
            }
        }
        
        if (!empty($args['id'])) {
            $attributes[] = 'id="' . esc_attr($args['id']) . '"';
        }
        
        foreach ($args['data'] as $key => $val) {
            $attributes[] = 'data-' . esc_attr($key) . '="' . esc_attr($val) . '"';
        }
        
        ob_start();
        ?>
        <<?php echo $tag; ?> <?php echo implode(' ', $attributes); ?>>
            <?php if (!empty($args['icon'])) : ?>
                <span class="tts-btn__icon"><?php echo $args['icon']; ?></span>
            <?php endif; ?>
            <?php echo esc_html($text); ?>
        </<?php echo $tag; ?>>
        <?php
        return ob_get_clean();
    }
    
    /**
     * Render navigation tabs
     * 
     * @param array $tabs Array of tabs
     * @param string $current Current active tab
     * @param array $args Additional arguments
     * @return string HTML output
     */
    public static function render_nav_tabs($tabs, $current = '', $args = array()) {
        $defaults = array(
            'class' => '',
            'id' => ''
        );
        
        $args = wp_parse_args($args, $defaults);
        
        $nav_classes = 'tts-nav-tabs';
        if (!empty($args['class'])) {
            $nav_classes .= ' ' . esc_attr($args['class']);
        }
        
        ob_start();
        ?>
        <nav class="<?php echo esc_attr($nav_classes); ?>" <?php echo !empty($args['id']) ? 'id="' . esc_attr($args['id']) . '"' : ''; ?>>
            <?php foreach ($tabs as $tab_id => $tab) : 
                $is_active = ($current === $tab_id);
                $tab_classes = 'tts-nav-tab';
                if ($is_active) {
                    $tab_classes .= ' tts-nav-tab--active';
                }
                
                $tab_defaults = array(
                    'label' => '',
                    'icon' => '',
                    'badge' => '',
                    'url' => '#',
                    'class' => ''
                );
                
                $tab = wp_parse_args($tab, $tab_defaults);
                
                if (!empty($tab['class'])) {
                    $tab_classes .= ' ' . esc_attr($tab['class']);
                }
            ?>
                <a href="<?php echo esc_url($tab['url']); ?>" class="<?php echo esc_attr($tab_classes); ?>" data-tab="<?php echo esc_attr($tab_id); ?>">
                    <?php if (!empty($tab['icon'])) : ?>
                        <span class="tts-nav-tab__icon"><?php echo $tab['icon']; ?></span>
                    <?php endif; ?>
                    <?php echo esc_html($tab['label']); ?>
                    <?php if (!empty($tab['badge'])) : ?>
                        <span class="tts-nav-tab__badge"><?php echo esc_html($tab['badge']); ?></span>
                    <?php endif; ?>
                </a>
            <?php endforeach; ?>
        </nav>
        <?php
        return ob_get_clean();
    }
    
    /**
     * Render an alert/notification
     * 
     * @param string $message Alert message
     * @param string $type Alert type (success, error, warning, info)
     * @param array $args Additional arguments
     * @return string HTML output
     */
    public static function render_alert($message, $type = 'info', $args = array()) {
        $defaults = array(
            'dismissible' => false,
            'icon' => true,
            'class' => ''
        );
        
        $args = wp_parse_args($args, $defaults);
        
        $alert_classes = 'tts-alert tts-alert--' . esc_attr($type);
        if (!empty($args['class'])) {
            $alert_classes .= ' ' . esc_attr($args['class']);
        }
        
        $icons = array(
            'success' => '✓',
            'error' => '✕',
            'warning' => '⚠',
            'info' => 'ℹ'
        );
        
        ob_start();
        ?>
        <div class="<?php echo esc_attr($alert_classes); ?>">
            <?php if ($args['icon'] && isset($icons[$type])) : ?>
                <span class="tts-alert__icon"><?php echo $icons[$type]; ?></span>
            <?php endif; ?>
            <div class="tts-alert__message"><?php echo wp_kses_post($message); ?></div>
            <?php if ($args['dismissible']) : ?>
                <button type="button" class="tts-alert__dismiss" aria-label="Dismiss">×</button>
            <?php endif; ?>
        </div>
        <?php
        return ob_get_clean();
    }
    
    /**
     * Render a status indicator
     * 
     * @param string $status Status type (connected, disconnected, pending)
     * @param string $label Status label
     * @param array $args Additional arguments
     * @return string HTML output
     */
    public static function render_status($status, $label = '', $args = array()) {
        $defaults = array(
            'class' => ''
        );
        
        $args = wp_parse_args($args, $defaults);
        
        $status_classes = 'tts-status tts-status--' . esc_attr($status);
        if (!empty($args['class'])) {
            $status_classes .= ' ' . esc_attr($args['class']);
        }
        
        if (empty($label)) {
            $labels = array(
                'connected' => __('Connected', 'text-to-speech-tts'),
                'disconnected' => __('Disconnected', 'text-to-speech-tts'),
                'pending' => __('Pending', 'text-to-speech-tts')
            );
            $label = isset($labels[$status]) ? $labels[$status] : ucfirst($status);
        }
        
        ob_start();
        ?>
        <span class="<?php echo esc_attr($status_classes); ?>">
            <span class="tts-status__dot"></span>
            <span class="tts-status__label"><?php echo esc_html($label); ?></span>
        </span>
        <?php
        return ob_get_clean();
    }
    
    /**
     * Render a loading spinner
     * 
     * @param array $args Additional arguments
     * @return string HTML output
     */
    public static function render_loading($args = array()) {
        $defaults = array(
            'size' => 'md',
            'class' => ''
        );
        
        $args = wp_parse_args($args, $defaults);
        
        $loading_classes = 'tts-loading';
        if ($args['size'] === 'lg') {
            $loading_classes .= ' tts-loading--lg';
        }
        if (!empty($args['class'])) {
            $loading_classes .= ' ' . esc_attr($args['class']);
        }
        
        return '<div class="' . esc_attr($loading_classes) . '"></div>';
    }
    
    /**
     * Render a voice card component
     * 
     * @param array $voice Voice data
     * @param array $args Additional arguments
     * @return string HTML output
     */
    public static function render_voice_card($voice, $args = array()) {
        $defaults = array(
            'selected' => false,
            'show_preview' => true,
            'show_select' => true,
            'class' => ''
        );
        
        $args = wp_parse_args($args, $defaults);
        
        $card_classes = 'tts-voice-card';
        if ($args['selected']) {
            $card_classes .= ' tts-voice-card--selected';
        }
        if (!empty($args['class'])) {
            $card_classes .= ' ' . esc_attr($args['class']);
        }
        
        ob_start();
        ?>
        <div class="<?php echo esc_attr($card_classes); ?>" data-voice-id="<?php echo esc_attr($voice['voice_id']); ?>">
            <div class="tts-voice-card__header">
                <div>
                    <h4 class="tts-voice-card__name"><?php echo esc_html($voice['name']); ?></h4>
                    <p class="tts-voice-card__language"><?php echo esc_html($voice['language']); ?></p>
                </div>
                <?php if (!empty($voice['badge'])) : ?>
                    <span class="tts-voice-card__badge"><?php echo esc_html($voice['badge']); ?></span>
                <?php endif; ?>
            </div>
            
            <?php if (!empty($voice['description'])) : ?>
                <p class="tts-voice-card__description"><?php echo esc_html($voice['description']); ?></p>
            <?php endif; ?>
            
            <div class="tts-voice-card__actions">
                <?php if ($args['show_preview']) : ?>
                    <?php echo self::render_button(__('Preview', 'text-to-speech-tts'), array(
                        'variant' => 'secondary',
                        'size' => 'sm',
                        'class' => 'tts-voice-preview',
                        'data' => array('voice-id' => $voice['voice_id'])
                    )); ?>
                <?php endif; ?>
                
                <?php if ($args['show_select']) : ?>
                    <?php echo self::render_button(__('Select', 'text-to-speech-tts'), array(
                        'variant' => 'primary',
                        'size' => 'sm',
                        'class' => 'tts-voice-select',
                        'data' => array('voice-id' => $voice['voice_id'])
                    )); ?>
                <?php endif; ?>
            </div>
        </div>
        <?php
        return ob_get_clean();
    }
    
    /**
     * Render a stat card
     * 
     * @param string $value Stat value
     * @param string $label Stat label
     * @param array $args Additional arguments
     * @return string HTML output
     */
    public static function render_stat_card($value, $label, $args = array()) {
        $defaults = array(
            'icon' => '',
            'trend' => '',
            'class' => ''
        );
        
        $args = wp_parse_args($args, $defaults);
        
        $card_classes = 'tts-stat-card';
        if (!empty($args['class'])) {
            $card_classes .= ' ' . esc_attr($args['class']);
        }
        
        ob_start();
        ?>
        <div class="<?php echo esc_attr($card_classes); ?>">
            <?php if (!empty($args['icon'])) : ?>
                <div class="tts-stat-card__icon"><?php echo $args['icon']; ?></div>
            <?php endif; ?>
            <div class="tts-stat-card__value"><?php echo esc_html($value); ?></div>
            <div class="tts-stat-card__label"><?php echo esc_html($label); ?></div>
            <?php if (!empty($args['trend'])) : ?>
                <div class="tts-stat-card__trend"><?php echo esc_html($args['trend']); ?></div>
            <?php endif; ?>
        </div>
        <?php
        return ob_get_clean();
    }
    
    /**
     * Begin a settings form
     * 
     * @param array $args Form arguments
     * @return string HTML output
     */
    public static function begin_form($args = array()) {
        $defaults = array(
            'action' => '',
            'method' => 'post',
            'class' => 'tts-form',
            'id' => ''
        );
        
        $args = wp_parse_args($args, $defaults);
        
        ob_start();
        ?>
        <form 
            action="<?php echo esc_url($args['action']); ?>" 
            method="<?php echo esc_attr($args['method']); ?>"
            class="<?php echo esc_attr($args['class']); ?>"
            <?php echo !empty($args['id']) ? 'id="' . esc_attr($args['id']) . '"' : ''; ?>
        >
            <?php wp_nonce_field('tts_settings_nonce', 'tts_nonce'); ?>
        <?php
        return ob_get_clean();
    }
    
    /**
     * End a settings form
     * 
     * @return string HTML output
     */
    public static function end_form() {
        return '</form>';
    }
}