import { onMount } from 'svelte';

const STORAGE_KEY = 'userName';

// 複数のコンポーネントで状態を共有するため、リアクティブな変数をグローバルに定義します
let userName = $state('');
let signedIn = $derived(!!userName);

export class AuthState {
	/** サインインしているユーザー名を参照するためのプロパティ (reactive) */
	get userName(): string {
		return userName;
	}

	/** サインインしているかどうかを示すプロパティ (reactive) */
	get signedIn(): boolean {
		return signedIn;
	}

	constructor() {
		// ページが読み込まれたときに localStorage の値で状態変数を初期化します
		// （このコードはコンポーネントの初期化中に呼び出す必要があります）
		onMount(() => {
			userName = localStorage.getItem(STORAGE_KEY) || '';
		});
	}

	signIn(): void {
		// 実際には正しいユーザー情報やトークンを取得して保存します
		userName = 'Maku';
		localStorage.setItem(STORAGE_KEY, userName);
	}

	signOut(): void {
		userName = '';
		localStorage.removeItem(STORAGE_KEY);
	}
}

<script lang="ts">
	import { AuthState } from '$lib/auth-state.svelte';
	const authState = new AuthState();  // 内部で onMount フックがセットされる
</script>

<header>
	<h1>My Site</h1>
	{#if authState.signedIn}
		<div>Welcome, {authState.userName}!</div>
		<button onclick={() => authState.signOut()}>Sign out</button>
	{:else}
		<button onclick={() => authState.signIn()}>Sign in</button>
	{/if}
</header>

<style>
	* {
		margin: 0;
	}
	header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.5rem 1rem;
		background-color: #f0f0f0;
	}
	button {
		font-size: 1rem;
		padding: 0.5rem 1rem;
		border: none;
		border-radius: 0.25rem;
		background-color: #007bff;
		color: white;
		cursor: pointer;
	}
	button:hover {
		background: #0065d8;
	}
</style>

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

<SiteHeader />
<slot />

<script lang="ts">
	let count = $state(0);
</script>

<button onclick={() => count++}>
	clicks: {count}
</button>

export function createCounter() {
	let count = $state(0);

	$effect(() => {
		console.log(`The count is now ${count}`);
	});

	return {
		get count() { return count; },
		increment: () => { count += 1; }
	};
}

<script lang="ts">
	import { createCounter } from '$lib/counter.svelte';  // .ts は付けない
	let counter = createCounter();  // リアクティブなプロパティを持つオブジェクトを生成
</script>

<button onclick={() => counter.increment()}>
	clicks: {counter.count}
</button>

export const counter = $state({ count: 0 });

<script lang="ts">
	import { counter } from '$lib/counter.svelte';
</script>

<button onclick={() => counter.count++}>
	Button1: {counter.count}
</button>

<script lang="ts">
	import { counter } from '$lib/counter.svelte';
</script>

<button onclick={() => counter.count++}>
	Button2: {counter.count}
</button>

<script lang="ts">
	import CounterButton1 from '$lib/components/CounterButton1.svelte';
	import CounterButton2 from '$lib/components/CounterButton2.svelte';
</script>

<CounterButton1 />
<CounterButton2 />

export class Counter {
	count: number = $state(0);
}

export const counter = new Counter();

<script lang="ts">
	import { counter } from '$lib/counter.svelte';
</script>

<button onclick={() => counter.count++}>
	clicks: {counter.count}
</button>

export class Counter {
	#count: number = $state(0);  // Private field

	get count(): number {
		return this.#count;
	}

	increment(): void {
		this.#count += 1;
	}
}

export const counter = new Counter();

<script lang="ts">
	import { counter } from '$lib/counter.svelte';
</script>

<button onclick={() => counter.increment()}>
	clicks: {counter.count}
</button>

import { error, json } from '@sveltejs/kit';

// API route のグローバル変数はサーバーが起動している間のみ保持される
let messages: string[] = [];

/** /api/messages への GET リクエストを処理する */
export async function GET() {
	return json({ messages });
}

/** /api/messages への POST リクエストを処理する */
export async function POST({ request }) {
	const msg = (await request.text()).trim();
	if (!msg) {
		error(400, 'Text is required in the request body');
	}
	// 最新の 5 つのメッセージを保持
	messages = [...messages.slice(-4), msg];
	return json({ messages }, { status: 201 });
}

<script lang="ts">
	import { onMount } from 'svelte';

	/** サーバーから取得したメッセージのリスト */
	let receivedMessages: string[] = $state([]);

	/** ユーザーが入力したメッセージ */
	let userInput = $state('');

	async function fetchMessages() {
		const res = await fetch('/api/messages');
		const jsonData = await res.json();
		receivedMessages = jsonData.messages;
	}

	async function handleSubmit(e: Event) {
		e.preventDefault();
		const newMessage = userInput.trim();
		userInput = '';

		// 入力欄が空の場合は何もしない
		if (newMessage === '') {
			return;
		}

		// API エンドポイントに新しいメッセージを POST で送信
		const res = await fetch('/api/messages', {
			method: 'POST',
			headers: { 'Content-Type': 'application/json' },
			body: newMessage
		});

		// 新しいデータで表示を更新
		const jsonData = await res.json();
		receivedMessages = jsonData.messages;
	}

	// ページが読み込まれたときにメッセージを取得
	onMount(fetchMessages);
</script>

<main>
	<form>
		<input bind:value={userInput} placeholder="メッセージを入力" />
		<button type="submit" onclick={handleSubmit}>送信</button>
	</form>
	<ul>
		{#each receivedMessages.toReversed() as message}
			<li>{message}</li>
		{/each}
	</ul>
</main>