MOPC-Portal/src/components/settings/notification-settings-form.tsx

'use client'

import { useState } from 'react'
import { trpc } from '@/lib/trpc/client'
import { Switch } from '@/components/ui/switch'
import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button'
import { Skeleton } from '@/components/ui/skeleton'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { toast } from 'sonner'
import { Users, Scale, GraduationCap, Eye, Shield } from 'lucide-react'

// Category icons and labels
const CATEGORIES = {
  team: { label: 'Team / Applicant', icon: Users },
  jury: { label: 'Jury Members', icon: Scale },
  mentor: { label: 'Mentors', icon: GraduationCap },
  observer: { label: 'Observers', icon: Eye },
  admin: { label: 'Administrators', icon: Shield },
}

type NotificationSetting = {
  id: string
  notificationType: string
  category: string
  label: string
  description: string | null
  sendEmail: boolean
}

export function NotificationSettingsForm() {
  const { data: settings, isLoading, refetch } = trpc.notification.getEmailSettings.useQuery()
  const updateMutation = trpc.notification.updateEmailSetting.useMutation({
    onSuccess: () => {
      toast.success('Notification setting updated')
      refetch()
    },
    onError: (error) => {
      toast.error(`Failed to update: ${error.message}`)
    },
  })

  const handleToggle = (notificationType: string, sendEmail: boolean) => {
    updateMutation.mutate({ notificationType, sendEmail })
  }

  if (isLoading) {
    return (
      <div className="space-y-4">
        {[...Array(5)].map((_, i) => (
          <Skeleton key={i} className="h-12 w-full" />
        ))}
      </div>
    )
  }

  // Group settings by category
  const groupedSettings = (settings || []).reduce(
    (acc, setting) => {
      const category = setting.category || 'other'
      if (!acc[category]) acc[category] = []
      acc[category].push(setting)
      return acc
    },
    {} as Record<string, NotificationSetting[]>
  )

  if (Object.keys(groupedSettings).length === 0) {
    return (
      <div className="text-center py-8">
        <p className="text-muted-foreground">
          No notification types configured yet. Notification settings will appear here once the system is seeded.
        </p>
        <Button
          variant="outline"
          className="mt-4"
          onClick={() => {
            toast.info('Run the seed script to populate notification types')
          }}
        >
          Learn More
        </Button>
      </div>
    )
  }

  return (
    <div className="space-y-6">
      <p className="text-sm text-muted-foreground">
        Toggle which notifications should also send email notifications to users.
        Users can still disable email notifications in their personal preferences.
      </p>

      {Object.entries(CATEGORIES).map(([categoryKey, { label, icon: Icon }]) => {
        const categorySettings = groupedSettings[categoryKey]
        if (!categorySettings || categorySettings.length === 0) return null

        return (
          <Card key={categoryKey}>
            <CardHeader className="pb-3">
              <CardTitle className="flex items-center gap-3 text-base">
                <Icon className="h-5 w-5 text-muted-foreground" />
                {label}
                <span className="ml-auto text-xs font-normal text-muted-foreground">
                  {categorySettings.filter(s => s.sendEmail).length}/{categorySettings.length} enabled
                </span>
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              {categorySettings.map((setting) => (
                <div
                  key={setting.id}
                  className="flex items-center justify-between rounded-lg border p-3"
                >
                  <div className="space-y-0.5">
                    <Label className="text-sm font-medium">
                      {setting.label}
                    </Label>
                    {setting.description && (
                      <p className="text-xs text-muted-foreground">
                        {setting.description}
                      </p>
                    )}
                  </div>
                  <Switch
                    checked={setting.sendEmail}
                    onCheckedChange={(checked) =>
                      handleToggle(setting.notificationType, checked)
                    }
                    disabled={updateMutation.isPending}
                  />
                </div>
              ))}
            </CardContent>
          </Card>
        )
      })}
    </div>
  )
}