import { CalendarDays, Building2, Users, Globe, Settings } from 'lucide-react'
import { useAuth } from '../context/AuthContext'
import { SectionCard } from '../components/SectionCard'
import styles from '../components/PageContent.module.css'

const sections = [
  {
    icon: Building2,
    title: 'Businesses',
    description: 'Manage all businesses, their plans, and account status.',
    linkText: 'View businesses',
    href: '/businesses',
  },
  {
    icon: Users,
    title: 'Users',
    description: 'View and manage platform users, roles, and permissions.',
    linkText: 'View users',
    href: '/users',
  },
  {
    icon: Globe,
    title: 'Websites',
    description: 'Monitor and manage all websites across the platform.',
    linkText: 'View websites',
    href: '/websites',
  },
  {
    icon: Settings,
    title: 'Settings',
    description: 'Configure platform defaults such as invoice line items.',
    linkText: 'Open settings',
    href: '/settings',
  },
]

function getFormattedDate() {
  return new Intl.DateTimeFormat('en-US', {
    month: 'long',
    day: 'numeric',
    year: 'numeric',
    weekday: 'long',
  }).format(new Date())
}

export function HomePage() {
  const { user } = useAuth()
  const firstName = user?.firstName || 'Admin'

  return (
    <main className={styles.content}>
      <div className={styles.pageHeader}>
        <div>
          <h2 className={styles.pageTitle}>
            Welcome back, {firstName}! <span aria-hidden="true">👋</span>
          </h2>
          <p className={styles.pageSubtitle}>
            Here&apos;s what&apos;s happening across the Meshkee platform today.
          </p>
        </div>

        <div className={styles.dateBadge}>
          <CalendarDays size={16} />
          <span>{getFormattedDate()}</span>
        </div>
      </div>

      <div className={styles.gridHome}>
        {sections.map((section) => (
          <SectionCard key={section.title} {...section} />
        ))}
      </div>
    </main>
  )
}
