"use client"

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

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"

export interface NotificationConfigValues {
  notifyNewUser: boolean
  notifyScheduleChange: boolean
  notifyAnnouncement: boolean
}

interface NotificationConfigCardProps {
  values: NotificationConfigValues
  onChange: (key: keyof NotificationConfigValues, value: boolean) => void
}

/**
 * 管理员系统设置 - 通知配置卡片
 */
export function NotificationConfigCard({ values, onChange }: NotificationConfigCardProps): ReactElement {
  const t = useTranslations("settings.admin.notificationConfig")

  return (
    <Card className="shadow-none">
      <CardHeader>
        <div className="flex items-center gap-2">
          <Bell 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="flex items-center justify-between">
          <div className="space-y-0.5">
            <Label htmlFor="notify-new-user">{t("notifyNewUser")}</Label>
            <p className="text-sm text-muted-foreground">{t("notifyNewUserDesc")}</p>
          </div>
          <Switch
            id="notify-new-user"
            name="notifyNewUser"
            checked={values.notifyNewUser}
            onCheckedChange={(v) => onChange("notifyNewUser", v)}
          />
        </div>
        <div className="flex items-center justify-between">
          <div className="space-y-0.5">
            <Label htmlFor="notify-schedule-change">{t("notifyScheduleChange")}</Label>
            <p className="text-sm text-muted-foreground">{t("notifyScheduleChangeDesc")}</p>
          </div>
          <Switch
            id="notify-schedule-change"
            name="notifyScheduleChange"
            checked={values.notifyScheduleChange}
            onCheckedChange={(v) => onChange("notifyScheduleChange", v)}
          />
        </div>
        <div className="flex items-center justify-between">
          <div className="space-y-0.5">
            <Label htmlFor="notify-announcement">{t("notifyAnnouncement")}</Label>
            <p className="text-sm text-muted-foreground">{t("notifyAnnouncementDesc")}</p>
          </div>
          <Switch
            id="notify-announcement"
            name="notifyAnnouncement"
            checked={values.notifyAnnouncement}
            onCheckedChange={(v) => onChange("notifyAnnouncement", v)}
          />
        </div>
      </CardContent>
    </Card>
  )
}