"use client"

import { useTranslations } from "next-intl"
import { Shield } from "lucide-react"
import { type ReactElement } from "react"

import { Input } from "@/shared/components/ui/input"
import { Label } from "@/shared/components/ui/label"
import { Switch } from "@/shared/components/ui/switch"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { Separator } from "@/shared/components/ui/separator"

export interface SecurityPolicyValues {
  passwordMinLength: number
  sessionTimeout: number
  requireSpecialChar: boolean
  requireUppercase: boolean
  forcePasswordChange: boolean
}

interface SecurityPolicyCardProps {
  values: SecurityPolicyValues
  onChange: (key: keyof SecurityPolicyValues, value: number | boolean) => void
}

/**
 * 管理员系统设置 - 安全策略卡片
 */
export function SecurityPolicyCard({ values, onChange }: SecurityPolicyCardProps): ReactElement {
  const t = useTranslations("settings.admin.securityPolicy")

  return (
    <Card className="shadow-none">
      <CardHeader>
        <div className="flex items-center gap-2">
          <Shield className="h-5 w-5 text-primary" />
          <div>
            <CardTitle className="text-base">{t("title")}</CardTitle>
            <CardDescription>{t("description")}</CardDescription>
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="grid gap-4 md:grid-cols-2">
          <div className="space-y-2">
            <Label htmlFor="password-min-length">{t("passwordMinLength")}</Label>
            <Input
              id="password-min-length"
              name="passwordMinLength"
              type="number"
              min={6}
              max={32}
              value={values.passwordMinLength}
              onChange={(e) => onChange("passwordMinLength", Number(e.target.value))}
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="session-timeout">{t("sessionTimeout")}</Label>
            <Input
              id="session-timeout"
              name="sessionTimeout"
              type="number"
              min={5}
              max={1440}
              value={values.sessionTimeout}
              onChange={(e) => onChange("sessionTimeout", Number(e.target.value))}
            />
          </div>
        </div>
        <Separator />
        <div className="flex items-center justify-between">
          <div className="space-y-0.5">
            <Label htmlFor="require-special-char">{t("requireSpecialChar")}</Label>
            <p className="text-sm text-muted-foreground">{t("requireSpecialCharDesc")}</p>
          </div>
          <Switch
            id="require-special-char"
            name="requireSpecialChar"
            checked={values.requireSpecialChar}
            onCheckedChange={(v) => onChange("requireSpecialChar", v)}
          />
        </div>
        <div className="flex items-center justify-between">
          <div className="space-y-0.5">
            <Label htmlFor="require-uppercase">{t("requireUppercase")}</Label>
            <p className="text-sm text-muted-foreground">{t("requireUppercaseDesc")}</p>
          </div>
          <Switch
            id="require-uppercase"
            name="requireUppercase"
            checked={values.requireUppercase}
            onCheckedChange={(v) => onChange("requireUppercase", v)}
          />
        </div>
        <div className="flex items-center justify-between">
          <div className="space-y-0.5">
            <Label htmlFor="force-password-change">{t("forcePasswordChange")}</Label>
            <p className="text-sm text-muted-foreground">{t("forcePasswordChangeDesc")}</p>
          </div>
          <Switch
            id="force-password-change"
            name="forcePasswordChange"
            checked={values.forcePasswordChange}
            onCheckedChange={(v) => onChange("forcePasswordChange", v)}
          />
        </div>
      </CardContent>
    </Card>
  )
}