<template>
  <div class="stats-info mb-4" id="statsInfo">
    <div class="stat-item">
      <div class="stat-value">{{ totalCerts }}</div>
      <div class="stat-label">Total Certificates</div>
    </div>
    <div class="stat-item">
      <div class="stat-value">{{ activeCerts.length }}</div>
      <div class="stat-label">Active Certificates</div>
    </div>
    <div class="stat-item">
      <div class="stat-value">{{ expiringCount }}</div>
      <div class="stat-label">Expiring in 30 days</div>
    </div>
    <div class="stat-item">
      <div class="stat-value">{{ expiredCerts.length }}</div>
      <div class="stat-label">Expired Certificates</div>
    </div>
  </div>

  <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-3">
    <div class="d-flex gap-3 align-items-center flex-wrap">
      <div class="input-group input-group-sm" style="width: 250px;">
        <span class="input-group-text"><i class="fas fa-search"></i></span>
        <input type="text" class="form-control" placeholder="Search by client name..." v-model="searchQuery">
      </div>
    </div>

    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" id="hideExpired" v-model="hideExpired">
      <label class="form-check-label user-select-none text-muted" for="hideExpired">Hide Expired Certificates</label>
    </div>
  </div>

  <div class="card" id="certificatesCard">
    <div class="card-header d-flex justify-content-between align-items-center bg-transparent border-bottom">
      <span><i class="fas fa-certificate me-2"></i>Certificates List</span>
      <div>
        <span class="status-badge status-valid me-1">
          <i class="fas fa-check-circle me-1"></i><span>{{ activeCerts.length }}</span> Active
        </span>
        <span class="status-badge status-expired">
          <i class="fas fa-times-circle me-1"></i><span>{{ expiredCerts.length }}</span> Expired
        </span>
      </div>
    </div>
    <div class="table-responsive">
      <table class="table table-hover mb-0">
        <thead>
          <tr>
            <th>Client Name</th>
            <th>Validity Not After</th>
            <th>Days Remaining</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="loading">
            <td colspan="4" class="text-center py-4">
              <div class="spinner-border spinner-border-sm text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
              <p class="mt-2 mb-0">Loading certificates...</p>
            </td>
          </tr>
          
          <tr v-else-if="activeCerts.length === 0 && expiredCerts.length === 0">
             <td colspan="4" class="empty-state text-center py-5">
                <i class="fas fa-certificate fa-2x mb-3 text-muted"></i>
                <p class="text-muted">No certificates found</p>
             </td>
          </tr>

          <template v-else>
            <!-- Active Section -->
            <tr v-if="activeCerts.length > 0" class="section-divider">
              <td colspan="4">Active Certificates ({{ activeCerts.length }})</td>
            </tr>
            <tr v-for="cert in activeCerts" :key="cert.common_name + '_active'">
               <td>
                  <div class="fw-semibold" style="color: var(--text-heading);">{{ getClientName(cert) }}</div>
                  <div class="certificate-file text-muted small">{{ cert.file || 'N/A' }}</div>
               </td>
               <td>{{ formatDate(cert.not_after || cert.expiration_date) }}</td>
               <td class="fw-semibold" :class="getDaysClass(cert.days_remaining)">
                  {{ cert.days_remaining || 'N/A' }}
               </td>
               <td v-html="getStatusBadgeHTML(cert.days_remaining)"></td>
            </tr>

            <!-- Expired Section -->
            <template v-if="!hideExpired && expiredCerts.length > 0">
              <tr class="section-divider">
                <td colspan="4">Expired Certificates ({{ expiredCerts.length }})</td>
              </tr>
              <tr v-for="cert in expiredCerts" :key="cert.common_name + '_expired'">
                 <td>
                    <div class="fw-semibold" style="color: var(--text-heading);">{{ getClientName(cert) }}</div>
                    <div class="certificate-file text-muted small">{{ cert.file || 'N/A' }}</div>
                 </td>
                 <td>{{ formatDate(cert.not_after || cert.expiration_date) }}</td>
                 <td class="fw-semibold text-danger">
                    {{ formatExpiredDays(cert.days_remaining) }}
                 </td>
                 <td>
                    <span class="status-badge status-expired"><i class="fas fa-times-circle me-1"></i>Expired</span>
                 </td>
              </tr>
            </template>
          </template>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useApi } from '../composables/useApi';
import { useFormatters } from '../composables/useFormatters';

const { fetchCertificates } = useApi();
// use locally defined format logic to match legacy specificities if needed, but simple date string is likely fine
const { formatDate: _formatDate } = useFormatters(); 

const loading = ref(true);
const allCertificates = ref([]);
const searchQuery = ref('');
const hideExpired = ref(false);

const getClientName = (cert) => {
    const cn = cert.common_name || cert.subject || 'N/A';
    return cn.replace('CN=', '').trim();
}

const formatDate = (dateStr) => {
    if (!dateStr || dateStr === 'N/A') return 'N/A';
    try {
        const d = new Date(dateStr);
        if(isNaN(d)) return dateStr;
        // Legacy: 'May 16, 2033 11:32:06 AM' format roughly
        // Using standard locale string which is close enough and better
        return d.toLocaleDateString() + ' ' + d.toLocaleTimeString();
    } catch(e) { return dateStr; }
};

const getDaysClass = (daysText) => {
    if (!daysText || daysText === 'N/A') return 'text-success'; // default valid
    if (daysText.includes('Expired')) return 'text-danger';
    
    const days = parseInt(daysText);
    if (!isNaN(days) && days <= 30) return 'text-warning';
    return 'text-success';
};

const getStatusBadgeHTML = (daysText) => {
    if (!daysText || daysText === 'N/A') return '<span class="status-badge text-muted">Unknown</span>';
    
    const days = parseInt(daysText);
    if (!isNaN(days)) {
        if (days <= 30) {
            return '<span class="status-badge status-expiring"><i class="fas fa-exclamation-triangle me-1"></i>Expiring Soon</span>';
        } else {
            return '<span class="status-badge status-valid"><i class="fas fa-check-circle me-1"></i>Valid</span>';
        }
    }
    return '<span class="status-badge text-muted">Unknown</span>';
};

const formatExpiredDays = (daysText) => {
    if(!daysText) return 'N/A';
    if (daysText.includes('Expired')) {
        return daysText.replace('Expired (', '').replace(' days ago)', '') + ' days ago';
    }
    return daysText;
};

// Data Processing
const filteredData = computed(() => {
    let data = allCertificates.value;
    if (searchQuery.value) {
        const term = searchQuery.value.toLowerCase();
        data = data.filter(c => {
             const commonName = (c.common_name || c.subject || '').toLowerCase();
             const fileName = (c.file || '').toLowerCase();
             return commonName.includes(term) || fileName.includes(term);
        });
    }
    return data;
});

const categorized = computed(() => {
    const active = [];
    const expired = [];
    
    filteredData.value.forEach(cert => {
        let isExpired = false;
        if (cert.days_remaining && typeof cert.days_remaining === 'string' && cert.days_remaining.includes('Expired')) {
            isExpired = true;
        } else if ((!cert.days_remaining || cert.days_remaining === 'N/A') && cert.not_after) {
             const expDate = new Date(cert.not_after);
             if (expDate < new Date()) isExpired = true;
        }
        
        if (isExpired) expired.push(cert);
        else active.push(cert);
    });
    
    // Sort logic from legacy
    active.sort((a,b) => {
        const aDays = parseInt(a.days_remaining) || 9999;
        const bDays = parseInt(b.days_remaining) || 9999;
        return aDays - bDays;
    });
    
    expired.sort((a,b) => {
        const aMatch = (a.days_remaining||'').match(/\d+/);
        const bMatch = (b.days_remaining||'').match(/\d+/);
        const aDays = aMatch ? parseInt(aMatch[0]) : 0;
        const bDays = bMatch ? parseInt(bMatch[0]) : 0;
        return bDays - aDays;
    });
    
    return { active, expired };
});

const activeCerts = computed(() => categorized.value.active);
const expiredCerts = computed(() => categorized.value.expired);
const totalCerts = computed(() => allCertificates.value.length);
const expiringCount = computed(() => {
    return activeCerts.value.filter(c => {
        const days = parseInt(c.days_remaining);
        return !isNaN(days) && days <= 30;
    }).length;
});

const loadData = async () => {
    loading.value = true;
    try {
        const res = await fetchCertificates();
        if(res.success) {
            allCertificates.value = res.data;
        }
    } catch(e) {
        console.error(e);
    } finally {
        loading.value = false;
    }
};

onMounted(() => {
    loadData();
});
</script>

<style scoped>
.stats-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.stat-item {
    background: var(--bg-card);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    text-align: center;
}
.stat-value {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-heading);
    line-height: 1.2;
}
.stat-label {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}
.section-divider td {
    background-color: var(--bg-body);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.75rem 1rem;
}
</style>
