<?php
if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly.
}

class Manfiet_Expense_Tracker_Widget_Budget_Showcase extends \Elementor\Widget_Base {

    public function get_name() {
        return 'manfiet-budget-showcase';
    }

    public function get_title() {
        return esc_html__('Budget Showcase', 'manfi-expense-tracker');
    }

    public function get_icon() {
        return 'eicon-inner-section';
    }

    public function get_categories() {
        return ['manfi-expense-tracker'];
    }

    public function get_style_depends() {
        return ['manfiet-expense-frontend-style'];
    }

    protected function register_controls() {
        // No custom controls needed for this widget.
    }

    protected function render() {
        if (!is_user_logged_in()) {
            echo '<p>' . esc_html__('You need to be logged in to track your expenses.', 'manfi-expense-tracker') . '</p>';
            return;
        }

        if (!current_user_can('read')) {
            echo '<p>' . esc_html__('You do not have permission to access this tracker.', 'manfi-expense-tracker') . '</p>';
            return;
        }

        \Manfiet_Expense_Tracker_Elementor::enqueue_frontend_assets();

        // If in Elementor Editor, render a beautiful mockup preview
        if (class_exists('\Elementor\Plugin') && \Elementor\Plugin::$instance->editor->is_edit_mode()) {
            $currency_symbol = class_exists('Manfiet_Expense_Tracker_Settings') ? Manfiet_Expense_Tracker_Settings::get_current_currency_symbol() : '$';
            ?>
            <div class="manfiet-page-shell">
                <div class="manfiet-page-hero">
                    <div class="left-section">
                        <h2 class="manfiet-page-title"><?php esc_html_e('Budget Management', 'manfi-expense-tracker'); ?></h2>
                        <p class="manfiet-page-subtitle"><?php esc_html_e('Set weekly, monthly, and yearly budgets. Alerts are shown after 70% usage.', 'manfi-expense-tracker'); ?> <span style="font-size: 11px; font-weight: normal; color: #cbd5e1; margin-left: 8px;">(<?php esc_html_e('Editor Preview', 'manfi-expense-tracker'); ?>)</span></p>
                    </div>
                </div>

                <div class="manfiet-card">
                    <div class="manfiet-table-scroll">
                        <table class="manfiet-table">
                            <thead>
                                <tr>
                                    <th><?php esc_html_e('Period', 'manfi-expense-tracker'); ?></th>
                                    <th class="manfiet-align-right"><?php esc_html_e('Budget', 'manfi-expense-tracker'); ?></th>
                                    <th class="manfiet-align-right"><?php esc_html_e('Spent', 'manfi-expense-tracker'); ?></th>
                                    <th class="manfiet-align-right"><?php esc_html_e('Usage %', 'manfi-expense-tracker'); ?></th>
                                    <th><?php esc_html_e('Progress', 'manfi-expense-tracker'); ?></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="manfiet-font-semibold"><?php esc_html_e('Weekly', 'manfi-expense-tracker'); ?></td>
                                    <td class="manfiet-align-right">
                                        <input type="number" value="150" class="manfiet-budget-input" disabled />
                                    </td>
                                    <td class="manfiet-align-right"><?php echo esc_html($currency_symbol); ?>45.00</td>
                                    <td class="manfiet-align-right manfiet-font-semibold">30.00%</td>
                                    <td>
                                        <div class="manfiet-progress-track">
                                            <div class="manfiet-progress-bar" style="width: 30%; background-color: #16a34a;" />
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="manfiet-font-semibold"><?php esc_html_e('Monthly', 'manfi-expense-tracker'); ?></td>
                                    <td class="manfiet-align-right">
                                        <input type="number" value="600" class="manfiet-budget-input" disabled />
                                    </td>
                                    <td class="manfiet-align-right"><?php echo esc_html($currency_symbol); ?>480.00</td>
                                    <td class="manfiet-align-right manfiet-font-semibold">80.00%</td>
                                    <td>
                                        <div class="manfiet-progress-track">
                                            <div class="manfiet-progress-bar" style="width: 80%; background-color: #d97706;" />
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="manfiet-font-semibold"><?php esc_html_e('Yearly', 'manfi-expense-tracker'); ?></td>
                                    <td class="manfiet-align-right">
                                        <input type="number" value="7200" class="manfiet-budget-input" disabled />
                                    </td>
                                    <td class="manfiet-align-right"><?php echo esc_html($currency_symbol); ?>7,450.00</td>
                                    <td class="manfiet-align-right manfiet-font-semibold">103.47%</td>
                                    <td>
                                        <div class="manfiet-progress-track">
                                            <div class="manfiet-progress-bar" style="width: 100%; background-color: #dc2626;" />
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <button class="manfiet-button manfiet-button-primary" disabled><?php esc_html_e('Save Budgets', 'manfi-expense-tracker'); ?></button>
                    </div>
                </div>
            </div>
            <?php
        } else {
            echo '<div class="manfi-expense-tracker-mount" data-view="budget"></div>';
        }
    }
}
