import{i as e,n as t}from"./lit-Cl9PTnWs.js";function n(e){return`$${e.toFixed(2)}`}function r(e){if(e>=1e6){let t=e/1e6;return t>=10?`${t.toFixed(0)}M`:`${t.toFixed(1)}M`}if(e>=1e3){let t=e/1e3;return t>=100?`${t.toFixed(0)}K`:`${t.toFixed(1)}K`}return String(e)}function i(e){if(e>=1e6){let t=e/1e6;return t>=10?`${t.toFixed(0)}M`:`${t.toFixed(1)}M`}if(e>=1e3){let t=e/1e3;return t>=100?`${t.toFixed(0)}K`:`${t.toFixed(1)}K`}return String(e)}function a(t,a){let o=t.totals,s=a.aggregates,c=o.totalCost,l=o.totalTokens,u=s.messages.total,d=s.tools.totalCalls;return e`
    <div class="usage-summary-grid">
      <div class="usage-summary-card stat">
        <div class="usage-summary-title">Total Cost</div>
        <div class="usage-summary-value">${n(c)}</div>
        <div class="usage-summary-sub">${t.days}-day period</div>
      </div>
      <div class="usage-summary-card stat">
        <div class="usage-summary-title">Total Tokens</div>
        <div class="usage-summary-value">${r(l)}</div>
        <div class="usage-summary-sub">input + output</div>
      </div>
      <div class="usage-summary-card stat">
        <div class="usage-summary-title">Messages</div>
        <div class="usage-summary-value">${i(u)}</div>
        <div class="usage-summary-sub">${i(s.messages.user)} user / ${i(s.messages.assistant)} assistant</div>
      </div>
      <div class="usage-summary-card stat">
        <div class="usage-summary-title">Tool Calls</div>
        <div class="usage-summary-value">${i(d)}</div>
        <div class="usage-summary-sub">${s.tools.uniqueTools} unique tools</div>
      </div>
    </div>
  `}function o(t){let i=t.daily;if(!i||i.length===0)return e`<div class="usage-empty-block">No daily data available.</div>`;let a=Math.max(...i.map(e=>e.totalCost),.01);return e`
    <div class="daily-chart-compact">
      <div class="daily-chart-header">
        <div class="usage-mosaic-section-title">Daily Cost Trend</div>
        <div class="usage-mosaic-total">${n(t.totals.totalCost)} total</div>
      </div>
      <div class="daily-chart-bars">
        ${i.map(t=>{let i=Math.max(3,t.totalCost/a*100),o=t.date.slice(5);return e`
            <div class="daily-bar-wrapper">
              <div class="daily-bar-tooltip">
                <strong>${t.date}</strong><br />
                Cost: ${n(t.totalCost)}<br />
                Tokens: ${r(t.totalTokens)}
              </div>
              <div
                class="daily-bar"
                style="height: ${i}%"
                title="${t.date}: ${n(t.totalCost)}"
              ></div>
              <div class="daily-bar-label daily-bar-label--compact">${o}</div>
            </div>
          `})}
      </div>
    </div>
  `}function s(t){let a=t.aggregates.byModel;return!a||a.length===0?e`<div class="usage-empty-block">No model data available.</div>`:e`
    <div class="usage-mosaic-section">
      <div class="usage-mosaic-section-title">Model Breakdown</div>
      <table class="usage-table">
        <thead>
          <tr>
            <th>Model</th>
            <th>Provider</th>
            <th style="text-align:right">Requests</th>
            <th style="text-align:right">Tokens</th>
            <th style="text-align:right">Cost</th>
          </tr>
        </thead>
        <tbody>
          ${[...a].toSorted((e,t)=>t.totals.totalCost-e.totals.totalCost).map(t=>{let a=t.model??`unknown`;return e`
              <tr>
                <td title="${a}">${a}</td>
                <td>${t.provider??`—`}</td>
                <td style="text-align:right; font-variant-numeric: tabular-nums">${i(t.count)}</td>
                <td style="text-align:right; font-variant-numeric: tabular-nums">${r(t.totals.totalTokens)}</td>
                <td style="text-align:right; font-variant-numeric: tabular-nums">${n(t.totals.totalCost)}</td>
              </tr>
            `})}
        </tbody>
      </table>
    </div>
  `}function c(t){let n=t.providers;return!n||n.length===0?e`<div class="usage-empty-block">No provider quota data available.</div>`:e`
    <div class="usage-mosaic-section">
      <div class="usage-mosaic-section-title">Provider Quota Status</div>
      <div class="usage-provider-grid">
        ${n.map(t=>{let n=t.displayName??t.provider,r=t.windows??[];return e`
            <div class="usage-provider-card">
              <div class="usage-provider-name">${n}</div>
              ${r.length===0?e`<div class="usage-provider-windows-empty">No quota windows</div>`:r.map(t=>e`
                      <div class="usage-window">
                        <div class="usage-window-header">
                          <span class="usage-window-label">${t.label}</span>
                          <span class="usage-window-pct">${t.usedPercent.toFixed(0)}%</span>
                        </div>
                        <div class="usage-window-bar">
                          <div
                            class="usage-window-fill ${t.usedPercent>=90?`usage-window-fill--danger`:t.usedPercent>=70?`usage-window-fill--warn`:``}"
                            style="width: ${Math.min(t.usedPercent,100)}%"
                          ></div>
                        </div>
                      </div>
                    `)}
            </div>
          `})}
      </div>
    </div>
  `}function l(n){if(n.loading)return e`<div class="page-loader"><span class="usage-loading-spinner"></span> Loading usage data…</div>`;if(n.error)return e`
      <section class="stack">
        <div class="callout danger">${n.error}</div>
        <button class="btn btn--sm" @click=${n.onRefresh}>Retry</button>
      </section>
    `;let r=n.costData,i=n.sessionsData,l=n.providerStatus;if(!r&&!i)return e`
      <section class="stack">
        <div class="card">
          <h3>Usage</h3>
          <p style="color: var(--muted)">No usage data available yet. Data will appear once the gateway processes requests.</p>
        </div>
      </section>
    `;let u=r??{updatedAt:0,days:30,daily:[],totals:{input:0,output:0,cacheRead:0,cacheWrite:0,totalTokens:0,totalCost:0,inputCost:0,outputCost:0,cacheReadCost:0,cacheWriteCost:0,missingCostEntries:0}},d=i??{updatedAt:0,startDate:``,endDate:``,sessions:[],totals:{input:0,output:0,cacheRead:0,cacheWrite:0,totalTokens:0,totalCost:0,inputCost:0,outputCost:0,cacheReadCost:0,cacheWriteCost:0,missingCostEntries:0},aggregates:{messages:{total:0,user:0,assistant:0,toolCalls:0,toolResults:0,errors:0},tools:{totalCalls:0,uniqueTools:0,tools:[]},byModel:[],byProvider:[],byAgent:[],byChannel:[],daily:[]}};return e`
    <section class="usage-page">
      <div class="usage-header">
        <div class="usage-header-row">
          <div class="usage-header-title">
            <button class="btn btn--sm" @click=${n.onRefresh}>Refresh</button>
          </div>
          <div class="usage-header-metrics">
            ${u.updatedAt?e`<span class="usage-metric-badge">Updated ${new Date(u.updatedAt).toLocaleTimeString()}</span>`:t}
          </div>
        </div>
      </div>

      ${a(u,d)}

      <div class="usage-overview-layout">
        <div class="usage-left-card">
          <div class="card usage-overview-card">
            ${o(u)}
          </div>
        </div>

        <div class="usage-left-card">
          <div class="card usage-overview-card">
            ${s(d)}
          </div>
        </div>
      </div>

      ${l?e`
            <div class="card usage-overview-card">
              ${c(l)}
            </div>
          `:t}
    </section>
  `}export{l as renderUsageDashboard};
//# sourceMappingURL=usage-ZbAQKaT0.js.map