NextEdu/src/modules/messaging/components/message-list.tsx

"use client"

import { useMemo, useState } from "react"
import Link from "next/link"
import { Mail, MailOpen, Plus, Send, Inbox } from "lucide-react"

import { Badge } from "@/shared/components/ui/badge"
import { Button } from "@/shared/components/ui/button"
import { Card, CardContent, CardHeader } from "@/shared/components/ui/card"
import { EmptyState } from "@/shared/components/ui/empty-state"
import { Tabs, TabsList, TabsTrigger } from "@/shared/components/ui/tabs"
import { formatDate } from "@/shared/lib/utils"
import { usePermission } from "@/shared/hooks/use-permission"
import { Permissions } from "@/shared/types/permissions"

import type { Message, MessageType } from "../types"

type Tab = "inbox" | "sent"

export function MessageList({
  messages,
  currentUserId,
  initialType = "inbox",
}: {
  messages: Message[]
  currentUserId: string
  initialType?: MessageType
}) {
  const [tab, setTab] = useState<Tab>(initialType === "sent" ? "sent" : "inbox")
  const { hasPermission } = usePermission()
  const canSend = hasPermission(Permissions.MESSAGE_SEND)

  const filtered = useMemo(() => {
    if (tab === "inbox") return messages.filter((m) => m.receiverId === currentUserId)
    return messages.filter((m) => m.senderId === currentUserId)
  }, [messages, tab, currentUserId])

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <Tabs value={tab} onValueChange={(v) => setTab(v as Tab)}>
          <TabsList>
            <TabsTrigger value="inbox" className="gap-2">
              <Inbox className="h-4 w-4" />
              Inbox
            </TabsTrigger>
            <TabsTrigger value="sent" className="gap-2">
              <Send className="h-4 w-4" />
              Sent
            </TabsTrigger>
          </TabsList>
        </Tabs>
        {canSend ? (
          <Button asChild>
            <Link href="/messages/compose">
              <Plus className="mr-2 h-4 w-4" />
              Compose
            </Link>
          </Button>
        ) : null}
      </div>

      {filtered.length === 0 ? (
        <EmptyState
          title={tab === "inbox" ? "Inbox is empty" : "No sent messages"}
          description={
            tab === "inbox"
              ? "You have no incoming messages yet."
              : "You have not sent any messages yet."
          }
          icon={Mail}
          className="h-auto border-none shadow-none"
        />
      ) : (
        <div className="space-y-3">
          {filtered.map((m) => {
            const isReceived = m.receiverId === currentUserId
            const counterpart = isReceived ? m.senderName : m.receiverName
            const unread = isReceived && !m.isRead
            return (
              <Link key={m.id} href={`/messages/${m.id}`} className="block">
                <Card className={`transition-colors hover:bg-accent/50 ${unread ? "border-primary/40" : ""}`}>
                  <CardHeader className="flex flex-row items-start justify-between gap-2 space-y-0 pb-3">
                    <div className="space-y-1">
                      <div className="flex items-center gap-2">
                        {unread ? (
                          <Mail className="h-4 w-4 text-primary" />
                        ) : (
                          <MailOpen className="text-muted-foreground h-4 w-4" />
                        )}
                        <span className={`text-sm font-medium ${unread ? "text-primary" : ""}`}>
                          {m.subject ?? "(no subject)"}
                        </span>
                        {unread ? <Badge variant="default" className="text-xs">New</Badge> : null}
                      </div>
                      <p className="text-muted-foreground text-xs">
                        {isReceived ? "From" : "To"}: {counterpart ?? "Unknown"}
                      </p>
                    </div>
                    <span className="text-muted-foreground shrink-0 text-xs">
                      {formatDate(m.createdAt)}
                    </span>
                  </CardHeader>
                  <CardContent className="pt-0">
                    <p className="text-muted-foreground line-clamp-2 text-sm whitespace-pre-wrap">
                      {m.content}
                    </p>
                  </CardContent>
                </Card>
              </Link>
            )
          })}
        </div>
      )}
    </div>
  )
}