"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 AuthenticationSection() {
  const authentik = useOrgSettingsStore((s) => s.authentik)
  const setAuthentik = useOrgSettingsStore((s) => s.setAuthentik)
  const effective = useOrgSettingsStore((s) => s.meta?.effective.authentik)

  const enabledLocked = useDeployFieldLocked("authentik", "enabled")
  const apiLocked = useDeployFieldLocked("authentik", "api_url")
  const clientLocked = useDeployFieldLocked("authentik", "client_id")

  const enabled = enabledLocked ? (effective?.enabled ?? authentik.enabled) : authentik.enabled
  const apiURL = apiLocked ? (effective?.api_url ?? authentik.api_url) : authentik.api_url
  const clientID = clientLocked ? (effective?.client_id ?? authentik.client_id) : authentik.client_id

  return (
    <OrgSettingsSection
      title="Authentification Authentik"
      description="SSO, provisionnement des comptes Ultimail et groupes par défaut."
      policySection="authentik"
    >
      <Card>
        <CardHeader className="pb-3">
          <div className="flex items-center justify-between gap-4">
            <div>
              <CardTitle className="text-sm font-medium">Authentik activé</CardTitle>
              <CardDescription>Connexion via le fournisseur d&apos;identité organisationnel.</CardDescription>
              {enabledLocked ? <DeployLockedHint section="authentik" field="enabled" /> : null}
            </div>
            <Switch
              checked={enabled}
              disabled={enabledLocked}
              onCheckedChange={(v) => setAuthentik({ enabled: v })}
            />
          </div>
        </CardHeader>
        <CardContent className="grid gap-4 sm:grid-cols-2">
          <div className="sm:col-span-2">
            <Label>URL API Authentik</Label>
            <Input
              className="mt-1 h-9"
              value={apiURL}
              disabled={apiLocked}
              onChange={(e) => setAuthentik({ api_url: e.target.value })}
              placeholder="https://auth.example.com/api/v3"
            />
          </div>
          <div>
            <Label>Slug application</Label>
            <Input
              className="mt-1 h-9"
              value={authentik.slug}
              onChange={(e) => setAuthentik({ slug: e.target.value })}
            />
          </div>
          <div>
            <Label>Client ID OIDC</Label>
            <Input
              className="mt-1 h-9"
              value={clientID}
              disabled={clientLocked}
              onChange={(e) => setAuthentik({ client_id: e.target.value })}
            />
          </div>
          <div className="sm:col-span-2">
            <Label>Groupes par défaut (séparés par des virgules)</Label>
            <Input
              className="mt-1 h-9"
              value={authentik.default_groups}
              onChange={(e) => setAuthentik({ default_groups: e.target.value })}
            />
          </div>
          <label className="flex items-center justify-between gap-4 rounded-lg border p-3 sm:col-span-2">
            <div>
              <p className="text-sm font-medium">Forcer le SSO</p>
              <p className="text-xs text-muted-foreground">
                Désactive la connexion locale sauf pour les administrateurs.
              </p>
            </div>
            <Switch
              checked={authentik.enforce_sso}
              onCheckedChange={(enforce_sso) => setAuthentik({ enforce_sso })}
            />
          </label>
          <label className="flex items-center justify-between gap-4 rounded-lg border p-3 sm:col-span-2">
            <div>
              <p className="text-sm font-medium">Mot de passe local de secours</p>
              <p className="text-xs text-muted-foreground">
                Autoriser un fallback mot de passe si Authentik est indisponible.
              </p>
            </div>
            <Switch
              checked={authentik.allow_password_fallback}
              onCheckedChange={(allow_password_fallback) =>
                setAuthentik({ allow_password_fallback })
              }
            />
          </label>
        </CardContent>
      </Card>
    </OrgSettingsSection>
  )
}