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

export function HomePage() {
  const { user } = useAuth()
  const { locale } = useLocale()
  const t = useT()
  const firstName =
    (locale === 'en' ? user?.firstNameEn : user?.firstName) ||
    user?.firstName ||
    user?.firstNameEn ||
    t('home.welcomeFallback')

  const sections = [
    {
      icon: User,
      title: t('home.card.profile.title'),
      description: t('home.card.profile.desc'),
      linkText: t('home.card.profile.link'),
      href: '/profile',
    },
    {
      icon: MapPin,
      title: t('home.card.addresses.title'),
      description: t('home.card.addresses.desc'),
      linkText: t('home.card.addresses.link'),
      href: '/addresses',
    },
    {
      icon: ShoppingBag,
      title: t('home.card.orders.title'),
      description: t('home.card.orders.desc'),
      linkText: t('home.card.orders.link'),
      href: '/orders',
    },
    {
      icon: Heart,
      title: t('home.card.favorites.title'),
      description: t('home.card.favorites.desc'),
      linkText: t('home.card.favorites.link'),
      href: '/favorites',
    },
  ]

  const formattedDate = new Intl.DateTimeFormat(locale === 'fa' ? 'fa-IR' : 'en-US', {
    month: 'long',
    day: 'numeric',
    year: 'numeric',
    weekday: 'long',
  }).format(new Date())

  return (
    <main className={styles.content}>
      <div className={styles.pageHeader}>
        <div>
          <h2 className={styles.pageTitle}>
            {t('home.welcome', { name: firstName })}
          </h2>
          <p className={styles.pageSubtitle}>{t('home.subtitle')}</p>
        </div>

        <div className={styles.dateBadge}>
          <CalendarDays size={16} />
          <span>{formattedDate}</span>
        </div>
      </div>

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