import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { Badge } from "../ui/badge";
import { Package, AlertTriangle } from "lucide-react";
import { Progress } from "../ui/progress";
import { useMemo } from "react";
import { useData } from "../contexts/DataContext";

export function InventoryStatusWidget() {
  const { inventoryItems } = useData();

  // 실제 데이터로부터 재고 현황 계산
  const inventoryStatus = useMemo(() => {
    const total = inventoryItems.reduce((sum, item) => sum + item.currentStock, 0);
    const normalItems = inventoryItems.filter(item => item.currentStock >= item.safetyStock);
    const lowItems = inventoryItems.filter(item => item.currentStock < item.safetyStock && item.currentStock > 0);
    const normal = normalItems.reduce((sum, item) => sum + item.currentStock, 0);
    const low = lowItems.reduce((sum, item) => sum + item.currentStock, 0);
    const stockRate = total > 0 ? (normal / total) * 100 : 0;

    // 주요 자재 재고 (상위 4개)
    const materials = inventoryItems.slice(0, 4).map(item => ({
      name: item.itemName,
      stock: item.currentStock,
      min: item.safetyStock,
      status: item.currentStock >= item.safetyStock ? '정상' : '부족'
    }));

    return {
      overall: {
        stockRate: Math.round(stockRate),
        total,
        normal,
        low
      },
      materials
    };
  }, [inventoryItems]);

  return (
    <Card className="h-full">
      <CardHeader className="pb-3">
        <CardTitle className="flex items-center gap-2">
          <Package className="h-5 w-5 text-orange-600" />
          재고 현황
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {/* 전체 재고 현황 */}
          <div className="p-4 bg-gradient-to-r from-orange-50 to-orange-100 dark:from-orange-950/40 dark:to-orange-900/40 rounded-lg">
            <div className="flex items-center justify-between mb-2">
              <span className="text-sm font-semibold text-orange-900 dark:text-orange-100">전체 재고</span>
              <Badge className="bg-orange-600 dark:bg-orange-700">
                {inventoryStatus.overall.stockRate}%
              </Badge>
            </div>
            <div className="text-2xl font-bold text-orange-900 dark:text-orange-100 mb-2">
              {inventoryStatus.overall.total.toLocaleString()} 개
            </div>
            <div className="text-sm text-orange-700 dark:text-orange-200">
              정상: {inventoryStatus.overall.normal.toLocaleString()} | 
              부족: {inventoryStatus.overall.low.toLocaleString()}
            </div>
          </div>

          {/* 주요 자재 현황 */}
          <div className="space-y-2">
            <div className="text-sm font-semibold mb-2">주요 자재 현황</div>
            {inventoryStatus.materials.map((material: any, index: number) => (
              <div key={index} className="space-y-1">
                <div className="flex items-center justify-between">
                  <span className="text-sm">{material.name}</span>
                  <div className="flex items-center gap-2">
                    {material.status === '부족' && (
                      <AlertTriangle className="h-4 w-4 text-red-500" />
                    )}
                    <Badge variant={material.status === '정상' ? 'default' : 'destructive'}>
                      {material.status}
                    </Badge>
                  </div>
                </div>
                <Progress 
                  value={(material.stock / (material.min * 2)) * 100} 
                  className="h-1.5" 
                />
                <div className="text-xs text-muted-foreground flex justify-between">
                  <span>현재: {material.stock}</span>
                  <span>최소: {material.min}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </CardContent>
    </Card>
  );
}