import { FileText, GraduationCap, Presentation } from 'lucide-react'
import { SectionCard } from '../components/SectionCard'
import { Breadcrumbs } from '../components/Breadcrumbs'
import { PageTitle } from '../components/PageTitle'
import { useT } from '../i18n/useT'
import { useTenantBranding } from '../context/TenantBrandingContext'
import { hasBusinessModule } from '../utils/businessModules'
import type { BusinessMessageKey } from '../i18n/messages'
import styles from '../components/PageContent.module.css'

const contentSections: {
  icon: typeof FileText
  titleKey: BusinessMessageKey
  descKey: BusinessMessageKey
  linkKey: BusinessMessageKey
  href: string
  moduleId: 'blog' | 'videos' | 'instructions' | 'workshops'
}[] = [
  {
    icon: FileText,
    titleKey: 'nav.content.blog',
    descKey: 'content.card.blog.desc',
    linkKey: 'content.card.blog.link',
    href: '/blog',
    moduleId: 'blog',
  },
  {
    icon: GraduationCap,
    titleKey: 'nav.content.instructions',
    descKey: 'content.card.instructions.desc',
    linkKey: 'content.card.instructions.link',
    href: '/instructions',
    moduleId: 'instructions',
  },
  {
    icon: Presentation,
    titleKey: 'nav.workshops',
    descKey: 'content.card.workshops.desc',
    linkKey: 'content.card.workshops.link',
    href: '/workshops',
    moduleId: 'workshops',
  },
]

export function ContentPage() {
  const t = useT()
  const { enabledModules } = useTenantBranding()

  const visibleSections = contentSections.filter((section) =>
    hasBusinessModule(enabledModules, section.moduleId),
  )

  return (
    <main className={styles.content}>
      <Breadcrumbs
        items={[
          { label: 'Dashboard', href: '/' },
          { label: 'Content' },
        ]}
      />
      <div className={styles.pageHeader}>
        <div>
          <PageTitle en="CONTENT">{t('title.content')}</PageTitle>
          <p className={styles.pageSubtitle}>{t('content.page.subtitle')}</p>
        </div>
      </div>

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