"use client"

import { Bell, CheckCheck, MessageSquare, ShoppingBag } from "lucide-react"
import Link from "next/link"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import type { Notification } from "@/lib/types"
import { useNotificationStore } from "@/store/notifications"

const typeIcons: Record<Notification["type"], typeof Bell> = {
  order: ShoppingBag,
  community: MessageSquare,
  system: Bell,
}

const typeLabels: Record<Notification["type"], string> = {
  order: "订单",
  community: "社区",
  system: "系统",
}

function NotificationItem({ notification }: { notification: Notification }) {
  const Icon = typeIcons[notification.type]
  const content = (
    <div className="flex items-start gap-3 rounded-md border p-3 hover:bg-muted/50 transition-colors">
      <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center shrink-0 mt-0.5">
        <Icon className="h-4 w-4" />
      </div>
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2">
          <span className="text-sm font-medium">{notification.title}</span>
          {!notification.read && <span className="h-2 w-2 rounded-full bg-primary shrink-0" />}
        </div>
        <p className="text-sm text-muted-foreground mt-0.5">{notification.content}</p>
        <p className="text-xs text-muted-foreground mt-1">
          {new Date(notification.createdAt).toLocaleString("zh-CN")}
        </p>
      </div>
      <Badge variant="outline" className="text-[10px] shrink-0">
        {typeLabels[notification.type]}
      </Badge>
    </div>
  )

  return notification.link ? <Link href={notification.link}>{content}</Link> : content
}

export default function NotificationsPage() {
  const notifications = useNotificationStore((state) => state.notifications)
  const markAllAsRead = useNotificationStore((state) => state.markAllAsRead)
  const unreadCount = notifications.filter((notification) => !notification.read).length
  const orderNotifs = notifications.filter((notification) => notification.type === "order")
  const communityNotifs = notifications.filter((notification) => notification.type === "community")
  const systemNotifs = notifications.filter((notification) => notification.type === "system")

  return (
    <div className="max-w-2xl space-y-6">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <h1 className="text-2xl font-bold">通知中心</h1>
          {unreadCount > 0 && <Badge>{unreadCount} 条未读</Badge>}
        </div>
        <Button variant="outline" size="sm" onClick={markAllAsRead}>
          <CheckCheck className="mr-1 h-4 w-4" />
          全部已读
        </Button>
      </div>

      <Tabs defaultValue="all">
        <TabsList>
          <TabsTrigger value="all">全部</TabsTrigger>
          <TabsTrigger value="order">订单</TabsTrigger>
          <TabsTrigger value="community">社区</TabsTrigger>
          <TabsTrigger value="system">系统</TabsTrigger>
        </TabsList>

        <TabsContent value="all" className="space-y-2 mt-4">
          {notifications.map((notification) => (
            <NotificationItem key={notification.id} notification={notification} />
          ))}
        </TabsContent>

        <TabsContent value="order" className="space-y-2 mt-4">
          {orderNotifs.length === 0 ? (
            <Card>
              <CardContent className="py-8 text-center text-sm text-muted-foreground">
                暂无订单通知
              </CardContent>
            </Card>
          ) : (
            orderNotifs.map((n) => <NotificationItem key={n.id} notification={n} />)
          )}
        </TabsContent>

        <TabsContent value="community" className="space-y-2 mt-4">
          {communityNotifs.length === 0 ? (
            <Card>
              <CardContent className="py-8 text-center text-sm text-muted-foreground">
                暂无社区通知
              </CardContent>
            </Card>
          ) : (
            communityNotifs.map((n) => <NotificationItem key={n.id} notification={n} />)
          )}
        </TabsContent>

        <TabsContent value="system" className="space-y-2 mt-4">
          {systemNotifs.length === 0 ? (
            <Card>
              <CardContent className="py-8 text-center text-sm text-muted-foreground">
                暂无系统通知
              </CardContent>
            </Card>
          ) : (
            systemNotifs.map((n) => <NotificationItem key={n.id} notification={n} />)
          )}
        </TabsContent>
      </Tabs>
    </div>
  )
}