"use client"

import { OrgSettingsSection } from "@/components/admin/settings/org-settings-form"
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 { Checkbox } from "@/components/ui/checkbox"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

const METHODS = [
  { id: "totp" as const, label: "Application TOTP" },
  { id: "webauthn" as const, label: "Clés de sécurité (WebAuthn)" },
  { id: "sms" as const, label: "SMS" },
]

export function SecuritySection() {
  const twoFactor = useOrgSettingsStore((s) => s.twoFactor)
  const setTwoFactor = useOrgSettingsStore((s) => s.setTwoFactor)

  function toggleMethod(id: (typeof METHODS)[number]["id"], checked: boolean) {
    const methods = checked
      ? [...new Set([...twoFactor.allowed_methods, id])]
      : twoFactor.allowed_methods.filter((m) => m !== id)
    setTwoFactor({ allowed_methods: methods })
  }

  return (
    <OrgSettingsSection
      title="Sécurité et 2FA"
      description="Politiques d'authentification à deux facteurs pour l'organisation."
      policySection="two_factor"
    >
      <Card className="gap-3 py-4">
        <CardHeader className="pb-0">
          <CardTitle className="text-sm font-medium">Exigences</CardTitle>
        </CardHeader>
        <CardContent className="space-y-3">
          <label className="flex items-center justify-between gap-4 rounded-lg border p-3">
            <div>
              <p className="text-sm font-medium">2FA obligatoire pour tous</p>
              <p className="text-xs text-muted-foreground">
                Chaque utilisateur doit configurer un second facteur.
              </p>
            </div>
            <Switch
              checked={twoFactor.required_for_all}
              onCheckedChange={(required_for_all) => setTwoFactor({ required_for_all })}
            />
          </label>
          <label className="flex items-center justify-between gap-4 rounded-lg border p-3">
            <div>
              <p className="text-sm font-medium">2FA obligatoire pour les administrateurs</p>
            </div>
            <Switch
              checked={twoFactor.required_for_admins}
              onCheckedChange={(required_for_admins) => setTwoFactor({ required_for_admins })}
            />
          </label>
        </CardContent>
      </Card>

      <Card className="gap-3 py-4">
        <CardHeader className="pb-0">
          <CardTitle className="text-sm font-medium">Méthodes autorisées</CardTitle>
        </CardHeader>
        <CardContent className="space-y-2">
          {METHODS.map((method) => (
            <label key={method.id} className="flex items-center gap-2 text-sm">
              <Checkbox
                checked={twoFactor.allowed_methods.includes(method.id)}
                onCheckedChange={(v) => toggleMethod(method.id, v === true)}
              />
              {method.label}
            </label>
          ))}
        </CardContent>
      </Card>

      <div className="grid gap-4 sm:grid-cols-2">
        <div>
          <Label>Période de grâce (jours)</Label>
          <Input
            className="mt-1 h-9"
            type="number"
            min={0}
            value={twoFactor.grace_period_days}
            onChange={(e) =>
              setTwoFactor({ grace_period_days: Number(e.target.value) || 0 })
            }
          />
        </div>
        <div>
          <Label>Mémoriser l&apos;appareil (jours)</Label>
          <Input
            className="mt-1 h-9"
            type="number"
            min={0}
            value={twoFactor.remember_device_days}
            onChange={(e) =>
              setTwoFactor({ remember_device_days: Number(e.target.value) || 0 })
            }
          />
        </div>
      </div>
    </OrgSettingsSection>
  )
}