import { redirect } from 'next/navigation'
import { eq } from 'drizzle-orm'
import { Fragment } from 'react'
import { auth } from '@/auth'
import { db } from '@/db'
import { users } from '@/db/schema'
import {
  ActivityCalendar,
  getExpertEngagementStats,
  getLineManagerEngagementStats,
  getProfileActivity,
} from '@/lib/engagement-metrics'
import { getI18nForUserId } from '@/lib/i18n/server'
import SettingsClient from '../settings/SettingsClient'

export default async function ProfilePage() {
  const session = await auth()
  if (!session?.user?.id) redirect('/login')
  const i18n = await getI18nForUserId(session.user.id)
  const t = i18n.t

  const [user] = await db
    .select({
      displayName: users.displayName,
      email: users.email,
      timeZone: users.timeZone,
      preferredLanguage: users.preferredLanguage,
    })
    .from(users)
    .where(eq(users.id, session.user.id))
    .limit(1)

  const parts = user?.displayName?.split(' ') ?? []
  const firstName = parts[0] ?? ''
  const lastName = parts.slice(1).join(' ')
  const role = session.user.role === 'line_manager' ? 'line_manager' : 'expert'
  const tenantId = session.user.tenantId

  const [lineManagerStats, expertStats, activity] = tenantId
    ? await Promise.all([
      role === 'line_manager'
        ? getLineManagerEngagementStats({
          tenantId,
          userId: session.user.id,
          timeZone: user?.timeZone ?? null,
        })
        : Promise.resolve(null),
      role === 'expert'
        ? getExpertEngagementStats({ tenantId, userId: session.user.id })
        : Promise.resolve(null),
      getProfileActivity({
        tenantId,
        userId: session.user.id,
        role,
        timeZone: user?.timeZone ?? null,
      }),
    ])
    : [null, null, null]

  return (
    <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-5xl space-y-6">
        <div>
          <h1 className="text-2xl font-semibold text-zinc-950 dark:text-white">{t('settings.profileTitle')}</h1>
          <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{user?.email}</p>
        </div>

        <SettingsClient
          initialFirstName={firstName}
          initialLastName={lastName}
          initialTimeZone={user?.timeZone ?? null}
          initialPreferredLanguage={user?.preferredLanguage ?? null}
          labels={{
            personalInfo: t('settings.personalInfo'),
            firstName: t('settings.firstName'),
            lastName: t('settings.lastName'),
            timeZone: t('settings.timeZone'),
            preferredLanguage: t('settings.language.label'),
            saved: t('settings.saved'),
            save: t('settings.save'),
            saving: t('settings.saving'),
            error: t('settings.error'),
          }}
        />

        {activity ? (
          <section className="rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-900">
            <div className="mb-4 flex items-end justify-between gap-4">
              <div>
                <h2 className="text-sm font-semibold text-zinc-950 dark:text-white">{t('settings.activity')}</h2>
                <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
                  {t('settings.streak', { count: activity.calendar.streak })}
                </p>
              </div>
              <p className="text-sm text-zinc-500 dark:text-zinc-400">{t('settings.actions', { count: activity.totalActions })}</p>
            </div>
            <ActivityCalendarGrid
              calendar={activity.calendar}
              role={role}
              labels={{
                ticketsSubmitted: t('settings.calendar.ticketsSubmitted'),
                expertActions: t('settings.calendar.expertActions'),
                mon: t('settings.calendar.mon'),
                wed: t('settings.calendar.wed'),
                fri: t('settings.calendar.fri'),
              }}
            />
          </section>
        ) : null}

        <section className="rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-900">
          <h2 className="mb-4 text-sm font-semibold text-zinc-950 dark:text-white">{t('settings.stats')}</h2>
          {lineManagerStats ? (
            <StatsRow
              stats={[
                [t('settings.ticketsThisMonth'), lineManagerStats.ticketsThisMonth],
                [t('settings.currentStreak'), lineManagerStats.weekStreak],
                [t('settings.totalResolved'), lineManagerStats.resolved],
              ]}
            />
          ) : null}
          {expertStats ? (
            <StatsRow
              stats={[
                [t('settings.activeKbArticles'), expertStats.activeKbArticles],
                [t('settings.totalResponsesHelped'), expertStats.responsesHelped],
              ]}
            />
          ) : null}
        </section>
      </div>
    </main>
  )
}

function StatsRow({ stats }: { stats: Array<[string, number]> }) {
  return (
    <dl className="grid gap-3 sm:grid-cols-3">
      {stats.map(([label, value]) => (
        <div key={label} className="rounded-md border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-950">
          <dt className="text-xs font-medium text-zinc-500 dark:text-zinc-400">{label}</dt>
          <dd className="mt-2 text-2xl font-semibold tabular-nums text-zinc-950 dark:text-white">{value}</dd>
        </div>
      ))}
    </dl>
  )
}

function ActivityCalendarGrid({
  calendar,
  role,
  labels,
}: {
  calendar: ActivityCalendar
  role: 'line_manager' | 'expert'
  labels: { ticketsSubmitted: string; expertActions: string; mon: string; wed: string; fri: string }
}) {
  const label = role === 'line_manager' ? labels.ticketsSubmitted : labels.expertActions
  const levelClass = [
    'bg-zinc-100 dark:bg-zinc-800',
    'bg-sky-200 dark:bg-sky-900',
    'bg-sky-400 dark:bg-sky-700',
    'bg-teal-500 dark:bg-teal-500',
  ]

  return (
    <div className="overflow-x-auto">
      <div className="min-w-[760px]">
        <div className="grid grid-cols-[2rem_repeat(52,0.75rem)] gap-1">
          {[labels.mon, labels.wed, labels.fri].map((dayLabel, labelIndex) => (
            <Fragment key={dayLabel}>
              <div key={dayLabel} className="h-3 text-[10px] leading-3 text-zinc-500 dark:text-zinc-400">{dayLabel}</div>
              {calendar.weeks.map((week) => {
                const day = week.days[labelIndex * 2]
                return (
                  <span
                    key={`${week.weekStart}-${dayLabel}`}
                    className={`h-3 w-3 rounded-sm ${levelClass[day.level]} ${day.isFuture ? 'opacity-40' : ''}`}
                    title={`${day.date} - ${day.count} ${label}`}
                  />
                )
              })}
            </Fragment>
          ))}
        </div>
      </div>
    </div>
  )
}