import Link from 'next/link'
import { and, desc, eq, isNull } from 'drizzle-orm'
import { db } from '@/db'
import { aiArtifacts, knowledgeEntries } from '@/db/schema'
import { getI18nForUserId } from '@/lib/i18n/server'
import { I18nProvider } from '@/lib/i18n/client'
import { requireExpertUser } from '@/lib/role-guard'
import { getKbEntryForViewer, getKbEntryTitlesForViewer, getKbTranslationRecord, isTranslationStale } from '@/lib/kb-translation'
import KnowledgeForm from './KnowledgeForm'
import KnowledgeSearch from './KnowledgeSearch'
import KbTranslationPanel from './KbTranslationPanel'
import ProposalReviewPanel, { type KnowledgeProposal } from './ProposalReviewPanel'

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

export default async function KnowledgePage({
  searchParams,
}: {
  searchParams: Promise<{ entry?: string }>
}) {
  const expert = await requireExpertUser()
  const i18n = await getI18nForUserId(expert.id)
  const t = i18n.t
  const selectedEntryId = (await searchParams).entry
  const rawEntries = await db
    .select({
      id: knowledgeEntries.id,
      title: knowledgeEntries.title,
      slug: knowledgeEntries.slug,
      kind: knowledgeEntries.kind,
      tags: knowledgeEntries.tags,
      embeddingUpdatedAt: knowledgeEntries.embeddingUpdatedAt,
      updatedAt: knowledgeEntries.updatedAt,
    })
    .from(knowledgeEntries)
    .where(eq(knowledgeEntries.tenantId, expert.tenantId))
    .orderBy(desc(knowledgeEntries.updatedAt))

  // Apply viewer-language titles where approved translations exist
  const translationTitleMap = await getKbEntryTitlesForViewer(
    expert.tenantId,
    i18n.language,
    rawEntries.map((e) => e.id),
    { includePending: true },
  )
  const entries = rawEntries.map((entry) => {
    const t = translationTitleMap.get(entry.id)
    return t ? { ...entry, title: t.title } : entry
  })

  const selectedEntry = selectedEntryId
    ? await getKbEntryForViewer(selectedEntryId, expert.tenantId, i18n.language, { includePending: true })
    : null

  // Always fetch the canonical KB entry body for stale detection in the translation panel
  const canonicalBodyForSelected = selectedEntryId
    ? await db
        .select({ bodyMarkdown: knowledgeEntries.bodyMarkdown })
        .from(knowledgeEntries)
        .where(and(eq(knowledgeEntries.id, selectedEntryId), eq(knowledgeEntries.tenantId, expert.tenantId)))
        .limit(1)
        .then((rows) => rows[0]?.bodyMarkdown ?? null)
    : null

  // Fetch the raw Spanish translation record for the translation management panel.
  // Show the panel for any non-Spanish entry so experts can manage the Spanish variant.
  const rawSpanishTranslation = selectedEntryId && i18n.language !== 'es'
    ? await getKbTranslationRecord(selectedEntryId, 'es')
    : null

  const spanishTranslationStatus: 'approved' | 'pending' | 'stale' | 'rejected' | null = rawSpanishTranslation
    ? rawSpanishTranslation.reviewStatus === 'approved' && canonicalBodyForSelected && isTranslationStale(rawSpanishTranslation.sourceBodyHash, canonicalBodyForSelected)
      ? 'stale'
      : rawSpanishTranslation.reviewStatus as 'approved' | 'pending' | 'rejected'
    : null

  const proposalRows = await db
    .select({
      id: aiArtifacts.id,
      contentJson: aiArtifacts.contentJson,
      createdAt: aiArtifacts.createdAt,
    })
    .from(aiArtifacts)
    .where(
      and(
        eq(aiArtifacts.tenantId, expert.tenantId),
        eq(aiArtifacts.artifactType, 'kb_update_proposal'),
        isNull(aiArtifacts.expertAccepted),
      ),
    )
    .orderBy(desc(aiArtifacts.createdAt))

  const proposals: KnowledgeProposal[] = proposalRows
    .map((proposal) => {
      if (!proposal.contentJson) return null
      const parsed = JSON.parse(proposal.contentJson) as {
        title?: string
        slug?: string
        body_markdown?: string
      }
      if (!parsed.title || !parsed.slug || !parsed.body_markdown) return null
      return {
        id: proposal.id,
        title: parsed.title,
        slug: parsed.slug,
        bodyMarkdown: parsed.body_markdown,
        createdAt: proposal.createdAt.toISOString(),
      }
    })
    .filter((proposal): proposal is KnowledgeProposal => proposal !== null)

  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-[100rem] space-y-6">
        <div className="flex flex-wrap items-end justify-between gap-4">
          <div>
            <h1 className="text-2xl font-semibold text-zinc-950 dark:text-white">{t('knowledge.title')}</h1>
            <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
              {t('knowledge.intro')}
            </p>
          </div>
          <span className="rounded border border-zinc-200 bg-white px-3 py-1 text-sm text-zinc-700 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-300">
            {t('knowledge.entries', { count: entries.length })}
          </span>
        </div>

        <KnowledgeSearch />

        <ProposalReviewPanel proposals={proposals} />

        <section className="grid gap-5 lg:grid-cols-[20%_minmax(0,80%)]">
          <div className="overflow-hidden rounded-lg border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900">
            {entries.length === 0 ? (
              <div className="px-5 py-10 text-center">
                <h2 className="text-sm font-medium text-zinc-950 dark:text-white">{t('knowledge.emptyTitle')}</h2>
                <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{t('knowledge.emptyBody')}</p>
              </div>
            ) : (
              <ul className="divide-y divide-zinc-200 dark:divide-zinc-800">
                {entries.map((entry) => (
                  <li key={entry.id}>
                    <Link
                      href={`/knowledge?entry=${entry.id}`}
                      className={`block px-4 py-3 transition hover:bg-zinc-100 dark:hover:bg-zinc-800/70 ${
                        selectedEntry?.id === entry.id ? 'bg-zinc-100 dark:bg-zinc-800/70' : ''
                      }`}
                    >
                      <h2 className="text-sm font-semibold leading-5 text-zinc-950 dark:text-white">
                        {entry.title}{' '}
                        <span className="inline-flex align-baseline rounded border border-violet-300 bg-violet-50 px-1.5 py-0 text-[11px] font-normal text-violet-700 dark:border-violet-700 dark:bg-violet-900/20 dark:text-violet-300">
                          {entry.kind}
                        </span>
                        {entry.tags.slice(0, 3).map((tag) => (
                          <span key={tag} className="ml-1 inline-flex align-baseline rounded border border-sky-300 bg-sky-50 px-1.5 py-0 text-[11px] font-normal text-sky-700 dark:border-sky-700 dark:bg-sky-900/20 dark:text-sky-300">
                            {tag}
                          </span>
                        ))}
                        {entry.tags.length > 3 ? (
                          <span className="ml-1 inline-flex align-baseline rounded border border-sky-200 bg-sky-50 px-1.5 py-0 text-[11px] font-normal text-sky-600 dark:border-sky-800 dark:bg-sky-900/20 dark:text-sky-400">
                            +{entry.tags.length - 3}
                          </span>
                        ) : null}
                      </h2>
                      <div className="mt-2 flex items-center justify-between gap-2 text-xs text-zinc-600 dark:text-zinc-400">
                        <p className="flex min-w-0 items-center gap-1.5">
                          <span aria-hidden="true" title={t('knowledge.updated')}>◷</span>
                          <span>{formatDate(entry.updatedAt)}</span>
                        </p>
                        {!entry.embeddingUpdatedAt ? (
                          <span className="shrink-0 rounded bg-amber-50 px-1.5 py-0.5 text-[11px] font-medium text-amber-800 dark:bg-amber-400/10 dark:text-amber-200">
                            {t('knowledge.queued')}
                          </span>
                        ) : null}
                      </div>
                    </Link>
                  </li>
                ))}
              </ul>
            )}
          </div>

          <div className="space-y-5">
            <div>
              <div className="mb-3 flex items-center justify-between gap-3">
                <h2 className="text-sm font-semibold text-zinc-950 dark:text-white">
                  {selectedEntry?.isTranslated
                    ? t('knowledge.translation.editTranslation')
                    : selectedEntry
                      ? t('knowledge.editEntry')
                      : t('knowledge.createEntry')}
                </h2>
                {selectedEntry ? (
                  <Link href="/knowledge" className="text-xs font-medium text-zinc-500 hover:text-zinc-950 dark:text-zinc-400 dark:hover:text-white">
                    {t('knowledge.newEntry')}
                  </Link>
                ) : null}
              </div>
              <KnowledgeForm
                key={selectedEntry?.id ?? 'new-entry'}
                entry={selectedEntry
                  ? {
                      ...selectedEntry,
                      isTranslated: selectedEntry.isTranslated,
                      translationLanguage: selectedEntry.isTranslated ? selectedEntry.language : undefined,
                    }
                  : undefined
                }
              />
            </div>

            {selectedEntry && selectedEntryId && i18n.language !== 'es' ? (
              <KbTranslationPanel
                entryId={selectedEntryId}
                targetLanguage="es"
                translationStatus={spanishTranslationStatus}
                currentTranslation={rawSpanishTranslation
                  ? { title: rawSpanishTranslation.title, bodyMarkdown: rawSpanishTranslation.bodyMarkdown }
                  : null
                }
              />
            ) : null}
          </div>
        </section>
      </div>
    </main>
    </I18nProvider>
  )
}