import { and, asc, eq } from 'drizzle-orm'
import { db } from '@/db'
import { projects, users } from '@/db/schema'
import { getI18nForUserId } from '@/lib/i18n/server'
import { I18nProvider } from '@/lib/i18n/client'
import { requireExpertUser } from '@/lib/role-guard'
import ProjectsClient from './ProjectsClient'

export default async function AdminProjectsPage() {
  const expert = await requireExpertUser()
  const i18n = await getI18nForUserId(expert.id)
  const t = i18n.t

  const rows = await db
    .select({
      id: projects.id,
      name: projects.name,
      isActive: projects.isActive,
      createdAt: projects.createdAt,
      createdByName: users.displayName,
      createdByEmail: users.email,
    })
    .from(projects)
    .leftJoin(users, eq(users.id, projects.createdById))
    .where(and(eq(projects.tenantId, expert.tenantId), eq(projects.isActive, true)))
    .orderBy(asc(projects.name))

  const serialized = rows.map((r) => ({
    ...r,
    createdAt: r.createdAt.toISOString(),
  }))

  return (
    <I18nProvider language={i18n.language} dictionary={i18n.dictionary}>
      <main className="min-h-screen bg-zinc-50 px-4 py-10 text-zinc-950 dark:bg-zinc-950 dark:text-zinc-100">
        <div className="mx-auto max-w-3xl space-y-6">
          <div>
            <div>
              <h1 className="text-2xl font-semibold text-zinc-950 dark:text-white">{t('projects.title')}</h1>
              <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
                {t('projects.intro')}
              </p>
            </div>
          </div>

          <ProjectsClient initialProjects={serialized} />
        </div>
      </main>
    </I18nProvider>
  )
}