<!-- Dashboard Content -->
<div class="row">
    <!-- Stats Cards -->
    <div class="col-lg-3 col-6">
        <div class="info-box">
            <span class="info-box-icon bg-info elevation-1">
                <i class="fas fa-briefcase"></i>
            </span>
            <div class="info-box-content">
                <span class="info-box-text">포트폴리오 프로젝트</span>
                <span class="info-box-number"><%= stats.portfolioCount || 0 %></span>
                <div class="progress">
                    <div class="progress-bar bg-info" style="width: 70%"></div>
                </div>
                <span class="progress-description">
                    70% 완료된 프로젝트
                </span>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-6">
        <div class="info-box">
            <span class="info-box-icon bg-success elevation-1">
                <i class="fas fa-cogs"></i>
            </span>
            <div class="info-box-content">
                <span class="info-box-text">제공 서비스</span>
                <span class="info-box-number"><%= stats.servicesCount || 0 %></span>
                <div class="progress">
                    <div class="progress-bar bg-success" style="width: 100%"></div>
                </div>
                <span class="progress-description">
                    모든 서비스 활성화
                </span>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-6">
        <div class="info-box">
            <span class="info-box-icon bg-warning elevation-1">
                <i class="fas fa-envelope"></i>
            </span>
            <div class="info-box-content">
                <span class="info-box-text">문의 메시지</span>
                <span class="info-box-number"><%= stats.contactsCount || 0 %></span>
                <div class="progress">
                    <div class="progress-bar bg-warning" style="width: 60%"></div>
                </div>
                <span class="progress-description">
                    60% 응답 완료
                </span>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-6">
        <div class="info-box">
            <span class="info-box-icon bg-danger elevation-1">
                <i class="fas fa-users"></i>
            </span>
            <div class="info-box-content">
                <span class="info-box-text">관리자 계정</span>
                <span class="info-box-number"><%= stats.usersCount || 0 %></span>
                <div class="progress">
                    <div class="progress-bar bg-danger" style="width: 100%"></div>
                </div>
                <span class="progress-description">
                    모든 계정 활성화
                </span>
            </div>
        </div>
    </div>
</div>

<!-- Main Content Row -->
<div class="row">
    <!-- Recent Portfolio Projects -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-briefcase mr-1"></i>
                    최근 포트폴리오 프로젝트
                </h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>
            </div>
            <div class="card-body">
                <% if (recentPortfolio && recentPortfolio.length > 0) { %>
                    <ul class="list-unstyled">
                        <% recentPortfolio.forEach(function(project, index) { %>
                            <li class="d-flex align-items-center <%= index < recentPortfolio.length - 1 ? 'border-bottom pb-3 mb-3' : '' %>">
                                <div class="flex-shrink-0">
                                    <span class="badge badge-info badge-pill">
                                        <i class="fas fa-code"></i>
                                    </span>
                                </div>
                                <div class="flex-grow-1 ml-3">
                                    <h6 class="mb-1 font-weight-bold"><%= project.title %></h6>
                                    <p class="text-muted mb-1"><%= project.category %></p>
                                    <small class="text-muted">
                                        <i class="fas fa-calendar mr-1"></i>
                                        <%= project.createdAt ? project.createdAt.toLocaleDateString('ko-KR') : '날짜 없음' %>
                                    </small>
                                </div>
                                <div class="flex-shrink-0">
                                    <span class="badge badge-<%= project.status === 'completed' ? 'success' : project.status === 'in-progress' ? 'warning' : 'secondary' %>">
                                        <%= project.status === 'completed' ? '완료' : project.status === 'in-progress' ? '진행중' : '계획' %>
                                    </span>
                                </div>
                            </li>
                        <% }); %>
                    </ul>
                    <div class="text-center mt-3">
                        <a href="/admin/portfolio" class="btn btn-primary btn-sm">
                            <i class="fas fa-eye mr-1"></i>
                            모든 프로젝트 보기
                        </a>
                    </div>
                <% } else { %>
                    <div class="text-center py-4">
                        <i class="fas fa-briefcase fa-3x text-muted mb-3"></i>
                        <p class="text-muted">아직 포트폴리오 프로젝트가 없습니다.</p>
                        <a href="/admin/portfolio/add" class="btn btn-primary btn-sm">
                            <i class="fas fa-plus mr-1"></i>
                            첫 번째 프로젝트 추가
                        </a>
                    </div>
                <% } %>
            </div>
        </div>
    </div>

    <!-- Recent Contact Messages -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-envelope mr-1"></i>
                    최근 문의 메시지
                </h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>
            </div>
            <div class="card-body">
                <% if (recentContacts && recentContacts.length > 0) { %>
                    <ul class="list-unstyled">
                        <% recentContacts.forEach(function(contact, index) { %>
                            <li class="d-flex align-items-center <%= index < recentContacts.length - 1 ? 'border-bottom pb-3 mb-3' : '' %>">
                                <div class="flex-shrink-0">
                                    <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                        <%= contact.name ? contact.name.charAt(0).toUpperCase() : 'U' %>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ml-3">
                                    <h6 class="mb-1 font-weight-bold"><%= contact.name %></h6>
                                    <p class="text-muted mb-1"><%= contact.email %></p>
                                    <small class="text-muted">
                                        <i class="fas fa-clock mr-1"></i>
                                        <%= contact.createdAt ? contact.createdAt.toLocaleDateString('ko-KR') : '날짜 없음' %>
                                    </small>
                                </div>
                                <div class="flex-shrink-0">
                                    <span class="badge badge-<%= contact.status === 'replied' ? 'success' : contact.status === 'pending' ? 'warning' : 'secondary' %>">
                                        <%= contact.status === 'replied' ? '답변완료' : contact.status === 'pending' ? '대기중' : '신규' %>
                                    </span>
                                </div>
                            </li>
                        <% }); %>
                    </ul>
                    <div class="text-center mt-3">
                        <a href="/admin/contacts" class="btn btn-warning btn-sm">
                            <i class="fas fa-envelope-open mr-1"></i>
                            모든 문의 보기
                        </a>
                    </div>
                <% } else { %>
                    <div class="text-center py-4">
                        <i class="fas fa-envelope fa-3x text-muted mb-3"></i>
                        <p class="text-muted">새로운 문의가 없습니다.</p>
                        <small class="text-muted">고객 문의가 들어오면 여기에 표시됩니다.</small>
                    </div>
                <% } %>
            </div>
        </div>
    </div>
</div>

<!-- Quick Actions & Tools -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-bolt mr-1"></i>
                    빠른 작업
                </h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-3 col-md-6">
                        <div class="info-box bg-gradient-info">
                            <span class="info-box-icon">
                                <i class="fas fa-plus"></i>
                            </span>
                            <div class="info-box-content">
                                <span class="info-box-text">새 프로젝트</span>
                                <span class="info-box-number">추가하기</span>
                                <div class="progress">
                                    <div class="progress-bar" style="width: 100%"></div>
                                </div>
                                <a href="/admin/portfolio/add" class="progress-description text-white">
                                    포트폴리오에 새 프로젝트 추가 →
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6">
                        <div class="info-box bg-gradient-success">
                            <span class="info-box-icon">
                                <i class="fas fa-cog"></i>
                            </span>
                            <div class="info-box-content">
                                <span class="info-box-text">서비스 관리</span>
                                <span class="info-box-number">설정</span>
                                <div class="progress">
                                    <div class="progress-bar" style="width: 100%"></div>
                                </div>
                                <a href="/admin/services" class="progress-description text-white">
                                    서비스 가격 및 내용 수정 →
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6">
                        <div class="info-box bg-gradient-warning">
                            <span class="info-box-icon">
                                <i class="fas fa-images"></i>
                            </span>
                            <div class="info-box-content">
                                <span class="info-box-text">미디어</span>
                                <span class="info-box-number">업로드</span>
                                <div class="progress">
                                    <div class="progress-bar" style="width: 100%"></div>
                                </div>
                                <a href="/admin/media" class="progress-description text-white">
                                    이미지 및 파일 관리 →
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6">
                        <div class="info-box bg-gradient-danger">
                            <span class="info-box-icon">
                                <i class="fas fa-wrench"></i>
                            </span>
                            <div class="info-box-content">
                                <span class="info-box-text">사이트 설정</span>
                                <span class="info-box-number">관리</span>
                                <div class="progress">
                                    <div class="progress-bar" style="width: 100%"></div>
                                </div>
                                <a href="/admin/settings" class="progress-description text-white">
                                    전체 사이트 설정 변경 →
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- System Status -->
<div class="row">
    <div class="col-md-6">
        <div class="card card-primary">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-server mr-1"></i>
                    시스템 상태
                </h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-6">
                        <div class="description-block border-right">
                            <span class="description-percentage text-success">
                                <i class="fas fa-caret-up"></i> 99.2%
                            </span>
                            <h5 class="description-header">서버 업타임</h5>
                            <span class="description-text">지난 30일</span>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="description-block">
                            <span class="description-percentage text-info">
                                <i class="fas fa-caret-up"></i> 2.3초
                            </span>
                            <h5 class="description-header">평균 응답시간</h5>
                            <span class="description-text">페이지 로딩</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card card-success">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fab fa-telegram mr-1"></i>
                    텔레그램 봇 상태
                </h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-6">
                        <div class="description-block border-right">
                            <span class="description-percentage text-success">
                                <i class="fas fa-check-circle"></i> 연결됨
                            </span>
                            <h5 class="description-header">봇 상태</h5>
                            <span class="description-text">정상 작동</span>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="description-block">
                            <span class="description-percentage text-info">
                                <i class="fas fa-paper-plane"></i> 24개
                            </span>
                            <h5 class="description-header">전송된 알림</h5>
                            <span class="description-text">오늘</span>
                        </div>
                    </div>
                </div>
                <div class="text-center mt-2">
                    <a href="/admin/telegram" class="btn btn-success btn-sm">
                        <i class="fab fa-telegram mr-1"></i>
                        텔레그램 설정
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>