{% extends "base.html" %}

{% block title %}머신 상세 정보 - 팜큐 약국 관리 시스템{% endblock %}

{% block breadcrumb %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ url_for('dashboard') }}">대시보드</a></li>
        <li class="breadcrumb-item"><a href="{{ url_for('machine_list') }}">머신 관리</a></li>
        <li class="breadcrumb-item active">{{ machine.given_name or machine.hostname }}</li>
    </ol>
</nav>
{% endblock %}

{% block content %}
<!-- 머신 정보 헤더 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center">
                <div class="me-3">
                    {% if is_online %}
                        <i class="fas fa-desktop fa-3x text-success"></i>
                    {% else %}
                        <i class="fas fa-desktop fa-3x text-muted"></i>
                    {% endif %}
                </div>
                <div>
                    <h1 class="h2 mb-0">{{ machine.given_name or machine.hostname }}</h1>
                    <p class="text-muted mb-1">{{ machine.hostname }}</p>
                    <div class="d-flex gap-2 align-items-center">
                        {% if is_online %}
                            <span class="badge bg-success">
                                <i class="fas fa-circle"></i> 온라인
                            </span>
                        {% else %}
                            <span class="badge bg-danger">
                                <i class="fas fa-circle"></i> 오프라인
                            </span>
                        {% endif %}
                        <small class="text-muted">마지막 접속: {{ last_seen_humanized }}</small>
                    </div>
                </div>
            </div>
            <div class="d-flex gap-2">
                <button class="btn btn-outline-secondary" onclick="refreshMachineDetail()">
                    <i class="fas fa-sync-alt"></i> 새로고침
                </button>
                {% if is_online %}
                <button class="btn btn-outline-warning">
                    <i class="fas fa-redo"></i> 재시작
                </button>
                {% endif %}
                <button class="btn btn-outline-info" onclick="showMonitoringModal()">
                    <i class="fas fa-chart-line"></i> 실시간 모니터링
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 기본 정보 및 네트워크 -->
<div class="row mb-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-info-circle"></i> 기본 정보</h5>
            </div>
            <div class="card-body">
                <table class="table table-borderless">
                    <tr>
                        <th width="30%">머신 ID</th>
                        <td>{{ machine.id }}</td>
                    </tr>
                    <tr>
                        <th>호스트명</th>
                        <td>{{ machine.hostname }}</td>
                    </tr>
                    <tr>
                        <th>표시 이름</th>
                        <td>{{ machine.given_name or '미설정' }}</td>
                    </tr>
                    <tr>
                        <th>사용자</th>
                        <td>
                            {% if machine.user %}
                                <span class="badge bg-primary">{{ machine.user.name }}</span>
                            {% else %}
                                <span class="text-muted">미지정</span>
                            {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <th>등록 방식</th>
                        <td>{{ machine.register_method or '알 수 없음' }}</td>
                    </tr>
                    <tr>
                        <th>등록일</th>
                        <td>
                            {% if machine.created_at %}
                                {% if machine.created_at.__class__.__name__ == 'datetime' %}
                                    {{ machine.created_at.strftime('%Y년 %m월 %d일 %H:%M') }}
                                {% else %}
                                    {{ machine.created_at }}
                                {% endif %}
                            {% else %}
                                알 수 없음
                            {% endif %}
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-network-wired"></i> 네트워크 정보</h5>
            </div>
            <div class="card-body">
                <table class="table table-borderless">
                    <tr>
                        <th width="30%">IPv4 주소</th>
                        <td><code>{{ machine.ipv4 }}</code></td>
                    </tr>
                    {% if machine.ipv6 %}
                    <tr>
                        <th>IPv6 주소</th>
                        <td><code class="small">{{ machine.ipv6 }}</code></td>
                    </tr>
                    {% endif %}
                    <tr>
                        <th>엔드포인트</th>
                        <td>
                            {% if machine.get_endpoints() %}
                                <div class="small">
                                    {% for endpoint in machine.get_endpoints()[:3] %}
                                        <div><code>{{ endpoint }}</code></div>
                                    {% endfor %}
                                    {% if machine.get_endpoints()|length > 3 %}
                                        <div class="text-muted">... 및 {{ machine.get_endpoints()|length - 3 }}개 더</div>
                                    {% endif %}
                                </div>
                            {% else %}
                                <span class="text-muted">없음</span>
                            {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <th>마지막 접속</th>
                        <td>
                            {% if machine.last_seen %}
                                {% if machine.last_seen.__class__.__name__ == 'datetime' %}
                                    {{ machine.last_seen.strftime('%Y-%m-%d %H:%M:%S') }}
                                {% else %}
                                    {{ machine.last_seen }}
                                {% endif %}
                                <br><small class="text-muted">{{ last_seen_humanized }}</small>
                            {% else %}
                                <span class="text-muted">알 수 없음</span>
                            {% endif %}
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- 하드웨어 사양 -->
{% if specs %}
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-microchip"></i> 하드웨어 사양</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="text-center">
                            <i class="fas fa-microchip fa-2x text-primary mb-2"></i>
                            <h6>CPU</h6>
                            <p class="mb-1">{{ specs.cpu_model }}</p>
                            <small class="text-muted">{{ specs.cpu_cores }}코어</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <i class="fas fa-memory fa-2x text-success mb-2"></i>
                            <h6>메모리</h6>
                            <p class="mb-1">{{ specs.ram_gb }}GB</p>
                            <small class="text-muted">RAM</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <i class="fas fa-hdd fa-2x text-warning mb-2"></i>
                            <h6>저장소</h6>
                            <p class="mb-1">{{ specs.storage_gb }}GB</p>
                            <small class="text-muted">디스크</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <i class="fas fa-wifi fa-2x text-info mb-2"></i>
                            <h6>네트워크</h6>
                            <p class="mb-1">{{ specs.network_speed }}Mbps</p>
                            <small class="text-muted">{{ specs.os_info or '알 수 없음' }}</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- 현재 상태 모니터링 -->
{% if latest_monitoring %}
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-chart-line"></i> 현재 상태</h5>
                {% if latest_monitoring and latest_monitoring.collected_at %}
                    <small class="text-muted">
                        최종 업데이트: 
                        {% if latest_monitoring.collected_at.__class__.__name__ == 'datetime' %}
                            {{ latest_monitoring.collected_at.strftime('%Y-%m-%d %H:%M:%S') }}
                        {% else %}
                            {{ latest_monitoring.collected_at }}
                        {% endif %}
                    </small>
                {% endif %}
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="text-center">
                            <canvas id="cpuChart" width="100" height="100"></canvas>
                            <h6 class="mt-2">CPU 사용률</h6>
                            <span class="h4">{{ "%.1f"|format(latest_monitoring.cpu_usage|float) }}%</span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <canvas id="memoryChart" width="100" height="100"></canvas>
                            <h6 class="mt-2">메모리 사용률</h6>
                            <span class="h4">{{ "%.1f"|format(latest_monitoring.memory_usage|float) }}%</span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <canvas id="diskChart" width="100" height="100"></canvas>
                            <h6 class="mt-2">디스크 사용률</h6>
                            <span class="h4">{{ "%.1f"|format(latest_monitoring.disk_usage|float) }}%</span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <div class="mb-2">
                                <i class="fas fa-thermometer-half fa-3x 
                                   {% if latest_monitoring.cpu_temperature > 80 %}text-danger
                                   {% elif latest_monitoring.cpu_temperature > 70 %}text-warning
                                   {% else %}text-success{% endif %}"></i>
                            </div>
                            <h6>CPU 온도</h6>
                            <span class="h4 
                                {% if latest_monitoring.cpu_temperature > 80 %}text-danger
                                {% elif latest_monitoring.cpu_temperature > 70 %}text-warning
                                {% else %}text-success{% endif %}">
                                {{ latest_monitoring.cpu_temperature }}°C
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- 소속 약국 정보 -->
{% if pharmacy %}
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-store"></i> 소속 약국</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6>{{ pharmacy.pharmacy_name }}</h6>
                        <p class="text-muted">{{ pharmacy.address or '주소 미등록' }}</p>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex justify-content-between">
                            <div>
                                <strong>담당자:</strong> {{ pharmacy.manager_name or '미등록' }}
                            </div>
                            <div>
                                <strong>연락처:</strong> {{ pharmacy.phone or '미등록' }}
                            </div>
                        </div>
                        <div class="mt-2">
                            <a href="{{ url_for('pharmacy_detail', pharmacy_id=pharmacy.id) }}" 
                               class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-eye"></i> 약국 상세 보기
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- 실시간 모니터링 모달 -->
<div class="modal fade" id="monitoringModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-chart-line"></i> 실시간 모니터링 - {{ machine.hostname }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <canvas id="realtimeCpuChart"></canvas>
                    </div>
                    <div class="col-md-6">
                        <canvas id="realtimeMemoryChart"></canvas>
                    </div>
                </div>
                <div class="mt-3 text-center">
                    <div id="monitoringStatus" class="alert alert-info">
                        실시간 데이터를 불러오는 중...
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let monitoringModal;

document.addEventListener('DOMContentLoaded', function() {
    monitoringModal = new bootstrap.Modal(document.getElementById('monitoringModal'));
    
    {% if latest_monitoring %}
    // 도넛 차트 생성
    createDoughnutChart('cpuChart', {{ latest_monitoring.cpu_usage|float }}, 'CPU', '#007bff');
    createDoughnutChart('memoryChart', {{ latest_monitoring.memory_usage|float }}, 'Memory', '#28a745');
    createDoughnutChart('diskChart', {{ latest_monitoring.disk_usage|float }}, 'Disk', '#ffc107');
    {% endif %}
});

function refreshMachineDetail() {
    showToast('머신 정보를 새로고침 중...', 'info');
    setTimeout(() => {
        location.reload();
    }, 1000);
}

function showMonitoringModal() {
    monitoringModal.show();
    loadRealtimeData();
}

function loadRealtimeData() {
    fetch(`/api/machines/{{ machine.id }}/monitoring`)
        .then(response => response.json())
        .then(data => {
            document.getElementById('monitoringStatus').innerHTML = 
                `<i class="fas fa-check-circle"></i> 최근 ${data.length}개 데이터 포인트 로드됨`;
            document.getElementById('monitoringStatus').className = 'alert alert-success';
            
            // 실시간 차트 업데이트 (구현 예정)
            console.log('Monitoring data:', data);
        })
        .catch(error => {
            document.getElementById('monitoringStatus').innerHTML = 
                `<i class="fas fa-exclamation-triangle"></i> 데이터 로드 실패: ${error.message}`;
            document.getElementById('monitoringStatus').className = 'alert alert-danger';
        });
}

// 10초마다 현재 상태 업데이트
setInterval(() => {
    if ({{ machine.id }}) {
        updateCurrentStatus({{ machine.id }});
    }
}, 10000);

function updateCurrentStatus(machineId) {
    // 실시간 상태 업데이트 구현 (향후)
}
</script>
{% endblock %}