import { useNavigate } from 'react-router-dom'
import HistoryOverviewVizSection from '../history/HistoryOverviewVizSection'
import { normalizeHistoryOverviewVizConfig } from '../../widgetSystem/historyOverviewVizConfig'
import { normalizeBodyChartDays } from '../../widgetSystem/bodyChartDays'

/**
 * Verlauf — Gesamtübersicht als Dashboard-Widget: GET /charts/history-overview-viz (inkl. chart_payloads C1–C4).
 * @param {{ refreshTick?: number, historyOverviewVizConfig?: Record<string, unknown> }} props
 */
export default function HistoryOverviewVizWidget({ refreshTick = 0, historyOverviewVizConfig }) {
  const nav = useNavigate()
  const cfg = normalizeHistoryOverviewVizConfig(historyOverviewVizConfig)
  const days = normalizeBodyChartDays(cfg.chart_days)

  return (
    <div className="card section-gap" style={{ marginBottom: 16 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
        <div>
          <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text1)' }}>Gesamtübersicht (Verlauf)</div>
          <div style={{ fontSize: 12, color: 'var(--text3)' }}>history-overview-viz · {days} Tage</div>
        </div>
        <button type="button" className="btn btn-secondary" style={{ fontSize: 12, padding: '6px 12px' }} onClick={() => nav('/history', { state: { tab: 'overview' } })}>
          Verlauf →
        </button>
      </div>
      <HistoryOverviewVizSection
        key={`${refreshTick}-${days}`}
        externalPeriod={days}
        hidePeriodSelector
        embedded
        visibility={cfg}
      />
    </div>
  )
}