"use client"

import { useEffect, useMemo } from "react"
import { RichTextDocumentEditor } from "@/components/drive/richtext-document"
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 (
    <div className="flex h-dvh flex-col overflow-hidden">
      <RichTextDocumentEditor
        session={DEMO_SESSION}
        mode="edit"
        userName="Visiteur"
        userColor="#4f6df5"
        chrome={chrome}
      />
    </div>
  )
}