// components/domain-stats-cards.tsx
"use client"

import * as React from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { 
  Users, 
  Clock, 
  Shield, 
  ShoppingCart, 
  TrendingUp, 
  Settings, 
  Building,
  AlertCircle
} from "lucide-react"
import { toast } from "sonner"
import { getUserDomainStats } from "../service"

interface DomainStatsCardsProps {
  onDomainFilter: (domain: string | null) => void
  currentFilter?: string | null
}

// 도메인별 설정
const domainConfig = {
  pending: {
    label: "승인 대기",
    description: "신규 사용자",
    icon: Clock,
    color: "bg-yellow-500",
    textColor: "text-yellow-700",
    bgColor: "bg-yellow-50",
    borderColor: "border-yellow-200"
  },
  evcp: {
    label: "전체 시스템", 
    description: "관리자급",
    icon: Shield,
    color: "bg-blue-500",
    textColor: "text-blue-700",
    bgColor: "bg-blue-50",
    borderColor: "border-blue-200"
  },
  procurement: {
    label: "구매관리팀",
    description: "구매/계약 관리",
    icon: ShoppingCart,
    color: "bg-green-500", 
    textColor: "text-green-700",
    bgColor: "bg-green-50",
    borderColor: "border-green-200"
  },
  sales: {
    label: "기술영업팀",
    description: "영업/프로젝트",
    icon: TrendingUp,
    color: "bg-purple-500",
    textColor: "text-purple-700", 
    bgColor: "bg-purple-50",
    borderColor: "border-purple-200"
  },
  engineering: {
    label: "설계관리팀",
    description: "설계/기술평가",
    icon: Settings,
    color: "bg-orange-500",
    textColor: "text-orange-700",
    bgColor: "bg-orange-50", 
    borderColor: "border-orange-200"
  },
    //   partners: {
    //     label: "협력업체",
    //     description: "외부 업체",
    //     icon: Building,
    //     color: "bg-indigo-500",
    //     textColor: "text-indigo-700",
    //     bgColor: "bg-indigo-50",
    //     borderColor: "border-indigo-200"
    //   }
}

interface DomainStats {
  domain: string
  count: number
}

export function DomainStatsCards({ onDomainFilter, currentFilter }: DomainStatsCardsProps) {
  const [stats, setStats] = React.useState<DomainStats[]>([])
  const [isLoading, setIsLoading] = React.useState(true)
  const [totalUsers, setTotalUsers] = React.useState(0)

  // 통계 데이터 로드
  React.useEffect(() => {
    const loadStats = async () => {
      setIsLoading(true)
      try {
        const result = await getUserDomainStats()
        if (result.success) {
          setStats(result.data)
          setTotalUsers(result.data.reduce((sum, item) => sum + item.count, 0))
        } else {
          toast.error(result.message)
        }
      } catch (error) {
        console.error("통계 로드 오류:", error)
        toast.error("통계를 불러오는 중 오류가 발생했습니다.")
      } finally {
        setIsLoading(false)
      }
    }

    loadStats()
  }, [])

  // 도메인별 카드 클릭 핸들러
  const handleDomainClick = (domain: string) => {
    if (currentFilter === domain) {
      // 이미 선택된 도메인이면 필터 해제
      onDomainFilter(null)
    } else {
      // 새로운 도메인 필터 적용
      onDomainFilter(domain)
    }
  }

  // pending 사용자 수 가져오기
  const pendingCount = stats.find(s => s.domain === "pending")?.count || 0

  if (isLoading) {
    return (
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
        {Array.from({ length: 6 }).map((_, i) => (
          <Card key={i} className="animate-pulse">
            <CardContent className="p-4">
              <div className="h-16 bg-gray-200 rounded"></div>
            </CardContent>
          </Card>
        ))}
      </div>
    )
  }

  return (
    <div className="space-y-4">
      {/* 요약 정보 */}
      <div className="flex items-center justify-between">
        <div>
          <h3 className="text-lg font-semibold">도메인별 사용자 현황</h3>
          <p className="text-sm text-muted-foreground">
            총 {totalUsers}명의 사용자가 등록되어 있습니다.
          </p>
        </div>
        
        {pendingCount > 0 && (
          <Button 
            variant="outline" 
            size="sm"
            onClick={() => handleDomainClick("pending")}
            className={`gap-2 ${currentFilter === "pending" ? "bg-yellow-50 border-yellow-300" : ""}`}
          >
            <AlertCircle className="h-4 w-4 text-yellow-600" />
            승인 대기 {pendingCount}명
          </Button>
        )}
      </div>

      {/* 도메인별 통계 카드 */}
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
        {Object.entries(domainConfig).map(([domain, config]) => {
          const domainStat = stats.find(s => s.domain === domain)
          const count = domainStat?.count || 0
          const isActive = currentFilter === domain
          const IconComponent = config.icon

          return (
            <Card 
              key={domain}
              className={`cursor-pointer transition-all hover:shadow-md ${
                isActive 
                  ? `${config.bgColor} ${config.borderColor} border-2` 
                  : "hover:bg-gray-50"
              }`}
              onClick={() => handleDomainClick(domain)}
            >
              <CardContent className="p-4">
                <div className="flex items-center space-x-3">
                  <div className={`p-2 rounded-full ${config.color}`}>
                    <IconComponent className="h-4 w-4 text-white" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center justify-between">
                      <p className={`text-sm font-medium ${isActive ? config.textColor : "text-gray-900"}`}>
                        {config.label}
                      </p>
                      <Badge 
                        variant={isActive ? "default" : "secondary"}
                        className="ml-2"
                      >
                        {count}
                      </Badge>
                    </div>
                    <p className="text-xs text-muted-foreground truncate">
                      {config.description}
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>
          )
        })}
      </div>

      {/* 필터 상태 표시 */}
      {currentFilter && (
        <div className="flex items-center gap-2">
          <span className="text-sm text-muted-foreground">필터 적용됨:</span>
          <Badge variant="outline" className="gap-1">
            {domainConfig[currentFilter as keyof typeof domainConfig]?.label || currentFilter}
            <button 
              onClick={() => onDomainFilter(null)}
              className="ml-1 hover:bg-gray-200 rounded-full p-0.5"
            >
              ×
            </button>
          </Badge>
        </div>
      )}
    </div>
  )
}