package templates

import "github.com/haydenhargreaves/Potion/internal/templates/components"
import "fmt"
import "strings"
import domain "github.com/haydenhargreaves/Potion/internal/domain/server"
import domainRecipe "github.com/haydenhargreaves/Potion/internal/domain/recipe"
import domainUser "github.com/haydenhargreaves/Potion/internal/domain/user"
import domainEngagement "github.com/haydenhargreaves/Potion/internal/domain/engagement"

func displayDifficulty(diff int) string {
  switch diff {
  case 1:
    return "Beginner"
  case 2:
    return "Easy"
  case 3:
    return "Intermediate"
  case 4:
    return "Challenging"
  case 5:
    return "Extreme"
  default:
    return ""
  }
}

func displayTags(tags []domainRecipe.Tag) string {
  names := make([]string, 0, len(tags))
  for _, tag := range tags {
    names = append(names, tag.Name)
  }
  return strings.Join(names, ", ")
}

templ userDetailsSection(user domainUser.User, recipeCount int, favoriteCount int) {
<section class="w-full flex flex-col justify-center my-8 py-4 border-b border-gray-300">
  <div class="w-full p-4 md:p-8 flex items-center gap-x-8">
    if user.ImageUrl != "" {
    <img class="w-24 md:w-32 border-2 border-blue-500 rounded-full shadow-blue-500 shadow select-none" src={
      user.ImageUrl } />
    } else {
    <img class="w-24 md:w-32 border-2 border-blue-500 rounded-full shadow-blue-500 shadow select-none" src={
      fmt.Sprintf("https://ui-avatars.com/api/?name=%s+%s&size=150", strings.Split(user.Name, " " )[0],
      strings.Split(user.Name, " " )[1]) } />
    }
    <div class="flex flex-col gap-y-4">
      <div class="">
        <h1 class="text-md md:text-2xl font-semibold">{ user.Name }</h1>
        <p class="text-xs md:text-sm">{ user.Email }</p>
      </div>
      <div class="flex gap-x-4">
        <p class="text-xs md:text-sm"><span class="font-bold">{ recipeCount }</span> recipes</p>
        <p class="text-xs md:text-sm"><span class="font-bold">{ favoriteCount }</span> favorites</p>
      </div>
    </div>
  </div>
</section>
}

templ recipesSection(recipes []domainRecipe.Recipe) {
<section class="p-8">
  <h2 class="text-2xl font-semibold text-gray-800">My Recipes</h2>
  <ul class="w-full my-2">
    if len(recipes) <= 4 {
      for _, recipe :=range recipes {
        @recipeListItem(recipe) 
      }
    } else { 
      for _, recipe :=range recipes[:4] {
        @recipeListItem(recipe) 
      } 
    } 
      <a href={ domain.WEB_NOT_FOUND }>
      <li
        class="w-full border-b border-gray-300 px-2 py-4 even:bg-gray-50 hover:bg-gray-100 hover:text-blue-600 duration-150 text-center">
        See all...
      </li>
      </a>
  </ul>
</section>
}

templ favoritesSection(recipes []domainRecipe.Recipe) {
<section class="p-8">
  <h2 class="text-2xl font-semibold text-gray-800">My Favorites</h2>
  <ul class="w-full my-2">
    if len(recipes) <= 4 {
      for _, recipe := range recipes {
        @recipeListItem(recipe) 
      } 
    } else { 
      for _, recipe := range recipes[:4] {
        @recipeListItem(recipe) 
      } 
    }
    <a href={ domain.WEB_FAVORITES }>
      <li
        class="w-full border-b border-gray-300 px-2 py-4 even:bg-gray-50 hover:bg-gray-100 hover:text-blue-600 duration-150 text-center">
        See all...
      </li>
      </a>
  </ul>
</section>
}

templ activitySection(engagement []domainEngagement.Engagement) {
<section class="p-8">
  <h2 class="text-2xl font-semibold text-gray-800">Recent Activity</h2>
  <p class="text-sm my-2">Activity section is under construction!</p>
  <ul class="w-full my-2">
    for _, eng := range engagement {
      @activityListItem(eng)
    }
    <a href={ domain.WEB_NOT_FOUND }>
      <li
        class="w-full border-b border-gray-300 px-2 py-4 even:bg-gray-50 hover:bg-gray-100 hover:text-blue-600 duration-150 text-center">
        See all...
      </li>
    </a>
  </ul>
</section>
}

templ recipeListItem(recipe domainRecipe.Recipe) {
<li class="w-full border-b border-gray-300 px-2 py-4 even:bg-gray-50 hover:bg-gray-100 duration-150">
  <p hx-post={ fmt.Sprintf(domain.API_ENGAGEMENT_VIEW, recipe.Id) } hx-trigger="click" hx-swap="none"
    class="text-base md:text-lg hover:text-blue-600 duration-100 cursor-pointer">
    { recipe.Title }
  </p>
  <p class="hidden md:block text-sm text-gray-700 my-1.5">
    Difficulty: <span class="font-semibold">{ displayDifficulty(recipe.Difficulty) }</span>
    | Duration: <span class="font-semibold">{ recipe.Duration.Total } min</span>
    | Category: <span class="font-semibold">{ recipe.Category }</span>
  </p>
  <p class="md:hidden text-xs md:text-sm text-gray-700 my-1">
    Difficulty: <span class="font-semibold">{ displayDifficulty(recipe.Difficulty) }</span>
  </p>
  <p class="md:hidden text-xs md:text-sm text-gray-700 my-1">
    Duration: <span class="font-semibold">{ recipe.Duration.Total } min</span>
  </p>
  <p class="md:hidden text-xs md:text-sm text-gray-700 my-1">
    Category: <span class="font-semibold">{ recipe.Category }</span>
  </p>
  if len(recipe.Tags) > 0 {
  <p class="text-xs italic text-gray-500">
    Tags: { displayTags(recipe.Tags) }
  </p>
  }
</li>
}

templ activityListItem(engagement domainEngagement.Engagement) {
<li
  class="w-full border-b border-gray-300 px-2 py-4 even:bg-gray-50 hover:bg-gray-100 duration-150 flex justify-between items-center">
  <p class="text-sm md:text-base text-gray-800">
    { engagement.Message }
  </p>
  <p class="text-xs md:text-sm text-gray-600 w-fit shrink-0">
    { engagement.Created.Format("01/02/2006") }
  </p>
</li>
}

templ logoutSection() {
<section class="w-full flex flex-col justify-center items-center py-8 border-t border-gray-300 mt-auto">
  <a href={ domain.API_AUTH_LOGOUT }
    class="text-center border border-red-500 text-red-500 w-9/10 md:w-1/3 py-2 rounded-lg hover:cursor-pointer hover:bg-red-100 duration-300">
    Logout
  </a>
</section>
}

templ ProfilePage(user domainUser.User, recipes []domainRecipe.Recipe, favorites []domainRecipe.Recipe, engagement []domainEngagement.Engagement) {
@components.Navbar(" profile")
<div class="w-full h-fit flex justify-center">
  <div class="mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 border-l border-r border-gray-300 bg-white flex flex-col">
    @userDetailsSection(user, len(recipes), len(favorites))
    @recipesSection(recipes)
    @favoritesSection(favorites)
    @activitySection(engagement)
    @logoutSection()
  </div>
</div>
}
