import { DashboardTemplate } from "./templates/DashboardTemplate";
import { Warehouse, Package, XCircle, AlertTriangle, TrendingUp, ArrowUpRight } from "lucide-react";
import { Badge } from "./ui/badge";
import { Card, CardContent } from "./ui/card";

export function MaterialDashboard() {
  const stats = [
    {
      label: "등록 품목",
      value: "1,234",
      icon: Package,
      iconColor: "text-blue-600",
      trend: { value: "+23", isPositive: true }
    },
    {
      label: "오늘 입고",
      value: "45",
      icon: Warehouse,
      iconColor: "text-purple-600",
      trend: { value: "+12", isPositive: true }
    },
    {
      label: "입고 완료",
      value: "127",
      icon: Package,
      iconColor: "text-green-600",
      trend: { value: "+8%", isPositive: true }
    },
    {
      label: "부적합품",
      value: "3",
      icon: XCircle,
      iconColor: "text-red-600",
      trend: { value: "-1", isPositive: true }
    }
  ];

  const recentReceiving = [
    { receiptNo: "RC-2025-001", material: "철국판 EGI-1.15", quantity: 500, supplier: "포스코", status: "검사완료" },
    { receiptNo: "RC-2025-002", material: "구리 파이프", quantity: 200, supplier: "LG화학", status: "검사중" },
    { receiptNo: "RC-2025-003", material: "알루미늄 프로파일", quantity: 300, supplier: "삼성정밀", status: "대기중" },
    { receiptNo: "RC-2025-004", material: "스테인리스 강판", quantity: 150, supplier: "포스코", status: "입고완료" }
  ];

  const nonconformingItems = [
    { ncNo: "NC-2025-001", material: "철국판 EGI-1.15", issue: "규격 불일치", quantity: 50, date: "2025-01-15" },
    { ncNo: "NC-2025-002", material: "구리 파이프", issue: "표면 결함", quantity: 20, date: "2025-01-14" },
    { ncNo: "NC-2025-003", material: "볼트 M6", issue: "수량 부족", quantity: 100, date: "2025-01-13" }
  ];

  const modules = [
    { name: "품목관리", description: "품목 정보 등록 및 관리", icon: Package, count: 1234 },
    { name: "입고관리", description: "자재 입고 및 검사 관리", icon: Package, count: 45 },
    { name: "부적합품관리", description: "부적합품 처리 및 추적", icon: XCircle, count: 3 }
  ];

  const getStatusColor = (status: string) => {
    switch (status) {
      case "검사완료": case "입고완료": return "bg-green-100 text-green-700";
      case "검사중": return "bg-blue-100 text-blue-700";
      case "대기중": return "bg-yellow-100 text-yellow-700";
      default: return "bg-gray-100 text-gray-700";
    }
  };

  const quickActions = [
    { label: "품목관리", description: "품목 정보 등록 및 관리", icon: Package, onClick: () => {} },
    { label: "입고관리", description: "자재 입고 및 검사 관리", icon: Warehouse, onClick: () => {} },
    { label: "부적합품관리", description: "부적합품 처리 및 추적", icon: XCircle, onClick: () => {} }
  ];

  const sections = [
    {
      title: "자재관리 모듈",
      content: (
        <div className="space-y-3">
          {modules.map((module, index) => {
            const Icon = module.icon;
            return (
              <div key={index} className="flex items-center justify-between p-3 rounded-lg hover:bg-accent transition-colors cursor-pointer">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
                    <Icon className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <p className="text-sm">{module.name}</p>
                    <p className="text-xs text-muted-foreground">{module.description}</p>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <Badge variant="outline">{module.count}</Badge>
                  <ArrowUpRight className="h-4 w-4 text-muted-foreground" />
                </div>
              </div>
            );
          })}
        </div>
      )
    },
    {
      title: "최근 입고 현황",
      content: (
        <div className="space-y-3">
          {recentReceiving.map((item, index) => (
            <div key={index} className="p-3 rounded-lg hover:bg-accent transition-colors cursor-pointer">
              <div className="flex items-center justify-between mb-2">
                <p className="text-sm font-mono">{item.receiptNo}</p>
                <Badge className={getStatusColor(item.status)}>{item.status}</Badge>
              </div>
              <p className="text-sm mb-1">{item.material}</p>
              <div className="flex items-center justify-between text-xs text-muted-foreground">
                <span>{item.supplier}</span>
                <span>{item.quantity}개</span>
              </div>
            </div>
          ))}
        </div>
      )
    },
    {
      title: "부적합품 현황",
      span: "full" as const,
      content: (
        <div className="space-y-3">
          <div className="flex items-center gap-2 mb-3 text-red-600">
            <AlertTriangle className="h-5 w-5" />
            <p className="text-sm">긴급 처리가 필요한 부적합품</p>
          </div>
          {nonconformingItems.map((item, index) => (
            <div key={index} className="flex items-center justify-between p-3 rounded-lg hover:bg-accent transition-colors border-l-4 border-red-500">
              <div className="flex-1">
                <div className="flex items-center gap-2 mb-1">
                  <p className="text-sm font-mono">{item.ncNo}</p>
                  <Badge variant="destructive">{item.issue}</Badge>
                </div>
                <p className="text-sm">{item.material}</p>
                <p className="text-xs text-muted-foreground">부적합 수량: {item.quantity}개</p>
              </div>
              <div className="text-right">
                <p className="text-xs text-muted-foreground">{item.date}</p>
              </div>
            </div>
          ))}
        </div>
      )
    },
    {
      title: "입고 프로세스 안내",
      span: "full" as const,
      content: (
        <Card className="bg-blue-50 border-blue-200">
          <CardContent className="p-6">
            <div className="space-y-4">
              <div className="flex items-start gap-3">
                <Warehouse className="h-5 w-5 text-blue-600 mt-0.5" />
                <div>
                  <p className="text-sm text-blue-900 mb-1">입고 프로세스</p>
                  <p className="text-xs text-blue-700">입고등록 → 수입검사 → 입고완료 순서로 진행됩니다.</p>
                </div>
              </div>
              <div className="flex items-center gap-2 text-xs">
                <div className="flex items-center gap-2 px-3 py-1.5 bg-white rounded-lg border">
                  <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
                  <span>입고등록</span>
                </div>
                <div className="text-blue-400">→</div>
                <div className="flex items-center gap-2 px-3 py-1.5 bg-white rounded-lg border">
                  <div className="w-2 h-2 bg-purple-500 rounded-full"></div>
                  <span>수입검사</span>
                </div>
                <div className="text-blue-400">→</div>
                <div className="flex items-center gap-2 px-3 py-1.5 bg-white rounded-lg border">
                  <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                  <span>입고완료</span>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      )
    }
  ];

  return (
    <DashboardTemplate
      title="자재관리"
      description="입고부터 부적합품 처리까지 통합 관리합니다"
      icon={Warehouse}
      stats={stats}
      quickActions={quickActions}
      sections={sections}
    />
  );
}
