<!-- Tabler Dashboard -->
<div class="row row-deck row-cards">
    <!-- Stats Cards -->
    <div class="col-12">
        <div class="row row-cards">
            <div class="col-sm-6 col-lg-3">
                <div class="card card-sm">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-auto">
                                <span class="bg-primary text-white avatar">
                                    <i class="fas fa-briefcase"></i>
                                </span>
                            </div>
                            <div class="col">
                                <div class="font-weight-medium">
                                    포트폴리오 프로젝트
                                </div>
                                <div class="text-muted">
                                    <%= stats.portfolioCount || 0 %>개 프로젝트
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-sm-6 col-lg-3">
                <div class="card card-sm">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-auto">
                                <span class="bg-green text-white avatar">
                                    <i class="fas fa-cogs"></i>
                                </span>
                            </div>
                            <div class="col">
                                <div class="font-weight-medium">
                                    제공 서비스
                                </div>
                                <div class="text-muted">
                                    <%= stats.servicesCount || 0 %>개 서비스
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-sm-6 col-lg-3">
                <div class="card card-sm">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-auto">
                                <span class="bg-yellow text-white avatar">
                                    <i class="fas fa-envelope"></i>
                                </span>
                            </div>
                            <div class="col">
                                <div class="font-weight-medium">
                                    문의 메시지
                                </div>
                                <div class="text-muted">
                                    <%= stats.contactsCount || 0 %>개 메시지
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-sm-6 col-lg-3">
                <div class="card card-sm">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-auto">
                                <span class="bg-red text-white avatar">
                                    <i class="fas fa-users"></i>
                                </span>
                            </div>
                            <div class="col">
                                <div class="font-weight-medium">
                                    관리자 계정
                                </div>
                                <div class="text-muted">
                                    <%= stats.usersCount || 0 %>명 사용자
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Recent Portfolio Projects -->
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">최근 포트폴리오 프로젝트</h3>
            </div>
            <div class="card-body">
                <% if (recentPortfolio && recentPortfolio.length > 0) { %>
                    <div class="divide-y">
                        <% recentPortfolio.forEach(function(project, index) { %>
                            <div class="row <%= index < recentPortfolio.length - 1 ? 'py-2' : 'pt-2' %>">
                                <div class="col-auto">
                                    <span class="avatar avatar-sm bg-blue-lt">
                                        <i class="fas fa-code"></i>
                                    </span>
                                </div>
                                <div class="col">
                                    <div class="text-truncate">
                                        <strong><%= project.title %></strong>
                                    </div>
                                    <div class="text-muted">
                                        <%= project.category %> • 
                                        <%= project.createdAt ? project.createdAt.toLocaleDateString('ko-KR') : '날짜 없음' %>
                                    </div>
                                </div>
                                <div class="col-auto">
                                    <span class="badge bg-<%= project.status === 'completed' ? 'green' : project.status === 'in-progress' ? 'yellow' : 'blue' %>">
                                        <%= project.status === 'completed' ? '완료' : project.status === 'in-progress' ? '진행중' : '계획' %>
                                    </span>
                                </div>
                            </div>
                        <% }); %>
                    </div>
                    <div class="mt-3">
                        <a href="/admin/portfolio" class="btn btn-primary btn-sm w-100">
                            모든 프로젝트 보기
                        </a>
                    </div>
                <% } else { %>
                    <div class="empty">
                        <div class="empty-img">
                            <i class="fas fa-briefcase fa-3x text-muted"></i>
                        </div>
                        <p class="empty-title">포트폴리오가 없습니다</p>
                        <p class="empty-subtitle text-muted">
                            첫 번째 프로젝트를 추가해보세요
                        </p>
                        <div class="empty-action">
                            <a href="/admin/portfolio/add" class="btn btn-primary">
                                <i class="fas fa-plus"></i>
                                프로젝트 추가
                            </a>
                        </div>
                    </div>
                <% } %>
            </div>
        </div>
    </div>
    
    <!-- Recent Contact Messages -->
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">최근 문의 메시지</h3>
            </div>
            <div class="card-body">
                <% if (recentContacts && recentContacts.length > 0) { %>
                    <div class="divide-y">
                        <% recentContacts.forEach(function(contact, index) { %>
                            <div class="row <%= index < recentContacts.length - 1 ? 'py-2' : 'pt-2' %>">
                                <div class="col-auto">
                                    <span class="avatar avatar-sm">
                                        <%= contact.name ? contact.name.charAt(0).toUpperCase() : 'U' %>
                                    </span>
                                </div>
                                <div class="col">
                                    <div class="text-truncate">
                                        <strong><%= contact.name %></strong>
                                    </div>
                                    <div class="text-muted">
                                        <%= contact.email %> • 
                                        <%= contact.createdAt ? contact.createdAt.toLocaleDateString('ko-KR') : '날짜 없음' %>
                                    </div>
                                </div>
                                <div class="col-auto">
                                    <span class="badge bg-<%= contact.status === 'replied' ? 'green' : contact.status === 'pending' ? 'yellow' : 'blue' %>">
                                        <%= contact.status === 'replied' ? '답변완료' : contact.status === 'pending' ? '대기중' : '신규' %>
                                    </span>
                                </div>
                            </div>
                        <% }); %>
                    </div>
                    <div class="mt-3">
                        <a href="/admin/contacts" class="btn btn-warning btn-sm w-100">
                            모든 문의 보기
                        </a>
                    </div>
                <% } else { %>
                    <div class="empty">
                        <div class="empty-img">
                            <i class="fas fa-envelope fa-3x text-muted"></i>
                        </div>
                        <p class="empty-title">새로운 문의가 없습니다</p>
                        <p class="empty-subtitle text-muted">
                            고객 문의가 들어오면 여기에 표시됩니다
                        </p>
                    </div>
                <% } %>
            </div>
        </div>
    </div>
    
    <!-- Quick Actions -->
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">빠른 작업</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <a href="/admin/portfolio/add" class="card card-link bg-primary-lt">
                            <div class="card-body text-center">
                                <div class="text-primary mb-3">
                                    <i class="fas fa-plus fa-2x"></i>
                                </div>
                                <div class="font-weight-medium">새 프로젝트</div>
                                <div class="text-muted">포트폴리오에 추가</div>
                            </div>
                        </a>
                    </div>
                    
                    <div class="col-md-3">
                        <a href="/admin/services" class="card card-link bg-green-lt">
                            <div class="card-body text-center">
                                <div class="text-green mb-3">
                                    <i class="fas fa-cog fa-2x"></i>
                                </div>
                                <div class="font-weight-medium">서비스 관리</div>
                                <div class="text-muted">가격 및 내용 수정</div>
                            </div>
                        </a>
                    </div>
                    
                    <div class="col-md-3">
                        <a href="/admin/media" class="card card-link bg-yellow-lt">
                            <div class="card-body text-center">
                                <div class="text-yellow mb-3">
                                    <i class="fas fa-images fa-2x"></i>
                                </div>
                                <div class="font-weight-medium">미디어 업로드</div>
                                <div class="text-muted">이미지 및 파일 관리</div>
                            </div>
                        </a>
                    </div>
                    
                    <div class="col-md-3">
                        <a href="/admin/settings" class="card card-link bg-red-lt">
                            <div class="card-body text-center">
                                <div class="text-red mb-3">
                                    <i class="fas fa-wrench fa-2x"></i>
                                </div>
                                <div class="font-weight-medium">사이트 설정</div>
                                <div class="text-muted">전체 설정 관리</div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- System Status & Analytics -->
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">시스템 상태</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-6">
                        <div class="d-flex align-items-center">
                            <div class="me-3">
                                <i class="fas fa-server fa-2x text-green"></i>
                            </div>
                            <div>
                                <div class="h4 mb-0">99.2%</div>
                                <div class="text-muted">서버 업타임</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="d-flex align-items-center">
                            <div class="me-3">
                                <i class="fas fa-clock fa-2x text-blue"></i>
                            </div>
                            <div>
                                <div class="h4 mb-0">2.3초</div>
                                <div class="text-muted">평균 응답시간</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Telegram Bot Status -->
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">텔레그램 봇</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-6">
                        <div class="d-flex align-items-center">
                            <div class="me-3">
                                <i class="fab fa-telegram fa-2x text-green"></i>
                            </div>
                            <div>
                                <div class="h4 mb-0 text-green">연결됨</div>
                                <div class="text-muted">봇 상태</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="d-flex align-items-center">
                            <div class="me-3">
                                <i class="fas fa-paper-plane fa-2x text-blue"></i>
                            </div>
                            <div>
                                <div class="h4 mb-0">24</div>
                                <div class="text-muted">오늘 전송</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <a href="/admin/telegram" class="btn btn-outline-primary w-100">
                        텔레그램 설정
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>