import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { 
  Bell, 
  CheckCircle, 
  AlertCircle, 
  Info, 
  Package, 
  MessageSquare,
  ArrowLeft,
  Home,
  Check
} from "lucide-react";
import { cn } from "@/lib/utils";
import { useNavigate } from "react-router-dom";
import { useToast } from "@/hooks/use-toast";

interface Notification {
  id: string;
  type: 'order' | 'system' | 'message' | 'update';
  title: string;
  content: string;
  time: string;
  read: boolean;
  priority: 'high' | 'medium' | 'low';
}

const mockNotifications: Notification[] = [
  {
    id: '1',
    type: 'order',
    title: '订单发货通知',
    content: '您的订单 #12345 已发货，预计3-5个工作日内送达。您可以通过快递单号进行物流跟踪。',
    time: '2分钟前',
    read: false,
    priority: 'high'
  },
  {
    id: '2',
    type: 'message',
    title: 'AI助手回复',
    content: '关于您咨询的产品问题，我已为您准备了详细解答，请查看聊天记录获取更多信息。',
    time: '10分钟前',
    read: false,
    priority: 'medium'
  },
  {
    id: '3',
    type: 'system',
    title: '系统维护通知',
    content: '系统将于今晚23:00-01:00进行维护升级，期间服务可能短暂中断，请您提前做好准备。',
    time: '1小时前',
    read: true,
    priority: 'medium'
  },
  {
    id: '4',
    type: 'update',
    title: '功能更新',
    content: '智能客服新增语音交互功能，体验更加便捷。您现在可以通过语音与AI助手进行交流。',
    time: '2小时前',
    read: true,
    priority: 'low'
  },
  {
    id: '5',
    type: 'order',
    title: '订单确认',
    content: '您的订单 #12344 已确认，我们正在为您准备商品，预计24小时内发货。',
    time: '1天前',
    read: true,
    priority: 'medium'
  },
  {
    id: '6',
    type: 'system',
    title: '账户安全提醒',
    content: '检测到您的账户在新设备上登录，如非本人操作请及时修改密码。',
    time: '2天前',
    read: true,
    priority: 'high'
  },
  {
    id: '7',
    type: 'message',
    title: '客服消息',
    content: '您的售后申请已受理，客服专员将在2个工作日内联系您处理相关问题。',
    time: '3天前',
    read: true,
    priority: 'medium'
  },
  {
    id: '8',
    type: 'update',
    title: '新功能上线',
    content: '平台新增在线支付功能，支持多种支付方式，让您的购物体验更加便捷。',
    time: '1周前',
    read: true,
    priority: 'low'
  }
];

const getNotificationIcon = (type: string) => {
  switch (type) {
    case 'order':
      return <Package className="h-5 w-5 text-primary" />;
    case 'system':
      return <AlertCircle className="h-5 w-5 text-warning" />;
    case 'message':
      return <MessageSquare className="h-5 w-5 text-ai" />;
    case 'update':
      return <Info className="h-5 w-5 text-info" />;
    default:
      return <Bell className="h-5 w-5 text-muted-foreground" />;
  }
};

const getPriorityColor = (priority: string) => {
  switch (priority) {
    case 'high':
      return 'bg-destructive text-destructive-foreground';
    case 'medium':
      return 'bg-warning text-warning-foreground';
    case 'low':
      return 'bg-info text-info-foreground';
    default:
      return 'bg-muted text-muted-foreground';
  }
};

const getTypeDisplayName = (type: string) => {
  switch (type) {
    case 'order':
      return '订单通知';
    case 'system':
      return '系统通知';
    case 'message':
      return '消息通知';
    case 'update':
      return '更新通知';
    default:
      return '通知';
  }
};

export default function NotificationPage() {
  const navigate = useNavigate();
  const { toast } = useToast();
  const [activeTab, setActiveTab] = useState("all");
  const [notifications, setNotifications] = useState(mockNotifications);

  const unreadCount = notifications.filter(n => !n.read).length;

  const filteredNotifications = notifications.filter(notification => {
    if (activeTab === "all") return true;
    if (activeTab === "unread") return !notification.read;
    return notification.type === activeTab;
  });

  const markAllAsRead = () => {
    setNotifications(notifications.map(n => ({ ...n, read: true })));
    toast({
      title: "操作成功",
      description: "所有通知已标记为已读"
    });
  };

  const markAsRead = (id: string) => {
    setNotifications(notifications.map(n => 
      n.id === id ? { ...n, read: true } : n
    ));
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-background via-background to-muted">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8">
        {/* Header */}
        <div className="mb-6 sm:mb-8">
          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div className="flex items-center space-x-3">
              <Bell className="h-6 w-6 sm:h-7 sm:w-7 text-primary" />
              <div>
                <h1 className="text-2xl sm:text-3xl font-bold text-foreground mb-1">通知中心</h1>
                <p className="text-sm sm:text-base text-muted-foreground">查看和管理您的所有通知消息</p>
              </div>
              {unreadCount > 0 && (
                <Badge variant="destructive" className="h-6 text-sm">
                  {unreadCount} 条未读
                </Badge>
              )}
            </div>
            <div className="flex items-center space-x-2 sm:space-x-3">
              <Button 
                onClick={() => navigate('/')} 
                variant="outline" 
                size="sm"
                className="flex items-center space-x-1 sm:space-x-2"
              >
                <ArrowLeft className="h-3 w-3 sm:h-4 sm:w-4" />
                <span className="text-sm">返回</span>
              </Button>
              <Button 
                onClick={() => navigate('/')} 
                size="sm"
                className="flex items-center space-x-1 sm:space-x-2"
              >
                <Home className="h-3 w-3 sm:h-4 sm:w-4" />
                <span className="text-sm">主页</span>
              </Button>
            </div>
          </div>
        </div>

        {/* Main Content */}
        <div className="max-w-4xl mx-auto">
          <Card className="border-border shadow-lg">
            <CardHeader className="flex flex-row items-center justify-between">
              <CardTitle className="text-xl">通知列表</CardTitle>
              {unreadCount > 0 && (
                <Button 
                  onClick={markAllAsRead}
                  variant="outline" 
                  size="sm"
                  className="flex items-center space-x-2"
                >
                  <CheckCircle className="h-4 w-4" />
                  <span>标记全部为已读</span>
                </Button>
              )}
            </CardHeader>

            <CardContent>
              <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
                <TabsList className="grid w-full grid-cols-6 text-xs sm:text-sm">
                  <TabsTrigger value="all">全部</TabsTrigger>
                  <TabsTrigger value="unread">未读</TabsTrigger>
                  <TabsTrigger value="order">订单</TabsTrigger>
                  <TabsTrigger value="message">消息</TabsTrigger>
                  <TabsTrigger value="system">系统</TabsTrigger>
                  <TabsTrigger value="update">更新</TabsTrigger>
                </TabsList>

                <div className="space-y-3">
                  {filteredNotifications.length > 0 ? (
                    filteredNotifications.map((notification) => (
                      <div
                        key={notification.id}
                        className={cn(
                          "flex items-start space-x-4 p-4 rounded-lg border transition-all duration-200 hover:shadow-md cursor-pointer",
                          notification.read 
                            ? "bg-muted/30 border-border/50" 
                            : "bg-card border-border shadow-sm"
                        )}
                        onClick={() => markAsRead(notification.id)}
                      >
                        <div className="flex-shrink-0 mt-1">
                          {getNotificationIcon(notification.type)}
                        </div>
                        
                        <div className="flex-1 min-w-0">
                          <div className="flex items-start justify-between mb-2">
                            <div className="flex items-center space-x-2">
                              <h4 className={cn(
                                "text-base font-medium",
                                notification.read ? "text-muted-foreground" : "text-foreground"
                              )}>
                                {notification.title}
                              </h4>
                              <Badge variant="outline" className="text-xs">
                                {getTypeDisplayName(notification.type)}
                              </Badge>
                            </div>
                            <div className="flex items-center space-x-2 flex-shrink-0 ml-2">
                              <Badge 
                                variant="outline" 
                                className={cn("text-xs px-2 py-1", getPriorityColor(notification.priority))}
                              >
                                {notification.priority === 'high' ? '高优先级' : 
                                 notification.priority === 'medium' ? '中优先级' : '低优先级'}
                              </Badge>
                              {!notification.read && (
                                <div className="w-2 h-2 bg-primary rounded-full" />
                              )}
                            </div>
                          </div>
                          
                          <p className={cn(
                            "text-sm leading-relaxed mb-3",
                            notification.read ? "text-muted-foreground/80" : "text-muted-foreground"
                          )}>
                            {notification.content}
                          </p>
                          
                          <div className="flex items-center justify-between">
                            <p className="text-xs text-muted-foreground/70">
                              {notification.time}
                            </p>
                            {!notification.read && (
                              <Button 
                                variant="ghost" 
                                size="sm" 
                                className="h-auto p-1 text-xs"
                                onClick={(e) => {
                                  e.stopPropagation();
                                  markAsRead(notification.id);
                                }}
                              >
                                <Check className="h-3 w-3 mr-1" />
                                标为已读
                              </Button>
                            )}
                          </div>
                        </div>
                      </div>
                    ))
                  ) : (
                    <div className="text-center py-12">
                      <Bell className="h-16 w-16 text-muted-foreground/50 mx-auto mb-4" />
                      <h3 className="text-lg font-medium text-foreground mb-2">
                        {activeTab === "unread" ? "暂无未读通知" : "暂无通知"}
                      </h3>
                      <p className="text-sm text-muted-foreground">
                        {activeTab === "unread" 
                          ? "所有通知都已阅读" 
                          : "当有新消息时，会在这里显示"}
                      </p>
                    </div>
                  )}
                </div>
              </Tabs>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}