import { useState, useEffect } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Badge } from "./ui/badge";
import { Button } from "./ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
import { Progress } from "./ui/progress";
import { SystemAdminDashboard } from "./SystemAdminDashboard";
import { UserManagement } from "./UserManagement";
import MenuCustomization from "./MenuCustomization";
import { 
  Users, 
  Settings, 
  Database, 
  Shield, 
  Server,
  Activity,
  Bell,
  FileText,
  Download,
  Upload,
  RefreshCw,
  AlertTriangle,
  CheckCircle,
  Clock,
  TrendingUp,
  Lock,
  Key,
  HardDrive,
  Monitor,
  Wifi,
  Code,
  Eye,
  Search,
  Filter,
  Plus
} from "lucide-react";

interface SystemManagementProps {
  userRole?: string;
  defaultTab?: string;
}

export function SystemManagement({ userRole, defaultTab = "dashboard" }: SystemManagementProps) {
  const [activeTab, setActiveTab] = useState(defaultTab);
  
  // Update activeTab when defaultTab prop changes
  useEffect(() => {
    if (defaultTab) {
      setActiveTab(defaultTab);
    }
  }, [defaultTab]);

  // 시스템관리자가 아닌 경우 기본 인사관리 화면 표시
  if (userRole !== "SystemAdmin") {
    return (
      <div className="p-6 space-y-6 bg-background min-h-screen">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-3xl font-bold text-foreground">인사 관리</h1>
            <p className="text-muted-foreground mt-1">직원 정보 및 조직 관리</p>
          </div>
          <div className="flex space-x-3">
            <Button variant="outline">
              <Download className="w-4 h-4 mr-2" />
              인사 보고서
            </Button>
            <Button>
              <Upload className="w-4 h-4 mr-2" />
              데이터 가져오기
            </Button>
          </div>
        </div>

        {/* 인사 현황 개요 */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <Card className="samsung-card">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">전체 직원</CardTitle>
              <Users className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-primary">125</div>
              <p className="text-xs text-muted-foreground">명</p>
              <div className="flex items-center pt-2">
                <TrendingUp className="h-4 w-4 text-green-500 mr-1" />
                <span className="text-xs text-green-600">전월 대비 +3명</span>
              </div>
            </CardContent>
          </Card>

          <Card className="samsung-card">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">출근율</CardTitle>
              <CheckCircle className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-green-600">96.8%</div>
              <p className="text-xs text-muted-foreground">오늘 기준</p>
              <div className="flex items-center pt-2">
                <CheckCircle className="h-4 w-4 text-green-500 mr-1" />
                <span className="text-xs text-green-600">121명 출근</span>
              </div>
            </CardContent>
          </Card>

          <Card className="samsung-card">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">휴가 중</CardTitle>
              <Clock className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-orange-600">8</div>
              <p className="text-xs text-muted-foreground">명</p>
              <div className="flex items-center pt-2">
                <Clock className="h-4 w-4 text-orange-500 mr-1" />
                <span className="text-xs text-orange-600">연차 5명, 병가 3명</span>
              </div>
            </CardContent>
          </Card>

          <Card className="samsung-card">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">신규 입사</CardTitle>
              <Users className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-blue-600">3</div>
              <p className="text-xs text-muted-foreground">명 (이번 달)</p>
              <div className="flex items-center pt-2">
                <TrendingUp className="h-4 w-4 text-blue-500 mr-1" />
                <span className="text-xs text-blue-600">예정 2명 추가</span>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* 부서별 현황 */}
        <Card className="samsung-card">
          <CardHeader>
            <CardTitle>부서별 인력 현황</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              {[
                { name: "생산부", total: 45, present: 43, absent: 2 },
                { name: "품질부", total: 18, present: 18, absent: 0 },
                { name: "관리부", total: 22, present: 20, absent: 2 },
                { name: "영업부", total: 15, present: 14, absent: 1 },
                { name: "연구소", total: 12, present: 11, absent: 1 },
                { name: "구매부", total: 8, present: 8, absent: 0 },
                { name: "IT부", total: 3, present: 3, absent: 0 },
                { name: "재무부", total: 2, present: 2, absent: 0 }
              ].map((dept) => (
                <div key={dept.name} className="p-4 border rounded-2xl bg-gray-50/50">
                  <h4 className="font-semibold mb-2">{dept.name}</h4>
                  <div className="space-y-2">
                    <div className="flex justify-between text-sm">
                      <span>전체</span>
                      <span className="font-medium">{dept.total}명</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span>출근</span>
                      <span className="font-medium text-green-600">{dept.present}명</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span>결근</span>
                      <span className="font-medium text-red-600">{dept.absent}명</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    );
  }

  // 시스템관리자용 인터페이스
  return (
    <div className="p-6 space-y-6 bg-background min-h-screen">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold text-foreground">시스템 관리</h1>
          <p className="text-muted-foreground mt-1">SAM 시스템 전체 관리 및 설정</p>
        </div>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
        <TabsList className="grid w-full grid-cols-4 lg:grid-cols-8 bg-muted rounded-2xl p-1">
          <TabsTrigger value="dashboard" className="rounded-xl">
            <Activity className="w-4 h-4 mr-0 lg:mr-2" />
            <span className="hidden lg:inline">대시보드</span>
          </TabsTrigger>
          <TabsTrigger value="users" className="rounded-xl">
            <Users className="w-4 h-4 mr-0 lg:mr-2" />
            <span className="hidden lg:inline">사용자</span>
          </TabsTrigger>
          <TabsTrigger value="menu-customization" className="rounded-xl">
            <Code className="w-4 h-4 mr-0 lg:mr-2" />
            <span className="hidden lg:inline">메뉴</span>
          </TabsTrigger>
          <TabsTrigger value="permissions" className="rounded-xl">
            <Shield className="w-4 h-4 mr-0 lg:mr-2" />
            <span className="hidden lg:inline">권한</span>
          </TabsTrigger>
          <TabsTrigger value="system" className="rounded-xl">
            <Settings className="w-4 h-4 mr-0 lg:mr-2" />
            <span className="hidden lg:inline">시스템</span>
          </TabsTrigger>
          <TabsTrigger value="database" className="rounded-xl">
            <Database className="w-4 h-4 mr-0 lg:mr-2" />
            <span className="hidden lg:inline">DB</span>
          </TabsTrigger>
          <TabsTrigger value="monitoring" className="rounded-xl">
            <Monitor className="w-4 h-4 mr-0 lg:mr-2" />
            <span className="hidden lg:inline">모니터링</span>
          </TabsTrigger>
          <TabsTrigger value="security" className="rounded-xl">
            <Lock className="w-4 h-4 mr-0 lg:mr-2" />
            <span className="hidden lg:inline">보안</span>
          </TabsTrigger>
        </TabsList>

        <TabsContent value="dashboard">
          <SystemAdminDashboard />
        </TabsContent>

        <TabsContent value="users">
          <UserManagement />
        </TabsContent>

        <TabsContent value="menu-customization">
          <MenuCustomization />
        </TabsContent>

        <TabsContent value="permissions">
          <PermissionManagement />
        </TabsContent>

        <TabsContent value="system">
          <SystemSettings />
        </TabsContent>

        <TabsContent value="database">
          <DatabaseManagement />
        </TabsContent>

        <TabsContent value="monitoring">
          <SystemMonitoring />
        </TabsContent>

        <TabsContent value="security">
          <SecurityManagement />
        </TabsContent>
      </Tabs>
    </div>
  );
}

// 권한 관리 컴포넌트
function PermissionManagement() {
  return (
    <Card className="samsung-card">
      <CardHeader>
        <CardTitle className="flex items-center space-x-2">
          <Shield className="w-5 h-5" />
          <span>권한 관리</span>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* 역할별 권한 설정 */}
          <div className="space-y-4">
            <div className="flex justify-between items-center">
              <h3 className="text-lg font-semibold">역할별 권한 설정</h3>
              <Button size="sm">
                <Plus className="w-4 h-4 mr-2" />
                역할 추가
              </Button>
            </div>
            <div className="space-y-3">
              {[
                { role: "CEO", name: "대표이사", permissions: ["전체관리", "승인권한", "시스템설정"], count: 1, color: "bg-purple-500" },
                { role: "SystemAdmin", name: "시스템관리자", permissions: ["시스템관리", "사용자관리", "권한관리"], count: 1, color: "bg-blue-500" },
                { role: "ProductionManager", name: "생산관리자", permissions: ["생산관리", "품질관리", "재고관리"], count: 3, color: "bg-green-500" },
                { role: "QualityManager", name: "품질관리자", permissions: ["품질관리", "검사기록", "품질보고서"], count: 2, color: "bg-orange-500" },
                { role: "Worker", name: "작업자", permissions: ["작업등록", "작업조회"], count: 89, color: "bg-gray-500" }
              ].map((role) => (
                <div key={role.role} className="p-4 border rounded-lg bg-gray-50/50">
                  <div className="flex justify-between items-start mb-3">
                    <div>
                      <div className="flex items-center space-x-2">
                        <h4 className="font-medium">{role.name}</h4>
                        <Badge className={`${role.color} text-white`}>
                          {role.count}명
                        </Badge>
                      </div>
                      <p className="text-sm text-muted-foreground mt-1">{role.role}</p>
                    </div>
                    <Button size="sm" variant="outline">
                      <Key className="w-3 h-3 mr-1" />
                      편집
                    </Button>
                  </div>
                  <div className="space-y-1">
                    {role.permissions.map((permission) => (
                      <Badge key={permission} variant="secondary" className="mr-1 mb-1">
                        {permission}
                      </Badge>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* 모듈별 접근 권한 */}
          <div className="space-y-4">
            <div className="flex justify-between items-center">
              <h3 className="text-lg font-semibold">모듈별 접근 권한</h3>
              <Button size="sm" variant="outline">
                <Settings className="w-4 h-4 mr-2" />
                권한 매트릭스
              </Button>
            </div>
            <div className="space-y-3">
              {[
                { module: "대시보드", roles: ["CEO", "관리자", "매니저"], icon: Activity, color: "border-l-blue-500" },
                { module: "재무관리", roles: ["CEO", "재무담당자"], icon: FileText, color: "border-l-green-500" },
                { module: "운영관리", roles: ["CEO", "생산관리자", "품질관리자"], icon: Settings, color: "border-l-orange-500" },
                { module: "인사관리", roles: ["CEO", "인사담당자"], icon: Users, color: "border-l-purple-500" },
                { module: "품질관리", roles: ["CEO", "품질관리자", "생산관리자"], icon: CheckCircle, color: "border-l-red-500" },
                { module: "승인관리", roles: ["CEO", "관리자"], icon: Shield, color: "border-l-yellow-500" },
                { module: "시스템관리", roles: ["SystemAdmin"], icon: Lock, color: "border-l-indigo-500" }
              ].map((module) => (
                <div key={module.module} className={`p-4 border-l-4 ${module.color} border rounded-lg bg-gray-50/50`}>
                  <div className="flex justify-between items-center mb-2">
                    <div className="flex items-center space-x-2">
                      <module.icon className="w-4 h-4 text-muted-foreground" />
                      <h4 className="font-medium">{module.module}</h4>
                    </div>
                    <Button size="sm" variant="outline">편집</Button>
                  </div>
                  <div className="flex flex-wrap gap-1">
                    {module.roles.map((role) => (
                      <Badge key={role} className="bg-blue-500 text-white">
                        {role}
                      </Badge>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

// 시스템 설정 컴포넌트
function SystemSettings() {
  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card className="samsung-card">
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Settings className="w-5 h-5" />
              <span>일반 설정</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex justify-between items-center p-3 border rounded-lg">
              <div>
                <h4 className="font-medium">자동 백업</h4>
                <p className="text-sm text-muted-foreground">매일 새벽 2시 자동 백업 실행</p>
              </div>
              <div className="flex items-center space-x-2">
                <CheckCircle className="w-5 h-5 text-green-500" />
                <span className="text-sm text-green-600">활성</span>
              </div>
            </div>
            <div className="flex justify-between items-center p-3 border rounded-lg">
              <div>
                <h4 className="font-medium">시스템 모니터링</h4>
                <p className="text-sm text-muted-foreground">실시간 시스템 상태 모니터링</p>
              </div>
              <div className="flex items-center space-x-2">
                <CheckCircle className="w-5 h-5 text-green-500" />
                <span className="text-sm text-green-600">활성</span>
              </div>
            </div>
            <div className="flex justify-between items-center p-3 border rounded-lg">
              <div>
                <h4 className="font-medium">로그 자동 정리</h4>
                <p className="text-sm text-muted-foreground">30일 이상 된 로그 자동 삭제</p>
              </div>
              <div className="flex items-center space-x-2">
                <CheckCircle className="w-5 h-5 text-green-500" />
                <span className="text-sm text-green-600">활성</span>
              </div>
            </div>
            <div className="flex justify-between items-center p-3 border rounded-lg">
              <div>
                <h4 className="font-medium">성능 최적화</h4>
                <p className="text-sm text-muted-foreground">주간 자동 성능 최적화</p>
              </div>
              <div className="flex items-center space-x-2">
                <Clock className="w-5 h-5 text-orange-500" />
                <span className="text-sm text-orange-600">예약됨</span>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card className="samsung-card">
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Shield className="w-5 h-5" />
              <span>보안 설정</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex justify-between items-center p-3 border rounded-lg">
              <div>
                <h4 className="font-medium">비밀번호 정책</h4>
                <p className="text-sm text-muted-foreground">8자 이상, 특수문자 포함</p>
              </div>
              <div className="flex items-center space-x-2">
                <CheckCircle className="w-5 h-5 text-green-500" />
                <span className="text-sm text-green-600">적용</span>
              </div>
            </div>
            <div className="flex justify-between items-center p-3 border rounded-lg">
              <div>
                <h4 className="font-medium">로그인 시도 제한</h4>
                <p className="text-sm text-muted-foreground">5회 실패 시 계정 잠금</p>
              </div>
              <div className="flex items-center space-x-2">
                <CheckCircle className="w-5 h-5 text-green-500" />
                <span className="text-sm text-green-600">활성</span>
              </div>
            </div>
            <div className="flex justify-between items-center p-3 border rounded-lg">
              <div>
                <h4 className="font-medium">세션 만료</h4>
                <p className="text-sm text-muted-foreground">8시간 비활성 시 자동 로그아웃</p>
              </div>
              <div className="flex items-center space-x-2">
                <CheckCircle className="w-5 h-5 text-green-500" />
                <span className="text-sm text-green-600">활성</span>
              </div>
            </div>
            <div className="flex justify-between items-center p-3 border rounded-lg">
              <div>
                <h4 className="font-medium">2단계 인증</h4>
                <p className="text-sm text-muted-foreground">관리자 계정 2FA 필수</p>
              </div>
              <div className="flex items-center space-x-2">
                <AlertTriangle className="w-5 h-5 text-yellow-500" />
                <span className="text-sm text-yellow-600">선택적</span>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* 시스템 정보 */}
      <Card className="samsung-card">
        <CardHeader>
          <CardTitle className="flex items-center space-x-2">
            <Server className="w-5 h-5" />
            <span>시스템 정보</span>
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div className="p-4 border rounded-lg bg-gray-50/50">
              <h4 className="font-medium mb-2">애플리케이션</h4>
              <div className="space-y-1 text-sm">
                <div className="flex justify-between">
                  <span>버전</span>
                  <span className="font-medium">v2.1.0</span>
                </div>
                <div className="flex justify-between">
                  <span>빌드</span>
                  <span className="font-medium">20241230</span>
                </div>
                <div className="flex justify-between">
                  <span>환경</span>
                  <span className="font-medium">Production</span>
                </div>
              </div>
            </div>
            <div className="p-4 border rounded-lg bg-gray-50/50">
              <h4 className="font-medium mb-2">데이터베이스</h4>
              <div className="space-y-1 text-sm">
                <div className="flex justify-between">
                  <span>엔진</span>
                  <span className="font-medium">PostgreSQL</span>
                </div>
                <div className="flex justify-between">
                  <span>버전</span>
                  <span className="font-medium">15.4</span>
                </div>
                <div className="flex justify-between">
                  <span>크기</span>
                  <span className="font-medium">2.3GB</span>
                </div>
              </div>
            </div>
            <div className="p-4 border rounded-lg bg-gray-50/50">
              <h4 className="font-medium mb-2">서버</h4>
              <div className="space-y-1 text-sm">
                <div className="flex justify-between">
                  <span>OS</span>
                  <span className="font-medium">Ubuntu 22.04</span>
                </div>
                <div className="flex justify-between">
                  <span>Node.js</span>
                  <span className="font-medium">v18.17.0</span>
                </div>
                <div className="flex justify-between">
                  <span>메모리</span>
                  <span className="font-medium">16GB</span>
                </div>
              </div>
            </div>
            <div className="p-4 border rounded-lg bg-gray-50/50">
              <h4 className="font-medium mb-2">라이센스</h4>
              <div className="space-y-1 text-sm">
                <div className="flex justify-between">
                  <span>타입</span>
                  <span className="font-medium">Enterprise</span>
                </div>
                <div className="flex justify-between">
                  <span>만료일</span>
                  <span className="font-medium">2025-12-31</span>
                </div>
                <div className="flex justify-between">
                  <span>사용자 수</span>
                  <span className="font-medium">무제한</span>
                </div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

// 데이터베이스 관리 컴포넌트
function DatabaseManagement() {
  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card className="samsung-card">
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Download className="w-5 h-5" />
              <span>백업 관리</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="p-4 border rounded-lg bg-green-50">
              <div className="flex justify-between items-center mb-2">
                <span className="font-medium">마지막 백업</span>
                <Badge className="bg-green-500 text-white">성공</Badge>
              </div>
              <div className="space-y-2 text-sm">
                <div className="flex justify-between">
                  <span>시간</span>
                  <span className="font-medium">2024-12-30 02:00</span>
                </div>
                <div className="flex justify-between">
                  <span>크기</span>
                  <span className="font-medium">2.3GB</span>
                </div>
                <div className="flex justify-between">
                  <span>소요시간</span>
                  <span className="font-medium">3분 45초</span>
                </div>
              </div>
            </div>
            <div className="space-y-2">
              <h4 className="font-medium">백업 설정</h4>
              <div className="space-y-2 text-sm">
                <div className="flex justify-between">
                  <span>자동 백업</span>
                  <span className="font-medium text-green-600">활성</span>
                </div>
                <div className="flex justify-between">
                  <span>주기</span>
                  <span className="font-medium">매일 02:00</span>
                </div>
                <div className="flex justify-between">
                  <span>보관 기간</span>
                  <span className="font-medium">30일</span>
                </div>
              </div>
            </div>
            <div className="flex space-x-2 pt-4">
              <Button className="flex-1">
                <Download className="w-4 h-4 mr-2" />
                백업 생성
              </Button>
              <Button variant="outline" className="flex-1">
                <Upload className="w-4 h-4 mr-2" />
                복원
              </Button>
            </div>
          </CardContent>
        </Card>

        <Card className="samsung-card">
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Activity className="w-5 h-5" />
              <span>성능 최적화</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-3">
              <div className="flex justify-between items-center p-3 border rounded-lg">
                <span className="font-medium">쿼리 성능</span>
                <span className="font-medium text-green-600">98.5%</span>
              </div>
              <div className="flex justify-between items-center p-3 border rounded-lg">
                <span className="font-medium">인덱스 최적화</span>
                <span className="font-medium text-blue-600">완료</span>
              </div>
              <div className="flex justify-between items-center p-3 border rounded-lg">
                <span className="font-medium">통계 업데이트</span>
                <span className="font-medium text-muted-foreground">1시간 전</span>
              </div>
              <div className="flex justify-between items-center p-3 border rounded-lg">
                <span className="font-medium">캐시 효율성</span>
                <span className="font-medium text-green-600">94.2%</span>
              </div>
            </div>
            <Button className="w-full mt-4">
              <RefreshCw className="w-4 h-4 mr-2" />
              성능 최적화 실행
            </Button>
          </CardContent>
        </Card>
      </div>

      {/* 데이터베이스 상태 */}
      <Card className="samsung-card">
        <CardHeader>
          <CardTitle className="flex items-center space-x-2">
            <Database className="w-5 h-5" />
            <span>데이터베이스 상태</span>
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="space-y-4">
              <h4 className="font-medium">연결 상태</h4>
              <div className="space-y-3">
                <div>
                  <div className="flex justify-between mb-1">
                    <span className="text-sm">활성 연결</span>
                    <span className="text-sm font-medium">45/100</span>
                  </div>
                  <Progress value={45} className="h-2" />
                </div>
                <div>
                  <div className="flex justify-between mb-1">
                    <span className="text-sm">대기 연결</span>
                    <span className="text-sm font-medium">3</span>
                  </div>
                  <Progress value={3} className="h-2" />
                </div>
              </div>
            </div>

            <div className="space-y-4">
              <h4 className="font-medium">스토리지</h4>
              <div className="space-y-3">
                <div>
                  <div className="flex justify-between mb-1">
                    <span className="text-sm">데이터 크기</span>
                    <span className="text-sm font-medium">2.3GB</span>
                  </div>
                  <Progress value={23} className="h-2" />
                </div>
                <div>
                  <div className="flex justify-between mb-1">
                    <span className="text-sm">인덱스 크기</span>
                    <span className="text-sm font-medium">890MB</span>
                  </div>
                  <Progress value={8.9} className="h-2" />
                </div>
              </div>
            </div>

            <div className="space-y-4">
              <h4 className="font-medium">성능 지표</h4>
              <div className="space-y-3">
                <div>
                  <div className="flex justify-between mb-1">
                    <span className="text-sm">쿼리/초</span>
                    <span className="text-sm font-medium">1,250</span>
                  </div>
                  <Progress value={75} className="h-2" />
                </div>
                <div>
                  <div className="flex justify-between mb-1">
                    <span className="text-sm">응답시간</span>
                    <span className="text-sm font-medium">12ms</span>
                  </div>
                  <Progress value={12} className="h-2" />
                </div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

// 시스템 모니터링 컴포넌트
function SystemMonitoring() {
  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card className="samsung-card">
          <CardHeader>
            <CardTitle className="text-center flex flex-col items-center space-y-2">
              <Server className="w-8 h-8 text-green-500" />
              <span>서버 상태</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="text-center">
            <div className="text-3xl font-bold text-green-600 mb-2">정상</div>
            <p className="text-sm text-muted-foreground mb-4">모든 서비스 가동 중</p>
            <div className="space-y-2 text-sm">
              <div className="flex justify-between">
                <span>가동시간</span>
                <span className="font-medium">28일 14시간</span>
              </div>
              <div className="flex justify-between">
                <span>응답시간</span>
                <span className="font-medium">12ms</span>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card className="samsung-card">
          <CardHeader>
            <CardTitle className="text-center flex flex-col items-center space-y-2">
              <Wifi className="w-8 h-8 text-blue-500" />
              <span>네트워크</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="text-center">
            <div className="text-3xl font-bold text-blue-600 mb-2">안정</div>
            <p className="text-sm text-muted-foreground mb-4">지연시간: 12ms</p>
            <div className="space-y-2 text-sm">
              <div className="flex justify-between">
                <span>업로드</span>
                <span className="font-medium">2.3 MB/s</span>
              </div>
              <div className="flex justify-between">
                <span>다운로드</span>
                <span className="font-medium">5.7 MB/s</span>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card className="samsung-card">
          <CardHeader>
            <CardTitle className="text-center flex flex-col items-center space-y-2">
              <HardDrive className="w-8 h-8 text-orange-500" />
              <span>저장소</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="text-center">
            <div className="text-3xl font-bold text-orange-600 mb-2">주의</div>
            <p className="text-sm text-muted-foreground mb-4">사용률: 78%</p>
            <div className="space-y-2 text-sm">
              <div className="flex justify-between">
                <span>사용량</span>
                <span className="font-medium">780GB / 1TB</span>
              </div>
              <div className="flex justify-between">
                <span>여유공간</span>
                <span className="font-medium">220GB</span>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* 실시간 리소스 모니터링 */}
      <Card className="samsung-card">
        <CardHeader>
          <CardTitle className="flex items-center space-x-2">
            <Activity className="w-5 h-5" />
            <span>실시간 리소스 모니터링</span>
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div className="space-y-3">
              <h4 className="font-medium flex items-center space-x-2">
                <div className="w-3 h-3 bg-blue-500 rounded-full"></div>
                <span>CPU 사용률</span>
              </h4>
              <div className="text-2xl font-bold">45%</div>
              <Progress value={45} className="h-3" />
              <p className="text-sm text-muted-foreground">평균: 32%</p>
            </div>

            <div className="space-y-3">
              <h4 className="font-medium flex items-center space-x-2">
                <div className="w-3 h-3 bg-green-500 rounded-full"></div>
                <span>메모리 사용률</span>
              </h4>
              <div className="text-2xl font-bold">62%</div>
              <Progress value={62} className="h-3" />
              <p className="text-sm text-muted-foreground">10.2GB / 16GB</p>
            </div>

            <div className="space-y-3">
              <h4 className="font-medium flex items-center space-x-2">
                <div className="w-3 h-3 bg-orange-500 rounded-full"></div>
                <span>디스크 I/O</span>
              </h4>
              <div className="text-2xl font-bold">23%</div>
              <Progress value={23} className="h-3" />
              <p className="text-sm text-muted-foreground">읽기: 45MB/s</p>
            </div>

            <div className="space-y-3">
              <h4 className="font-medium flex items-center space-x-2">
                <div className="w-3 h-3 bg-purple-500 rounded-full"></div>
                <span>네트워크</span>
              </h4>
              <div className="text-2xl font-bold">12%</div>
              <Progress value={12} className="h-3" />
              <p className="text-sm text-muted-foreground">5.7MB/s</p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

// 보안 관리 컴포넌트
function SecurityManagement() {
  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card className="samsung-card">
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Shield className="w-5 h-5" />
              <span>보안 상태</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="p-4 border rounded-lg bg-green-50">
              <div className="flex justify-between items-center mb-2">
                <span className="font-medium">전체 위협 수준</span>
                <Badge className="bg-green-500 text-white">낮음</Badge>
              </div>
              <div className="space-y-2 text-sm">
                <div className="flex justify-between">
                  <span>차단된 공격</span>
                  <span className="font-medium">12건 (오늘)</span>
                </div>
                <div className="flex justify-between">
                  <span>보안 이벤트</span>
                  <span className="font-medium">3건</span>
                </div>
                <div className="flex justify-between">
                  <span>마지막 스캔</span>
                  <span className="font-medium">2시간 전</span>
                </div>
              </div>
            </div>
            <Button className="w-full">
              <Shield className="w-4 h-4 mr-2" />
              보안 스캔 실행
            </Button>
          </CardContent>
        </Card>

        <Card className="samsung-card">
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <Lock className="w-5 h-5" />
              <span>접근 통제</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-3">
              <div className="flex justify-between items-center p-3 border rounded-lg">
                <span className="font-medium">활성 세션</span>
                <span className="font-medium text-blue-600">89개</span>
              </div>
              <div className="flex justify-between items-center p-3 border rounded-lg">
                <span className="font-medium">의심스러운 로그인</span>
                <span className="font-medium text-green-600">0건</span>
              </div>
              <div className="flex justify-between items-center p-3 border rounded-lg">
                <span className="font-medium">차단된 IP</span>
                <span className="font-medium text-orange-600">3개</span>
              </div>
              <div className="flex justify-between items-center p-3 border rounded-lg">
                <span className="font-medium">실패한 로그인</span>
                <span className="font-medium text-red-600">5회</span>
              </div>
            </div>
            <Button variant="outline" className="w-full">
              <Eye className="w-4 h-4 mr-2" />
              로그 상세보기
            </Button>
          </CardContent>
        </Card>
      </div>

      {/* 보안 이벤트 로그 */}
      <Card className="samsung-card">
        <CardHeader>
          <CardTitle className="flex items-center justify-between">
            <div className="flex items-center space-x-2">
              <FileText className="w-5 h-5" />
              <span>최근 보안 이벤트</span>
            </div>
            <Button size="sm" variant="outline">
              <Filter className="w-4 h-4 mr-2" />
              필터
            </Button>
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            {[
              { time: "09:15", event: "성공적인 로그인", user: "김대표", ip: "192.168.1.100", severity: "정보", color: "border-l-blue-500 bg-blue-50" },
              { time: "09:12", event: "비정상 접근 차단", user: "Unknown", ip: "203.142.15.23", severity: "경고", color: "border-l-orange-500 bg-orange-50" },
              { time: "08:45", event: "권한 변경", user: "최시스템", ip: "192.168.1.105", severity: "정보", color: "border-l-blue-500 bg-blue-50" },
              { time: "08:30", event: "다중 로그인 실패", user: "이생산", ip: "192.168.1.110", severity: "주의", color: "border-l-yellow-500 bg-yellow-50" },
              { time: "08:15", event: "백업 완료", user: "System", ip: "Local", severity: "정보", color: "border-l-green-500 bg-green-50" }
            ].map((event, index) => (
              <div key={index} className={`p-4 border-l-4 ${event.color} border rounded-lg`}>
                <div className="flex justify-between items-start">
                  <div className="flex-1">
                    <div className="flex items-center space-x-2 mb-1">
                      <span className="font-medium">{event.event}</span>
                      <Badge className={`text-xs ${
                        event.severity === '정보' ? 'bg-blue-500 text-white' :
                        event.severity === '주의' ? 'bg-yellow-500 text-white' :
                        event.severity === '경고' ? 'bg-orange-500 text-white' : 'bg-red-500 text-white'
                      }`}>
                        {event.severity}
                      </Badge>
                    </div>
                    <div className="text-sm text-muted-foreground">
                      사용자: {event.user} | IP: {event.ip}
                    </div>
                  </div>
                  <div className="text-sm text-muted-foreground flex items-center">
                    <Clock className="w-3 h-3 mr-1" />
                    {event.time}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}