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, Mail, Loader2 } 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 [testingType, setTestingType] = useState<string | null>(null)
  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 testMutation = trpc.notification.sendTestEmail.useMutation({
    onSuccess: (data) => {
      if (data.success) {
        toast.success(data.message, {
          description: data.hasStyledTemplate
            ? 'Using styled template'
            : 'Using generic template',
        })
      } else {
        toast.error('Failed to send test email', { description: data.message })
      }
      setTestingType(null)
    },
    onError: (error) => {
      toast.error(`Failed to send: ${error.message}`)
      setTestingType(null)
    },
  })

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

  const handleTest = (notificationType: string) => {
    setTestingType(notificationType)
    testMutation.mutate({ notificationType })
  }

  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 flex-1 min-w-0">
                    <Label className="text-sm font-medium">
                      {setting.label}
                    </Label>
                    {setting.description && (
                      <p className="text-xs text-muted-foreground">
                        {setting.description}
                      </p>
                    )}
                  </div>
                  <div className="flex items-center gap-3 ml-4">
                    <Button
                      variant="ghost"
                      size="sm"
                      className="h-8 px-2 text-muted-foreground hover:text-foreground"
                      onClick={() => handleTest(setting.notificationType)}
                      disabled={testingType === setting.notificationType}
                      title="Send test email to yourself"
                    >
                      {testingType === setting.notificationType ? (
                        <Loader2 className="h-4 w-4 animate-spin" />
                      ) : (
                        <Mail className="h-4 w-4" />
                      )}
                      <span className="ml-1.5 text-xs">Test</span>
                    </Button>
                    <Switch
                      checked={setting.sendEmail}
                      onCheckedChange={(checked) =>
                        handleToggle(setting.notificationType, checked)
                      }
                      disabled={updateMutation.isPending}
                    />
                  </div>
                </div>
              ))}
            </CardContent>
          </Card>
        )
      })}
    </div>
  )
}