import { and, asc, eq } from 'drizzle-orm'
import { notFound } from 'next/navigation'
import { db } from '@/db'
import { knowledgeEntries, knowledgeEntryRevisions, users } from '@/db/schema'
import { getKbEntryImpactCount } from '@/lib/engagement-metrics'
import { requireExpertUser } from '@/lib/role-guard'
import KnowledgeForm from '../KnowledgeForm'
import DeleteKbEntryButton from './DeleteKbEntryButton'

export default async function KnowledgeEntryPage({ params }: { params: Promise<{ id: string }> }) {
  const expert = await requireExpertUser()
  const { id } = await params

  const [entry] = await db
    .select()
    .from(knowledgeEntries)
    .where(and(eq(knowledgeEntries.id, id), eq(knowledgeEntries.tenantId, expert.tenantId), eq(knowledgeEntries.isDeleted, false)))
    .limit(1)

  if (!entry) notFound()

  const [revisions, impactCount] = await Promise.all([
    db
      .select({
        id: knowledgeEntryRevisions.id,
        revisionNumber: knowledgeEntryRevisions.revisionNumber,
        title: knowledgeEntryRevisions.title,
        changeReason: knowledgeEntryRevisions.changeReason,
        createdAt: knowledgeEntryRevisions.createdAt,
        editorName: users.displayName,
      })
      .from(knowledgeEntryRevisions)
      .leftJoin(users, eq(users.id, knowledgeEntryRevisions.editedById))
      .where(eq(knowledgeEntryRevisions.entryId, id))
      .orderBy(asc(knowledgeEntryRevisions.revisionNumber)),
    getKbEntryImpactCount({ tenantId: expert.tenantId, entryId: id }),
  ])

  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-6xl space-y-6">
        <div className="flex items-start justify-between gap-4">
          <div>
            <p className="break-all font-mono text-xs text-zinc-500 dark:text-zinc-400">{entry.slug}</p>
            <h1 className="mt-2 text-2xl font-semibold text-zinc-950 dark:text-white">{entry.title}</h1>
          </div>
          <DeleteKbEntryButton entryId={entry.id} title={entry.title} />
        </div>

        <KnowledgeForm
          entry={{
            id: entry.id,
            title: entry.title,
            slug: entry.slug,
            kind: entry.kind,
            tags: entry.tags,
            bodyMarkdown: entry.bodyMarkdown,
          }}
        />

        <section className="rounded-lg border border-zinc-200 bg-white px-5 py-4 text-sm font-medium text-zinc-700 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200">
          Used in {impactCount} pre-filled responses
        </section>

        {revisions.length > 0 && (
          <details className="group rounded-lg border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900">
            <summary className="flex cursor-pointer items-center justify-between px-5 py-3 text-sm font-semibold text-zinc-950 dark:text-white select-none">
              Revision history
              <span className="text-xs font-normal text-zinc-500 dark:text-zinc-400 group-open:hidden">
                {revisions.length} revision{revisions.length !== 1 ? 's' : ''}
              </span>
              <span className="hidden text-xs font-normal text-zinc-500 dark:text-zinc-400 group-open:inline">Hide</span>
            </summary>
            <div className="divide-y divide-zinc-100 dark:divide-zinc-800">
              {[...revisions].reverse().map((rev) => (
                <div key={rev.id} className="flex items-baseline gap-4 px-5 py-3 text-sm">
                  <span className="shrink-0 font-mono text-xs text-zinc-400 dark:text-zinc-500">
                    v{rev.revisionNumber}
                  </span>
                  <div className="min-w-0 flex-1">
                    <p className="font-medium text-zinc-950 dark:text-zinc-100 truncate">{rev.title}</p>
                    {rev.changeReason && (
                      <p className="text-zinc-500 dark:text-zinc-400 text-xs mt-0.5">{rev.changeReason}</p>
                    )}
                  </div>
                  <div className="shrink-0 text-right text-xs text-zinc-400 dark:text-zinc-500">
                    {rev.editorName && <p>{rev.editorName}</p>}
                    <p>{new Date(rev.createdAt).toLocaleDateString(undefined, { dateStyle: 'medium' })}</p>
                  </div>
                </div>
              ))}
            </div>
          </details>
        )}
      </div>
    </main>
  )
}