signal-batch/frontend/src/pages/Dashboard.tsx

import { useState } from 'react'
import { usePoller } from '../hooks/usePoller.ts'
import { useI18n } from '../hooks/useI18n.ts'
import { batchApi } from '../api/batchApi.ts'
import { monitorApi } from '../api/monitorApi.ts'
import type {
  BatchStatistics,
  CacheStats,
  DailyStats,
  MetricsSummary,
  ProcessingDelay,
  RunningJob,
} from '../api/types.ts'
import MetricCard from '../components/charts/MetricCard.tsx'
import StatusBadge from '../components/common/StatusBadge.tsx'
import BarChart from '../components/charts/BarChart.tsx'
import TimeRangeSelector from '../components/common/TimeRangeSelector.tsx'
import { formatDuration, formatNumber, formatDateTime, formatPercent } from '../utils/formatters.ts'

const POLL_INTERVAL = 30_000

export default function Dashboard() {
  const { t } = useI18n()
  const [stats, setStats] = useState<BatchStatistics | null>(null)
  const [metrics, setMetrics] = useState<MetricsSummary | null>(null)
  const [cache, setCache] = useState<CacheStats | null>(null)
  const [delay, setDelay] = useState<ProcessingDelay | null>(null)
  const [daily, setDaily] = useState<DailyStats | null>(null)
  const [running, setRunning] = useState<RunningJob[]>([])
  const [days, setDays] = useState(7)

  usePoller(async () => {
    const [s, m, c, d, ds, r] = await Promise.allSettled([
      batchApi.getStatistics(days),
      monitorApi.getMetricsSummary(),
      monitorApi.getCacheStats(),
      monitorApi.getDelay(),
      batchApi.getDailyStats(),
      batchApi.getRunningJobs(),
    ])
    if (s.status === 'fulfilled') setStats(s.value)
    if (m.status === 'fulfilled') setMetrics(m.value)
    if (c.status === 'fulfilled') setCache(c.value)
    if (d.status === 'fulfilled') setDelay(d.value)
    if (ds.status === 'fulfilled') setDaily(ds.value)
    if (r.status === 'fulfilled') setRunning(r.value)
  }, POLL_INTERVAL, [days])

  const memUsage = metrics
    ? Math.round((metrics.memory.used / metrics.memory.max) * 100)
    : 0

  return (
    <div className="space-y-6 fade-in">
      {/* Header */}
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold">{t('dashboard.title')}</h1>
        <TimeRangeSelector value={days} onChange={setDays} />
      </div>

      {/* Status Cards */}
      <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
        <MetricCard
          title={t('dashboard.totalExec')}
          value={stats ? formatNumber(stats.summary.totalExecutions) : '-'}
          subtitle={stats ? `${days}${t('dashboard.periodBasis')}` : undefined}
        />
        <MetricCard
          title={t('dashboard.successRate')}
          value={stats ? formatPercent(stats.summary.successRate) : '-'}
          trend={stats && stats.summary.successRate >= 95 ? 'up' : stats && stats.summary.successRate < 80 ? 'down' : 'neutral'}
        />
        <MetricCard
          title={t('dashboard.avgDuration')}
          value={stats ? formatDuration(stats.summary.avgProcessingTimeSeconds) : '-'}
        />
        <MetricCard
          title={t('dashboard.totalProcessed')}
          value={stats ? formatNumber(stats.summary.totalRecordsProcessed) : '-'}
          subtitle={stats ? `${formatNumber(stats.summary.avgRecordsPerExecution)}${t('dashboard.avgPerJob')}` : undefined}
        />
      </div>

      {/* Running Jobs + Processing Delay */}
      <div className="grid gap-4 lg:grid-cols-2">
        <div className="sb-card">
          <div className="sb-card-header">{t('dashboard.runningJobs')}</div>
          {running.length === 0 ? (
            <div className="py-4 text-center text-sm text-muted">{t('dashboard.noRunningJobs')}</div>
          ) : (
            <div className="space-y-2">
              {running.map(job => (
                <div key={job.executionId} className="flex items-center justify-between rounded-lg bg-surface-hover p-3">
                  <div>
                    <div className="font-medium text-sm">{job.jobName}</div>
                    <div className="text-xs text-muted">#{job.executionId} &middot; {formatDateTime(job.startTime)}</div>
                  </div>
                  <StatusBadge status={job.status} />
                </div>
              ))}
            </div>
          )}
        </div>

        <div className="sb-card">
          <div className="sb-card-header">{t('dashboard.delay')}</div>
          {delay ? (
            <div className="space-y-3">
              <div className="flex items-baseline gap-2">
                <span className="text-3xl font-bold">{delay.delayMinutes ?? 0}</span>
                <span className="text-muted">{t('dashboard.delayMin')}</span>
                <StatusBadge status={delay.status ?? 'NORMAL'} />
              </div>
              <div className="grid grid-cols-2 gap-3 text-sm">
                <div>
                  <span className="text-muted">{t('dashboard.aisLatest')}</span>
                  <div className="font-mono text-xs">{formatDateTime(delay.aisLatestTime)}</div>
                </div>
                <div>
                  <span className="text-muted">{t('dashboard.processLatest')}</span>
                  <div className="font-mono text-xs">{formatDateTime(delay.queryLatestTime)}</div>
                </div>
                <div>
                  <span className="text-muted">{t('dashboard.aisReceived')}</span>
                  <div>{formatNumber(delay.recentAisCount)}{t('common.items')}</div>
                </div>
                <div>
                  <span className="text-muted">{t('dashboard.vesselsProcessed')}</span>
                  <div>{formatNumber(delay.processedVessels)}{t('common.items')}</div>
                </div>
              </div>
            </div>
          ) : (
            <div className="py-4 text-center text-sm text-muted">{t('common.loading')}</div>
          )}
        </div>
      </div>

      {/* System Metrics + Cache */}
      <div className="grid gap-4 lg:grid-cols-2">
        <div className="sb-card">
          <div className="sb-card-header">{t('dashboard.systemMetrics')}</div>
          {metrics ? (
            <div className="space-y-3">
              <div>
                <div className="mb-1 flex justify-between text-sm">
                  <span>{t('dashboard.memory')} ({metrics.memory.used}MB / {metrics.memory.max}MB)</span>
                  <span className={memUsage > 85 ? 'text-danger' : memUsage > 70 ? 'text-warning' : 'text-success'}>
                    {memUsage}%
                  </span>
                </div>
                <div className="h-2 rounded-full bg-surface-hover">
                  <div
                    className={`h-2 rounded-full ${memUsage > 85 ? 'bg-danger' : memUsage > 70 ? 'bg-warning' : 'bg-success'}`}
                    style={{ width: `${memUsage}%` }}
                  />
                </div>
              </div>
              <div className="grid grid-cols-3 gap-3 text-center text-sm">
                <div>
                  <div className="text-lg font-bold">{metrics.threads}</div>
                  <div className="text-xs text-muted">{t('dashboard.threads')}</div>
                </div>
                <div>
                  <div className="text-lg font-bold">{metrics.database.activeConnections}</div>
                  <div className="text-xs text-muted">{t('dashboard.dbConn')}</div>
                </div>
                <div>
                  <div className="text-lg font-bold">{(metrics.processing?.recordsPerSecond ?? 0).toFixed(0)}</div>
                  <div className="text-xs text-muted">{t('dashboard.recordsSec')}</div>
                </div>
              </div>
            </div>
          ) : (
            <div className="py-4 text-center text-sm text-muted">{t('common.loading')}</div>
          )}
        </div>

        <div className="sb-card">
          <div className="sb-card-header">{t('dashboard.cacheStatus')}</div>
          {cache ? (
            <div className="space-y-3">
              <div className="flex items-baseline gap-2">
                <span className="text-3xl font-bold">{cache.hitRate}</span>
                <span className="text-muted">{t('dashboard.hitRate')}</span>
                <StatusBadge status={cache.status} />
              </div>
              <div className="grid grid-cols-3 gap-3 text-center text-sm">
                <div>
                  <div className="text-lg font-bold">{formatNumber(cache.currentSize)}</div>
                  <div className="text-xs text-muted">{t('dashboard.size')}</div>
                </div>
                <div>
                  <div className="text-lg font-bold">{formatNumber(cache.hitCount)}</div>
                  <div className="text-xs text-muted">{t('dashboard.hits')}</div>
                </div>
                <div>
                  <div className="text-lg font-bold">{formatNumber(cache.missCount)}</div>
                  <div className="text-xs text-muted">{t('dashboard.misses')}</div>
                </div>
              </div>
            </div>
          ) : (
            <div className="py-4 text-center text-sm text-muted">{t('common.loading')}</div>
          )}
        </div>
      </div>

      {/* Daily Throughput Chart */}
      {daily && daily.dailyStats.length > 0 && (
        <div className="sb-card">
          <div className="sb-card-header">{t('dashboard.dailyVolume')}</div>
          <BarChart
            data={daily.dailyStats.map(d => ({
              date: d.date.slice(5),
              processed: d.totalProcessed,
            }))}
            dataKey="processed"
            xKey="date"
            height={280}
          />
        </div>
      )}
    </div>
  )
}