// frontend/src/pages/dashboard/DashboardPage.jsx

import { useState, useEffect } from 'react'
import PageHeader from '@/components/ui/PageHeader'
import { useAuth } from '@/hooks/useAuth'
import { fmtDateFull, fmtTime24 } from '@/lib/formatters'

export default function DashboardPage() {
  const { user } = useAuth()
  const [now, setNow] = useState(new Date())

  useEffect(() => {
    const timer = setInterval(() => setNow(new Date()), 1000)
    return () => clearInterval(timer)
  }, [])

  const dateStr = fmtDateFull(now)
  const timeStr = fmtTime24(now)

  return (
    <div className="page-wrapper">
      <PageHeader
        title="Dashboard"
        subtitle="Welcome back to BellSystems Control Panel"
      />

      <div style={{ marginTop: 'var(--space-8)' }}>
        <p style={{ color: 'var(--color-text-primary)', fontSize: 'var(--text-xl)', fontWeight: 600 }}>
          {user?.name ? `Welcome, ${user.name}.` : 'Welcome.'}
        </p>
        <p style={{ color: 'var(--color-text-muted)', marginTop: 'var(--space-1)' }}>
          {dateStr} &mdash; {timeStr}
        </p>
      </div>
    </div>
  )
}
