import Link from 'next/link'
import { redirect } from 'next/navigation'
import { and, desc, eq } from 'drizzle-orm'
import { auth } from '@/auth'
import { db } from '@/db'
import { projects, tickets } from '@/db/schema'
import { getI18nForUserId } from '@/lib/i18n/server'
import { applyTicketTranslations } from '@/lib/content-translation-display'
import { getConfigOptionLabel } from '@/lib/config-option-labels'

const STATUS_BADGE: Record<string, string> = {
  RESPONDED: 'border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-400/30 dark:bg-emerald-400/10 dark:text-emerald-200',
  AWAITING_REPLY: 'border-sky-200 bg-sky-50 text-sky-800 dark:border-sky-400/30 dark:bg-sky-400/10 dark:text-sky-200',
  CLOSED: 'border-zinc-300 bg-zinc-100 text-zinc-600 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-400',
}

const DEFAULT_BADGE = 'border-sky-200 bg-sky-50 text-sky-800 dark:border-sky-400/30 dark:bg-sky-400/10 dark:text-sky-200'

function formatDate(value: string | null): string {
  if (!value) return ''
  return new Intl.DateTimeFormat('en', { month: 'short', day: 'numeric', year: 'numeric' }).format(
    new Date(`${value}T00:00:00Z`),
  )
}

function formatUpdatedAt(value: Date): string {
  return new Intl.DateTimeFormat('en', {
    month: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
  }).format(value)
}

export default async function MyTicketsPage() {
  const session = await auth()
  if (!session?.user?.id) redirect('/login')
  const i18n = await getI18nForUserId(session.user.id)
  const t = i18n.t
  const statusLabels: Record<string, string> = {
    DRAFT: t('ticket.status.DRAFT'),
    SUBMITTED: t('ticket.status.SUBMITTED'),
    NEEDS_INFO: t('ticket.status.NEEDS_INFO'),
    TRIAGED: t('ticket.status.TRIAGED'),
    AWAITING_EXPERT: t('ticket.status.AWAITING_EXPERT'),
    EXPERT_REVIEWING: t('ticket.status.EXPERT_REVIEWING'),
    RESPONSE_DRAFTING: t('ticket.status.RESPONSE_DRAFTING'),
    RESPONSE_READY: t('ticket.status.RESPONSE_READY'),
    RESPONDED: t('ticket.status.RESPONDED'),
    AWAITING_REPLY: t('ticket.status.AWAITING_REPLY'),
    CLOSED: t('ticket.status.CLOSED'),
    ARCHIVED: t('ticket.status.ARCHIVED'),
  }

  const tenantId = session.user.tenantId
  if (!tenantId) redirect('/login')

  const rows = await db
    .select({
      id: tickets.id,
      referenceNumber: tickets.referenceNumber,
      title: tickets.title,
      projectName: projects.name,
      department: tickets.department,
      issueCategory: tickets.issueCategory,
      affectedSystem: tickets.affectedSystem,
      successCriteria: tickets.successCriteria,
      actionRequested: tickets.actionRequested,
      dateOfOccurrence: tickets.dateOfOccurrence,
      status: tickets.status,
      updatedAt: tickets.updatedAt,
    })
    .from(tickets)
    .leftJoin(projects, eq(projects.id, tickets.projectId))
    .where(and(eq(tickets.tenantId, tenantId), eq(tickets.submitterId, session.user.id)))
    .orderBy(desc(tickets.updatedAt))
  const localizedRows = await applyTicketTranslations(rows, i18n.language)

  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-3xl space-y-6">
        <div className="flex items-end justify-between gap-4">
          <div>
            <h1 className="text-2xl font-semibold text-zinc-950 dark:text-white">{t('tickets.title')}</h1>
            <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
              {t('tickets.intro')}
            </p>
          </div>
          <Link
            href="/submit"
            className="shrink-0 rounded border border-zinc-200 bg-white px-3 py-1.5 text-sm font-medium text-zinc-800 transition hover:bg-zinc-100 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800"
          >
            {t('tickets.newTicket')}
          </Link>
        </div>

        <div className="overflow-hidden rounded-lg border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900">
          {localizedRows.length === 0 ? (
            <div className="px-6 py-12 text-center">
              <h2 className="text-sm font-medium text-zinc-950 dark:text-white">{t('tickets.emptyTitle')}</h2>
              <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{t('tickets.emptyBody')}</p>
            </div>
          ) : (
            <ul className="divide-y divide-zinc-200 dark:divide-zinc-800">
              {localizedRows.map((ticket) => (
                <li key={ticket.id}>
                  <Link
                    href={`/tickets/${ticket.id}`}
                    className="block px-5 py-4 transition hover:bg-zinc-50 dark:hover:bg-zinc-800/60"
                  >
                    <div className="flex min-w-0 flex-wrap items-center gap-2">
                      <span className="font-mono text-xs text-zinc-500 dark:text-zinc-400">
                        {ticket.referenceNumber}
                      </span>
                      {ticket.issueCategory && (
                        <span className="rounded border border-zinc-200 bg-zinc-50 px-2 py-0.5 text-xs font-medium text-zinc-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300">
                          {getConfigOptionLabel(ticket.issueCategory, i18n.language)}
                        </span>
                      )}
                      <span
                        className={`rounded border px-2 py-0.5 text-xs font-medium ${STATUS_BADGE[ticket.status] ?? DEFAULT_BADGE}`}
                      >
                        {statusLabels[ticket.status] ?? ticket.status}
                      </span>
                    </div>
                    <p className="mt-1 truncate text-sm font-semibold text-zinc-950 dark:text-white">
                      {ticket.title ?? t('tickets.issueSubmitted')}
                    </p>
                    <p className="mt-0.5 text-xs text-zinc-500 dark:text-zinc-400">
                      {ticket.projectName ? `${ticket.projectName} · ` : ''}
                      {ticket.dateOfOccurrence ? `${t('tickets.occurred', { date: formatDate(ticket.dateOfOccurrence) })} · ` : ''}
                      {t('tickets.updated', { date: formatUpdatedAt(ticket.updatedAt) })}
                    </p>
                  </Link>
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>
    </main>
  )
}