<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="otoolkit_seo_content.SeoDashboard">
        <div class="o_action">
            <div class="container-fluid py-3">
                <!-- Header -->
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2 class="mb-0">
                        <i class="fa fa-line-chart me-2"/>SEO Content Dashboard
                    </h2>
                    <button class="btn btn-sm btn-outline-primary" t-on-click="loadDashboardData">
                        <i class="fa fa-refresh me-1"/>Refresh
                    </button>
                </div>

                <!-- Loading State -->
                <div t-if="state.loading" class="text-center py-5">
                    <i class="fa fa-spinner fa-spin fa-3x text-primary"/>
                    <p class="mt-3 text-muted">Loading dashboard data...</p>
                </div>

                <t t-if="!state.loading and state.data">
                    <!-- Row 1: KPI Cards -->
                    <div class="row g-3 mb-4">
                        <!-- Total Content -->
                        <div class="col-md-6 col-lg-3">
                            <div class="card h-100 border-0 shadow-sm" style="cursor:pointer" t-on-click="onClickTotalContent">
                                <div class="card-body text-center">
                                    <div class="text-muted small text-uppercase mb-1">Total Content</div>
                                    <div class="display-5 fw-bold text-primary" t-out="state.data.totalContent"/>
                                    <div class="text-muted small mt-1">pieces created</div>
                                </div>
                            </div>
                        </div>
                        <!-- Avg SEO Score -->
                        <div class="col-md-6 col-lg-3">
                            <div class="card h-100 border-0 shadow-sm">
                                <div class="card-body text-center">
                                    <div class="text-muted small text-uppercase mb-1">Avg SEO Score</div>
                                    <div class="display-5 fw-bold">
                                        <span t-attf-class="text-#{getScoreColor(state.data.avgSeoScore)}" t-out="state.data.avgSeoScore"/>
                                    </div>
                                    <div class="progress mt-2" style="height: 6px;">
                                        <div class="progress-bar"
                                             t-attf-class="bg-#{getScoreColor(state.data.avgSeoScore)}"
                                             role="progressbar"
                                             t-attf-style="width: #{state.data.avgSeoScore}%"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Tokens Used -->
                        <div class="col-md-6 col-lg-3">
                            <div class="card h-100 border-0 shadow-sm">
                                <div class="card-body text-center">
                                    <div class="text-muted small text-uppercase mb-1">Tokens Used</div>
                                    <div class="display-5 fw-bold text-info" t-out="state.data.totalTokens"/>
                                    <div class="text-muted small mt-1">total consumed</div>
                                </div>
                            </div>
                        </div>
                        <!-- Stale Content -->
                        <div class="col-md-6 col-lg-3">
                            <div class="card h-100 border-0 shadow-sm" style="cursor:pointer" t-on-click="onClickStaleContent">
                                <div class="card-body text-center">
                                    <div class="text-muted small text-uppercase mb-1">Needs Refresh</div>
                                    <div t-attf-class="display-5 fw-bold #{state.data.staleCount > 0 ? 'text-warning' : 'text-success'}"
                                         t-out="state.data.staleCount"/>
                                    <div class="text-muted small mt-1">stale items</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Row 2: Charts (simple bar-like display) -->
                    <div class="row g-3 mb-4">
                        <!-- Content by State -->
                        <div class="col-lg-6">
                            <div class="card border-0 shadow-sm">
                                <div class="card-header bg-transparent border-0">
                                    <h5 class="card-title mb-0">
                                        <i class="fa fa-bar-chart me-1"/>Content by Status
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <t t-foreach="Object.entries(state.data.contentByState)" t-as="entry" t-key="entry[0]">
                                        <div class="d-flex align-items-center mb-2" style="cursor:pointer"
                                             t-on-click="() => this.onClickState(entry[0])">
                                            <span class="text-truncate me-2" style="min-width:100px;" t-out="getStateLabel(entry[0])"/>
                                            <div class="progress flex-grow-1 me-2" style="height: 20px;">
                                                <div class="progress-bar"
                                                     t-attf-style="width: #{state.data.totalContent ? (entry[1] / state.data.totalContent * 100) : 0}%; background-color: #{getStateColor(entry[0])};"
                                                     t-out="entry[1]"/>
                                            </div>
                                        </div>
                                    </t>
                                    <div t-if="!Object.keys(state.data.contentByState).length"
                                         class="text-muted text-center py-3">
                                        No content yet
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Content by Type -->
                        <div class="col-lg-6">
                            <div class="card border-0 shadow-sm">
                                <div class="card-header bg-transparent border-0">
                                    <h5 class="card-title mb-0">
                                        <i class="fa fa-pie-chart me-1"/>Content by Type
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <t t-foreach="Object.entries(state.data.contentByType)" t-as="entry" t-key="entry[0]">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <span class="badge bg-secondary" t-out="getTypeLabel(entry[0])"/>
                                            <strong t-out="entry[1]"/>
                                        </div>
                                    </t>
                                    <div t-if="!Object.keys(state.data.contentByType).length"
                                         class="text-muted text-center py-3">
                                        No content yet
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Row 3: Recent Content -->
                    <div class="row g-3">
                        <div class="col-12">
                            <div class="card border-0 shadow-sm">
                                <div class="card-header bg-transparent border-0">
                                    <h5 class="card-title mb-0">
                                        <i class="fa fa-clock-o me-1"/>Recent Content
                                    </h5>
                                </div>
                                <div class="card-body p-0">
                                    <table class="table table-hover mb-0">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Title</th>
                                                <th>Type</th>
                                                <th>Status</th>
                                                <th>SEO Score</th>
                                                <th>Created</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <t t-foreach="state.data.recentContent" t-as="item" t-key="item.id">
                                                <tr style="cursor:pointer" t-on-click="() => this.onClickRecent(item.id)">
                                                    <td class="text-truncate" style="max-width:250px;" t-out="item.name"/>
                                                    <td>
                                                        <span class="badge bg-light text-dark" t-out="getTypeLabel(item.content_type)"/>
                                                    </td>
                                                    <td>
                                                        <span class="badge"
                                                              t-attf-style="background-color: #{getStateColor(item.state)}; color: white;"
                                                              t-out="getStateLabel(item.state)"/>
                                                    </td>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="progress flex-grow-1 me-1" style="height:8px;width:60px;">
                                                                <div class="progress-bar"
                                                                     t-attf-class="bg-#{getScoreColor(item.seo_score)}"
                                                                     t-attf-style="width: #{item.seo_score}%"/>
                                                            </div>
                                                            <small t-out="item.seo_score"/>
                                                        </div>
                                                    </td>
                                                    <td class="text-muted small" t-out="item.create_date"/>
                                                </tr>
                                            </t>
                                            <tr t-if="!state.data.recentContent.length">
                                                <td colspan="5" class="text-center text-muted py-3">
                                                    No content created yet
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </t>

                <!-- Error / No Data -->
                <div t-if="!state.loading and !state.data" class="text-center py-5">
                    <i class="fa fa-exclamation-triangle fa-3x text-warning"/>
                    <p class="mt-3 text-muted">Failed to load dashboard data. Please try again.</p>
                </div>
            </div>
        </div>
    </t>

</templates>
