"use client"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { EmptyState } from "@/components/ui/empty-state"
import { listChatSessions } from "@/lib/api"
import { useAuthStore } from "@/store/auth"
import { MessageSquare } from "lucide-react"
import Link from "next/link"
import { useEffect, useState } from "react"

export default function ChatListPage() {
  const [sessions, setSessions] = useState<Awaited<ReturnType<typeof listChatSessions>>>([])
  const userId = useAuthStore((state) => state.user?.id)

  useEffect(() => {
    let cancelled = false

    void (async () => {
      try {
        const result = await Promise.resolve(listChatSessions())
        if (!cancelled) setSessions(result)
      } catch {
        if (!cancelled) setSessions([])
      }
    })()

    return () => {
      cancelled = true
    }
  }, [])

  return (
    <div className="container mx-auto max-w-2xl px-4 py-8 space-y-6">
      <h1 className="text-2xl font-bold">消息</h1>

      {sessions.length > 0 ? (
        <div className="overflow-hidden rounded-xl border border-border/80 bg-card shadow-sm">
          {sessions.map((session) => {
            const other =
              session.participants.find((participant) => participant.id !== userId) ??
              session.participants[0]
            return (
              <Link
                key={session.id}
                href={`/chat/${session.id}`}
                className="block border-b border-border/60 transition-colors last:border-0 hover:bg-muted/10"
              >
                <div className="flex items-center gap-3 p-4">
                  <Avatar className="h-10 w-10">
                    <AvatarImage src={other.avatar} />
                    <AvatarFallback>{other.nickname[0]}</AvatarFallback>
                  </Avatar>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2">
                      <span className="text-sm font-medium">{other.nickname}</span>
                      <Badge
                        variant={session.type === "order" ? "info" : "neutral"}
                        className="text-[10px] px-1.5 py-0 font-normal"
                      >
                        {session.type === "order" ? "订单" : "咨询"}
                      </Badge>
                    </div>
                    <p className="text-xs text-muted-foreground truncate">{session.lastMessage}</p>
                  </div>
                  <div className="flex flex-col items-end gap-1 shrink-0">
                    {session.unreadCount > 0 && (
                      <Badge className="h-4 min-w-4 px-1 flex items-center justify-center rounded-full text-[10px]">
                        {session.unreadCount}
                      </Badge>
                    )}
                  </div>
                </div>
              </Link>
            )
          })}
        </div>
      ) : (
        <EmptyState
          title="暂无消息"
          description="订单沟通和咨询会话会显示在这里。"
          icon={MessageSquare}
        />
      )}
    </div>
  )
}
