<?php

namespace GriffinForms\Admin\Html\FormControls\FormTheme;

class GradientControl extends \GriffinForms\Admin\Html\FormControls\FormTheme\Format
{
    protected $state;

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

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

    }

    public function html()
    {
        $background_data = $this->getBackgroundData();
        $mode = $background_data['mode'];

        // Generate field names
        $mode_field = $this->buildSimpleStyleName($this->state, 'background_mode');
        $color_field = $this->buildSimpleStyleName($this->state, 'background-color');
        $color1_field = $this->buildSimpleStyleName($this->state, 'gradient_color_1');
        $color2_field = $this->buildSimpleStyleName($this->state, 'gradient_color_2');
        $angle_field = $this->buildSimpleStyleName($this->state, 'gradient_angle');
        $size_field = $this->buildSimpleStyleName($this->state, 'background_image_size');
        $position_field = $this->buildSimpleStyleName($this->state, 'background_image_position');
        $repeat_field = $this->buildSimpleStyleName($this->state, 'background_image_repeat');

        // Main container with spacing
        echo '<div class="griffinforms-background-control my-3" data-background-name="' . esc_attr($this->name) . '">';

        // Main label
        echo '<label class="form-label fw-bold">' . esc_html(__('Background', 'griffinforms-form-builder')) . '</label>';

        // Radio button group for mode selection
        echo '<div style="display: flex; gap: 20px; margin-bottom: 16px;">';

        // Single Color Radio
        echo '<label style="display: flex; align-items: center; cursor: pointer; gap: 8px;">';
        echo '<input type="radio" class="griffinforms-background-mode-radio" ';
        echo 'name="' . esc_attr($mode_field) . '" ';
        echo 'value="single" ';
        echo ($mode === 'single' ? 'checked' : '') . ' ';
        echo 'data-background-name="' . esc_attr($this->name) . '">';
        echo '<span>' . esc_html(__('Single Color', 'griffinforms-form-builder')) . '</span>';
        echo '</label>';

        // Gradient Radio
        echo '<label style="display: flex; align-items: center; cursor: pointer; gap: 8px;">';
        echo '<input type="radio" class="griffinforms-background-mode-radio" ';
        echo 'name="' . esc_attr($mode_field) . '" ';
        echo 'value="gradient" ';
        echo ($mode === 'gradient' ? 'checked' : '') . ' ';
        echo 'data-background-name="' . esc_attr($this->name) . '">';
        echo '<span>' . esc_html(__('Gradient', 'griffinforms-form-builder')) . '</span>';
        echo '</label>';

        // Image Radio
        echo '<label style="display: flex; align-items: center; cursor: pointer; gap: 8px;">';
        echo '<input type="radio" class="griffinforms-background-mode-radio" ';
        echo 'name="' . esc_attr($mode_field) . '" ';
        echo 'value="image" ';
        echo ($mode === 'image' ? 'checked' : '') . ' ';
        echo 'data-background-name="' . esc_attr($this->name) . '">';
        echo '<span>' . esc_html(__('Image', 'griffinforms-form-builder')) . '</span>';
        echo '</label>';

        echo '</div>';

        // Color inputs container - side by side
        echo '<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;">';

        // Single Color Picker (visible when single color mode is selected)
        $single_display = ($mode === 'single') ? '' : 'display: none; ';
        echo '<div style="' . esc_attr($single_display) . '" class="griffinforms-background-single-color" data-background-name="' . esc_attr($this->name) . '">';
        echo '<label class="form-label" style="font-size: 0.875rem;">' . esc_html(__('Color', 'griffinforms-form-builder')) . '</label>';
        $color_picker = new ColorPicker(
            $this->name,
            $background_data['color'] ?? '#ffffff',
            array('state' => $this->state, 'property' => 'background-color')
        );
        $color_picker->html();
        echo '</div>';

        // Gradient Color 1 (visible when gradient mode is selected)
        $gradient_display = ($mode === 'gradient') ? '' : 'display: none; ';
        echo '<div style="' . esc_attr($gradient_display) . '" class="griffinforms-background-gradient-color-1" data-background-name="' . esc_attr($this->name) . '">';
        echo '<label class="form-label" style="font-size: 0.875rem;">' . esc_html(__('Color 1', 'griffinforms-form-builder')) . '</label>';
        $color1_picker = new ColorPicker(
            $this->name,
            $background_data['color_1'] ?? '#000000',
            array('state' => $this->state, 'property' => 'gradient_color_1')
        );
        $color1_picker->html();
        echo '</div>';

        // Gradient Color 2 (visible when gradient mode is selected)
        echo '<div style="' . esc_attr($gradient_display) . '" class="griffinforms-background-gradient-color-2" data-background-name="' . esc_attr($this->name) . '">';
        echo '<label class="form-label" style="font-size: 0.875rem;">' . esc_html(__('Color 2', 'griffinforms-form-builder')) . '</label>';
        $color2_picker = new ColorPicker(
            $this->name,
            $background_data['color_2'] ?? '#ffffff',
            array('state' => $this->state, 'property' => 'gradient_color_2')
        );
        $color2_picker->html();
        echo '</div>';

        // Gradient Angle (visible when gradient mode is selected)
        echo '<div style="' . esc_attr($gradient_display) . '" class="griffinforms-background-gradient-angle" data-background-name="' . esc_attr($this->name) . '">';
        echo '<label class="form-label" style="font-size: 0.875rem;">' . esc_html(__('Angle', 'griffinforms-form-builder')) . '</label>';
        echo '<div style="display: grid; grid-template-columns: 1fr 80px; gap: 6px; align-items: center;">';
        echo '<input type="text" class="griffinforms-gradient-angle-input" ';
        echo 'placeholder="45" ';
        echo 'value="' . esc_attr($this->parseAngle($background_data['angle'])) . '" ';
        echo 'data-field-name="' . esc_attr($angle_field) . '" ';
        echo 'style="width: 100%;" />';
        echo '<select class="griffinforms-gradient-angle-unit" style="width: 100%;">';
        echo '<option value="deg" selected>°</option>';
        echo '</select>';
        echo '</div>';
        echo '</div>';

        // Image Uploader (visible when image mode is selected)
        $image_display = ($mode === 'image') ? '' : 'display: none; ';
        echo '<div style="' . esc_attr($image_display) . '" class="griffinforms-background-image-uploader" data-background-name="' . esc_attr($this->name) . '">';
        $media_picker = new MediaPicker(
            $this->name,
            $background_data['image'] ?? '',
            array('state' => $this->state)
        );
        $media_picker->html();
        echo '</div>';

        // Image Size (visible when image mode is selected)
        echo '<div style="' . esc_attr($image_display) . '" class="griffinforms-background-image-size" data-background-name="' . esc_attr($this->name) . '">';
        echo '<label class="form-label" style="font-size: 0.875rem;">' . esc_html(__('Size', 'griffinforms-form-builder')) . '</label>';
        echo '<select class="form-select griffinforms-image-size-select" name="' . esc_attr($size_field) . '" style="width: 100%;">';
        $size_options = array(
            'cover' => 'Cover',
            'contain' => 'Contain',
            'auto' => 'Auto',
            '100%' => '100%',
            '100% auto' => '100% Auto',
            '100% 100%' => '100% 100%'
        );
        if (!empty($background_data['image_size']) && !isset($size_options[$background_data['image_size']])) {
            $size_options = array($background_data['image_size'] => $background_data['image_size']) + $size_options;
        }
        foreach ($size_options as $val => $label) {
            $selected = ($background_data['image_size'] === $val) ? 'selected' : '';
            echo '<option value="' . esc_attr($val) . '" ' . esc_attr($selected) . '>' . esc_html($label) . '</option>';
        }
        echo '</select>';
        echo '</div>';

        // Image Position (visible when image mode is selected)
        echo '<div style="' . esc_attr($image_display) . '" class="griffinforms-background-image-position" data-background-name="' . esc_attr($this->name) . '">';
        echo '<label class="form-label" style="font-size: 0.875rem;">' . esc_html(__('Position', 'griffinforms-form-builder')) . '</label>';
        echo '<select class="form-select griffinforms-image-position-select" name="' . esc_attr($position_field) . '" style="width: 100%;">';
        $position_options = array(
            'center' => 'Center',
            'top' => 'Top',
            'bottom' => 'Bottom',
            'left' => 'Left',
            'right' => 'Right',
            'top left' => 'Top Left',
            'top right' => 'Top Right',
            'bottom left' => 'Bottom Left',
            'bottom right' => 'Bottom Right'
        );
        if (!empty($background_data['image_position']) && !isset($position_options[$background_data['image_position']])) {
            $position_options = array($background_data['image_position'] => $background_data['image_position']) + $position_options;
        }
        foreach ($position_options as $val => $label) {
            $selected = ($background_data['image_position'] === $val) ? 'selected' : '';
            echo '<option value="' . esc_attr($val) . '" ' . esc_attr($selected) . '>' . esc_html($label) . '</option>';
        }
        echo '</select>';
        echo '</div>';

        // Image Repeat (visible when image mode is selected)
        echo '<div style="' . esc_attr($image_display) . '" class="griffinforms-background-image-repeat" data-background-name="' . esc_attr($this->name) . '">';
        echo '<label class="form-label" style="font-size: 0.875rem;">' . esc_html(__('Repeat', 'griffinforms-form-builder')) . '</label>';
        echo '<select class="form-select griffinforms-image-repeat-select" name="' . esc_attr($repeat_field) . '" style="width: 100%;">';
        $repeat_options = array(
            'no-repeat' => 'No Repeat',
            'repeat' => 'Repeat',
            'repeat-x' => 'Repeat X',
            'repeat-y' => 'Repeat Y'
        );
        if (!empty($background_data['image_repeat']) && !isset($repeat_options[$background_data['image_repeat']])) {
            $repeat_options = array($background_data['image_repeat'] => $background_data['image_repeat']) + $repeat_options;
        }
        foreach ($repeat_options as $val => $label) {
            $selected = ($background_data['image_repeat'] === $val) ? 'selected' : '';
            echo '<option value="' . esc_attr($val) . '" ' . esc_attr($selected) . '>' . esc_html($label) . '</option>';
        }
        echo '</select>';
        echo '</div>';

        echo '</div>'; // Close color inputs grid

        echo '</div>'; // Close main background control div
    }

    /**
     * Gets background data from nested array structure
     * Supports three modes: single, gradient, image
     */
    protected function getBackgroundData()
    {
        if (!is_array($this->value)) {
            return array(
                'mode' => 'single',
                'color' => '#ffffff',
                'color_1' => '#000000',
                'color_2' => '#ffffff',
                'angle' => '45deg',
                'image' => '',
                'image_size' => 'cover',
                'image_position' => 'center',
                'image_repeat' => 'no-repeat'
            );
        }

        $value = $this->value;

        // Theme data is stored per-state; look for state directly
        if ($this->state && isset($value[$this->state])) {
            $state_data = $value[$this->state];

            // Detect background mode
            $mode = isset($state_data['background_mode']) ? $state_data['background_mode'] : 'single';

            // For backward compatibility: if gradient colors exist but mode isn't set, treat as gradient
            if (!isset($state_data['background_mode']) && !empty($state_data['gradient_color_1']) && !empty($state_data['gradient_color_2'])) {
                $mode = 'gradient';
            }

            return array(
                'mode' => $mode,
                'color' => isset($state_data['background-color']) ? $state_data['background-color'] : '#ffffff',
                'color_1' => isset($state_data['gradient_color_1']) ? $state_data['gradient_color_1'] : '#000000',
                'color_2' => isset($state_data['gradient_color_2']) ? $state_data['gradient_color_2'] : '#ffffff',
                'angle' => isset($state_data['gradient_angle']) ? $state_data['gradient_angle'] : '45deg',
                'image' => isset($state_data['background-image']) ? $state_data['background-image'] : '',
                'image_size' => isset($state_data['background-size']) ? $state_data['background-size'] : 'cover',
                'image_position' => isset($state_data['background-position']) ? $state_data['background-position'] : 'center',
                'image_repeat' => isset($state_data['background-repeat']) ? $state_data['background-repeat'] : 'no-repeat'
            );
        }

        return array(
            'mode' => 'single',
            'color' => '#ffffff',
            'color_1' => '#000000',
            'color_2' => '#ffffff',
            'angle' => '45deg',
            'image' => '',
            'image_size' => 'cover',
            'image_position' => 'center',
            'image_repeat' => 'no-repeat'
        );
    }

    /**
     * Parses angle value from "45deg" to "45"
     */
    protected function parseAngle($angle_value)
    {
        return str_replace('deg', '', trim($angle_value));
    }
}
