import { DashboardTemplate } from "./templates/DashboardTemplate";
import { ShoppingCart, TrendingUp, AlertTriangle, CheckCircle, Building, Package, DollarSign } from "lucide-react";
import { Badge } from "./ui/badge";
import { Progress } from "./ui/progress";

export function PurchaseDashboard() {
  const stats = [
    {
      label: "전체 발주",
      value: "1,234",
      icon: ShoppingCart,
      iconColor: "text-blue-600",
      trend: { value: "+12.5%", isPositive: true }
    },
    {
      label: "진행 중",
      value: "87",
      icon: TrendingUp,
      iconColor: "text-purple-600",
      trend: { value: "+5", isPositive: true }
    },
    {
      label: "지연 건",
      value: "5",
      icon: AlertTriangle,
      iconColor: "text-red-600",
      trend: { value: "-2", isPositive: true }
    },
    {
      label: "완료",
      value: "1,142",
      icon: CheckCircle,
      iconColor: "text-green-600",
      trend: { value: "+8%", isPositive: true }
    }
  ];

  const recentOrders = [
    { id: "PO-2025-001", supplier: "(주)ABC자재", amount: "₩15,000,000", status: "승인완료", statusColor: "bg-green-100 text-green-700" },
    { id: "PO-2025-002", supplier: "(주)DEF철강", amount: "₩8,500,000", status: "검토중", statusColor: "bg-blue-100 text-blue-700" },
    { id: "PO-2025-003", supplier: "(주)GHI산업", amount: "₩12,300,000", status: "입고대기", statusColor: "bg-orange-100 text-orange-700" },
    { id: "PO-2025-004", supplier: "(주)JKL전자", amount: "₩5,200,000", status: "완료", statusColor: "bg-gray-100 text-gray-700" }
  ];

  const monthlyPurchase = [
    { category: "원자재", amount: "₩45,000,000", percentage: 75, color: "bg-blue-600" },
    { category: "부자재", amount: "₩12,000,000", percentage: 40, color: "bg-green-600" },
    { category: "소모품", amount: "₩3,500,000", percentage: 20, color: "bg-purple-600" }
  ];

  const quickActions = [
    { label: "발주 등록", description: "새로운 발주서 작성", icon: ShoppingCart, onClick: () => {} },
    { label: "구매처 관리", description: "협력 업체 정보 관리", icon: Building, onClick: () => {} },
    { label: "자재 요청", description: "생산 자재 구매 요청", icon: Package, onClick: () => {} },
    { label: "단가 관리", description: "구매 단가 및 계약 관리", icon: DollarSign, onClick: () => {} }
  ];

  const sections = [
    {
      title: "최근 발주 내역",
      content: (
        <div className="space-y-3">
          {recentOrders.map((order) => (
            <div key={order.id} className="flex items-center justify-between p-3 rounded-lg hover:bg-accent transition-colors cursor-pointer border">
              <div>
                <p className="font-mono text-sm">{order.id}</p>
                <p className="text-sm text-muted-foreground">{order.supplier}</p>
              </div>
              <div className="text-right">
                <p className="text-sm">{order.amount}</p>
                <Badge className={order.statusColor}>{order.status}</Badge>
              </div>
            </div>
          ))}
        </div>
      )
    },
    {
      title: "월간 구매 현황",
      span: "full" as const,
      content: (
        <div className="space-y-6">
          {monthlyPurchase.map((item) => (
            <div key={item.category} className="space-y-2">
              <div className="flex items-center justify-between">
                <span className="text-sm">{item.category}</span>
                <span className="text-sm">{item.amount}</span>
              </div>
              <Progress value={item.percentage} className="h-2" />
            </div>
          ))}
        </div>
      )
    }
  ];

  return (
    <DashboardTemplate
      title="구매관리"
      description="구매 현황 및 발주 관리를 확인하실 수 있습니다"
      icon={ShoppingCart}
      stats={stats}
      quickActions={quickActions}
      sections={sections}
    />
  );
}
