<?php

namespace GriffinForms\Admin\Html\FormControls\FormTheme;

/**
 * ButtonSubsection FormControl
 * Renders styling controls for a specific button type (submit, previous, or next)
 * Includes copy functionality to copy values from/to other button types
 */
class ButtonSubsection extends \GriffinForms\Admin\Html\FormControls\FormTheme\Format
{
    protected $button_type;  // 'submit', 'previous', 'next'
    protected $style_data;

    public function __construct($name = '', $value = '', $data = '')
    {
        parent::__construct($name, $value, $data);

        if (isset($data['button_type'])) {
            $this->button_type = $data['button_type'];
        }

        $this->style_data = $this->mergeStateDefaults(
            $this->extractBaseStyle($this->value)
        );
    }

    public function html()
    {
        echo '<div class="griffinforms-button-subsection griffinforms-button-' . esc_attr($this->button_type) . '">';

        // Header with copy buttons
        $this->renderHeader();

        // State tabs (default/focus/hover)
        $this->renderWithStateTabs();

        echo '</div>';
    }

    /**
     * Renders header with button type name and copy buttons
     */
    protected function renderHeader()
    {
        $button_labels = array(
            'submit' => __('Submit Button', 'griffinforms-form-builder'),
            'previous' => __('Previous Button', 'griffinforms-form-builder'),
            'next' => __('Next Button', 'griffinforms-form-builder')
        );

        echo '<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding: 10px; background-color: #f8f9fa; border-radius: 4px;">';

        echo '<h5 style="margin: 0;">' . esc_html($button_labels[$this->button_type] ?? ucfirst($this->button_type)) . '</h5>';

        echo '<div style="display: flex; gap: 8px;">';

        // Copy TO other buttons
        if ($this->button_type !== 'submit') {
            echo '<button type="button" class="btn btn-sm btn-outline-secondary griffinforms-copy-to-button" data-source-button="' . esc_attr($this->button_type) . '" data-target-button="submit" title="' . esc_attr(__('Copy to Submit Button', 'griffinforms-form-builder')) . '">';
            echo esc_html(__('Copy to Submit', 'griffinforms-form-builder'));
            echo '</button>';
        }

        if ($this->button_type !== 'previous') {
            echo '<button type="button" class="btn btn-sm btn-outline-secondary griffinforms-copy-to-button" data-source-button="' . esc_attr($this->button_type) . '" data-target-button="previous" title="' . esc_attr(__('Copy to Previous Button', 'griffinforms-form-builder')) . '">';
            echo esc_html(__('Copy to Previous', 'griffinforms-form-builder'));
            echo '</button>';
        }

        if ($this->button_type !== 'next') {
            echo '<button type="button" class="btn btn-sm btn-outline-secondary griffinforms-copy-to-button" data-source-button="' . esc_attr($this->button_type) . '" data-target-button="next" title="' . esc_attr(__('Copy to Next Button', 'griffinforms-form-builder')) . '">';
            echo esc_html(__('Copy to Next', 'griffinforms-form-builder'));
            echo '</button>';
        }

        echo '</div>';
        echo '</div>';
    }

    /**
     * Renders styling controls with state tabs (default/focus/hover)
     */
    protected function renderWithStateTabs()
    {
        $states = array('default', 'focus', 'hover');

        echo '<ul class="nav nav-tabs mb-3" role="tablist">';

        foreach ($states as $index => $state) {
            $active = ($index === 0) ? ' active' : '';
            $tab_id = 'griffinforms-state-button-' . esc_attr($this->button_type) . '-' . esc_attr($state);

            echo '<li class="nav-item" role="presentation">';
            echo '<button class="nav-link' . esc_attr($active) . '" id="' . esc_attr($tab_id) . '" data-bs-toggle="tab" data-bs-target="#' . esc_attr($tab_id) . '-pane" type="button" role="tab">';
            echo esc_html(ucfirst($state));
            echo '</button>';
            echo '</li>';
        }

        echo '</ul>';

        echo '<div class="tab-content">';

        foreach ($states as $index => $state) {
            $active_class = ($index === 0) ? ' show active' : '';
            $pane_id = 'griffinforms-state-button-' . esc_attr($this->button_type) . '-' . esc_attr($state) . '-pane';

            echo '<div class="tab-pane' . esc_attr($active_class) . '" id="' . esc_attr($pane_id) . '" role="tabpanel">';
            $this->renderStyleControls($state);
            echo '</div>';
        }

        echo '</div>';
    }

    /**
     * Renders button style controls for a specific state.
     */
    protected function renderStyleControls($state)
    {
        echo '<div class="row g-5">';
        $style_data = $this->style_data;

        // Background Control (Single Color or Gradient)
        echo '<div class="col-md-12">';
        $gradient_control = new GradientControl(
            $this->button_type . '_button',
            $style_data,
            array('state' => $state)
        );
        $gradient_control->html();
        echo '</div>';

        // Font Color
        echo '<div class="col-md-4">';
        echo '<label class="form-label">' . esc_html(__('Font Color', 'griffinforms-form-builder')) . '</label>';
        $text_color = new ColorPicker(
            $this->button_type . '_button',
            $style_data,
            array('state' => $state, 'property' => 'color')
        );
        $text_color->html();
        echo '</div>';

        // Padding
        echo '<div class="col-md-12">';
        echo '<label class="form-label">' . esc_html(__('Padding', 'griffinforms-form-builder')) . '</label>';
        $padding = new SidesDimensions(
            $this->button_type . '_button',
            $style_data,
            array('state' => $state, 'property' => 'padding')
        );
        $padding->html();
        echo '</div>';

        // Border Radius (default state only)
        if ($state === 'default') {
            echo '<div class="col-md-6">';
            echo '<label class="form-label">' . esc_html(__('Border Radius', 'griffinforms-form-builder')) . '</label>';
            $border_radius = new DimensionInput(
                $this->button_type . '_button',
                $style_data,
                array('state' => $state, 'property' => 'border-radius')
            );
            $border_radius->html();
            echo '</div>';
        }

        // Border Color
        echo '<div class="col-md-6">';
        echo '<label class="form-label">' . esc_html(__('Border Color', 'griffinforms-form-builder')) . '</label>';
        $border_color = new ColorPicker(
            $this->button_type . '_button',
            $style_data,
            array('state' => $state, 'property' => 'border', 'sub_property' => 'color')
        );
        $border_color->html();
        echo '</div>';

        // Border Width
        echo '<div class="col-md-12">';
        echo '<label class="form-label">' . esc_html(__('Border Width', 'griffinforms-form-builder')) . '</label>';
        $border_width = new SidesDimensions(
            $this->button_type . '_button',
            $style_data,
            array('state' => $state, 'property' => 'border', 'sub_property' => 'width')
        );
        $border_width->html();
        echo '</div>';

        // Border Style
        echo '<div class="col-md-6">';
        echo '<label class="form-label">' . esc_html(__('Border Style', 'griffinforms-form-builder')) . '</label>';
        $border_style = new BorderStyle(
            $this->button_type . '_button',
            $style_data,
            array('state' => $state)
        );
        $border_style->html();
        echo '</div>';

        // Box Shadow
        echo '<div class="col-md-12">';
        echo '<label class="form-label">' . esc_html(__('Box Shadow', 'griffinforms-form-builder')) . '</label>';
        $box_shadow = new BoxShadow(
            $this->button_type . '_button',
            $style_data,
            array('state' => $state)
        );
        $box_shadow->html();
        echo '</div>';

        // Custom CSS
        echo '<div class="col-md-12">';
        $custom_css = new CustomCss(
            $this->button_type . '_button',
            $style_data,
            array('state' => $state)
        );
        $custom_css->html();
        echo '</div>';

        echo '</div>';
    }

    protected function extractBaseStyle($value)
    {
        if (is_array($value)) {
            if (isset($value['default']) && is_array($value['default'])) {
                return $value;
            }

            if (isset($value['xs']) && is_array($value['xs'])) {
                return $value['xs'];
            }

            return $value;
        }

        return array();
    }

    protected function mergeStateDefaults($style_data)
    {
        if (!is_array($style_data)) {
            return array();
        }

        $default = isset($style_data['default']) && is_array($style_data['default']) ? $style_data['default'] : array();

        foreach ($style_data as $state => $state_values) {
            if ($state === 'default' || !is_array($state_values)) {
                continue;
            }

            $style_data[$state] = array_replace_recursive($default, $state_values);
        }

        return $style_data;
    }
}
