<?php
/**
 * Widgets admin view.
 *
 * @package Noesia_Smart_Waiter
 */

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

$noesia_swa_widgets_data        = new Noesia_SWA_Widgets_Data();
$noesia_swa_widgets_context     = $noesia_swa_widgets_data->get_context();
$noesia_swa_widgets_rates_json  = wp_json_encode( $noesia_swa_widgets_context['rates_payload'] );
$noesia_swa_widgets_site_locale = isset( $noesia_swa_widgets_context['site_locale'] ) ? (string) $noesia_swa_widgets_context['site_locale'] : get_locale();
$noesia_swa_widgets_rest_root   = rest_url( '/' );
?>
<div class="noesia-swa-section-head">
    <h2>
        <span class="dashicons dashicons-screenoptions" aria-hidden="true"></span>
        <?php esc_html_e( 'Widgets', 'noesia-smart-waiter' ); ?>
    </h2>
    <p class="noesia-swa-muted">
        <?php esc_html_e( 'A compact utility hub with converters, text tools, and screen utilities.', 'noesia-smart-waiter' ); ?>
    </p>
</div>

<section
    class="noesia-swa-widgets"
    data-site-locale="<?php echo esc_attr( $noesia_swa_widgets_site_locale ); ?>"
    data-rates="<?php echo esc_attr( $noesia_swa_widgets_rates_json ); ?>"
    data-rest-root="<?php echo esc_url( $noesia_swa_widgets_rest_root ); ?>"
>
    <div class="noesia-swa-widgets__topbar">
        <nav class="noesia-swa-widgets__tabs" aria-label="<?php esc_attr_e( 'Widgets tabs', 'noesia-smart-waiter' ); ?>">
            <button type="button" class="noesia-swa-widgets__tab is-active" data-widgets-tab="converters">
                <?php esc_html_e( 'Converters & Rates', 'noesia-smart-waiter' ); ?>
            </button>
            <button type="button" class="noesia-swa-widgets__tab" data-widgets-tab="textdev">
                <?php esc_html_e( 'Text & Dev Tools', 'noesia-smart-waiter' ); ?>
            </button>
            <button type="button" class="noesia-swa-widgets__tab" data-widgets-tab="utilities">
                <?php esc_html_e( 'Utilities & Screen Tools', 'noesia-smart-waiter' ); ?>
            </button>
        </nav>
    </div>

    <div class="noesia-swa-widgets__panel is-active" data-widgets-panel="converters">
        <div class="noesia-swa-widgets__grid noesia-swa-widgets__grid--two">
            <article class="noesia-swa-widgets__card">
                <div class="noesia-swa-widgets__card-head">
                    <div>
                        <h3><?php esc_html_e( 'Currency Rates', 'noesia-smart-waiter' ); ?></h3>
                        <p><?php esc_html_e( 'Cached local rates with quick conversion and favorite currencies.', 'noesia-smart-waiter' ); ?></p>
                    </div>
                    <button type="button" class="button" data-action="refresh-rates"><?php esc_html_e( 'Refresh', 'noesia-smart-waiter' ); ?></button>
                </div>
                <div class="noesia-swa-widgets__status" data-rates-status></div>
                <div class="noesia-swa-widgets__field-row">
                    <label>
                        <span><?php esc_html_e( 'From', 'noesia-smart-waiter' ); ?></span>
                        <select data-rates-from></select>
                    </label>
                    <label>
                        <span><?php esc_html_e( 'To', 'noesia-smart-waiter' ); ?></span>
                        <select data-rates-to></select>
                    </label>
                    <label>
                        <span><?php esc_html_e( 'Amount', 'noesia-smart-waiter' ); ?></span>
                        <input type="number" step="0.01" value="1" data-rates-amount />
                    </label>
                </div>
                <div class="noesia-swa-widgets__result" data-rates-result></div>
                <div class="noesia-swa-widgets__meta">
                    <span data-rates-updated></span>
                    <span><?php esc_html_e( 'Favorites', 'noesia-smart-waiter' ); ?>:</span>
                </div>
                <div class="noesia-swa-widgets__chips" data-rates-favorites></div>
            </article>

            <article class="noesia-swa-widgets__card">
                <div class="noesia-swa-widgets__card-head">
                    <div>
                        <h3><?php esc_html_e( 'Unit Converter Pro', 'noesia-smart-waiter' ); ?></h3>
                        <p><?php esc_html_e( 'Length, weight, volume, temperature, speed, area, and data sizes.', 'noesia-smart-waiter' ); ?></p>
                    </div>
                </div>
                <div class="noesia-swa-widgets__field-row">
                    <label>
                        <span><?php esc_html_e( 'Category', 'noesia-smart-waiter' ); ?></span>
                        <select data-unit-category></select>
                    </label>
                    <label>
                        <span><?php esc_html_e( 'From', 'noesia-smart-waiter' ); ?></span>
                        <select data-unit-from></select>
                    </label>
                    <label>
                        <span><?php esc_html_e( 'To', 'noesia-smart-waiter' ); ?></span>
                        <select data-unit-to></select>
                    </label>
                    <label>
                        <span><?php esc_html_e( 'Value', 'noesia-smart-waiter' ); ?></span>
                        <input type="number" step="any" value="1" data-unit-value />
                    </label>
                </div>
                <div class="noesia-swa-widgets__result" data-unit-result></div>
            </article>

            <article class="noesia-swa-widgets__card">
                <div class="noesia-swa-widgets__card-head">
                    <div>
                        <h3><?php esc_html_e( 'Kitchen Unit Converter', 'noesia-smart-waiter' ); ?></h3>
                        <p><?php esc_html_e( 'Fast kitchen-friendly conversions for recipes and prep work.', 'noesia-smart-waiter' ); ?></p>
                    </div>
                </div>
                <div class="noesia-swa-widgets__field-row">
                    <label>
                        <span><?php esc_html_e( 'From', 'noesia-smart-waiter' ); ?></span>
                        <select data-kitchen-from></select>
                    </label>
                    <label>
                        <span><?php esc_html_e( 'To', 'noesia-smart-waiter' ); ?></span>
                        <select data-kitchen-to></select>
                    </label>
                    <label>
                        <span><?php esc_html_e( 'Value', 'noesia-smart-waiter' ); ?></span>
                        <input type="number" step="any" value="1" data-kitchen-value />
                    </label>
                </div>
                <div class="noesia-swa-widgets__result" data-kitchen-result></div>
            </article>

            <article class="noesia-swa-widgets__card">
                <div class="noesia-swa-widgets__card-head">
                    <div>
                        <h3><?php esc_html_e( 'VAT / Tax Calculator', 'noesia-smart-waiter' ); ?></h3>
                        <p><?php esc_html_e( 'Generic gross/net and tax amount helper. Not a country-specific tax engine.', 'noesia-smart-waiter' ); ?></p>
                    </div>
                </div>
                <div class="noesia-swa-widgets__field-row">
                    <label>
                        <span><?php esc_html_e( 'Mode', 'noesia-smart-waiter' ); ?></span>
                        <select data-vat-mode>
                            <option value="add"><?php esc_html_e( 'Add tax to net', 'noesia-smart-waiter' ); ?></option>
                            <option value="extract"><?php esc_html_e( 'Extract tax from gross', 'noesia-smart-waiter' ); ?></option>
                        </select>
                    </label>
                    <label>
                        <span><?php esc_html_e( 'Amount', 'noesia-smart-waiter' ); ?></span>
                        <input type="number" step="0.01" value="100" data-vat-amount />
                    </label>
                    <label>
                        <span><?php esc_html_e( 'Tax %', 'noesia-smart-waiter' ); ?></span>
                        <input type="number" step="0.01" value="24" data-vat-rate />
                    </label>
                </div>
                <div class="noesia-swa-widgets__mini-stats" data-vat-result></div>
            </article>
        </div>
    </div>

    <div class="noesia-swa-widgets__panel" data-widgets-panel="textdev">
        <div class="noesia-swa-widgets__grid noesia-swa-widgets__grid--two">
            <article class="noesia-swa-widgets__card">
                <div class="noesia-swa-widgets__card-head"><div><h3><?php esc_html_e( 'Text Case Converter', 'noesia-smart-waiter' ); ?></h3><p><?php esc_html_e( 'Upper, lower, title, sentence, and copy-ready cleanup.', 'noesia-smart-waiter' ); ?></p></div></div>
                <textarea class="noesia-swa-widgets__textarea" data-text-source></textarea>
                <div class="noesia-swa-widgets__button-row">
                    <button type="button" class="button" data-case="upper"><?php esc_html_e( 'UPPER', 'noesia-smart-waiter' ); ?></button>
                    <button type="button" class="button" data-case="lower"><?php esc_html_e( 'lower', 'noesia-smart-waiter' ); ?></button>
                    <button type="button" class="button" data-case="title"><?php esc_html_e( 'Title', 'noesia-smart-waiter' ); ?></button>
                    <button type="button" class="button" data-case="sentence"><?php esc_html_e( 'Sentence', 'noesia-smart-waiter' ); ?></button>
                    <button type="button" class="button" data-copy-target="[data-text-source]"><?php esc_html_e( 'Copy', 'noesia-smart-waiter' ); ?></button>
                </div>
            </article>

            <article class="noesia-swa-widgets__card">
                <div class="noesia-swa-widgets__card-head"><div><h3><?php esc_html_e( 'Character / Word Counter', 'noesia-smart-waiter' ); ?></h3><p><?php esc_html_e( 'Instant live counts for text blocks and content drafts.', 'noesia-smart-waiter' ); ?></p></div></div>
                <div class="noesia-swa-widgets__mini-stats" data-word-stats></div>
            </article>

            <article class="noesia-swa-widgets__card">
                <div class="noesia-swa-widgets__card-head"><div><h3><?php esc_html_e( 'JSON Formatter / Validator', 'noesia-smart-waiter' ); ?></h3><p><?php esc_html_e( 'Beautify JSON and validate syntax locally.', 'noesia-smart-waiter' ); ?></p></div></div>
                <textarea class="noesia-swa-widgets__textarea" data-json-source></textarea>
                <div class="noesia-swa-widgets__button-row">
                    <button type="button" class="button" data-json-action="format"><?php esc_html_e( 'Format', 'noesia-smart-waiter' ); ?></button>
                    <button type="button" class="button" data-json-action="minify"><?php esc_html_e( 'Minify', 'noesia-smart-waiter' ); ?></button>
                </div>
                <div class="noesia-swa-widgets__status" data-json-status></div>
            </article>

            <article class="noesia-swa-widgets__card">
                <div class="noesia-swa-widgets__card-head"><div><h3><?php esc_html_e( 'Base64 Encode / Decode', 'noesia-smart-waiter' ); ?></h3><p><?php esc_html_e( 'Transform plain text to Base64 and back.', 'noesia-smart-waiter' ); ?></p></div></div>
                <textarea class="noesia-swa-widgets__textarea" data-base64-source></textarea>
                <div class="noesia-swa-widgets__button-row">
                    <button type="button" class="button" data-base64-action="encode"><?php esc_html_e( 'Encode', 'noesia-smart-waiter' ); ?></button>
                    <button type="button" class="button" data-base64-action="decode"><?php esc_html_e( 'Decode', 'noesia-smart-waiter' ); ?></button>
                </div>
            </article>

            <article class="noesia-swa-widgets__card">
                <div class="noesia-swa-widgets__card-head"><div><h3><?php esc_html_e( 'Hash Generator', 'noesia-smart-waiter' ); ?></h3><p><?php esc_html_e( 'Generate SHA-1, SHA-256, and SHA-512 digests in your browser.', 'noesia-smart-waiter' ); ?></p></div></div>
                <textarea class="noesia-swa-widgets__textarea" data-hash-source></textarea>
                <div class="noesia-swa-widgets__field-row">
                    <label>
                        <span><?php esc_html_e( 'Algorithm', 'noesia-smart-waiter' ); ?></span>
                        <select data-hash-algorithm>
                            <option value="SHA-1">SHA-1</option>
                            <option value="SHA-256" selected>SHA-256</option>
                            <option value="SHA-512">SHA-512</option>
                        </select>
                    </label>
                </div>
                <div class="noesia-swa-widgets__button-row">
                    <button type="button" class="button" data-hash-action="generate"><?php esc_html_e( 'Generate', 'noesia-smart-waiter' ); ?></button>
                </div>
                <textarea class="noesia-swa-widgets__textarea" readonly data-hash-result></textarea>
            </article>

            <article class="noesia-swa-widgets__card">
                <div class="noesia-swa-widgets__card-head"><div><h3><?php esc_html_e( 'Color Picker / HEX-RGB Converter', 'noesia-smart-waiter' ); ?></h3><p><?php esc_html_e( 'Pick a color and translate between HEX and RGB values.', 'noesia-smart-waiter' ); ?></p></div></div>
                <div class="noesia-swa-widgets__field-row">
                    <label><span><?php esc_html_e( 'Color', 'noesia-smart-waiter' ); ?></span><input type="color" value="#4f46e5" data-color-picker /></label>
                    <label><span><?php esc_html_e( 'HEX', 'noesia-smart-waiter' ); ?></span><input type="text" value="#4f46e5" data-color-hex /></label>
                    <label><span><?php esc_html_e( 'RGB', 'noesia-smart-waiter' ); ?></span><input type="text" value="rgb(79, 70, 229)" data-color-rgb /></label>
                </div>
                <div class="noesia-swa-widgets__swatch" data-color-swatch></div>
            </article>

            <article class="noesia-swa-widgets__card">
                <div class="noesia-swa-widgets__card-head"><div><h3><?php esc_html_e( 'Email Extractor & Deduplicator', 'noesia-smart-waiter' ); ?></h3><p><?php esc_html_e( 'Extract unique email addresses from pasted text.', 'noesia-smart-waiter' ); ?></p></div></div>
                <textarea class="noesia-swa-widgets__textarea" data-email-source></textarea>
                <div class="noesia-swa-widgets__button-row">
                    <button type="button" class="button" data-email-action="extract"><?php esc_html_e( 'Extract', 'noesia-smart-waiter' ); ?></button>
                    <button type="button" class="button" data-copy-target="[data-email-result]"><?php esc_html_e( 'Copy', 'noesia-smart-waiter' ); ?></button>
                </div>
                <div class="noesia-swa-widgets__status" data-email-status></div>
                <textarea class="noesia-swa-widgets__textarea" readonly data-email-result></textarea>
            </article>
        </div>
    </div>

    <div class="noesia-swa-widgets__panel" data-widgets-panel="utilities">
        <div class="noesia-swa-widgets__grid noesia-swa-widgets__grid--two">
            <article class="noesia-swa-widgets__card">
                <div class="noesia-swa-widgets__card-head"><div><h3><?php esc_html_e( 'Floating Ruler', 'noesia-smart-waiter' ); ?></h3><p><?php esc_html_e( 'A workspace ruler overlay that can stay visible while you navigate inside the Noesia page.', 'noesia-smart-waiter' ); ?></p></div></div>
                <div class="noesia-swa-widgets__field-row">
                    <label><span><?php esc_html_e( 'Orientation', 'noesia-smart-waiter' ); ?></span>
                        <select data-ruler-orientation>
                            <option value="both"><?php esc_html_e( 'Horizontal + Vertical', 'noesia-smart-waiter' ); ?></option>
                            <option value="horizontal"><?php esc_html_e( 'Horizontal only', 'noesia-smart-waiter' ); ?></option>
                            <option value="vertical"><?php esc_html_e( 'Vertical only', 'noesia-smart-waiter' ); ?></option>
                        </select>
                    </label>
                    <label><span><?php esc_html_e( 'Opacity', 'noesia-smart-waiter' ); ?></span><input type="range" min="0.2" max="1" step="0.05" value="0.85" data-ruler-opacity /></label>
                    <label><span><?php esc_html_e( 'Calibration (px per cm)', 'noesia-smart-waiter' ); ?></span><input type="range" min="24" max="60" step="0.1" value="37.8" data-ruler-scale /></label>
                    <label><span><?php esc_html_e( 'Horizontal length', 'noesia-smart-waiter' ); ?></span><input type="range" min="5" max="30" step="1" value="20" data-ruler-horizontal-cm /></label>
                    <label><span><?php esc_html_e( 'Vertical length', 'noesia-smart-waiter' ); ?></span><input type="range" min="5" max="30" step="1" value="20" data-ruler-vertical-cm /></label>
                </div>
                <div class="noesia-swa-widgets__button-row">
                    <button type="button" class="button button-primary" data-ruler-toggle><?php esc_html_e( 'Show Ruler', 'noesia-smart-waiter' ); ?></button>
                    <button type="button" class="button" data-ruler-reset><?php esc_html_e( 'Reset Position', 'noesia-smart-waiter' ); ?></button>
                </div>
                <p class="noesia-swa-widgets__meta"><span data-ruler-scale-readout></span> · <span data-ruler-length-readout></span></p>
                <p class="noesia-swa-widgets__meta"><?php esc_html_e( 'Drag the ruler bars to move them. Use the calibration slider until the centimeter marks match a real ruler on this screen.', 'noesia-smart-waiter' ); ?></p>
                <p class="noesia-swa-widgets__meta"><?php esc_html_e( 'For best physical accuracy, calibrate on the current screen and keep browser zoom at 100%. Results can change if zoom, display scaling, or screen changes.', 'noesia-smart-waiter' ); ?></p>
                <p class="noesia-swa-widgets__meta"><?php esc_html_e( 'The ruler stays inside the current Noesia workspace page, not across browser tabs or desktop apps.', 'noesia-smart-waiter' ); ?></p>
                <p class="noesia-swa-widgets__meta"><?php esc_html_e( 'Length converter pixel values use the standard CSS reference: 96 px = 1 inch.', 'noesia-smart-waiter' ); ?></p>
            </article>

            <article class="noesia-swa-widgets__card">
                <div class="noesia-swa-widgets__card-head"><div><h3><?php esc_html_e( 'System & Network Diagnostics', 'noesia-smart-waiter' ); ?></h3><p><?php esc_html_e( 'Response, stability, synchronization, and connectivity checks for this Noesia installation.', 'noesia-smart-waiter' ); ?></p></div></div>
                <div class="noesia-swa-widgets__button-row">
                    <button type="button" class="button button-primary" data-diagnostics-run><?php esc_html_e( 'Run Diagnostics', 'noesia-smart-waiter' ); ?></button>
                    <button type="button" class="button" data-diagnostics-copy disabled><?php esc_html_e( 'Copy', 'noesia-smart-waiter' ); ?></button>
                </div>
                <div class="noesia-swa-widgets__status" data-diagnostics-status></div>
                <div class="noesia-swa-widgets__mini-stats" data-diagnostics-results></div>
                <p class="noesia-swa-widgets__meta"><?php esc_html_e( 'Runs same-installation diagnostics for WordPress backend latency, stability, clock sync, secure context, and endpoint reachability. It does not measure ISP bandwidth.', 'noesia-smart-waiter' ); ?></p>
                <p class="noesia-swa-widgets__meta"><?php esc_html_e( 'WordPress backend latency includes network roundtrip, server handling, PHP execution, and WordPress bootstrap time.', 'noesia-smart-waiter' ); ?></p>
            </article>
        </div>
    </div>

    <div class="noesia-swa-widgets__ruler" hidden data-ruler-overlay>
        <div class="noesia-swa-widgets__ruler-bar noesia-swa-widgets__ruler-bar--horizontal" data-ruler-horizontal></div>
        <div class="noesia-swa-widgets__ruler-bar noesia-swa-widgets__ruler-bar--vertical" data-ruler-vertical></div>
    </div>
</section>
