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

class Manfiet_Expense_Tracker_Widget_Expense_Dashboard extends \Elementor\Widget_Base {

    public function get_name() {
        return 'manfiet-expense-dashboard';
    }

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

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

    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 manfiet-page-shell-wide manfiet-admin-dashboard-shell">
                <div class="manfiet-page-hero">
                    <div class="left-section">
                        <h1 class="manfiet-page-title"><?php esc_html_e('Admin Expense Dashboard', 'manfi-expense-tracker'); ?></h1>
                        <p class="manfiet-page-subtitle"><?php esc_html_e('Track and manage all expenses', '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>

                <!-- Stats Grid -->
                <div class="manfiet-stats-grid manfiet-mb-16">
                    <div class="manfiet-card manfiet-stat-card">
                        <div class="manfiet-stat-label"><?php esc_html_e('Total Expenses', 'manfi-expense-tracker'); ?></div>
                        <div class="manfiet-stat-value">24</div>
                    </div>
                    <div class="manfiet-card manfiet-stat-card">
                        <div class="manfiet-stat-label"><?php esc_html_e('Total Spent', 'manfi-expense-tracker'); ?></div>
                        <div class="manfiet-stat-value"><?php echo esc_html($currency_symbol); ?>1,420.50</div>
                    </div>
                    <div class="manfiet-card manfiet-stat-card">
                        <div class="manfiet-stat-label"><?php esc_html_e('Average Expense', 'manfi-expense-tracker'); ?></div>
                        <div class="manfiet-stat-value"><?php echo esc_html($currency_symbol); ?>59.19</div>
                    </div>
                </div>

                <!-- Trend Graph -->
                <div class="manfiet-card manfiet-mb-16">
                    <div class="manfiet-card-head-row">
                        <h3 class="manfiet-card-title manfiet-card-title-no-margin"><?php esc_html_e('Expense Trend Graph', 'manfi-expense-tracker'); ?></h3>
                        <select class="manfiet-input" style="width: auto; min-width: 120px;" disabled>
                            <option>Monthly</option>
                        </select>
                    </div>
                    <div class="manfiet-mt-12" style="overflow-x: auto;">
                        <svg width="640" height="180" style="width: 100%; display: block; border-radius: 8px; background: #f8fafc; border: 1px solid #e2e8f0; padding: 10px;">
                            <!-- Grid Lines -->
                            <line x1="35" y1="20" x2="605" y2="20" stroke="#f1f5f9" stroke-width="1" />
                            <line x1="35" y1="70" x2="605" y2="70" stroke="#f1f5f9" stroke-width="1" />
                            <line x1="35" y1="120" x2="605" y2="120" stroke="#f1f5f9" stroke-width="1" />
                            
                            <!-- Baseline -->
                            <line x1="35" y1="130" x2="605" y2="130" stroke="#cbd5e1" stroke-width="1" />
                            
                            <!-- Trend Path -->
                            <path d="M 35 110 L 177 80 L 320 50 L 462 90 L 605 30" fill="none" stroke="#1d4ed8" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
                            
                            <!-- Points and text -->
                            <circle cx="35" cy="110" r="4" fill="#1d4ed8" />
                            <text x="35" y="150" font-size="10" fill="#64748b" text-anchor="middle">Jan</text>
                            
                            <circle cx="177" cy="80" r="4" fill="#1d4ed8" />
                            <text x="177" y="150" font-size="10" fill="#64748b" text-anchor="middle">Feb</text>
                            
                            <circle cx="320" cy="50" r="4" fill="#1d4ed8" />
                            <text x="320" y="150" font-size="10" fill="#64748b" text-anchor="middle">Mar</text>
                            
                            <circle cx="462" cy="90" r="4" fill="#1d4ed8" />
                            <text x="462" y="150" font-size="10" fill="#64748b" text-anchor="middle">Apr</text>
                            
                            <circle cx="605" cy="30" r="4" fill="#1d4ed8" />
                            <text x="605" y="150" font-size="10" fill="#64748b" text-anchor="middle">May</text>
                        </svg>
                    </div>
                </div>

                <!-- Expenses Table -->
                <div class="manfiet-card">
                    <h3 class="manfiet-card-title"><?php esc_html_e('Recent Expenses', 'manfi-expense-tracker'); ?></h3>
                    <div class="manfiet-table-scroll">
                        <table class="manfiet-table">
                            <thead>
                                <tr>
                                    <th><?php esc_html_e('Category', 'manfi-expense-tracker'); ?></th>
                                    <th class="manfiet-align-right"><?php esc_html_e('Amount', 'manfi-expense-tracker'); ?></th>
                                    <th><?php esc_html_e('Date', 'manfi-expense-tracker'); ?></th>
                                    <th><?php esc_html_e('Recurring', 'manfi-expense-tracker'); ?></th>
                                    <th><?php esc_html_e('Tags', 'manfi-expense-tracker'); ?></th>
                                    <th class="manfiet-align-center"><?php esc_html_e('Actions', 'manfi-expense-tracker'); ?></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div>Rent</div>
                                        <div style="font-size: 11px; color: #64748b; font-style: italic; marginTop: 3px;">Office space rent</div>
                                    </td>
                                    <td class="manfiet-align-right manfiet-font-semibold"><?php echo esc_html($currency_symbol); ?>800.00</td>
                                    <td><?php echo esc_html(gmdate('Y-m-d', strtotime('-5 days'))); ?></td>
                                    <td>Monthly</td>
                                    <td>
                                        <div class="manfiet-tag-list">
                                            <span class="manfiet-tag-chip">Office</span>
                                            <span class="manfiet-tag-chip">Fixed</span>
                                        </div>
                                    </td>
                                    <td class="manfiet-align-center manfiet-nowrap">
                                        <button type="button" class="manfiet-button manfiet-button-info manfiet-button-sm" disabled><?php esc_html_e('Edit', 'manfi-expense-tracker'); ?></button>
                                        <button type="button" class="manfiet-button manfiet-button-danger manfiet-button-sm" disabled><?php esc_html_e('Delete', 'manfi-expense-tracker'); ?></button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div>Food</div>
                                        <div style="font-size: 11px; color: #64748b; font-style: italic; marginTop: 3px;">Team lunch</div>
                                    </td>
                                    <td class="manfiet-align-right manfiet-font-semibold"><?php echo esc_html($currency_symbol); ?>150.00</td>
                                    <td><?php echo esc_html(gmdate('Y-m-d', strtotime('-2 days'))); ?></td>
                                    <td>One-time</td>
                                    <td>
                                        <div class="manfiet-tag-list">
                                            <span class="manfiet-tag-chip">Lunch</span>
                                        </div>
                                    </td>
                                    <td class="manfiet-align-center manfiet-nowrap">
                                        <button type="button" class="manfiet-button manfiet-button-info manfiet-button-sm" disabled><?php esc_html_e('Edit', 'manfi-expense-tracker'); ?></button>
                                        <button type="button" class="manfiet-button manfiet-button-danger manfiet-button-sm" disabled><?php esc_html_e('Delete', 'manfi-expense-tracker'); ?></button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div>Utilities</div>
                                        <div style="font-size: 11px; color: #64748b; font-style: italic; marginTop: 3px;">Electricity Bill</div>
                                    </td>
                                    <td class="manfiet-align-right manfiet-font-semibold"><?php echo esc_html($currency_symbol); ?>120.50</td>
                                    <td><?php echo esc_html(gmdate('Y-m-d', strtotime('-1 days'))); ?></td>
                                    <td>Monthly</td>
                                    <td>
                                        <div class="manfiet-tag-list">
                                            <span class="manfiet-text-muted">No tags</span>
                                        </div>
                                    </td>
                                    <td class="manfiet-align-center manfiet-nowrap">
                                        <button type="button" class="manfiet-button manfiet-button-info manfiet-button-sm" disabled><?php esc_html_e('Edit', 'manfi-expense-tracker'); ?></button>
                                        <button type="button" class="manfiet-button manfiet-button-danger manfiet-button-sm" disabled><?php esc_html_e('Delete', 'manfi-expense-tracker'); ?></button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="manfiet-pagination-row">
                        <div class="manfiet-pagination-summary">Showing 1–3 of 3 expenses</div>
                        <div class="manfiet-pagination-pages">
                            <button type="button" class="manfiet-page-btn is-active" disabled>1</button>
                        </div>
                    </div>
                </div>
            </div>
            <?php
        } else {
            echo '<div class="manfi-expense-tracker-mount" data-view="dashboard"></div>';
        }
    }
}
