import { DashboardTemplate } from "./templates/DashboardTemplate";
import { Factory, Calendar, ClipboardList, Activity, AlertCircle } from "lucide-react";
import { Badge } from "./ui/badge";
import { Progress } from "./ui/progress";

export function ProductionDashboard() {
  const stats = [
    {
      label: "오늘 생산량",
      value: "1,245",
      icon: Factory,
      iconColor: "text-blue-600",
      trend: { value: "+15%", isPositive: true }
    },
    {
      label: "진행중인 작업",
      value: "28",
      icon: ClipboardList,
      iconColor: "text-purple-600",
      trend: { value: "+3", isPositive: true }
    },
    {
      label: "완료 작업",
      value: "156",
      icon: Activity,
      iconColor: "text-green-600",
      trend: { value: "+12%", isPositive: true }
    },
    {
      label: "지연 작업",
      value: "5",
      icon: AlertCircle,
      iconColor: "text-red-600",
      trend: { value: "-2", isPositive: true }
    }
  ];

  const productionPlans = [
    { planNo: "PLAN-2025-001", product: "프리미엄 제품 A", quantity: 500, status: "진행중", progress: 75 },
    { planNo: "PLAN-2025-002", product: "표준 제품 B", quantity: 800, status: "대기중", progress: 0 },
    { planNo: "PLAN-2025-003", product: "커스텀 제품 C", quantity: 300, status: "진행중", progress: 45 },
    { planNo: "PLAN-2025-004", product: "프리미엄 제품 D", quantity: 600, status: "완료", progress: 100 }
  ];

  const workOrders = [
    { orderNo: "WO-2025-001", workCenter: "조립 1라인", product: "제품 A", status: "작업중", startTime: "08:00" },
    { orderNo: "WO-2025-002", workCenter: "가공 2라인", product: "제품 B", status: "대기", startTime: "09:00" },
    { orderNo: "WO-2025-003", workCenter: "검사 라인", product: "제품 C", status: "완료", startTime: "07:30" },
    { orderNo: "WO-2025-004", workCenter: "포장 라인", product: "제품 D", status: "작업중", startTime: "08:30" }
  ];

  const getStatusColor = (status: string) => {
    switch (status) {
      case "진행중": case "작업중": return "bg-blue-100 text-blue-700";
      case "대기중": case "대기": return "bg-yellow-100 text-yellow-700";
      case "완료": return "bg-green-100 text-green-700";
      default: return "bg-gray-100 text-gray-700";
    }
  };

  const quickActions = [
    { label: "생산계획", description: "월간/주간 생산 계획 수립", icon: Calendar, onClick: () => {} },
    { label: "작업지시", description: "작업 지시서 발행 및 관리", icon: ClipboardList, onClick: () => {} },
    { label: "생산실적", description: "실시간 생산 실적 현황", icon: Activity, onClick: () => {} }
  ];

  const sections = [
    {
      title: "생산 계획",
      content: (
        <div className="space-y-3">
          {productionPlans.map((plan, index) => (
            <div key={index} className="p-3 rounded-lg hover:bg-accent transition-colors">
              <div className="flex items-center justify-between mb-2">
                <p className="text-sm font-mono font-medium">{plan.planNo}</p>
                <Badge className={getStatusColor(plan.status)}>{plan.status}</Badge>
              </div>
              <p className="text-xs text-muted-foreground mb-2">{plan.product}</p>
              <div className="space-y-1">
                <div className="flex justify-between text-xs">
                  <span className="text-muted-foreground">진척도</span>
                  <span className="font-medium">{plan.progress}%</span>
                </div>
                <Progress value={plan.progress} className="h-2" />
              </div>
            </div>
          ))}
        </div>
      )
    },
    {
      title: "작업 지시 현황",
      content: (
        <div className="space-y-3">
          {workOrders.map((order, index) => (
            <div key={index} className="p-3 rounded-lg hover:bg-accent transition-colors">
              <div className="flex items-center justify-between mb-2">
                <p className="text-sm font-mono font-medium">{order.orderNo}</p>
                <Badge className={getStatusColor(order.status)}>{order.status}</Badge>
              </div>
              <p className="text-xs text-muted-foreground mb-1">{order.workCenter}</p>
              <div className="flex justify-between text-xs">
                <span className="text-muted-foreground">{order.product}</span>
                <span className="font-medium">{order.startTime}</span>
              </div>
            </div>
          ))}
        </div>
      )
    }
  ];

  return (
    <DashboardTemplate
      title="생산관리"
      description="생산계획부터 실적까지 통합 관리합니다"
      icon={Factory}
      stats={stats}
      quickActions={quickActions}
      sections={sections}
    />
  );
}
