import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { Badge } from "../ui/badge";
import { Truck, AlertTriangle } from "lucide-react";

export function ShippingStatusWidget() {
  // Mock 데이터 (실제로는 API에서 가져옴)
  const shipping = {
    unshippedOrders: 18,
    delayedOrders: 5,
    urgentRequests: 3,
    delayedOrdersDetail: [
      { customer: 'A전자', orderNo: 'SO-2024-1234', amount: 45000000, daysOverdue: 3 },
      { customer: 'B산업', orderNo: 'SO-2024-1245', amount: 32000000, daysOverdue: 2 },
      { customer: 'C건설', orderNo: 'SO-2024-1256', amount: 28000000, daysOverdue: 1 }
    ]
  };

  return (
    <Card className="border border-border/20 bg-card rounded-xl">
      <CardHeader>
        <CardTitle className="flex items-center space-x-3">
          <div className="w-6 h-6 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
            <Truck className="h-4 w-4 text-green-600 dark:text-green-400" />
          </div>
          <span>입출고 현황</span>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-3">
          <div className="grid grid-cols-3 gap-2">
            <div className="p-3 bg-blue-50 dark:bg-blue-950/20 rounded-lg text-center">
              <p className="text-xs text-muted-foreground">미출고</p>
              <p className="text-xl">{shipping.unshippedOrders}</p>
            </div>
            <div className="p-3 bg-orange-50 dark:bg-orange-950/20 rounded-lg text-center">
              <p className="text-xs text-muted-foreground">지연</p>
              <p className="text-xl text-orange-600">{shipping.delayedOrders}</p>
            </div>
            <div className="p-3 bg-red-50 dark:bg-red-950/20 rounded-lg text-center">
              <p className="text-xs text-muted-foreground">긴급</p>
              <p className="text-xl text-red-600">{shipping.urgentRequests}</p>
            </div>
          </div>

          {shipping.delayedOrders > 0 && (
            <div className="space-y-2">
              <h4 className="text-sm font-medium flex items-center space-x-1">
                <AlertTriangle className="h-4 w-4 text-orange-600" />
                <span>지연 주문</span>
              </h4>
              {shipping.delayedOrdersDetail?.slice(0, 3).map((order: any, index: number) => (
                <div key={index} className="p-2 bg-orange-50 dark:bg-orange-950/20 rounded text-sm">
                  <div className="flex justify-between items-center">
                    <span className="font-medium">{order.customer}</span>
                    <Badge variant="destructive" className="text-xs">
                      {order.daysOverdue}일 지연
                    </Badge>
                  </div>
                  <p className="text-xs text-muted-foreground mt-1">
                    {order.orderNo} · {(order.amount / 1000000).toFixed(0)}M원
                  </p>
                </div>
              ))}
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  );
}
