import { CalendarDays, User, MapPin, ShoppingBag, Heart } from 'lucide-react'
import { useAuth } from '../context/AuthContext'
import { SectionCard } from '@meshkee/dashboard-ui'
import styles from '../components/PageContent.module.css'

const sections = [
  {
    icon: User,
    title: 'My Profile',
    description: 'View and update your personal information and contact details.',
    linkText: 'View profile',
    href: '/profile',
  },
  {
    icon: MapPin,
    title: 'My Addresses',
    description: 'Manage your shipping addresses for checkout and deliveries.',
    linkText: 'View addresses',
    href: '/addresses',
  },
  {
    icon: ShoppingBag,
    title: 'My Orders',
    description: 'Track your orders, view order history and order details.',
    linkText: 'View orders',
    href: '/orders',
  },
  {
    icon: Heart,
    title: 'My Favorites',
    description: 'Browse and manage your saved favorite products.',
    linkText: 'View favorites',
    href: '/favorites',
  },
]

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 || 'there'

  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}>
            Manage your profile, addresses, orders, and favorites in one place.
          </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>
  )
}