package app

import (
    "fmt"
    "github.com/seaweedfs/seaweedfs/weed/admin/dash"
)

templ ClusterVolumeServers(data dash.ClusterVolumeServersData) {
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">
            <i class="fas fa-server me-2"></i>Volume Servers
        </h1>
        <div class="btn-toolbar mb-2 mb-md-0">
            <div class="btn-group me-2">
                <button type="button" class="btn btn-sm btn-outline-primary" onclick="exportVolumeServers()">
                    <i class="fas fa-download me-1"></i>Export
                </button>
            </div>
        </div>
    </div>

    <div id="hosts-content">
        <!-- Summary Cards -->
        <div class="row mb-4">
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-primary shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                    Total Volume Servers
                                </div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">
                                    {fmt.Sprintf("%d", data.TotalVolumeServers)}
                                </div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-server fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-info shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                    Total Volumes
                                </div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">
                                    {fmt.Sprintf("%d", data.TotalVolumes)}
                                </div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-database fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-warning shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                    Total Capacity
                                </div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">
                                    {formatBytes(data.TotalCapacity)}
                                </div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-hdd fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Hosts Table -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-server me-2"></i>Volume Servers
                </h6>
            </div>
            <div class="card-body">
                if len(data.VolumeServers) > 0 {
                    <div class="table-responsive">
                        <table class="table table-hover" id="hostsTable">
                            <thead>
                                <tr>
                                    <th>Server ID</th>
                                    <th>Address</th>
                                    <th>Data Center</th>
                                    <th>Rack</th>
                                    <th>Volumes</th>
                                    <th>Capacity</th>
                                    <th>Usage</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                for _, host := range data.VolumeServers {
                                    <tr>
                                        <td>
                                            <code>{host.ID}</code>
                                        </td>
                                        <td>
                                            <a href={templ.SafeURL(fmt.Sprintf("http://%s", host.PublicURL))} target="_blank" class="text-decoration-none">
                                                {host.Address}
                                                <i class="fas fa-external-link-alt ms-1 text-muted"></i>
                                            </a>
                                        </td>
                                        <td>
                                            <span class="badge bg-light text-dark">{host.DataCenter}</span>
                                        </td>
                                        <td>
                                            <span class="badge bg-light text-dark">{host.Rack}</span>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="progress me-2" style="width: 60px; height: 16px;">
                                                    <div class="progress-bar" role="progressbar" 
                                                         style={fmt.Sprintf("width: %d%%", calculatePercent(host.Volumes, host.MaxVolumes))}>
                                                    </div>
                                                </div>
                                                <small>{fmt.Sprintf("%d/%d", host.Volumes, host.MaxVolumes)}</small>
                                            </div>
                                        </td>
                                        <td>{formatBytes(host.DiskCapacity)}</td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="progress me-2" style="width: 60px; height: 16px;">
                                                    <div class="progress-bar" role="progressbar" 
                                                         style={fmt.Sprintf("width: %d%%", calculatePercent(int(host.DiskUsage), int(host.DiskCapacity)))}>
                                                    </div>
                                                </div>
                                                <small>{formatBytes(host.DiskUsage)}</small>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                <button type="button" class="btn btn-outline-primary btn-sm" 
                                                        title="View Details">
                                                    <i class="fas fa-eye"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-secondary btn-sm" 
                                                        title="Manage">
                                                    <i class="fas fa-cog"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                }
                            </tbody>
                        </table>
                    </div>
                } else {
                    <div class="text-center py-5">
                        <i class="fas fa-server fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">No Volume Servers Found</h5>
                        <p class="text-muted">No volume servers are currently available in the cluster.</p>
                    </div>
                }
            </div>
        </div>

        <!-- Last Updated -->
        <div class="row">
            <div class="col-12">
                <small class="text-muted">
                    <i class="fas fa-clock me-1"></i>
                    Last updated: {data.LastUpdated.Format("2006-01-02 15:04:05")}
                </small>
            </div>
        </div>
    </div>
}