<?php

namespace GriffinForms\Admin\App\Html\Modals;

use GriffinForms\Traits\Singleton;
use GriffinForms\Admin\App\Html\Modals\FormThemes\Responses;
use GriffinForms\Admin\App\Html\Modals\FormThemes\Requests;
use GriffinForms\Admin\App\Html\Modals\FormThemes\Scripts;
use GriffinForms\Admin\App\Html\Modals\FormThemes\Renders;

class FormThemes extends \GriffinForms\Admin\App\Html\Modals\Format
{
    use Singleton;
    use Responses;
    use Requests;
    use Scripts;
    use Renders;

    protected $has_footer = false;
    protected $required_capability = '';
    protected $sql;

    // Initialize SQL service for database queries.
    protected function setSql()
    {
        $this->sql = \GriffinForms\Admin\Sql\App::getInstance();
    }

    // Returns the localized modal title displayed in the header.
    protected function getModalTitle()
    {
        return __('Select Form Theme', 'griffinforms-form-builder') . $this->getModalTitleSuffix();
    }

    // Renders the modal body with tabbed interface for theme selection.
    protected function renderModalBodyHtml()
    {
        // Message container for success and error notices.
        echo '<div id="griffinforms-formthemes-message-container" class="griffinforms-formthemes-message-container gf-notice-container mb-3" aria-live="polite"></div>';

        // Tabbed navigation
        $this->renderTabNavigation();

        // Tab content
        echo '<div class="tab-content griffinforms-formthemes-tab-content overflow-auto" id="griffinforms-formthemes-tab-content">';
        $this->renderSelectThemeTab();
        $this->renderImportThemeTab();
        echo '</div>';
    }

    // Renders tab navigation buttons.
    protected function renderTabNavigation()
    {
        echo '<nav><div class="nav nav-underline nav-fill border-bottom border-2" role="tablist">';

        echo '<button class="nav-link active" id="griffinforms-formthemes-select-theme-tab" data-bs-toggle="tab" data-bs-target="#griffinforms-formthemes-select-theme" type="button" role="tab">';
        echo esc_html__('Select Theme', 'griffinforms-form-builder');
        echo '</button>';

        echo '<button class="nav-link" id="griffinforms-formthemes-import-theme-tab" data-bs-toggle="tab" data-bs-target="#griffinforms-formthemes-import-theme" type="button" role="tab">';
        echo esc_html__('Import Theme', 'griffinforms-form-builder');
        echo '</button>';

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

    // Renders Select Theme tab content.
    protected function renderSelectThemeTab()
    {
        $active_form_id = 0;
        if (is_object($this->utility)) {
            $active_form_id = (int) $this->utility->getFormId();
        }

        $form_attr = $active_form_id > 0 ? ' data-active-form-id="' . esc_attr($active_form_id) . '"' : '';

        echo '<div class="tab-pane fade show active griffinforms-formthemes-pane" id="griffinforms-formthemes-select-theme" role="tabpanel"' . $form_attr . '>';
        echo '<div class="griffinforms-formthemes-layout d-flex gap-3 h-100">';

        // Left sidebar - categories
        echo '<div class="griffinforms-formthemes-sidebar overflow-auto">';
        echo '<div id="griffinforms-formthemes-categories-container" class="mt-3 pe-3">';
        echo '<p class="text-muted small text-center">' . esc_html__('Loading categories...', 'griffinforms-form-builder') . '</p>';
        echo '</div>';
        echo '</div>';

        // Right content area - theme cards
        echo '<div class="griffinforms-formthemes-content flex-fill overflow-auto">';
        echo '<div id="griffinforms-formthemes-content-container" class="p-2">';
        echo '<p class="text-muted text-center p-4">' . esc_html__('Select a category to view themes.', 'griffinforms-form-builder') . '</p>';
        echo '</div>';
        echo '</div>';

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

    // Renders Import Theme tab content with form.
    protected function renderImportThemeTab()
    {
        ?>
        <div class="tab-pane fade" id="griffinforms-formthemes-import-theme" role="tabpanel">
            <div class="p-4">
                <div style="width: 50%; max-width: 500px;">
                    <!-- Error/Success Messages -->
                    <div id="griffinforms-import-theme-message" class="gf-notice" role="alert" style="display: none;">
                        <span id="griffinforms-import-theme-message-text"></span>
                    </div>

                    <!-- Description -->
                    <p class="mb-4">
                        <?php esc_html_e('Add a custom theme to your library. Enter the theme details and upload a JSON file to get started.', 'griffinforms-form-builder'); ?>
                    </p>

                    <form id="griffinforms-import-theme-form" class="needs-validation" novalidate>

                        <!-- Theme Name Input -->
                        <div class="mb-3">
                            <label for="theme-name-input">
                                <?php esc_html_e('Theme Name (required)', 'griffinforms-form-builder'); ?>
                            </label>
                            <input type="text" id="theme-name-input"
                                   name="theme_name" maxlength="100" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px !important;">
                            <div class="invalid-feedback d-block" id="theme-name-error"></div>
                        </div>

                        <!-- Theme Category Dropdown -->
                        <div class="mb-3">
                            <label for="theme-category-select">
                                <?php esc_html_e('Category', 'griffinforms-form-builder'); ?>
                            </label>
                            <select id="theme-category-select" name="theme_category" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px !important;">
                                <option value="">-- <?php esc_html_e('Select Category', 'griffinforms-form-builder'); ?> --</option>
                            </select>
                            <div class="invalid-feedback d-block" id="theme-category-error"></div>
                        </div>

                        <!-- Description Textarea -->
                        <div class="mb-3">
                            <label for="theme-description-textarea">
                                <?php esc_html_e('Theme Description', 'griffinforms-form-builder'); ?>
                            </label>
                            <textarea id="theme-description-textarea"
                                      name="theme_description" maxlength="500" rows="3" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px !important;"></textarea>
                            <div class="invalid-feedback d-block" id="theme-description-error"></div>
                        </div>

                        <!-- JSON File Upload -->
                        <div class="mb-3">
                            <label for="theme-json-file">
                                <?php esc_html_e('Upload Theme JSON (required)', 'griffinforms-form-builder'); ?>
                            </label>
                            <input type="file" id="theme-json-file"
                                   name="theme_json" accept=".json" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px !important;">
                            <div class="invalid-feedback d-block" id="theme-json-error"></div>
                        </div>

                        <!-- Submit Button -->
                        <button type="submit" class="gf-btn gf-btn-primary" id="griffinforms-import-theme-submit">
                            <span id="griffinforms-import-theme-submit-text">
                                <?php esc_html_e('Import Theme', 'griffinforms-form-builder'); ?>
                            </span>
                        </button>

                    </form>
                </div>
            </div>
        </div>
        <?php
    }

    // Outputs all JavaScript for the modal.
    public function getJs()
    {
        $this->getModalJs();
    }

    private function __construct()
    {
        $this->register();
        $this->setAll();
    }
}
