import { DashboardTemplate } from "./templates/DashboardTemplate";
import { Briefcase, Calculator, DollarSign, ShoppingCart, Users } from "lucide-react";
import { Badge } from "./ui/badge";

export function SalesDashboard() {
  const stats = [
    {
      label: "월 매출",
      value: "1,250만원",
      icon: DollarSign,
      iconColor: "text-green-600",
      trend: { value: "+18%", isPositive: true }
    },
    {
      label: "진행중인 견적",
      value: "42",
      icon: Calculator,
      iconColor: "text-blue-600",
      trend: { value: "+5", isPositive: true }
    },
    {
      label: "수주 건수",
      value: "156",
      icon: ShoppingCart,
      iconColor: "text-purple-600",
      trend: { value: "+12%", isPositive: true }
    },
    {
      label: "활성 고객",
      value: "89",
      icon: Users,
      iconColor: "text-orange-600",
      trend: { value: "+7%", isPositive: true }
    }
  ];

  const recentQuotes = [
    { customer: "현대자동차", product: "프리미엄 제품 A", amount: "₩15,000,000", status: "검토중" },
    { customer: "삼성전자", product: "표준 제품 B", amount: "₩8,500,000", status: "승인대기" },
    { customer: "LG화학", product: "커스텀 제품 C", amount: "₩22,000,000", status: "진행중" },
    { customer: "SK하이닉스", product: "프리미엄 제품 D", amount: "₩12,800,000", status: "작성중" }
  ];

  const recentOrders = [
    { orderNo: "ORD-2025-001", customer: "현대자동차", amount: "₩18,000,000", status: "생산중", date: "2025-01-15" },
    { orderNo: "ORD-2025-002", customer: "삼성전자", amount: "₩9,500,000", status: "배송중", date: "2025-01-14" },
    { orderNo: "ORD-2025-003", customer: "포스코", amount: "₩25,000,000", status: "완료", date: "2025-01-13" },
    { orderNo: "ORD-2025-004", customer: "LG전자", amount: "₩14,200,000", status: "생산대기", date: "2025-01-12" }
  ];

  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-purple-100 text-purple-700";
      case "배송중": return "bg-orange-100 text-orange-700";
      case "완료": return "bg-green-100 text-green-700";
      case "생산대기": return "bg-gray-100 text-gray-700";
      default: return "bg-gray-100 text-gray-700";
    }
  };

  const quickActions = [
    { label: "견적 산출하기", description: "빠른 견적 시뮬레이션", icon: Calculator, onClick: () => {} },
    { label: "단가관리", description: "제품별 단가 설정 및 관리", icon: DollarSign, onClick: () => {} },
    { label: "영업관리", description: "영업 활동 및 고객 관리", icon: Briefcase, onClick: () => {} },
    { label: "수주관리", description: "수주 현황 및 처리", icon: ShoppingCart, onClick: () => {} }
  ];

  const sections = [
    {
      title: "최근 견적",
      content: (
        <div className="space-y-3">
          {recentQuotes.map((quote, 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-medium">{quote.customer}</p>
                <Badge className={getStatusColor(quote.status)}>{quote.status}</Badge>
              </div>
              <p className="text-xs text-muted-foreground mb-1">{quote.product}</p>
              <p className="text-sm font-semibold">{quote.amount}</p>
            </div>
          ))}
        </div>
      )
    },
    {
      title: "최근 수주 현황",
      span: "full" as const,
      content: (
        <div className="space-y-3">
          {recentOrders.map((order, index) => (
            <div key={index} className="flex items-center justify-between p-3 rounded-lg hover:bg-accent transition-colors cursor-pointer">
              <div className="flex-1">
                <div className="flex items-center gap-2 mb-1">
                  <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">{order.customer}</p>
              </div>
              <div className="text-right">
                <p className="text-sm font-semibold">{order.amount}</p>
                <p className="text-xs text-muted-foreground">{order.date}</p>
              </div>
            </div>
          ))}
        </div>
      )
    }
  ];

  return (
    <DashboardTemplate
      title="판매관리"
      description="견적, 영업, 수주 활동을 통합 관리합니다"
      icon={Briefcase}
      stats={stats}
      quickActions={quickActions}
      sections={sections}
    />
  );
}
