<script setup>
import '@/assets/main.css'
import { Bar, Line } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, PointElement, LineElement, CategoryScale, LinearScale } from 'chart.js'
ChartJS.register(Title, Tooltip, Legend, BarElement, PointElement, LineElement, CategoryScale, LinearScale)
const shortThroughputCahrtData = {
  labels: ['agent-mkami', 'agent-ami'],
  datasets: [{ label: '분당 처리량', data: [4568, 3232] }],
}
const shortThroughputChartOptions = {
  responsive: true,
  indexAxis: 'y',
}
const daysThroughputChartData = {
  labels: ['2025-09-01', '2025-09-02', '2025-09-03', '2025-09-04', '2025-09-05', '2025-09-06', '2025-09-07'],
  datasets: [
    {
      label: '주간 처리량',
      backgroundColor: '#f87979',
      data: [40, 39, 10, 40, 39, 80, 40],
    },
  ],
}
const daysThroughputChartOptions = {
  responsive: true,
  maintainAspectRatio: false,
}
</script>

<template>
  <header class="dfx-top-title-bar p-2 d-flex align-items-center w-100 top-0 start-0 text-white bg-purple rounded shadow-sm" style="min-width: 100%">
    <h3>DFX Console</h3>
  </header>
  <div class="container p-0 d-flex">
    <aside class="dfx-left-side d-flex flex-column flex-shrink-0 p-3 bg-body-secondary">
      <div><i class="bi bi-laptop" style="font-size: 2rem"></i></div>
      <ul class="nav nav-pills flex-column mb-auto">
        <li class="nav-item">
          <a href="#" class="nav-link active" aria-current="page"> <i class="bi bi-cast" style="font-size: 1.1rem; padding-right: 0.5rem"></i> Dashboard </a>
        </li>
        <li>
          <a href="#" class="nav-link link-body-emphasis">
            <i class="bi bi-cpu" style="font-size: 1.1rem; padding-right: 0.5rem"></i>
            Agents
          </a>
        </li>
        <li>
          <a href="#" class="nav-link link-body-emphasis"> <i class="bi bi-card-checklist" style="font-size: 1.1rem; padding-right: 0.5rem"></i> History </a>
        </li>
      </ul>
    </aside>
    <main class="dfx-main container w-100">
      <div class="row">
        <div class="col-12 pt-2 border-bottom">
          <h3 class="h3">Dashboard</h3>
        </div>
      </div>
      <div class="row">
        <article class="col-12 pt-3">
          <div class="row">
            <div class="col-3">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title">agent-mkami <i class="bi bi-lightbulb-fill text-success"></i></h5>
                  <p class="card-text">Host : mkami-oracle</p>
                  <p class="card-text">처리량 : 789</p>
                </div>
              </div>
            </div>
            <div class="col-3">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title">agent-ami <i class="bi bi-lightbulb-fill text-success"></i></h5>
                  <p class="card-text">상태 : ami-cubrid</p>
                  <p class="card-text">처리량 : 345</p>
                </div>
              </div>
            </div>
          </div>
        </article>
      </div>
      <div class="row">
        <article class="col-12 pt-3">
          <div class="row">
            <div class="col-6">
              <div class="card">
                <div class="card-body">
                  <Bar id="shortThoughtputChart" :options="shortThroughputChartOptions" :data="shortThroughputCahrtData"></Bar>
                </div>
              </div>
            </div>
            <div class="col-6">
              <div class="card">
                <div class="card-body">
                  <Line :option="daysThroughputChartOptions" :data="daysThroughputChartData"></Line>
                </div>
              </div>
            </div>
          </div>
        </article>
      </div>
      <div class="row">
        <article class="col-12 pt-3">
          <h5 class="h5">에이전트 목록</h5>
          <table class="table table-striped table-bordered align-middle">
            <thead>
              <tr>
                <th scope="col" class="text-center">Agent ID</th>
                <th scope="col" class="text-center">Host</th>
                <th scope="col" class="text-center">port</th>
                <th scope="col" class="text-center">Postman Count</th>
                <th scope="col" class="text-center">Dropbox Count</th>
                <th scope="col" class="text-center">Status</th>
                <th scope="col" class="text-center">Setting</th>
              </tr>
            </thead>
            <tbody class="table-group-divider">
              <tr>
                <td scope="row">agent-mkami</td>
                <td>mkami.foxsoft.kr</td>
                <td>17801</td>
                <td class="text-end">32</td>
                <td class="text-end">25</td>
                <td class="text-center"><i class="bi bi-lightbulb-fill text-success"></i></td>
                <td class="text-center"><button type="button" class="btn btn-primary btn-sm">설정</button></td>
              </tr>
              <tr>
                <td scope="row">agent-ami</td>
                <td>ami.foxsoft.kr</td>
                <td>17801</td>
                <td class="text-end">32</td>
                <td class="text-end">25</td>
                <td class="text-center"><i class="bi bi-lightbulb-fill text-success"></i></td>
                <td class="text-center"><button type="button" class="btn btn-primary btn-sm">설정</button></td>
              </tr>
            </tbody>
          </table>
        </article>
      </div>
    </main>
  </div>
</template>

<style></style>
