<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <title>My Profile - Thyme Crunch</title>
    <link rel="stylesheet" th:href="@{css/my-profile.css}">
    <link href="https://fonts.googleapis.com/css2?family=Delius+Swash+Caps&family=Mali:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700" rel="stylesheet">
	<script th:src="@{/js/bad-words-list.js}"></script>
</head>
<body>

<div class="header-wrap">
<a th:href="@{/explore}">
<header class="top-header">
    <img th:src="@{/images/header_left.png}" alt="Violin f-hole shape to the left of header." class="swirl">
    <h1 class="site-name">
    Thyme Crunch
    </h1>
    <img th:src="@{/images/header_right.png}" alt="Violin f-hole shape to the right of header." class="swirl">
</header>
</a>
</div>

<div class="body">

    <!-- Left Navigation -->
    <div class="body-left">
        <nav class="sidebar-left">
            <ul>
                <li><a th:href="@{/explore}">Explore</a></li>
                <li th:unless="${guest}"><a th:href="@{/favorites}">Saved</a></li>
                <li th:unless="${guest}"><a th:href="@{/my-profile}">Profile</a></li>

                <li th:if="${guest}" class="login-link">
                    <a th:href="@{/login}">Login</a> or <a th:href="@{/register}">Sign Up</a> to create and save recipes
                </li>

                <li th:unless="${guest}">
                    <form th:action="@{/logout}" method="post">
                        <input type="image" th:src="@{images/logout_icon.png}" alt="Logout button" class="nav_icon"/>
                    </form>
                </li>
            </ul>
        </nav>
        <a th:href="@{/create}" class="create_icon">
            <img th:src="@{images/create_icon.png}" alt="Create New Recipe Icon (Red mixing bowl with a spoon and yellow addition symbol.)">
        </a>
    </div>

    <!-- Main Content — recipes -->
    <main class="main-content">

        <div class="profile-top-row">
            <h2>My Recipes</h2>
            <a href="https://forms.gle/qUx73EL7vjBDBXde7"
               target="_blank"
               rel="noopener noreferrer"
               class="feedback-btn">Give Feedback</a>
        </div>

        <p th:if="${#lists.isEmpty(profile.recipes)}">You have not created any recipes yet.</p>

        <div class="recipe-card" th:unless="${#lists.isEmpty(profile.recipes)}">
        	<th:block th:each="recipe : ${profile.recipes}">
        	<div class="card-wrapper">
        	<a th:href="@{/recipes/{id}(id=${recipe.id})}" class="card">
            	<div class="card-text">
               		<h2 th:text="${recipe.title}">Recipe Title</h2>
               		<p th:text="${recipe.description}">Description</p>
            	</div>
            	<div class="card-right">
					<div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
    					<img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image" style="max-width: 200px;">
					</div>
                	<p class="card-cost" th:text="${recipe.cost}">Cost</p>
            	</div>
        	</a>
        	<a th:href="@{/recipes/{id}/edit(id=${recipe.id})}" class="edit-link">Edit</a>
        	</div>
    		</th:block>
		</div>

    </main>

    <!-- Right Sidebar — profile info & edit -->
    <div class="body-right">
        <div class="sidebar-right">

            <p><strong th:text="${profile.effectiveDisplayName}">Display Name</strong></p>
            <p th:text="'@' + ${profile.username}">@username</p>
            <a th:href="@{/users/{id}(id=${profile.id})}" class="view-profile-btn">View public profile</a>

            <form th:action="@{/my-profile/update}" method="post" th:object="${updateProfileDto}" class="profile-form">
                <div class="rows">
                    <label for="displayName">Display Name</label>
                    <input type="text" id="displayName" th:field="*{displayName}" maxlength="100">
                </div>
                <div class="rows">
                    <label for="bio">Bio</label>
                    <textarea id="bio" th:field="*{bio}" rows="6" maxlength="1000"></textarea>
                </div>
                <button type="submit" value='submit request' onclick='return btnClick();'>Save</button>
            </form>

        </div>
    </div>

</div>

<script>
function isProfane(str) {
	  const lower = str.toLowerCase();
	  return bannedWords.some(word => new RegExp(`\\b${word}\\b`).test(lower));
}
</script>
<script>
function btnClick() {
    const displayNameEl = document.getElementById('displayName');
    const bioEl = document.getElementById('bio');
    
    clearError(displayNameEl);
    clearError(bioEl);

    if (isProfane(displayNameEl.value)) {
        showError(displayNameEl, "Display name contains inappropriate language.");
        return false;
    }
    if (isProfane(bioEl.value)) {
        showError(bioEl, "Bio contains inappropriate language.");
        return false;
    }
    return true;

    function showError(input, message) {
        input.classList.add('invalid');

        let error = input.parentElement.querySelector('.error-message');
        if (!error) {
            error = document.createElement('p');
            error.className = 'error-message';
            error.style.color = 'red';
            error.style.fontSize = '0.9em';
            error.style.marginTop = '6px';
            input.parentElement.appendChild(error);
        }

        error.textContent = message;
    }
    
    function clearError(input) {
    	  input.classList.remove('invalid');
    	  const error = input.parentElement.querySelector('.error-message');
    	  if (error) error.remove();
    	}
}
</script>

<script>
	
	
    // For cost display <!-- Cost change -->
	function renderCost(cost) {
    const num = parseInt(cost, 10);
    if (!num || num <= 0) return '';
    if (num >= 4) return '$$$$';
    return '$'.repeat(num);
}

document.querySelectorAll('.card-cost').forEach(el => {
    el.textContent = renderCost(el.textContent);
});
</script>

</body>
</html>