<?php

namespace GriffinForms\Admin\Html\FormControls\FormTheme;

class FieldStyleGroup extends \GriffinForms\Admin\Html\FormControls\FormTheme\Format
{
    protected $field_type;  // 'text_input', 'textarea', 'select_input', 'checkbox_radio'
    protected $style_data;
    protected $state_cache = array();

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

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

        $this->style_data = is_array($this->value) ? $this->value : array();
    }

    public function html()
    {
        echo '<div class="griffinforms-field-style-group griffinforms-' . esc_attr($this->field_type) . '-style mb-4">';

        $this->renderHeader();

        // Render state tabs and content
        $this->renderStateTabsAndContent();

        echo '</div>';
    }

    /**
     * Renders the header with field type name
     */
    protected function renderHeader()
    {
        $field_type_labels = $this->getFieldTypeLabels();
        $label = isset($field_type_labels[$this->field_type]) ? $field_type_labels[$this->field_type] : ucfirst($this->field_type);

        echo '<h6 class="mb-3">';
        echo '<i class="bi bi-gear me-2"></i>' . esc_html($label);
        echo '</h6>';
    }

    /**
     * Renders state tabs and content
     */
    protected function renderStateTabsAndContent()
    {
        // Checkbox/Radio doesn't have focus/hover states
        $has_states = ($this->field_type !== 'checkbox_radio');
        $states = $has_states ? array('default', 'focus', 'hover') : array('default');

        if ($has_states) {
            echo '<ul class="nav nav-tabs mb-3" role="tablist">';

            foreach ($states as $index => $state) {
                $active = ($index === 0) ? ' active' : '';
                $tab_id = 'griffinforms-fieldstate-' . esc_attr($this->field_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-fieldstate-' . esc_attr($this->field_type) . '-' . esc_attr($state) . '-pane';

            if ($has_states) {
                echo '<div class="tab-pane' . esc_attr($active_class) . '" id="' . esc_attr($pane_id) . '" role="tabpanel">';
            }

            echo '<div class="row g-5">';
            $this->renderFieldControls($state);
            echo '</div>';

            if ($has_states) {
                echo '</div>';
            }
        }

        echo '</div>';
    }

    /**
     * Renders styling controls based on field type and state
     */
    protected function renderFieldControls($state)
    {
        switch ($this->field_type) {
            case 'text_input':
                $this->renderTextInputControls($state);
                break;

            case 'textarea':
                $this->renderTextareaControls($state);
                break;

            case 'select_input':
                $this->renderSelectInputControls($state);
                break;

            case 'checkbox_radio':
                $this->renderCheckboxRadioControls($state);
                break;
        }
    }

    /**
     * Renders controls for text input fields
     */
    protected function renderTextInputControls($state)
    {
        $state_data = $this->getFieldStateScopedData($state);
        // Background Color
        echo '<div class="col-md-6">';
        echo '<label class="form-label form-label-lg">' . esc_html(__('Background Color', 'griffinforms-form-builder')) . '</label>';
        $bg_color = new ColorPicker(
            'field_style',
            $state_data,
            array('field_type' => $this->field_type, 'state' => $state, 'property' => 'background-color')
        );
        $bg_color->html();
        echo '</div>';

        // Text Color
        echo '<div class="col-md-6">';
        echo '<label class="form-label form-label-lg">' . esc_html(__('Text Color', 'griffinforms-form-builder')) . '</label>';
        $text_color = new ColorPicker(
            'field_style',
            $state_data,
            array('field_type' => $this->field_type, 'state' => $state, 'property' => 'color')
        );
        $text_color->html();
        echo '</div>';

        // Placeholder Color
        if ($state === 'default') {
            echo '<div class="col-md-6">';
            echo '<label class="form-label form-label-lg">' . esc_html(__('Placeholder Color', 'griffinforms-form-builder')) . '</label>';
            $placeholder_color = new ColorPicker(
                'field_style',
                $state_data,
                array('field_type' => $this->field_type, 'state' => $state, 'property' => 'placeholder_color')
            );
            $placeholder_color->html();
            echo '</div>';
        }

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

        // Border Color, Style, and Radius - First Row
        // Border Color
        echo '<div class="col-md-4">';
        echo '<label class="form-label form-label-lg">' . esc_html(__('Border Color', 'griffinforms-form-builder')) . '</label>';
        $border_color = new ColorPicker(
            'field_style',
            $state_data,
            array('field_type' => $this->field_type, 'state' => $state, 'property' => 'border', 'sub_property' => 'color')
        );
        $border_color->html();
        echo '</div>';

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

        // Border Radius
        echo '<div class="col-md-6">';
        echo '<label class="form-label form-label-lg">' . esc_html(__('Border Radius', 'griffinforms-form-builder')) . '</label>';
        $border_radius = new DimensionInput(
            'field_style',
            $state_data,
            array('field_type' => $this->field_type, 'state' => $state, 'property' => 'border-radius')
        );
        $border_radius->html();
        echo '</div>';

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

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

        // Custom CSS
        echo '<div class="col-md-12">';
        $custom_css = new CustomCss(
            'field_style',
            $state_data,
            array('field_type' => $this->field_type, 'state' => $state)
        );
        $custom_css->html();
        echo '</div>';
    }

    /**
     * Renders controls for textarea fields
     */
    protected function renderTextareaControls($state)
    {
        // Same as text input
        $this->renderTextInputControls($state);
    }

    /**
     * Renders controls for select dropdown fields
     */
    protected function renderSelectInputControls($state)
    {
        $state_data = $this->getFieldStateScopedData($state);
        // Background Color
        echo '<div class="col-md-6">';
        echo '<label class="form-label form-label-lg">' . esc_html(__('Background Color', 'griffinforms-form-builder')) . '</label>';
        $bg_color = new ColorPicker(
            'field_style',
            $state_data,
            array('field_type' => $this->field_type, 'state' => $state, 'property' => 'background-color')
        );
        $bg_color->html();
        echo '</div>';

        // Text Color
        echo '<div class="col-md-6">';
        echo '<label class="form-label form-label-lg">' . esc_html(__('Text Color', 'griffinforms-form-builder')) . '</label>';
        $text_color = new ColorPicker(
            'field_style',
            $state_data,
            array('field_type' => $this->field_type, 'state' => $state, 'property' => 'color')
        );
        $text_color->html();
        echo '</div>';

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

        // Border Color, Style, and Radius - First Row
        // Border Color
        echo '<div class="col-md-4">';
        echo '<label class="form-label form-label-lg">' . esc_html(__('Border Color', 'griffinforms-form-builder')) . '</label>';
        $border_color = new ColorPicker(
            'field_style',
            $state_data,
            array('field_type' => $this->field_type, 'state' => $state, 'property' => 'border', 'sub_property' => 'color')
        );
        $border_color->html();
        echo '</div>';

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

        // Border Radius
        echo '<div class="col-md-6">';
        echo '<label class="form-label form-label-lg">' . esc_html(__('Border Radius', 'griffinforms-form-builder')) . '</label>';
        $border_radius = new DimensionInput(
            'field_style',
            $state_data,
            array('field_type' => $this->field_type, 'state' => $state, 'property' => 'border-radius')
        );
        $border_radius->html();
        echo '</div>';

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

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

        // Custom CSS
        echo '<div class="col-md-12">';
        $custom_css = new CustomCss(
            'field_style',
            $state_data,
            array('field_type' => $this->field_type, 'state' => $state)
        );
        $custom_css->html();
        echo '</div>';
    }

    /**
     * Renders controls for checkbox and radio fields
     */
    protected function renderCheckboxRadioControls($state)
    {
        $state_data = $this->getFieldStateScopedData($state);
        // Accent Color
        echo '<div class="col-md-6">';
        echo '<label class="form-label form-label-lg">' . esc_html(__('Accent Color', 'griffinforms-form-builder')) . '</label>';
        $accent_color = new ColorPicker(
            'field_style',
            $state_data,
            array('field_type' => $this->field_type, 'state' => $state, 'property' => 'accent_color')
        );
        $accent_color->html();
        echo '</div>';

        // Size
        echo '<div class="col-md-6">';
        echo '<label class="form-label form-label-lg">' . esc_html(__('Size', 'griffinforms-form-builder')) . '</label>';
        $size = new DimensionInput(
            'field_style',
            $state_data,
            array('field_type' => $this->field_type, 'state' => $state, 'property' => 'size')
        );
        $size->html();
        echo '</div>';

        // Margin
        echo '<div class="col-md-12">';
        echo '<label class="form-label form-label-lg">' . esc_html(__('Margin', 'griffinforms-form-builder')) . '</label>';
        $margin = new SidesDimensions(
            'field_style',
            $state_data,
            array('field_type' => $this->field_type, 'state' => $state, 'property' => 'margin')
        );
        $margin->html();
        echo '</div>';

        // Custom CSS
        echo '<div class="col-md-12">';
        $custom_css = new CustomCss(
            'field_style',
            $state_data,
            array('field_type' => $this->field_type, 'state' => $state)
        );
        $custom_css->html();
        echo '</div>';
    }

    /**
     * Gets readable labels for field types
     */
    protected function getFieldTypeLabels()
    {
        return array(
            'text_input' => __('Text Input Fields', 'griffinforms-form-builder'),
            'textarea' => __('Textarea Fields', 'griffinforms-form-builder'),
            'select_input' => __('Select/Dropdown Fields', 'griffinforms-form-builder'),
            'checkbox_radio' => __('Checkboxes & Radios', 'griffinforms-form-builder')
        );
    }

    protected function getFieldStateScopedData($state)
    {
        if (isset($this->state_cache[$state])) {
            return $this->state_cache[$state];
        }

        $field_states = isset($this->style_data[$this->field_type]) && is_array($this->style_data[$this->field_type])
            ? $this->style_data[$this->field_type]
            : array();

        $default = isset($field_states['default']) && is_array($field_states['default']) ? $field_states['default'] : array();
        $state_values = isset($field_states[$state]) && is_array($field_states[$state]) ? $field_states[$state] : array();

        $field_states[$state] = ('default' === $state)
            ? $state_values
            : array_replace_recursive($default, $state_values);

        $this->state_cache[$state] = array($this->field_type => $field_states);
        return $this->state_cache[$state];
    }
}
