"use client"

import { Lock, MessageSquare } from "lucide-react"
import Link from "next/link"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent } from "@/components/ui/card"
import { useAuthStore } from "@/store/auth"
import { useChatStore } from "@/store/chat"

export default function ChatListPage() {
  const sessions = useChatStore((state) => state.sessions)
  const userId = useAuthStore((state) => state.user?.id)

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

      <div className="space-y-2">
        {sessions.map((session) => {
          const other =
            session.participants.find((participant) => participant.id !== userId) ??
            session.participants[0]
          return (
            <Link key={session.id} href={`/chat/${session.id}`}>
              <Card className="hover:bg-accent/30 transition-colors">
                <CardContent className="flex items-center gap-3 py-3">
                  <Avatar className="h-10 w-10">
                    <AvatarImage src={other.avatar} />
                    <AvatarFallback>{other.name[0]}</AvatarFallback>
                  </Avatar>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2">
                      <span className="text-sm font-medium">{other.name}</span>
                      <Badge variant="outline" className="text-[10px] px-1.5 py-0">
                        {session.type === "order" ? "订单" : "咨询"}
                      </Badge>
                      {session.readonly && <Lock className="h-3 w-3 text-muted-foreground" />}
                    </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.lastMessageAt && (
                      <span className="text-[10px] text-muted-foreground">
                        {new Date(session.lastMessageAt).toLocaleDateString("zh-CN")}
                      </span>
                    )}
                    {session.unreadCount > 0 && (
                      <Badge className="h-4 min-w-4 px-1 flex items-center justify-center text-[10px]">
                        {session.unreadCount}
                      </Badge>
                    )}
                  </div>
                </CardContent>
              </Card>
            </Link>
          )
        })}

        {sessions.length === 0 && (
          <div className="text-center py-12 text-muted-foreground">
            <MessageSquare className="h-12 w-12 mx-auto mb-2 opacity-50" />
            暂无消息
          </div>
        )}
      </div>
    </div>
  )
}