import { useState, useEffect } from 'react'
import dayjs from 'dayjs'
import 'dayjs/locale/de'
dayjs.locale('de')

/**
 * VitalsPage - Refactored v9d Phase 2d
 *
 * Separated into:
 * - Tab 1: Morgenmessung (Baseline) - once daily
 * - Tab 2: Blutdruck (BP) - multiple daily with context
 * - Tab 3: Import
 */
export default function VitalsPage() {
  const [tab, setTab] = useState('baseline')

  return (
    <div>
      <h1 className="page-title">Vitalwerte</h1>

      <div className="tabs" style={{ overflowX: 'auto', flexWrap: 'nowrap' }}>
        <button className={'tab' + (tab === 'baseline' ? ' active' : '')} onClick={() => setTab('baseline')}>
          Morgenmessung
        </button>
        <button className={'tab' + (tab === 'bp' ? ' active' : '')} onClick={() => setTab('bp')}>
          Blutdruck
        </button>
        <button className={'tab' + (tab === 'import' ? ' active' : '')} onClick={() => setTab('import')}>
          Import
        </button>
      </div>

      {tab === 'baseline' && (
        <div className="card section-gap">
          <div className="card-title">Morgenmessung (Baseline-Vitals)</div>
          <p style={{ fontSize: 13, color: 'var(--text3)' }}>
            Einmal täglich, morgens vor dem Aufstehen:
            Ruhepuls, HRV, VO2 Max, SpO2, Atemfrequenz
          </p>
          <div style={{ padding: 20, textAlign: 'center', color: 'var(--text3)' }}>
            🚧 Frontend-Refactoring läuft noch...<br />
            Nutze vorerst die alten Endpoints oder warte auf Update.
          </div>
        </div>
      )}

      {tab === 'bp' && (
        <div className="card section-gap">
          <div className="card-title">Blutdruck (mehrfach täglich)</div>
          <p style={{ fontSize: 13, color: 'var(--text3)' }}>
            Mehrfach täglich mit Kontext-Tagging:
            Nüchtern, Nach dem Essen, Vor/Nach Training, Abends, Stress
          </p>
          <div style={{ padding: 20, textAlign: 'center', color: 'var(--text3)' }}>
            🚧 Frontend-Refactoring läuft noch...<br />
            Nutze vorerst die alten Endpoints oder warte auf Update.
          </div>
        </div>
      )}

      {tab === 'import' && (
        <div className="card section-gap">
          <div className="card-title">CSV Import</div>
          <p style={{ fontSize: 13, color: 'var(--text3)' }}>
            Omron (Blutdruck) + Apple Health (Baseline-Vitals)
          </p>
          <div style={{ padding: 20, textAlign: 'center', color: 'var(--text3)' }}>
            🚧 Frontend-Refactoring läuft noch...<br />
            Import-Funktionen folgen im nächsten Update.
          </div>
        </div>
      )}
    </div>
  )
}