import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { Badge } from "../ui/badge";
import { Bell, AlertCircle, Info, CheckCircle } from "lucide-react";
import { useMemo } from "react";
import { useData } from "../contexts/DataContext";

export function NotificationsWidget() {
  const { approvals, inventoryItems, productionOrders, quotes } = useData();

  // 실제 데이터로부터 알림 생성
  const notifications = useMemo(() => {
    const notifs = [];

    // 결재 대기 문서
    const pendingApprovals = approvals.filter(a => a.status === 'pending').length;
    if (pendingApprovals > 0) {
      notifs.push({
        type: "urgent",
        icon: AlertCircle,
        message: `결재 대기 문서 ${pendingApprovals}건`,
        time: "10분 전",
        color: "text-red-600"
      });
    }

    // 재고 부족 품목
    const lowStockItems = inventoryItems.filter(item => item.currentStock < item.safetyStock).length;
    if (lowStockItems > 0) {
      notifs.push({
        type: "warning",
        icon: Info,
        message: `재고 부족 품목 ${lowStockItems}건`,
        time: "1시간 전",
        color: "text-orange-600"
      });
    }

    // 생산 완료
    const completedProduction = productionOrders.filter(p => p.status === 'completed').length;
    if (completedProduction > 0) {
      notifs.push({
        type: "info",
        icon: CheckCircle,
        message: `생산 완료 ${completedProduction}건`,
        time: "2시간 전",
        color: "text-green-600"
      });
    }

    // 신규 견적 (draft 상태)
    const newQuotes = quotes.filter(q => q.status === 'draft').length;
    if (newQuotes > 0) {
      notifs.push({
        type: "info",
        icon: Bell,
        message: `신규 견적 요청 ${newQuotes}건`,
        time: "3시간 전",
        color: "text-blue-600"
      });
    }

    return notifs;
  }, [approvals, inventoryItems, productionOrders, quotes]);

  return (
    <Card className="border border-border/20 bg-card rounded-xl">
      <CardHeader>
        <CardTitle className="flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <div className="w-6 h-6 bg-red-100 dark:bg-red-900/30 rounded-lg flex items-center justify-center">
              <Bell className="h-4 w-4 text-red-600 dark:text-red-400" />
            </div>
            <span>알림</span>
          </div>
          {notifications.length > 0 && <Badge variant="destructive">{notifications.length}</Badge>}
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-2">
          {notifications.map((notification, index) => {
            const Icon = notification.icon;
            return (
              <div
                key={index}
                className="flex items-start space-x-3 p-3 bg-muted/50 dark:bg-muted/20 rounded-lg hover:bg-muted/70 dark:hover:bg-muted/30 cursor-pointer transition-colors"
              >
                <Icon className={`h-4 w-4 mt-0.5 ${notification.color}`} />
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium text-foreground">
                    {notification.message}
                  </p>
                  <p className="text-xs text-muted-foreground mt-0.5">
                    {notification.time}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </CardContent>
    </Card>
  );
}
