'use client'

import {
  FaUsers,
  FaBuildingColumns,
  FaCreditCard,
  FaReceipt,
  FaSchool,
  FaUserGraduate,
} from 'react-icons/fa6'

import SystemLayout from './(system)/layout'
import AppCardLink from '@/src/components/AppCardLink'
import { useAuthStore } from '../store/authStore'
import { verifyAccess } from '../utils/accessControl'
import { FaChalkboardTeacher } from 'react-icons/fa'

interface HomeCardProps {
  title: string
  icon: any
  href: string
}

const HomeCard = ({ title, icon: Icon, href }: HomeCardProps) => {
  return (
    <AppCardLink href={href}>
      <div className="flex items-center justify-center">
        <Icon className="text-[120px]" />
      </div>
      <h3 className="mt-4 text-2xl font-bold text-center">{title}</h3>
    </AppCardLink>
  )
}

export default function MainPage() {
  const { user } = useAuthStore()

  return (
    <SystemLayout>
      <div>
        <h2 className="text-3xl font-semibold mb-6">Inicio</h2>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
          {user && user.role && (
            <>
              {verifyAccess(user.role, 'users') && (
                <HomeCard href="/users" title="Usuarios" icon={FaUsers} />
              )}

              {verifyAccess(user.role, 'teachers') && (
                <HomeCard
                  href="/users"
                  title="Docentes"
                  icon={FaChalkboardTeacher}
                />
              )}

              {verifyAccess(user.role, 'students') && (
                <HomeCard
                  href="/students"
                  title="Estudiantes"
                  icon={FaUserGraduate}
                />
              )}

              {verifyAccess(user.role, 'study_programs') && (
                <HomeCard
                  href="/study-programs"
                  title="Programas de estudio"
                  icon={FaBuildingColumns}
                />
              )}

              {verifyAccess(user.role, 'study_years') && (
                <HomeCard
                  href="/study-years"
                  title="Ciclos académicos"
                  icon={FaSchool}
                />
              )}

              {verifyAccess(user.role, 'payments') && (
                <HomeCard href="/payments" title="Pagos" icon={FaCreditCard} />
              )}

              {verifyAccess(user.role, 'payment_concepts') && (
                <HomeCard
                  href="/payment-concepts"
                  title="Conceptos de pago"
                  icon={FaReceipt}
                />
              )}
            </>
          )}
        </div>
      </div>
    </SystemLayout>
  )
}