import { FolderTree, PlusCircle, Package, Settings, Tag } from 'lucide-react'
import { SectionCard } from '../components/SectionCard'
import { ProductActivityChart } from '../components/ProductActivityChart'
import { Breadcrumbs } from '../components/Breadcrumbs'
import { useT } from '../i18n/useT'
import type { BusinessMessageKey } from '../i18n/messages'
import styles from '../components/PageContent.module.css'

const productSections: {
  icon: typeof Package
  titleKey: BusinessMessageKey
  descKey: BusinessMessageKey
  href: string
}[] = [
  {
    icon: Package,
    titleKey: 'nav.products.list',
    descKey: 'products.card.list.desc',
    href: '/products/list',
  },
  {
    icon: PlusCircle,
    titleKey: 'products.card.new.title',
    descKey: 'products.card.new.desc',
    href: '/products/new',
  },
  {
    icon: FolderTree,
    titleKey: 'nav.products.categories',
    descKey: 'products.card.categories.desc',
    href: '/products/categories',
  },
  {
    icon: Tag,
    titleKey: 'nav.products.brands',
    descKey: 'products.card.brands.desc',
    href: '/products/brands',
  },
  {
    icon: Settings,
    titleKey: 'nav.products.settings',
    descKey: 'products.card.settings.desc',
    href: '/products/settings',
  },
]

export function ProductsPage() {
  const t = useT()

  return (
    <main className={styles.content}>
      <Breadcrumbs
        items={[
          { label: 'Dashboard', href: '/' },
          { label: 'Products' },
        ]}
      />
      <div className={styles.pageHeader}>
        <div>
          <h2 className={styles.pageTitle}>{t('title.products')}</h2>
          <p className={styles.pageSubtitle}>{t('products.overview.subtitle')}</p>
        </div>
      </div>

      <div className={styles.gridHome}>
        {productSections.map((section) => (
          <SectionCard
            key={section.href}
            icon={section.icon}
            title={t(section.titleKey)}
            description={t(section.descKey)}
            href={section.href}
          />
        ))}
      </div>

      <div className={styles.grid12}>
        <div className={styles.col6}>
          <ProductActivityChart />
        </div>
      </div>
    </main>
  )
}