{% extends "base.html" %}

{% block title %}구독 서비스 관리 - PharmQ Super Admin{% 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 active">구독 서비스 관리</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>
                <h1 class="h2 mb-0">
                    <i class="fas fa-box text-success"></i> 
                    구독 서비스 관리
                </h1>
                <p class="text-muted">PharmQ SaaS 구독 현황 및 매출 관리</p>
            </div>
            <div>
                <button class="btn btn-success" onclick="refreshSubscriptionData()">
                    <i class="fas fa-sync-alt"></i> 새로고침
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 구독 통계 카드 -->
<div class="row mb-4" id="subscription-stats-cards">
    <!-- 로딩 상태 -->
    <div class="col-12 text-center">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">통계 로딩 중...</span>
        </div>
        <p class="mt-2 text-muted">구독 통계를 불러오는 중입니다...</p>
    </div>
</div>

<!-- 서비스별 구독 현황 -->
<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-bar text-primary"></i> 서비스별 구독 현황
                </h5>
            </div>
            <div class="card-body">
                <div class="row" id="service-stats">
                    <!-- 서비스별 통계가 여기에 로드됩니다 -->
                    <div class="col-12 text-center">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">서비스 통계 로딩 중...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 약국별 구독 현황 -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="fas fa-list text-info"></i> 약국별 구독 현황
                </h5>
                <div class="input-group" style="width: 300px;">
                    <input type="text" class="form-control" id="searchInput" placeholder="약국명 또는 담당자 검색...">
                    <button class="btn btn-outline-secondary" type="button" onclick="searchPharmacies()">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div id="pharmacy-subscription-list">
                    <!-- 약국별 구독 현황 테이블이 여기에 로드됩니다 -->
                    <div class="text-center">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">약국 데이터 로딩 중...</span>
                        </div>
                        <p class="mt-2 text-muted">약국별 구독 현황을 불러오는 중입니다...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let pharmacySubscriptionData = [];
let filteredData = [];

// 페이지 로드 시 데이터 로드
document.addEventListener('DOMContentLoaded', function() {
    loadSubscriptionStats();
    loadPharmacySubscriptions();
});

// 구독 통계 로드
function loadSubscriptionStats() {
    fetch('/api/subscriptions/stats')
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                displaySubscriptionStats(result.data);
            } else {
                showSubscriptionStatsError();
            }
        })
        .catch(error => {
            console.error('구독 통계 로드 오류:', error);
            showSubscriptionStatsError();
        });
}

// 구독 통계 표시
function displaySubscriptionStats(data) {
    const statsHtml = `
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card" style="background: linear-gradient(135deg, #38b2ac 0%, #2c7a7b 100%); color: white;">
                <div class="card-body text-center">
                    <div class="stat-number">₩${data.total_revenue.toLocaleString()}</div>
                    <div class="stat-label">
                        <i class="fas fa-won-sign"></i> 월 총 매출
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card" style="background: linear-gradient(135deg, #805ad5 0%, #6b46c1 100%); color: white;">
                <div class="card-body text-center">
                    <div class="stat-number">${data.total_subscriptions}</div>
                    <div class="stat-label">
                        <i class="fas fa-clipboard-list"></i> 총 구독 수
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card" style="background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%); color: white;">
                <div class="card-body text-center">
                    <div class="stat-number">${data.subscribed_pharmacies}/${data.total_pharmacies}</div>
                    <div class="stat-label">
                        <i class="fas fa-store"></i> 구독 약국
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card" style="background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); color: white;">
                <div class="card-body text-center">
                    <div class="stat-number">${data.subscription_rate}%</div>
                    <div class="stat-label">
                        <i class="fas fa-percentage"></i> 구독률
                    </div>
                </div>
            </div>
        </div>
    `;
    
    document.getElementById('subscription-stats-cards').innerHTML = statsHtml;
    
    // 서비스별 통계 표시
    displayServiceStats(data.services);
}

// 서비스별 통계 표시
function displayServiceStats(services) {
    const serviceIconMap = {
        'CLOUD_PC': { icon: '💻', color: '#4f46e5', name: '클라우드 PC' },
        'AI_CCTV': { icon: '📷', color: '#0891b2', name: 'AI CCTV' },
        'CRM': { icon: '📊', color: '#ca8a04', name: 'CRM 시스템' }
    };
    
    let servicesHtml = '';
    services.forEach(service => {
        const serviceInfo = serviceIconMap[service.code] || { icon: '📦', color: '#6b7280', name: service.name };
        
        servicesHtml += `
            <div class="col-lg-4 col-md-6 mb-3">
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-3">
                            <div class="me-3" style="font-size: 3rem;">${serviceInfo.icon}</div>
                            <div class="flex-grow-1">
                                <h5 class="mb-1" style="color: ${serviceInfo.color};">${serviceInfo.name}</h5>
                                <p class="text-muted mb-0">${service.count}개 약국이 구독 중</p>
                            </div>
                        </div>
                        <div class="row text-center">
                            <div class="col-6">
                                <div class="border-end">
                                    <div class="h4 mb-0" style="color: ${serviceInfo.color};">${service.count}</div>
                                    <small class="text-muted">구독 수</small>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="h4 mb-0" style="color: ${serviceInfo.color};">₩${service.revenue.toLocaleString()}</div>
                                <small class="text-muted">월 매출</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
    });
    
    document.getElementById('service-stats').innerHTML = servicesHtml;
}

// 약국별 구독 현황 로드
function loadPharmacySubscriptions() {
    fetch('/api/pharmacies/subscriptions')
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                pharmacySubscriptionData = result.data;
                filteredData = [...pharmacySubscriptionData];
                displayPharmacySubscriptions(filteredData);
            } else {
                showPharmacySubscriptionsError();
            }
        })
        .catch(error => {
            console.error('약국 구독 현황 로드 오류:', error);
            showPharmacySubscriptionsError();
        });
}

// 약국별 구독 현황 표시
function displayPharmacySubscriptions(data) {
    if (data.length === 0) {
        document.getElementById('pharmacy-subscription-list').innerHTML = `
            <div class="text-center py-4">
                <i class="fas fa-search fa-3x text-muted mb-3"></i>
                <p class="text-muted">검색 결과가 없습니다.</p>
            </div>
        `;
        return;
    }
    
    const serviceIconMap = {
        'CLOUD_PC': '💻',
        'AI_CCTV': '📷',
        'CRM': '📊'
    };
    
    let tableHtml = `
        <div class="table-responsive">
            <table class="table table-hover">
                <thead class="table-light">
                    <tr>
                        <th>약국 정보</th>
                        <th>담당자</th>
                        <th>구독 서비스</th>
                        <th>월 구독료</th>
                        <th>액션</th>
                    </tr>
                </thead>
                <tbody>
    `;
    
    data.forEach(pharmacy => {
        // 구독 서비스 아이콘 표시
        let serviceIcons = '';
        if (pharmacy.subscribed_services && pharmacy.subscribed_services.length > 0) {
            pharmacy.subscribed_services.forEach(serviceCode => {
                const icon = serviceIconMap[serviceCode] || '📦';
                serviceIcons += `<span class="me-1" title="${serviceCode}">${icon}</span>`;
            });
        } else {
            serviceIcons = '<span class="text-muted">구독 없음</span>';
        }
        
        tableHtml += `
            <tr>
                <td>
                    <div>
                        <strong>${pharmacy.name}</strong>
                    </div>
                    <div class="small text-muted">
                        <i class="fas fa-map-marker-alt"></i> ${pharmacy.address || '주소 미등록'}
                    </div>
                </td>
                <td>
                    <div>
                        <strong>${pharmacy.manager || '미등록'}</strong>
                    </div>
                </td>
                <td>
                    <div>${serviceIcons}</div>
                    <div class="small text-muted">${pharmacy.subscribed_services.length}개 서비스</div>
                </td>
                <td>
                    <strong class="text-success">₩${pharmacy.monthly_fee.toLocaleString()}/월</strong>
                </td>
                <td>
                    <div class="btn-group btn-group-sm">
                        <a href="/pharmacy/${pharmacy.id}" class="btn btn-outline-primary">
                            <i class="fas fa-eye"></i> 상세
                        </a>
                        <button class="btn btn-outline-success" onclick="manageSubscription(${pharmacy.id}, '${pharmacy.name}')">
                            <i class="fas fa-cog"></i> 관리
                        </button>
                    </div>
                </td>
            </tr>
        `;
    });
    
    tableHtml += `
                </tbody>
            </table>
        </div>
        <div class="mt-3 text-muted">
            <small>총 ${data.length}개 약국 표시 중</small>
        </div>
    `;
    
    document.getElementById('pharmacy-subscription-list').innerHTML = tableHtml;
}

// 검색 기능
function searchPharmacies() {
    const searchTerm = document.getElementById('searchInput').value.toLowerCase().trim();
    
    if (searchTerm === '') {
        filteredData = [...pharmacySubscriptionData];
    } else {
        filteredData = pharmacySubscriptionData.filter(pharmacy => 
            pharmacy.name.toLowerCase().includes(searchTerm) ||
            (pharmacy.manager && pharmacy.manager.toLowerCase().includes(searchTerm)) ||
            (pharmacy.address && pharmacy.address.toLowerCase().includes(searchTerm))
        );
    }
    
    displayPharmacySubscriptions(filteredData);
}

// 엔터키로 검색
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('searchInput').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            searchPharmacies();
        }
    });
});

// 구독 관리 (약국 상세 페이지로 이동)
function manageSubscription(pharmacyId, pharmacyName) {
    window.location.href = `/pharmacy/${pharmacyId}`;
}

// 데이터 새로고침
function refreshSubscriptionData() {
    showToast('구독 데이터를 새로고침 중...', 'info');
    loadSubscriptionStats();
    loadPharmacySubscriptions();
}

// 오류 표시 함수들
function showSubscriptionStatsError() {
    document.getElementById('subscription-stats-cards').innerHTML = `
        <div class="col-12 text-center text-muted py-4">
            <i class="fas fa-exclamation-triangle fa-3x mb-3"></i>
            <p>구독 통계를 불러오는 중 오류가 발생했습니다.</p>
            <button class="btn btn-outline-primary btn-sm" onclick="loadSubscriptionStats()">
                <i class="fas fa-redo"></i> 다시 시도
            </button>
        </div>
    `;
}

function showPharmacySubscriptionsError() {
    document.getElementById('pharmacy-subscription-list').innerHTML = `
        <div class="text-center text-muted py-4">
            <i class="fas fa-exclamation-triangle fa-3x mb-3"></i>
            <p>약국 구독 현황을 불러오는 중 오류가 발생했습니다.</p>
            <button class="btn btn-outline-primary btn-sm" onclick="loadPharmacySubscriptions()">
                <i class="fas fa-redo"></i> 다시 시도
            </button>
        </div>
    `;
}
</script>

<style>
.stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.9rem;
    opacity: 0.9;
}
</style>
{% endblock %}