MOPC-App/src/app/(admin)/admin/messages/page.tsx

'use client'

import { useState } from 'react'
import Link from 'next/link'
import { trpc } from '@/lib/trpc/client'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import { Checkbox } from '@/components/ui/checkbox'
import { Switch } from '@/components/ui/switch'
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '@/components/ui/tabs'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import {
  Send,
  Mail,
  Bell,
  Clock,
  Loader2,
  LayoutTemplate,
  AlertCircle,
  Inbox,
  CheckCircle2,
} from 'lucide-react'
import { toast } from 'sonner'
import { formatDate } from '@/lib/utils'

type RecipientType = 'ALL' | 'ROLE' | 'ROUND_JURY' | 'PROGRAM_TEAM' | 'USER'

const RECIPIENT_TYPE_OPTIONS: { value: RecipientType; label: string }[] = [
  { value: 'ALL', label: 'All Users' },
  { value: 'ROLE', label: 'By Role' },
  { value: 'ROUND_JURY', label: 'Round Jury' },
  { value: 'PROGRAM_TEAM', label: 'Program Team' },
  { value: 'USER', label: 'Specific User' },
]

const ROLES = ['JURY_MEMBER', 'MENTOR', 'OBSERVER', 'APPLICANT', 'PROGRAM_ADMIN']

export default function MessagesPage() {
  const [recipientType, setRecipientType] = useState<RecipientType>('ALL')
  const [selectedRole, setSelectedRole] = useState('')
  const [roundId, setRoundId] = useState('')
  const [selectedProgramId, setSelectedProgramId] = useState('')
  const [selectedUserId, setSelectedUserId] = useState('')
  const [subject, setSubject] = useState('')
  const [body, setBody] = useState('')
  const [selectedTemplateId, setSelectedTemplateId] = useState('')
  const [deliveryChannels, setDeliveryChannels] = useState<string[]>(['EMAIL', 'IN_APP'])
  const [isScheduled, setIsScheduled] = useState(false)
  const [scheduledAt, setScheduledAt] = useState('')

  const utils = trpc.useUtils()

  // Fetch supporting data
  const { data: rounds } = trpc.round.listAll.useQuery()
  const { data: programs } = trpc.program.list.useQuery()
  const { data: templates } = trpc.message.listTemplates.useQuery()
  const { data: users } = trpc.user.list.useQuery(
    { page: 1, perPage: 100 },
    { enabled: recipientType === 'USER' }
  )

  // Fetch sent messages for history
  const { data: sentMessages, isLoading: loadingSent } = trpc.message.inbox.useQuery(
    { page: 1, pageSize: 50 }
  )

  const sendMutation = trpc.message.send.useMutation({
    onSuccess: (data) => {
      const count = (data as Record<string, unknown>)?.recipientCount || ''
      toast.success(`Message sent successfully${count ? ` to ${count} recipients` : ''}`)
      resetForm()
      utils.message.inbox.invalidate()
    },
    onError: (e) => toast.error(e.message),
  })

  const resetForm = () => {
    setSubject('')
    setBody('')
    setSelectedTemplateId('')
    setSelectedRole('')
    setRoundId('')
    setSelectedProgramId('')
    setSelectedUserId('')
    setIsScheduled(false)
    setScheduledAt('')
  }

  const handleTemplateSelect = (templateId: string) => {
    setSelectedTemplateId(templateId)
    if (templateId && templateId !== '__none__' && templates) {
      const template = (templates as Array<Record<string, unknown>>).find(
        (t) => String(t.id) === templateId
      )
      if (template) {
        setSubject(String(template.subject || ''))
        setBody(String(template.body || ''))
      }
    }
  }

  const toggleChannel = (channel: string) => {
    setDeliveryChannels((prev) =>
      prev.includes(channel)
        ? prev.filter((c) => c !== channel)
        : [...prev, channel]
    )
  }

  const buildRecipientFilter = (): unknown => {
    switch (recipientType) {
      case 'ROLE':
        return selectedRole ? { role: selectedRole } : undefined
      case 'USER':
        return selectedUserId ? { userId: selectedUserId } : undefined
      case 'PROGRAM_TEAM':
        return selectedProgramId ? { programId: selectedProgramId } : undefined
      default:
        return undefined
    }
  }

  const handleSend = () => {
    if (!subject.trim()) {
      toast.error('Subject is required')
      return
    }
    if (!body.trim()) {
      toast.error('Message body is required')
      return
    }
    if (deliveryChannels.length === 0) {
      toast.error('Select at least one delivery channel')
      return
    }
    if (recipientType === 'ROLE' && !selectedRole) {
      toast.error('Please select a role')
      return
    }
    if (recipientType === 'ROUND_JURY' && !roundId) {
      toast.error('Please select a round')
      return
    }
    if (recipientType === 'PROGRAM_TEAM' && !selectedProgramId) {
      toast.error('Please select a program')
      return
    }
    if (recipientType === 'USER' && !selectedUserId) {
      toast.error('Please select a user')
      return
    }

    sendMutation.mutate({
      recipientType,
      recipientFilter: buildRecipientFilter(),
      roundId: roundId || undefined,
      subject: subject.trim(),
      body: body.trim(),
      deliveryChannels,
      scheduledAt: isScheduled && scheduledAt ? new Date(scheduledAt).toISOString() : undefined,
      templateId: selectedTemplateId && selectedTemplateId !== '__none__' ? selectedTemplateId : undefined,
    })
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-semibold tracking-tight">Communication Hub</h1>
          <p className="text-muted-foreground">
            Send messages and notifications to platform users
          </p>
        </div>
        <Button variant="outline" asChild>
          <Link href="/admin/messages/templates">
            <LayoutTemplate className="mr-2 h-4 w-4" />
            Templates
          </Link>
        </Button>
      </div>

      <Tabs defaultValue="compose">
        <TabsList>
          <TabsTrigger value="compose">
            <Send className="mr-2 h-4 w-4" />
            Compose
          </TabsTrigger>
          <TabsTrigger value="history">
            <Inbox className="mr-2 h-4 w-4" />
            Sent History
          </TabsTrigger>
        </TabsList>

        <TabsContent value="compose" className="space-y-4 mt-4">
          {/* Compose Form */}
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Compose Message</CardTitle>
              <CardDescription>
                Send a message via email, in-app notifications, or both
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              {/* Recipient type */}
              <div className="space-y-2">
                <Label>Recipient Type</Label>
                <Select
                  value={recipientType}
                  onValueChange={(v) => {
                    setRecipientType(v as RecipientType)
                    setSelectedRole('')
                    setRoundId('')
                    setSelectedProgramId('')
                    setSelectedUserId('')
                  }}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {RECIPIENT_TYPE_OPTIONS.map((opt) => (
                      <SelectItem key={opt.value} value={opt.value}>
                        {opt.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              {/* Conditional sub-filters */}
              {recipientType === 'ROLE' && (
                <div className="space-y-2">
                  <Label>Select Role</Label>
                  <Select value={selectedRole} onValueChange={setSelectedRole}>
                    <SelectTrigger>
                      <SelectValue placeholder="Choose a role..." />
                    </SelectTrigger>
                    <SelectContent>
                      {ROLES.map((role) => (
                        <SelectItem key={role} value={role}>
                          {role.replace(/_/g, ' ')}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              )}

              {recipientType === 'ROUND_JURY' && (
                <div className="space-y-2">
                  <Label>Select Round</Label>
                  <Select value={roundId} onValueChange={setRoundId}>
                    <SelectTrigger>
                      <SelectValue placeholder="Choose a round..." />
                    </SelectTrigger>
                    <SelectContent>
                      {(rounds as Array<{ id: string; name: string; program?: { name: string } }> | undefined)?.map((round) => (
                        <SelectItem key={round.id} value={round.id}>
                          {round.program ? `${round.program.name} - ${round.name}` : round.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              )}

              {recipientType === 'PROGRAM_TEAM' && (
                <div className="space-y-2">
                  <Label>Select Program</Label>
                  <Select value={selectedProgramId} onValueChange={setSelectedProgramId}>
                    <SelectTrigger>
                      <SelectValue placeholder="Choose a program..." />
                    </SelectTrigger>
                    <SelectContent>
                      {(programs as Array<{ id: string; name: string }> | undefined)?.map((prog) => (
                        <SelectItem key={prog.id} value={prog.id}>
                          {prog.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              )}

              {recipientType === 'USER' && (
                <div className="space-y-2">
                  <Label>Select User</Label>
                  <Select value={selectedUserId} onValueChange={setSelectedUserId}>
                    <SelectTrigger>
                      <SelectValue placeholder="Choose a user..." />
                    </SelectTrigger>
                    <SelectContent>
                      {(() => {
                        const userList = (users as { users: Array<{ id: string; name: string | null; email: string; role: string }> } | undefined)?.users
                        if (!userList) return null

                        const grouped = userList.reduce<Record<string, typeof userList>>((acc, u) => {
                          const role = u.role || 'OTHER'
                          if (!acc[role]) acc[role] = []
                          acc[role].push(u)
                          return acc
                        }, {})

                        const roleLabels: Record<string, string> = {
                          SUPER_ADMIN: 'Super Admins',
                          PROGRAM_ADMIN: 'Program Admins',
                          JURY_MEMBER: 'Jury Members',
                          MENTOR: 'Mentors',
                          OBSERVER: 'Observers',
                          APPLICANT: 'Applicants',
                          OTHER: 'Other',
                        }

                        const roleOrder = ['SUPER_ADMIN', 'PROGRAM_ADMIN', 'JURY_MEMBER', 'MENTOR', 'OBSERVER', 'APPLICANT', 'OTHER']

                        return roleOrder
                          .filter((role) => grouped[role]?.length)
                          .map((role) => (
                            <SelectGroup key={role}>
                              <SelectLabel>{roleLabels[role] || role}</SelectLabel>
                              {grouped[role]
                                .sort((a, b) => (a.name || a.email).localeCompare(b.name || b.email))
                                .map((u) => (
                                  <SelectItem key={u.id} value={u.id}>
                                    {u.name || u.email}
                                  </SelectItem>
                                ))}
                            </SelectGroup>
                          ))
                      })()}
                    </SelectContent>
                  </Select>
                </div>
              )}

              {recipientType === 'ALL' && (
                <div className="flex items-center gap-2 rounded-lg bg-amber-500/10 p-3 text-amber-700">
                  <AlertCircle className="h-4 w-4 shrink-0" />
                  <p className="text-sm">
                    This message will be sent to all platform users.
                  </p>
                </div>
              )}

              {/* Template selector */}
              {templates && (templates as unknown[]).length > 0 && (
                <div className="space-y-2">
                  <Label>Template (optional)</Label>
                  <Select value={selectedTemplateId} onValueChange={handleTemplateSelect}>
                    <SelectTrigger>
                      <SelectValue placeholder="Load from template..." />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="__none__">No template</SelectItem>
                      {(templates as Array<Record<string, unknown>>).map((t) => (
                        <SelectItem key={String(t.id)} value={String(t.id)}>
                          {String(t.name)}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              )}

              {/* Subject */}
              <div className="space-y-2">
                <Label>Subject</Label>
                <Input
                  placeholder="Message subject..."
                  value={subject}
                  onChange={(e) => setSubject(e.target.value)}
                />
              </div>

              {/* Body */}
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <Label>Message Body</Label>
                  <span className="text-xs text-muted-foreground">
                    Variables: {'{{projectName}}'}, {'{{userName}}'}, {'{{deadline}}'}, {'{{roundName}}'}, {'{{programName}}'}
                  </span>
                </div>
                <Textarea
                  placeholder="Write your message..."
                  value={body}
                  onChange={(e) => setBody(e.target.value)}
                  rows={6}
                />
              </div>

              {/* Delivery channels */}
              <div className="space-y-2">
                <Label>Delivery Channels</Label>
                <div className="flex items-center gap-6">
                  <div className="flex items-center gap-2">
                    <Checkbox
                      id="channel-email"
                      checked={deliveryChannels.includes('EMAIL')}
                      onCheckedChange={() => toggleChannel('EMAIL')}
                    />
                    <label htmlFor="channel-email" className="text-sm cursor-pointer flex items-center gap-1">
                      <Mail className="h-3 w-3" />
                      Email
                    </label>
                  </div>
                  <div className="flex items-center gap-2">
                    <Checkbox
                      id="channel-inapp"
                      checked={deliveryChannels.includes('IN_APP')}
                      onCheckedChange={() => toggleChannel('IN_APP')}
                    />
                    <label htmlFor="channel-inapp" className="text-sm cursor-pointer flex items-center gap-1">
                      <Bell className="h-3 w-3" />
                      In-App
                    </label>
                  </div>
                </div>
              </div>

              {/* Schedule */}
              <div className="space-y-2">
                <div className="flex items-center gap-2">
                  <Switch
                    id="schedule-toggle"
                    checked={isScheduled}
                    onCheckedChange={setIsScheduled}
                  />
                  <label htmlFor="schedule-toggle" className="text-sm cursor-pointer flex items-center gap-1">
                    <Clock className="h-3 w-3" />
                    Schedule for later
                  </label>
                </div>
                {isScheduled && (
                  <Input
                    type="datetime-local"
                    value={scheduledAt}
                    onChange={(e) => setScheduledAt(e.target.value)}
                  />
                )}
              </div>

              {/* Send button */}
              <div className="flex justify-end">
                <Button onClick={handleSend} disabled={sendMutation.isPending}>
                  {sendMutation.isPending ? (
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  ) : (
                    <Send className="mr-2 h-4 w-4" />
                  )}
                  {isScheduled ? 'Schedule' : 'Send Message'}
                </Button>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="history" className="mt-4">
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">Sent Messages</CardTitle>
              <CardDescription>
                Recent messages sent through the platform
              </CardDescription>
            </CardHeader>
            <CardContent>
              {loadingSent ? (
                <div className="space-y-3">
                  {[1, 2, 3].map((i) => (
                    <div key={i} className="flex items-center gap-4">
                      <Skeleton className="h-4 w-48" />
                      <Skeleton className="h-6 w-24" />
                      <Skeleton className="h-4 w-32 ml-auto" />
                    </div>
                  ))}
                </div>
              ) : sentMessages && sentMessages.items.length > 0 ? (
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Subject</TableHead>
                      <TableHead className="hidden md:table-cell">From</TableHead>
                      <TableHead className="hidden md:table-cell">Channel</TableHead>
                      <TableHead className="hidden lg:table-cell">Status</TableHead>
                      <TableHead className="text-right">Date</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {sentMessages.items.map((item: Record<string, unknown>) => {
                      const msg = item.message as Record<string, unknown> | undefined
                      const sender = msg?.sender as Record<string, unknown> | undefined
                      const channel = String(item.channel || 'EMAIL')
                      const isRead = !!item.isRead

                      return (
                        <TableRow key={String(item.id)}>
                          <TableCell>
                            <div className="flex items-center gap-2">
                              {!isRead && (
                                <div className="h-2 w-2 rounded-full bg-primary shrink-0" />
                              )}
                              <span className={isRead ? 'text-muted-foreground' : 'font-medium'}>
                                {String(msg?.subject || 'No subject')}
                              </span>
                            </div>
                          </TableCell>
                          <TableCell className="hidden md:table-cell text-sm text-muted-foreground">
                            {String(sender?.name || sender?.email || 'System')}
                          </TableCell>
                          <TableCell className="hidden md:table-cell">
                            <Badge variant="outline" className="text-xs">
                              {channel === 'EMAIL' ? (
                                <><Mail className="mr-1 h-3 w-3" />Email</>
                              ) : (
                                <><Bell className="mr-1 h-3 w-3" />In-App</>
                              )}
                            </Badge>
                          </TableCell>
                          <TableCell className="hidden lg:table-cell">
                            {isRead ? (
                              <Badge variant="secondary" className="text-xs">
                                <CheckCircle2 className="mr-1 h-3 w-3" />
                                Read
                              </Badge>
                            ) : (
                              <Badge variant="default" className="text-xs">New</Badge>
                            )}
                          </TableCell>
                          <TableCell className="text-right text-sm text-muted-foreground">
                            {msg?.createdAt
                              ? formatDate(msg.createdAt as string | Date)
                              : ''}
                          </TableCell>
                        </TableRow>
                      )
                    })}
                  </TableBody>
                </Table>
              ) : (
                <div className="flex flex-col items-center justify-center py-12 text-center">
                  <Inbox className="h-12 w-12 text-muted-foreground/50" />
                  <p className="mt-2 font-medium">No messages yet</p>
                  <p className="text-sm text-muted-foreground">
                    Sent messages will appear here.
                  </p>
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}