NextEdu/src/modules/settings/components/notification-preferences-form.tsx

"use client"

import * as React from "react"
import { useTransition } from "react"
import { useTranslations } from "next-intl"
import { Loader2, Save, Bell, Mail, MessageSquare, Megaphone, GraduationCap, BookOpen, CalendarCheck, Moon } from "lucide-react"
import { toast } from "sonner"

import { Button } from "@/shared/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { Input } from "@/shared/components/ui/input"
import { Switch } from "@/shared/components/ui/switch"
import { Label } from "@/shared/components/ui/label"
import { Separator } from "@/shared/components/ui/separator"
import { cn } from "@/shared/lib/utils"
import { useSettingsService } from "@/modules/settings/components/settings-service-context"
import type { NotificationPreferences } from "@/modules/notifications/types"

interface NotificationPreferencesFormProps {
  preferences: NotificationPreferences
}

interface ChannelItem {
  key: keyof Pick<
    NotificationPreferences,
    "emailEnabled" | "smsEnabled" | "pushEnabled"
  >
  labelKey: string
  descKey: string
  icon: React.ComponentType<{ className?: string }>
}

interface CategoryItem {
  key: keyof Pick<
    NotificationPreferences,
    | "homeworkNotifications"
    | "gradeNotifications"
    | "announcementNotifications"
    | "messageNotifications"
    | "attendanceNotifications"
  >
  labelKey: string
  descKey: string
  icon: React.ComponentType<{ className?: string }>
}

const CHANNELS: ChannelItem[] = [
  { key: "pushEnabled", labelKey: "channels.push", descKey: "channels.pushDesc", icon: Bell },
  { key: "emailEnabled", labelKey: "channels.email", descKey: "channels.emailDesc", icon: Mail },
  { key: "smsEnabled", labelKey: "channels.sms", descKey: "channels.smsDesc", icon: MessageSquare },
]

const CATEGORIES: CategoryItem[] = [
  { key: "messageNotifications", labelKey: "categories.messages", descKey: "categories.messagesDesc", icon: MessageSquare },
  { key: "announcementNotifications", labelKey: "categories.announcements", descKey: "categories.announcementsDesc", icon: Megaphone },
  { key: "homeworkNotifications", labelKey: "categories.homework", descKey: "categories.homeworkDesc", icon: BookOpen },
  { key: "gradeNotifications", labelKey: "categories.grades", descKey: "categories.gradesDesc", icon: GraduationCap },
  { key: "attendanceNotifications", labelKey: "categories.attendance", descKey: "categories.attendanceDesc", icon: CalendarCheck },
]

export function NotificationPreferencesForm({ preferences }: NotificationPreferencesFormProps) {
  const t = useTranslations("settings.notifications")
  const { notifications } = useSettingsService()
  const [isPending, startTransition] = useTransition()

  const [channels, setChannels] = React.useState({
    emailEnabled: preferences.emailEnabled,
    smsEnabled: preferences.smsEnabled,
    pushEnabled: preferences.pushEnabled,
  })
  const [categories, setCategories] = React.useState({
    homeworkNotifications: preferences.homeworkNotifications,
    gradeNotifications: preferences.gradeNotifications,
    announcementNotifications: preferences.announcementNotifications,
    messageNotifications: preferences.messageNotifications,
    attendanceNotifications: preferences.attendanceNotifications,
  })
  const [quietHours, setQuietHours] = React.useState({
    quietHoursEnabled: preferences.quietHoursEnabled,
    quietHoursStart: preferences.quietHoursStart ?? "",
    quietHoursEnd: preferences.quietHoursEnd ?? "",
  })

  const toggleChannel = (key: keyof typeof channels) => {
    setChannels((prev) => ({ ...prev, [key]: !prev[key] }))
  }

  const toggleCategory = (key: keyof typeof categories) => {
    setCategories((prev) => ({ ...prev, [key]: !prev[key] }))
  }

  const toggleQuietHours = () => {
    setQuietHours((prev) => ({ ...prev, quietHoursEnabled: !prev.quietHoursEnabled }))
  }

  function onSubmit() {
    startTransition(async () => {
      try {
        const result = await notifications.updatePreferences({
          ...channels,
          ...categories,
          quietHoursEnabled: quietHours.quietHoursEnabled,
          quietHoursStart: quietHours.quietHoursStart || null,
          quietHoursEnd: quietHours.quietHoursEnd || null,
        })
        if (result.success) {
          toast.success(t("success"))
        } else {
          toast.error(result.message || t("failure"))
        }
      } catch {
        toast.error(t("failure"))
      }
    })
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>{t("title")}</CardTitle>
        <CardDescription>{t("description")}</CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        {/* Delivery channels */}
        <div className="space-y-4">
          <div>
            <h4 className="text-sm font-medium">{t("channels.title")}</h4>
            <p className="text-xs text-muted-foreground">{t("channels.subtitle")}</p>
          </div>
          {CHANNELS.map((item) => {
            const Icon = item.icon
            const checked = channels[item.key]
            return (
              <div key={item.key} className="flex items-center justify-between gap-4">
                <div className="flex items-start gap-3">
                  <div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
                    <Icon className="h-4 w-4 text-muted-foreground" />
                  </div>
                  <div className="space-y-0.5">
                    <Label htmlFor={item.key} className="text-sm font-medium cursor-pointer">
                      {t(item.labelKey)}
                    </Label>
                    <p className="text-xs text-muted-foreground">{t(item.descKey)}</p>
                  </div>
                </div>
                <Switch
                  id={item.key}
                  checked={checked}
                  onCheckedChange={() => toggleChannel(item.key)}
                  aria-label={t(item.labelKey)}
                />
              </div>
            )
          })}
        </div>

        <Separator />

        {/* Notification categories */}
        <div className="space-y-4">
          <div>
            <h4 className="text-sm font-medium">{t("categories.title")}</h4>
            <p className="text-xs text-muted-foreground">{t("categories.subtitle")}</p>
          </div>
          {CATEGORIES.map((item) => {
            const Icon = item.icon
            const checked = categories[item.key]
            return (
              <div key={item.key} className="flex items-center justify-between gap-4">
                <div className="flex items-start gap-3">
                  <div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
                    <Icon className="h-4 w-4 text-muted-foreground" />
                  </div>
                  <div className="space-y-0.5">
                    <Label htmlFor={item.key} className="text-sm font-medium cursor-pointer">
                      {t(item.labelKey)}
                    </Label>
                    <p className="text-xs text-muted-foreground">{t(item.descKey)}</p>
                  </div>
                </div>
                <Switch
                  id={item.key}
                  checked={checked}
                  onCheckedChange={() => toggleCategory(item.key)}
                  aria-label={t(item.labelKey)}
                />
              </div>
            )
          })}
        </div>

        <Separator />

        {/* Quiet hours */}
        <div className="space-y-4">
          <div>
            <h4 className="text-sm font-medium">{t("quietHours.title")}</h4>
            <p className="text-xs text-muted-foreground">{t("quietHours.subtitle")}</p>
          </div>
          <div className="flex items-center justify-between gap-4">
            <div className="flex items-start gap-3">
              <div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
                <Moon className="h-4 w-4 text-muted-foreground" />
              </div>
              <div className="space-y-0.5">
                <Label htmlFor="quietHoursEnabled" className="text-sm font-medium cursor-pointer">
                  {t("quietHours.enable")}
                </Label>
                <p className="text-xs text-muted-foreground">{t("quietHours.enableDesc")}</p>
              </div>
            </div>
            <Switch
              id="quietHoursEnabled"
              checked={quietHours.quietHoursEnabled}
              onCheckedChange={toggleQuietHours}
              aria-label={t("quietHours.enable")}
            />
          </div>
          <div className={cn(
            "grid gap-4 sm:grid-cols-2 transition-opacity",
            !quietHours.quietHoursEnabled && "pointer-events-none opacity-50"
          )}>
            <div className="space-y-2">
              <Label htmlFor="quietHoursStart" className="text-xs font-medium">
                {t("quietHours.start")}
              </Label>
              <Input
                id="quietHoursStart"
                type="time"
                value={quietHours.quietHoursStart}
                onChange={(e) => setQuietHours((prev) => ({ ...prev, quietHoursStart: e.target.value }))}
                disabled={!quietHours.quietHoursEnabled}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="quietHoursEnd" className="text-xs font-medium">
                {t("quietHours.end")}
              </Label>
              <Input
                id="quietHoursEnd"
                type="time"
                value={quietHours.quietHoursEnd}
                onChange={(e) => setQuietHours((prev) => ({ ...prev, quietHoursEnd: e.target.value }))}
                disabled={!quietHours.quietHoursEnabled}
              />
            </div>
          </div>
        </div>
      </CardContent>
      <CardFooter className="flex justify-end border-t px-6 py-4">
        <Button type="button" onClick={onSubmit} disabled={isPending}>
          {isPending ? (
            <>
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              {t("saving")}
            </>
          ) : (
            <>
              <Save className="mr-2 h-4 w-4" />
              {t("save")}
            </>
          )}
        </Button>
      </CardFooter>
    </Card>
  )
}