import { DashboardTemplate } from "./templates/DashboardTemplate";
import { ClipboardCheck, CheckSquare, CheckCircle, XCircle } from "lucide-react";
import { Badge } from "./ui/badge";

export function QualityDashboard() {
  const stats = [
    {
      label: "오늘 검사 건수",
      value: "145",
      icon: ClipboardCheck,
      iconColor: "text-blue-600",
      trend: { value: "+8%", isPositive: true }
    },
    {
      label: "합격률",
      value: "98.5%",
      icon: CheckCircle,
      iconColor: "text-green-600",
      trend: { value: "+2.1%", isPositive: true }
    },
    {
      label: "진행중",
      value: "23",
      icon: CheckSquare,
      iconColor: "text-purple-600",
      trend: { value: "+5", isPositive: true }
    },
    {
      label: "부적합",
      value: "3",
      icon: XCircle,
      iconColor: "text-red-600",
      trend: { value: "-1", isPositive: true }
    }
  ];

  const inspectionRecords = [
    { type: "수입검사", lotNo: "LOT-2025-001", material: "스테인리스 강판", result: "합격", inspector: "김철수" },
    { type: "중간검사", lotNo: "LOT-2025-002", material: "가공 부품 A", result: "합격", inspector: "이영희" },
    { type: "제품검사", lotNo: "LOT-2025-003", material: "완제품 PRE-A", result: "부적합", inspector: "박민수" },
    { type: "수입검사", lotNo: "LOT-2025-004", material: "구리 파이프", result: "합격", inspector: "정수진" }
  ];

  const todayInspections = [
    { time: "08:30", type: "수입검사", item: "철국판 EGI-1.15", quantity: 500, status: "대기중" },
    { time: "09:00", type: "중간검사", item: "가공품 A-001", quantity: 200, status: "검사중" },
    { time: "10:30", type: "제품검사", item: "완제품 PRE-2024", quantity: 100, status: "완료" },
    { time: "11:00", type: "수입검사", item: "알루미늄 프로파일", quantity: 300, status: "대기중" }
  ];

  const getResultColor = (result: string) => {
    switch (result) {
      case "합격": return "bg-green-100 text-green-700";
      case "부적합": return "bg-red-100 text-red-700";
      default: return "bg-gray-100 text-gray-700";
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case "검사중": return "bg-blue-100 text-blue-700";
      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: CheckSquare, onClick: () => {} },
    { label: "중간검사", description: "공정 중 품질 검사", icon: ClipboardCheck, onClick: () => {} },
    { label: "제품검사", description: "완제품 최종 검사", icon: CheckCircle, onClick: () => {} }
  ];

  const sections = [
    {
      title: "최근 검사 기록",
      content: (
        <div className="space-y-3">
          {inspectionRecords.map((record, 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-medium">{record.type}</p>
                <Badge className={getResultColor(record.result)}>{record.result}</Badge>
              </div>
              <p className="text-xs text-muted-foreground mb-1">{record.lotNo} - {record.material}</p>
              <p className="text-xs text-muted-foreground">검사자: {record.inspector}</p>
            </div>
          ))}
        </div>
      )
    },
    {
      title: "금일 검사 일정",
      content: (
        <div className="space-y-3">
          {todayInspections.map((inspection, index) => (
            <div key={index} className="p-3 rounded-lg hover:bg-accent transition-colors">
              <div className="flex items-center justify-between mb-2">
                <div className="flex items-center gap-2">
                  <p className="text-sm font-mono font-medium">{inspection.time}</p>
                  <Badge variant="outline">{inspection.type}</Badge>
                </div>
                <Badge className={getStatusColor(inspection.status)}>{inspection.status}</Badge>
              </div>
              <p className="text-xs text-muted-foreground mb-1">{inspection.item}</p>
              <p className="text-xs text-muted-foreground">수량: {inspection.quantity}</p>
            </div>
          ))}
        </div>
      )
    }
  ];

  return (
    <DashboardTemplate
      title="품질관리"
      description="수입, 중간, 제품 검사를 통합 관리합니다"
      icon={ClipboardCheck}
      stats={stats}
      quickActions={quickActions}
      sections={sections}
    />
  );
}
