"use client"

import { OrgSettingsSection } from "@/components/admin/settings/org-settings-form"
import { useOrgSettingsStore } from "@/lib/admin-settings/org-settings-store"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Input } from "@/components/ui/input"

export function RichtextSection() {
  const richtext = useOrgSettingsStore((s) => s.richtext)
  const setRichtext = useOrgSettingsStore((s) => s.setRichtext)

  return (
    <OrgSettingsSection
      title="Éditeur rich text"
      description="TipTap pour les documents texte (docx, odt, md…). OnlyOffice reste actif pour tableurs et présentations."
      policySection="richtext"
    >
      <Card>
        <CardHeader className="pb-3">
          <div className="flex items-center justify-between gap-4">
            <div>
              <CardTitle className="text-sm font-medium">TipTap + Hocuspocus</CardTitle>
              <CardDescription>
                Formats word via l&apos;éditeur rich text ; sauvegarde en .ultidoc.json dans Nextcloud.
              </CardDescription>
            </div>
            <Switch
              checked={richtext.enabled}
              onCheckedChange={(enabled) => setRichtext({ enabled })}
            />
          </div>
        </CardHeader>
        <CardContent className="grid gap-4 sm:grid-cols-2">
          <div className="space-y-2">
            <Label>Mode de stockage</Label>
            <Select
              value={richtext.storage_mode}
              onValueChange={(storage_mode: "sidecar" | "overwrite") =>
                setRichtext({ storage_mode })
              }
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="sidecar">Sidecar (.ultidoc.json à côté de l&apos;original)</SelectItem>
                <SelectItem value="overwrite">Remplacer par .ultidoc.json</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-2">
            <Label>Export miroir (optionnel)</Label>
            <Select
              value={richtext.export_mirror_format || "none"}
              onValueChange={(v) =>
                setRichtext({ export_mirror_format: v === "none" ? "" : "docx" })
              }
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="none">Aucun</SelectItem>
                <SelectItem value="docx">DOCX</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-2 sm:col-span-2">
            <Label>URL WebSocket Hocuspocus (public)</Label>
            <Input
              value={richtext.hocuspocus_url}
              onChange={(e) => setRichtext({ hocuspocus_url: e.target.value })}
              placeholder="ws://localhost:1234"
            />
          </div>
        </CardContent>
      </Card>
    </OrgSettingsSection>
  )
}