<script lang="ts">
	import Badge from '$lib/client/components/badgeStatus.svelte';

	let tabs: string[] = ['Gateways', 'Lamps', 'Sensors'];
	let selectedTab: string = 'Gateways'; // default selected tab

	function handleTabChange(event: CustomEvent): void {
		selectedTab = event.target.value;
	}
</script>

<section class="mx-auto max-w-6xl space-y-4 lg:space-y-8">
	<div>
		<div class="sm:hidden">
			<label for="tabs" class="sr-only">Select a tab</label>
			<select
				id="tabs"
				name="tabs"
				class="block w-full rounded-primary border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
				bind:value={selectedTab}
				on:change={handleTabChange}
			>
				{#each tabs as tab}
					<option value={tab} selected={selectedTab === tab}>{tab}</option>
				{/each}
			</select>
		</div>
		<div class="hidden sm:block">
			<div class="border-b border-gray-200">
				<nav class="-mb-px flex" aria-label="Tabs">
					{#each tabs as tab}
						<a
							href="/"
							class:border-indigo-500={selectedTab === tab}
							class:text-indigo-600={selectedTab === tab}
							class:text-gray-500={selectedTab !== tab}
							class:hover:border-gray-300={selectedTab !== tab}
							class:hover:text-gray-700={selectedTab !== tab}
							class="w-1/3 border-b-2 py-4 px-1 text-center text-sm font-medium cursor-pointer"
							on:click|preventDefault={() => (selectedTab = tab)}
							aria-current={selectedTab === tab ? 'page' : undefined}
						>
							{tab}
						</a>
					{/each}
				</nav>
			</div>
		</div>
	</div>

	{#if selectedTab === 'Gateways'}
		<div class="flex flex-col">
			<div class="flex mb-2">
				<div>
					<p class="mt-2 text-sm text-gray-700">Gateways description</p>
				</div>
				<div class="ml-auto">
					<button type="button" class="btn btn-primary mb-2">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							fill="none"
							viewBox="0 0 24 24"
							stroke-width="1.5"
							stroke="currentColor"
							class="-ml-0.5 size-5"
						>
							<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
						</svg>
						Add new</button
					>
				</div>
			</div>
			<div class="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-primary">
				<table class="min-w-full divide-y divide-gray-200">
					<thead>
						<tr
							class="*:whitespace-nowrap *:bg-gray-50 *:px-6 *:py-3 text-sm font-medium text-gray-900"
						>
							<th class="text-left max-w-xs" scope="col">Name</th>
							<th class="text-left" scope="col">Status</th>
							<th class="text-left" scope="col">Comment / Fault reason</th>
							<th class="text-right" scope="col">Connected Devices</th>
							<th class="text-right" scope="col">Actions</th>
						</tr>
					</thead>
					<tbody class="divide-y divide-gray-200 bg-white">
						{#each { length: 1 } as item, index}
							<tr class="bg-white text-sm *:px-6 *:py-4">
								<td class="text-gray-900"> Gateway 001 </td>
								<td><Badge text="Not Working" color="red" /></td>
								<td> Zero power consumed </td>
								<td class="text-right">12</td>
								<td>
									<div class="flex gap-4 items-center justify-end">
										<a href="/" class="text-purple-800">Edit</a>
										<a href="/" class="text-red-600">Delete</a>
									</div>
								</td>
							</tr>
							<tr class="bg-white text-sm *:px-6 *:py-4">
								<td class="text-gray-900"> Gateway 002 </td>
								<td><Badge text="No signal" color="gray" /></td>
								<td> Offline </td>
								<td class="text-right">12</td>
								<td>
									<div class="flex gap-4 items-center justify-end">
										<a href="/" class="text-purple-800">Edit</a>
										<a href="/" class="text-red-600">Delete</a>
									</div>
								</td>
							</tr>
							<tr class="bg-white text-sm *:px-6 *:py-4">
								<td class="text-gray-900"> Gateway 003 </td>
								<td><Badge text="Too much voltage" color="orange" /></td>
								<td> Too high measures </td>
								<td class="text-right">12</td>
								<td>
									<div class="flex gap-4 items-center justify-end">
										<a href="/" class="text-purple-800">Edit</a>
										<a href="/" class="text-red-600">Delete</a>
									</div>
								</td>
							</tr>
						{/each}
						<!-- More transactions... -->
					</tbody>
				</table>
			</div>
		</div>
	{/if}
	{#if selectedTab === 'Lamps'}
		<div class="flex flex-col">
			<div class="flex mb-2">
				<div>
					<p class="mt-2 text-sm text-gray-700">Lamps description</p>
				</div>
				<div class="ml-auto">
					<button type="button" class="btn btn-primary mb-2">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							fill="none"
							viewBox="0 0 24 24"
							stroke-width="1.5"
							stroke="currentColor"
							class="-ml-0.5 size-5"
						>
							<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
						</svg>
						Add new</button
					>
				</div>
			</div>
			<div class="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-primary">
				<table class="min-w-full divide-y divide-gray-200">
					<thead>
						<tr
							class="*:whitespace-nowrap *:bg-gray-50 *:px-6 *:py-3 text-sm font-medium text-gray-900"
						>
							<th class="text-left max-w-xs" scope="col">Name</th>
							<th class="text-left" scope="col">Type</th>
							<th class="text-left" scope="col">Comment / Fault reason</th>
							<th class="text-right" scope="col">Connected Devices</th>
							<th class="text-right" scope="col">Actions</th>
						</tr>
					</thead>
					<tbody class="divide-y divide-gray-200 bg-white">
						{#each { length: 1 } as item, index}
							<tr class="bg-white text-sm *:px-6 *:py-4">
								<td class="text-gray-900"> Lamp 001 </td>
								<td><Badge text="Not Working" color="red" /></td>
								<td> Zero power consumed </td>
								<td class="text-right">12</td>
								<td>
									<div class="flex gap-4 items-center justify-end">
										<a href="/" class="text-purple-800">Edit</a>
										<a href="/" class="text-red-600">Delete</a>
									</div>
								</td>
							</tr>
							<tr class="bg-white text-sm *:px-6 *:py-4">
								<td class="text-gray-900"> Lamp 002 </td>
								<td><Badge text="No signal" color="gray" /></td>
								<td> Offline </td>
								<td class="text-right">12</td>
								<td>
									<div class="flex gap-4 items-center justify-end">
										<a href="/" class="text-purple-800">Edit</a>
										<a href="/" class="text-red-600">Delete</a>
									</div>
								</td>
							</tr>
							<tr class="bg-white text-sm *:px-6 *:py-4">
								<td class="text-gray-900"> Lamp 003 </td>
								<td><Badge text="Too much voltage" color="orange" /></td>
								<td> Too high measures </td>
								<td class="text-right">12</td>
								<td>
									<div class="flex gap-4 items-center justify-end">
										<a href="/" class="text-purple-800">Edit</a>
										<a href="/" class="text-red-600">Delete</a>
									</div>
								</td>
							</tr>
						{/each}
						<!-- More transactions... -->
					</tbody>
				</table>
			</div>
		</div>
	{/if}
	{#if selectedTab === 'Sensors'}
		<div class="flex flex-col">
			<div class="flex mb-2">
				<div>
					<p class="mt-2 text-sm text-gray-700">Sensors description</p>
				</div>
				<div class="ml-auto">
					<button type="button" class="btn btn-primary mb-2">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							fill="none"
							viewBox="0 0 24 24"
							stroke-width="1.5"
							stroke="currentColor"
							class="-ml-0.5 size-5"
						>
							<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
						</svg>
						Add new</button
					>
				</div>
			</div>
			<div class="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-primary">
				<table class="min-w-full divide-y divide-gray-200">
					<thead>
						<tr
							class="*:whitespace-nowrap *:bg-gray-50 *:px-6 *:py-3 text-sm font-medium text-gray-900"
						>
							<th class="text-left max-w-xs" scope="col">Name</th>
							<th class="text-left" scope="col">Type</th>
							<th class="text-left" scope="col">Comment / Fault reason</th>
							<th class="text-right" scope="col">Connected Devices</th>
							<th class="text-right" scope="col">Actions</th>
						</tr>
					</thead>
					<tbody class="divide-y divide-gray-200 bg-white">
						{#each { length: 1 } as item, index}
							<tr class="bg-white text-sm *:px-6 *:py-4">
								<td class="text-gray-900"> Motion sensor 001 </td>
								<td><Badge text="Not Working" color="red" /></td>
								<td> Zero power consumed </td>
								<td class="text-right">12</td>
								<td>
									<div class="flex gap-4 items-center justify-end">
										<a href="/" class="text-purple-800">Edit</a>
										<a href="/" class="text-red-600">Delete</a>
									</div>
								</td>
							</tr>
							<tr class="bg-white text-sm *:px-6 *:py-4">
								<td class="text-gray-900"> Motion sensor 002 </td>
								<td><Badge text="No signal" color="gray" /></td>
								<td> Offline </td>
								<td class="text-right">12</td>
								<td>
									<div class="flex gap-4 items-center justify-end">
										<a href="/" class="text-purple-800">Edit</a>
										<a href="/" class="text-red-600">Delete</a>
									</div>
								</td>
							</tr>
							<tr class="bg-white text-sm *:px-6 *:py-4">
								<td class="text-gray-900"> Motion sensor 003 </td>
								<td><Badge text="Too much voltage" color="orange" /></td>
								<td> Too high measures </td>
								<td class="text-right">12</td>
								<td>
									<div class="flex gap-4 items-center justify-end">
										<a href="/" class="text-purple-800">Edit</a>
										<a href="/" class="text-red-600">Delete</a>
									</div>
								</td>
							</tr>
						{/each}
						<!-- More transactions... -->
					</tbody>
				</table>
			</div>
		</div>
	{/if}
</section>
