csgowtf/src/lib/components/player/TrackPlayerModal.svelte

<script lang="ts">
	import { createEventDispatcher } from 'svelte';
	import Modal from '$lib/components/ui/Modal.svelte';
	import { playersAPI } from '$lib/api/players';
	import { toast } from '$lib/stores/toast';

	interface Props {
		playerId: string;
		playerName: string;
		isTracked: boolean;
		open: boolean;
		ontracked?: () => void;
		onuntracked?: () => void;
	}

	let {
		playerId,
		playerName,
		isTracked,
		open = $bindable(),
		ontracked,
		onuntracked
	}: Props = $props();

	const dispatch = createEventDispatcher();

	let authCode = $state('');
	let isLoading = $state(false);
	let error = $state('');

	async function handleTrack() {
		if (!authCode.trim()) {
			error = 'Auth code is required';
			return;
		}

		isLoading = true;
		error = '';

		try {
			await playersAPI.trackPlayer(playerId, authCode);
			toast.success('Player tracking activated successfully!');
			open = false;
			dispatch('tracked');
			ontracked?.();
		} catch (err: unknown) {
			error = err instanceof Error ? err.message : 'Failed to track player';
			toast.error(error);
		} finally {
			isLoading = false;
		}
	}

	async function handleUntrack() {
		isLoading = true;
		error = '';

		try {
			await playersAPI.untrackPlayer(playerId);
			toast.success('Player tracking removed successfully');
			open = false;
			dispatch('untracked');
			onuntracked?.();
		} catch (err: unknown) {
			error = err instanceof Error ? err.message : 'Failed to untrack player';
			toast.error(error);
		} finally {
			isLoading = false;
		}
	}

	function handleClose() {
		open = false;
		authCode = '';
		error = '';
	}
</script>

<Modal bind:open onClose={handleClose} title={isTracked ? 'Untrack Player' : 'Track Player'}>
	<div class="space-y-4">
		<div class="alert alert-info">
			<svg
				xmlns="http://www.w3.org/2000/svg"
				fill="none"
				viewBox="0 0 24 24"
				class="h-6 w-6 shrink-0 stroke-current"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
				></path>
			</svg>
			<div class="text-sm">
				{#if isTracked}
					<p>Remove <strong>{playerName}</strong> from automatic match tracking.</p>
				{:else}
					<p>
						Add <strong>{playerName}</strong> to the tracking system to automatically fetch new matches.
					</p>
				{/if}
			</div>
		</div>

		<!-- Auth Code Input (only for tracking, untrack doesn't need auth) -->
		{#if !isTracked}
			<div class="form-control">
				<label class="label" for="authCode">
					<span class="label-text font-medium">Authentication Code *</span>
				</label>
				<input
					id="authCode"
					type="text"
					placeholder="Enter your auth code"
					class="input input-bordered w-full"
					bind:value={authCode}
					disabled={isLoading}
					required
				/>
				<div class="label">
					<span class="label-text-alt text-base-content/60">
						Required to verify ownership of this Steam account
					</span>
				</div>
			</div>
		{/if}

		<!-- Error Message -->
		{#if error}
			<div class="alert alert-error">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="h-6 w-6 shrink-0 stroke-current"
					fill="none"
					viewBox="0 0 24 24"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
					/>
				</svg>
				<span>{error}</span>
			</div>
		{/if}

		<!-- Help Text -->
		<div class="text-sm text-base-content/70">
			<p class="mb-2 font-medium">How to get your authentication code:</p>
			<ol class="list-inside list-decimal space-y-1">
				<li>Open CS2 and go to Settings → Game</li>
				<li>Enable the Developer Console</li>
				<li>Press <kbd class="kbd kbd-sm">~</kbd> to open the console</li>
				<li>Type: <code class="rounded bg-base-300 px-1">status</code></li>
				<li>Copy the code shown next to "Account:"</li>
			</ol>
		</div>
	</div>

	{#snippet actions()}
		<button class="btn" onclick={handleClose} disabled={isLoading}>Cancel</button>
		{#if isTracked}
			<button class="btn btn-error" onclick={handleUntrack} disabled={isLoading}>
				{#if isLoading}
					<span class="loading loading-spinner loading-sm"></span>
				{/if}
				Untrack Player
			</button>
		{:else}
			<button class="btn btn-primary" onclick={handleTrack} disabled={isLoading}>
				{#if isLoading}
					<span class="loading loading-spinner loading-sm"></span>
				{/if}
				Track Player
			</button>
		{/if}
	{/snippet}
</Modal>