"use client"

import { useEffect, useMemo } from "react"
import { DemoChrome } from "@/components/demo/demo-chrome"
import { RichTextDocumentEditor } from "@/components/drive/richtext-document"
import { SuiteThemeShell } from "@/components/suite/suite-theme-shell"
import type { RichTextSessionResponse } from "@/lib/drive/richtext-types"

const DEMO_SESSION: RichTextSessionResponse = {
  roomId: "demo-docs",
  canonicalPath: "/Démo/Bienvenue dans UltiDocs.ultidoc.json",
  wsUrl: "",
  token: "",
  mode: "edit",
  importRequired: false,
  collaboration: false,
  documentUrl: "/demo/ultidoc-sample.json",
  saveUrl: "/api/demo/richtext-save",
}

/** Éditeur UltiDocs réel, sans backend : contenu seedé, sauvegarde no-op (zéro rétention). */
export function DemoDocsEditor() {
  useEffect(() => {
    document.documentElement.dataset.routeScope = "drive"
  }, [])

  const chrome = useMemo(
    () => ({
      title: "Bienvenue dans UltiDocs",
      showBack: false,
      showShare: false,
      showAccount: false,
      trailing: (
        <span className="rounded-full border border-[var(--mail-border)] px-2.5 py-1 text-[11px] font-medium text-muted-foreground">
          Démo — zéro rétention
        </span>
      ),
    }),
    []
  )

  return (
    <SuiteThemeShell>
      <DemoChrome>
        <div className="flex h-dvh flex-col overflow-hidden">
          <RichTextDocumentEditor
            session={DEMO_SESSION}
            mode="edit"
            userName="Visiteur"
            userColor="#4f6df5"
            chrome={chrome}
          />
        </div>
      </DemoChrome>
    </SuiteThemeShell>
  )
}