package app

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

templ CollectionDetails(data dash.CollectionDetailsData) {
	<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
		<div>
			<h1 class="h2">
				<i class="fas fa-layer-group me-2"></i>Collection Details: {data.CollectionName}
			</h1>
			<nav aria-label="breadcrumb">
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="/admin" class="text-decoration-none">Dashboard</a></li>
					<li class="breadcrumb-item"><a href="/cluster/collections" class="text-decoration-none">Collections</a></li>
					<li class="breadcrumb-item active" aria-current="page">{data.CollectionName}</li>
				</ol>
			</nav>
		</div>
		<div class="btn-toolbar mb-2 mb-md-0">
			<div class="btn-group me-2">
				<button type="button" class="btn btn-sm btn-outline-secondary" onclick="history.back()">
					<i class="fas fa-arrow-left me-1"></i>Back
				</button>
				<button type="button" class="btn btn-sm btn-outline-primary" onclick="window.location.reload()">
					<i class="fas fa-refresh me-1"></i>Refresh
				</button>
			</div>
		</div>
	</div>

	<!-- Collection Summary -->
	<div class="row mb-4">
		<div class="col-md-3">
			<div class="card text-bg-primary">
				<div class="card-body">
					<div class="d-flex justify-content-between">
						<div>
							<h6 class="card-title">Regular Volumes</h6>
							<h4 class="mb-0">{fmt.Sprintf("%d", data.TotalVolumes)}</h4>
							<small>Traditional volumes</small>
						</div>
						<div class="align-self-center">
							<i class="fas fa-database fa-2x"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-3">
			<div class="card text-bg-info">
				<div class="card-body">
					<div class="d-flex justify-content-between">
						<div>
							<h6 class="card-title">EC Volumes</h6>
							<h4 class="mb-0">{fmt.Sprintf("%d", data.TotalEcVolumes)}</h4>
							<small>Erasure coded volumes</small>
						</div>
						<div class="align-self-center">
							<i class="fas fa-th-large fa-2x"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-3">
			<div class="card text-bg-success">
				<div class="card-body">
					<div class="d-flex justify-content-between">
						<div>
							<h6 class="card-title">Total Files</h6>
							<h4 class="mb-0">{fmt.Sprintf("%d", data.TotalFiles)}</h4>
							<small>Files stored</small>
						</div>
						<div class="align-self-center">
							<i class="fas fa-file fa-2x"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-3">
			<div class="card text-bg-warning">
				<div class="card-body">
					<div class="d-flex justify-content-between">
						<div>
							<h6 class="card-title">Total Size (Logical)</h6>
							<h4 class="mb-0">{util.BytesToHumanReadable(uint64(data.TotalSize))}</h4>
							<small>Data stored (regular volumes only)</small>
						</div>
						<div class="align-self-center">
							<i class="fas fa-hdd fa-2x"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Size Information Note -->
	<div class="alert alert-info" role="alert">
		<i class="fas fa-info-circle me-2"></i>
		<strong>Size Information:</strong> 
		Logical size represents the actual data stored (regular volumes only). 
		EC volumes show shard counts instead of size - physical storage for EC volumes is approximately 1.4x the original data due to erasure coding redundancy.
	</div>

	<!-- Pagination Info -->
	<div class="d-flex justify-content-between align-items-center mb-3">
		<div class="d-flex align-items-center">
			<span class="me-3">
				Showing {fmt.Sprintf("%d", (data.Page-1)*data.PageSize + 1)} to {fmt.Sprintf("%d", func() int {
					end := data.Page * data.PageSize
					totalItems := data.TotalVolumes + data.TotalEcVolumes
					if end > totalItems {
						return totalItems
					}
					return end
				}())} of {fmt.Sprintf("%d", data.TotalVolumes + data.TotalEcVolumes)} items
			</span>
			
			<div class="d-flex align-items-center">
				<label for="pageSize" class="form-label me-2 mb-0">Show:</label>
				<select id="pageSize" class="form-select form-select-sm" style="width: auto;" onchange="changePageSize(this.value)">
					<option value="10" if data.PageSize == 10 { selected }>10</option>
					<option value="25" if data.PageSize == 25 { selected }>25</option>
					<option value="50" if data.PageSize == 50 { selected }>50</option>
					<option value="100" if data.PageSize == 100 { selected }>100</option>
				</select>
				<span class="ms-2">per page</span>
			</div>
		</div>
	</div>

	<!-- Volumes Table -->
	<div class="table-responsive">
		<table class="table table-striped table-hover" id="volumesTable">
			<thead>
				<tr>
					<th>
						<a href="#" onclick="sortBy('volume_id')" class="text-dark text-decoration-none">
							Volume ID
							if data.SortBy == "volume_id" {
								if data.SortOrder == "asc" {
									<i class="fas fa-sort-up ms-1"></i>
								} else {
									<i class="fas fa-sort-down ms-1"></i>
								}
							} else {
								<i class="fas fa-sort ms-1 text-muted"></i>
							}
						</a>
					</th>
					<th>
						<a href="#" onclick="sortBy('type')" class="text-dark text-decoration-none">
							Type
							if data.SortBy == "type" {
								if data.SortOrder == "asc" {
									<i class="fas fa-sort-up ms-1"></i>
								} else {
									<i class="fas fa-sort-down ms-1"></i>
								}
							} else {
								<i class="fas fa-sort ms-1 text-muted"></i>
							}
						</a>
					</th>
					<th class="text-dark">Logical Size / Shard Count</th>
					<th class="text-dark">Files</th>
					<th class="text-dark">Status</th>
					<th class="text-dark">Actions</th>
				</tr>
			</thead>
			<tbody>
				// Display regular volumes
				for _, volume := range data.RegularVolumes {
					<tr>
						<td>
							<strong>{fmt.Sprintf("%d", volume.Id)}</strong>
						</td>
						<td>
							<span class="badge bg-primary">
								<i class="fas fa-database me-1"></i>Regular
							</span>
						</td>
						<td>
							{util.BytesToHumanReadable(volume.Size)}
						</td>
						<td>
							{fmt.Sprintf("%d", volume.FileCount)}
						</td>
						<td>
							if volume.ReadOnly {
								<span class="badge bg-warning">Read Only</span>
							} else {
								<span class="badge bg-success">Read/Write</span>
							}
						</td>
						<td>
							<div class="btn-group" role="group">
								<button type="button" class="btn btn-sm btn-outline-primary" 
										onclick="showVolumeDetails(event)" 
										data-volume-id={ fmt.Sprintf("%d", volume.Id) }
										data-server={ volume.Server }
										title="View volume details">
									<i class="fas fa-info-circle"></i>
								</button>
							</div>
						</td>
					</tr>
				}
				
				// Display EC volumes
				for _, ecVolume := range data.EcVolumes {
					<tr>
						<td>
							<strong>{fmt.Sprintf("%d", ecVolume.VolumeID)}</strong>
						</td>
						<td>
							<span class="badge bg-info">
								<i class="fas fa-th-large me-1"></i>EC
							</span>
						</td>
						<td>
							<span class="badge bg-primary">{fmt.Sprintf("%d/14", ecVolume.TotalShards)}</span>
						</td>
						<td>
							<span class="text-muted">-</span>
						</td>
						<td>
							if ecVolume.IsComplete {
								<span class="badge bg-success">
									<i class="fas fa-check me-1"></i>Complete
								</span>
							} else {
								<span class="badge bg-warning">
									<i class="fas fa-exclamation-triangle me-1"></i>
									Missing {fmt.Sprintf("%d", len(ecVolume.MissingShards))} shards
								</span>
							}
						</td>
						<td>
							<div class="btn-group" role="group">
								<button type="button" class="btn btn-sm btn-outline-info" 
										onclick="showEcVolumeDetails(event)" 
										data-volume-id={ fmt.Sprintf("%d", ecVolume.VolumeID) }
										title="View EC volume details">
									<i class="fas fa-info-circle"></i>
								</button>
								if !ecVolume.IsComplete {
									<button type="button" class="btn btn-sm btn-outline-warning" 
											onclick="repairEcVolume(event)" 
											data-volume-id={ fmt.Sprintf("%d", ecVolume.VolumeID) }
											title="Repair missing shards">
										<i class="fas fa-wrench"></i>
									</button>
								}
							</div>
						</td>
					</tr>
				}
			</tbody>
		</table>
	</div>

	<!-- Pagination -->
	if data.TotalPages > 1 {
		<nav aria-label="Collection volumes pagination">
			<ul class="pagination justify-content-center">
				if data.Page > 1 {
					<li class="page-item">
						<a class="page-link" href="#" onclick="goToPage(event)" data-page="1">First</a>
					</li>
					<li class="page-item">
						<a class="page-link" href="#" onclick="goToPage(event)" data-page={ fmt.Sprintf("%d", data.Page-1) }>Previous</a>
					</li>
				}
				
				for i := 1; i <= data.TotalPages; i++ {
					if i == data.Page {
						<li class="page-item active">
							<span class="page-link">{fmt.Sprintf("%d", i)}</span>
						</li>
					} else if i <= 3 || i > data.TotalPages-3 || (i >= data.Page-2 && i <= data.Page+2) {
						<li class="page-item">
							<a class="page-link" href="#" onclick="goToPage(event)" data-page={ fmt.Sprintf("%d", i) }>{fmt.Sprintf("%d", i)}</a>
						</li>
					} else if i == 4 && data.Page > 6 {
						<li class="page-item disabled">
							<span class="page-link">...</span>
						</li>
					} else if i == data.TotalPages-3 && data.Page < data.TotalPages-5 {
						<li class="page-item disabled">
							<span class="page-link">...</span>
						</li>
					}
				}
				
				if data.Page < data.TotalPages {
					<li class="page-item">
						<a class="page-link" href="#" onclick="goToPage(event)" data-page={ fmt.Sprintf("%d", data.Page+1) }>Next</a>
					</li>
					<li class="page-item">
						<a class="page-link" href="#" onclick="goToPage(event)" data-page={ fmt.Sprintf("%d", data.TotalPages) }>Last</a>
					</li>
				}
			</ul>
		</nav>
	}

	<script>
		// Sorting functionality
		function sortBy(field) {
			const currentSort = new URLSearchParams(window.location.search).get('sort_by');
			const currentOrder = new URLSearchParams(window.location.search).get('sort_order') || 'asc';
			
			let newOrder = 'asc';
			if (currentSort === field && currentOrder === 'asc') {
				newOrder = 'desc';
			}
			
			const url = new URL(window.location);
			url.searchParams.set('sort_by', field);
			url.searchParams.set('sort_order', newOrder);
			url.searchParams.set('page', '1'); // Reset to first page
			window.location.href = url.toString();
		}

		// Pagination functionality
		function goToPage(event) {
			event.preventDefault();
			const page = event.target.closest('a').getAttribute('data-page');
			const url = new URL(window.location);
			url.searchParams.set('page', page);
			window.location.href = url.toString();
		}

		// Page size functionality
		function changePageSize(newPageSize) {
			const url = new URL(window.location);
			url.searchParams.set('page_size', newPageSize);
			url.searchParams.set('page', '1'); // Reset to first page when changing page size
			window.location.href = url.toString();
		}

		// Volume details
		function showVolumeDetails(event) {
			const volumeId = event.target.closest('button').getAttribute('data-volume-id');
			const server = event.target.closest('button').getAttribute('data-server');
			window.location.href = `/cluster/volumes/${volumeId}/${server}`;
		}

		// EC Volume details
		function showEcVolumeDetails(event) {
			const volumeId = event.target.closest('button').getAttribute('data-volume-id');
			window.location.href = `/cluster/ec-volumes/${volumeId}`;
		}

		// Repair EC Volume
		function repairEcVolume(event) {
			const volumeId = event.target.closest('button').getAttribute('data-volume-id');
			if (confirm(`Are you sure you want to repair missing shards for EC volume ${volumeId}?`)) {
				// TODO: Implement repair functionality
				alert('Repair functionality will be implemented soon.');
			}
		}
	</script>
}