<?xml version="1.0" encoding="utf-8"?>
<odoo>

    <!-- ============================================================ -->
    <!-- FUSION PAYROLL DASHBOARD FORM VIEW                           -->
    <!-- ============================================================ -->
    <record id="fusion_payroll_dashboard_form" model="ir.ui.view">
        <field name="name">fusion.payroll.dashboard.form</field>
        <field name="model">fusion.payroll.dashboard</field>
        <field name="arch" type="xml">
            <form string="Fusion Payroll" create="0" edit="0" delete="0">
                <field name="currency_id" invisible="1"/>
                <field name="company_id" invisible="1"/>
                
                <div class="o_fusion_payroll_dashboard">
                    
                    <!-- ========== HEADER ========== -->
                    <div style="padding: 24px 32px; border-bottom: 1px solid var(--o-color-border);">
                        <div style="display: flex; justify-content: space-between; align-items: center;">
                            <div>
                                <h1 style="margin: 0; font-size: 28px; font-weight: 600;">Fusion Payroll</h1>
                                <p style="margin: 4px 0 0 0; color: var(--o-color-text-muted);">Canadian Payroll Management</p>
                            </div>
                            <button name="action_run_payroll" type="object" 
                                    class="btn btn-primary btn-lg"
                                    style="padding: 12px 32px; font-size: 16px;">
                                <i class="fa fa-play me-2"/> Run Payroll
                            </button>
                        </div>
                    </div>
                    
                    <!-- ========== STATISTICS CARDS ========== -->
                    <div style="padding: 24px 32px;">
                        <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 32px;">
                            
                            <!-- Payroll This Month -->
                            <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; padding: 24px; color: white;">
                                <div style="font-size: 13px; opacity: 0.9; text-transform: uppercase; letter-spacing: 1px;">Payroll This Month</div>
                                <div style="font-size: 32px; font-weight: 700; margin: 8px 0;">
                                    <field name="payroll_this_month" widget="monetary" options="{'no_label': True}"/>
                                </div>
                                <div style="font-size: 13px; opacity: 0.8;">
                                    <field name="payroll_count_this_month"/> payslips processed
                                </div>
                            </div>
                            
                            <!-- Payroll YTD -->
                            <div style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); border-radius: 12px; padding: 24px; color: white;">
                                <div style="font-size: 13px; opacity: 0.9; text-transform: uppercase; letter-spacing: 1px;">Payroll This Year</div>
                                <div style="font-size: 32px; font-weight: 700; margin: 8px 0;">
                                    <field name="payroll_this_year" widget="monetary" options="{'no_label': True}"/>
                                </div>
                                <div style="font-size: 13px; opacity: 0.8;">
                                    Year to date total
                                </div>
                            </div>
                            
                            <!-- Active Employees -->
                            <div style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 12px; padding: 24px; color: white;">
                                <div style="font-size: 13px; opacity: 0.9; text-transform: uppercase; letter-spacing: 1px;">Active Employees</div>
                                <div style="font-size: 32px; font-weight: 700; margin: 8px 0;">
                                    <field name="active_employees"/>
                                </div>
                                <div style="font-size: 13px; opacity: 0.8;">
                                    <field name="on_leave_employees"/> on leave
                                </div>
                            </div>
                            
                            <!-- Average Pay -->
                            <div style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); border-radius: 12px; padding: 24px; color: white;">
                                <div style="font-size: 13px; opacity: 0.9; text-transform: uppercase; letter-spacing: 1px;">Avg Pay / Employee</div>
                                <div style="font-size: 32px; font-weight: 700; margin: 8px 0;">
                                    <field name="avg_payroll_per_employee" widget="monetary" options="{'no_label': True}"/>
                                </div>
                                <div style="font-size: 13px; opacity: 0.8;">
                                    This month
                                </div>
                            </div>
                            
                        </div>
                        
                        <!-- ========== QUICK ACTIONS ========== -->
                        <h3 style="margin: 0 0 16px 0; font-size: 18px; font-weight: 600;">Quick Actions</h3>
                        <div style="display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-bottom: 32px;">
                            
                            <!-- Run Payroll -->
                            <button name="action_run_payroll" type="object" 
                                    style="background: var(--o-color-bg); border: 1px solid var(--o-color-border); border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.2s;">
                                <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;">
                                    <i class="fa fa-play" style="font-size: 20px; color: white;"/>
                                </div>
                                <div style="font-weight: 600; font-size: 14px;">Run Payroll</div>
                                <div style="font-size: 12px; color: var(--o-color-text-muted); margin-top: 4px;">Process payments</div>
                            </button>
                            
                            <!-- All Employees -->
                            <button name="action_view_employees" type="object"
                                    style="background: var(--o-color-bg); border: 1px solid var(--o-color-border); border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.2s;">
                                <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;">
                                    <i class="fa fa-users" style="font-size: 20px; color: white;"/>
                                </div>
                                <div style="font-weight: 600; font-size: 14px;">Employees</div>
                                <div style="font-size: 12px; color: var(--o-color-text-muted); margin-top: 4px;"><field name="active_employees"/> active</div>
                            </button>
                            
                            <!-- CRA Remittance -->
                            <button name="action_cra_remittance" type="object"
                                    style="background: var(--o-color-bg); border: 1px solid var(--o-color-border); border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.2s;">
                                <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;">
                                    <i class="fa fa-bank" style="font-size: 20px; color: white;"/>
                                </div>
                                <div style="font-weight: 600; font-size: 14px;">CRA Remittance</div>
                                <div style="font-size: 12px; color: var(--o-color-text-muted); margin-top: 4px;">Tax payments</div>
                            </button>
                            
                            <!-- T4 Slips -->
                            <button name="action_t4_slips" type="object"
                                    style="background: var(--o-color-bg); border: 1px solid var(--o-color-border); border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.2s;">
                                <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;">
                                    <i class="fa fa-file-text-o" style="font-size: 20px; color: #333;"/>
                                </div>
                                <div style="font-weight: 600; font-size: 14px;">T4 Slips</div>
                                <div style="font-size: 12px; color: var(--o-color-text-muted); margin-top: 4px;">Tax statements</div>
                            </button>
                            
                            <!-- ROE -->
                            <button name="action_roe" type="object"
                                    style="background: var(--o-color-bg); border: 1px solid var(--o-color-border); border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.2s;">
                                <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #5ee7df 0%, #b490ca 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;">
                                    <i class="fa fa-file-archive-o" style="font-size: 20px; color: white;"/>
                                </div>
                                <div style="font-weight: 600; font-size: 14px;">ROE</div>
                                <div style="font-size: 12px; color: var(--o-color-text-muted); margin-top: 4px;">Employment records</div>
                            </button>
                            
                            <!-- Settings -->
                            <button name="action_settings" type="object"
                                    style="background: var(--o-color-bg); border: 1px solid var(--o-color-border); border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.2s;">
                                <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;">
                                    <i class="fa fa-cog" style="font-size: 20px; color: white;"/>
                                </div>
                                <div style="font-weight: 600; font-size: 14px;">Settings</div>
                                <div style="font-size: 12px; color: var(--o-color-text-muted); margin-top: 4px;">Configuration</div>
                            </button>
                            
                        </div>
                        
                        <!-- ========== CHARTS SECTION ========== -->
                        <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 24px;">
                            
                            <!-- Payroll Trend Chart -->
                            <div style="background: var(--o-color-bg); border: 1px solid var(--o-color-border); border-radius: 12px; padding: 24px;">
                                <h4 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 600;">Payroll Trend (Last 12 Months)</h4>
                                <div style="height: 300px;">
                                    <!-- Embedded graph view -->
                                    <field name="id" widget="fusion_payroll_chart" readonly="1"/>
                                </div>
                            </div>
                            
                            <!-- Employee Distribution -->
                            <div style="background: var(--o-color-bg); border: 1px solid var(--o-color-border); border-radius: 12px; padding: 24px;">
                                <h4 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 600;">Employee Status</h4>
                                <div style="display: flex; flex-direction: column; gap: 16px; padding-top: 16px;">
                                    
                                    <!-- Active -->
                                    <div style="display: flex; align-items: center; gap: 12px;">
                                        <div style="width: 12px; height: 12px; border-radius: 50%; background: #22c55e;"/>
                                        <div style="flex: 1;">Active</div>
                                        <div style="font-weight: 600;"><field name="active_employees"/></div>
                                    </div>
                                    
                                    <!-- On Leave -->
                                    <div style="display: flex; align-items: center; gap: 12px;">
                                        <div style="width: 12px; height: 12px; border-radius: 50%; background: #f59e0b;"/>
                                        <div style="flex: 1;">On Leave</div>
                                        <div style="font-weight: 600;"><field name="on_leave_employees"/></div>
                                    </div>
                                    
                                    <!-- Terminated -->
                                    <div style="display: flex; align-items: center; gap: 12px;">
                                        <div style="width: 12px; height: 12px; border-radius: 50%; background: #ef4444;"/>
                                        <div style="flex: 1;">Terminated</div>
                                        <div style="font-weight: 600;"><field name="terminated_employees"/></div>
                                    </div>
                                    
                                    <div style="border-top: 1px solid var(--o-color-border); padding-top: 16px; margin-top: 8px;">
                                        <div style="display: flex; align-items: center; gap: 12px;">
                                            <div style="width: 12px; height: 12px; border-radius: 50%; background: #6366f1;"/>
                                            <div style="flex: 1; font-weight: 600;">Total</div>
                                            <div style="font-weight: 700; font-size: 18px;"><field name="total_employees"/></div>
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                            
                        </div>
                        
                    </div>
                    
                </div>
                
            </form>
        </field>
    </record>
    
    <!-- ============================================================ -->
    <!-- PAYROLL STATS GRAPH VIEW                                      -->
    <!-- ============================================================ -->
    <record id="fusion_payroll_stats_graph" model="ir.ui.view">
        <field name="name">fusion.payroll.stats.graph</field>
        <field name="model">fusion.payroll.stats</field>
        <field name="arch" type="xml">
            <graph string="Payroll Trend" type="bar">
                <field name="name" type="col"/>
                <field name="total_payroll" type="measure"/>
            </graph>
        </field>
    </record>
    
    <record id="fusion_payroll_stats_pivot" model="ir.ui.view">
        <field name="name">fusion.payroll.stats.pivot</field>
        <field name="model">fusion.payroll.stats</field>
        <field name="arch" type="xml">
            <pivot string="Payroll Analysis">
                <field name="year" type="row"/>
                <field name="month_name" type="col"/>
                <field name="total_payroll" type="measure"/>
                <field name="employee_count" type="measure"/>
            </pivot>
        </field>
    </record>
    
    <!-- ============================================================ -->
    <!-- DASHBOARD ACTION                                              -->
    <!-- ============================================================ -->
    <record id="action_fusion_payroll_dashboard_new" model="ir.actions.server">
        <field name="name">Fusion Payroll Dashboard</field>
        <field name="model_id" ref="model_fusion_payroll_dashboard"/>
        <field name="state">code</field>
        <field name="code">
action = model.action_open_dashboard()
        </field>
    </record>
    
    <!-- Stats Graph Action -->
    <record id="action_payroll_stats_graph" model="ir.actions.act_window">
        <field name="name">Payroll Trend</field>
        <field name="res_model">fusion.payroll.stats</field>
        <field name="view_mode">graph,pivot,list</field>
        <field name="domain">[('company_id', '=', active_id)]</field>
    </record>

</odoo>
