"use client"

import { OrgSettingsSection } from "@/components/admin/settings/org-settings-form"
import { DeployLockedHint, useDeployFieldLocked } from "@/components/admin/settings/deploy-locked-hint"
import { useOrgSettingsStore } from "@/lib/admin-settings/org-settings-store"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

export function OnlyofficeSection() {
  const onlyoffice = useOrgSettingsStore((s) => s.onlyoffice)
  const setOnlyoffice = useOrgSettingsStore((s) => s.setOnlyoffice)
  const effective = useOrgSettingsStore((s) => s.meta?.effective.onlyoffice)

  const enabledLocked = useDeployFieldLocked("onlyoffice", "enabled")
  const urlLocked = useDeployFieldLocked("onlyoffice", "document_server_url")
  const jwtLocked = useDeployFieldLocked("onlyoffice", "jwt_secret")
  const headerLocked = useDeployFieldLocked("onlyoffice", "jwt_header")

  const enabled = enabledLocked ? (effective?.enabled ?? onlyoffice.enabled) : onlyoffice.enabled
  const docURL = urlLocked
    ? (effective?.document_server_url ?? onlyoffice.document_server_url)
    : onlyoffice.document_server_url

  return (
    <OrgSettingsSection
      title="OnlyOffice"
      description="Édition collaborative de documents Office dans le navigateur."
      policySection="onlyoffice"
    >
      <Card>
        <CardHeader className="pb-3">
          <div className="flex items-center justify-between gap-4">
            <div>
              <CardTitle className="text-sm font-medium">Document Server</CardTitle>
              <CardDescription>Variables ONLYOFFICE_* côté serveur.</CardDescription>
              {enabledLocked ? <DeployLockedHint section="onlyoffice" field="enabled" /> : null}
            </div>
            <Switch
              checked={enabled}
              disabled={enabledLocked}
              onCheckedChange={(v) => setOnlyoffice({ enabled: v })}
            />
          </div>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <Label>URL du serveur de documents</Label>
            <Input
              className="mt-1 h-9"
              value={docURL}
              disabled={urlLocked}
              onChange={(e) => setOnlyoffice({ document_server_url: e.target.value })}
              placeholder="https://office.example.com"
            />
          </div>
          <div>
            <Label>Secret JWT</Label>
            <Input
              className="mt-1 h-9"
              type="password"
              value={onlyoffice.jwt_secret}
              disabled={jwtLocked}
              onChange={(e) => setOnlyoffice({ jwt_secret: e.target.value })}
              placeholder={jwtLocked ? "Défini via ONLYOFFICE_JWT_SECRET" : undefined}
            />
          </div>
          <div>
            <Label>En-tête JWT</Label>
            <Input
              className="mt-1 h-9"
              value={onlyoffice.jwt_header}
              disabled={headerLocked}
              onChange={(e) => setOnlyoffice({ jwt_header: e.target.value })}
            />
          </div>
        </CardContent>
      </Card>
    </OrgSettingsSection>
  )
}