package partials

import (
	"fmt"
	"net/url"
	"strings"

	"yoten.app/internal/db"
)

func getResourceIcon(resourceType db.ResourceType) string {
	switch resourceType {
	case db.Book:
		return "book"
	case db.Video:
		return "video"
	case db.Website:
		return "globe"
	case db.Course:
		return "monitor"
	case db.App:
		return "smartphone"
	case db.Podcast:
		return "podcast"
	case db.Article:
		return "file-text"
	case db.Other:
		return "file"
	default:
		return "file"
	}
}

templ studySessionAction(params StudySessionProps) {
	<div class="flex justify-between sm:justify-normal gap-2 w-auto">
		<details class="relative inline-block text-left">
			<summary class="cursor-pointer list-none">
				<div class="btn btn-muted p-2">
					<i class="w-4 h-4 flex-shrink-0" data-lucide="ellipsis"></i>
				</div>
			</summary>
			<div
				class="absolute flex flex-col right-0 mt-2 p-1 gap-1 rounded w-32 bg-bg-light border border-bg-dark"
			>
				<button id="edit-button" type="button" class="w-full">
					<a
						href={ templ.URL(fmt.Sprintf("/session/edit/%s", params.StudySession.Rkey)) }
						class="text-base text-text flex items-center px-4 py-2 text-sm hover:bg-bg gap-2"
					>
						<i class="w-4 h-4" data-lucide="square-pen"></i>
						Edit
					</a>
				</button>
				<button
					class="text-base text-red-600 flex items-center px-4 py-2 text-sm hover:bg-bg gap-2 group"
					type="button"
					id="delete-button"
					hx-disabled-elt="#delete-button,#edit-button"
					hx-delete={ templ.URL(fmt.Sprintf("/session/%s", params.StudySession.Rkey)) }
				>
					<i class="w-4 h-4" data-lucide="trash-2"></i>
					Delete
					<i class="w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" data-lucide="loader-circle"></i>
				</button>
			</div>
		</details>
	</div>
}

templ StudySession(params StudySessionProps) {
	{{ elementId := SanitiseHtmlId(fmt.Sprintf("study-session-%s-%s", params.StudySession.Did, params.StudySession.Rkey)) }}
	{{ studySessionUrl := templ.SafeURL("/" + params.StudySession.Did + "/session/" + params.StudySession.Rkey) }}
	<div id={ elementId } class="card relative" x-data="{ open: false }" :class="{ 'z-20': open }">
		<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
			<div class="flex items-center justify-between">
				<div class="flex items-center gap-3">
					if params.StudySession.BskyProfile.Avatar == "" {
						<div class="flex items-center justify-center w-10 h-10 rounded-full bg-primary">
							<i class="w-7 h-7" data-lucide="user"></i>
						</div>
					} else {
						<img src={ params.StudySession.BskyProfile.Avatar } class="w-10 h-10 rounded-full"/>
					}
					<div>
						<div class="flex items-center gap-2">
							<a href={ templ.URL(fmt.Sprintf("/%s", params.StudySession.Did)) } class="font-semibold">
								{ params.StudySession.ProfileDisplayName }
							</a>
							<p class="pill pill-secondary px-2 py-0.5 h-fit items-center justify-center gap-1 w-fit flex">
								<i class="w-3.5 h-3.5" data-lucide="star"></i>
								<span class="text-xs">{ params.StudySession.ProfileLevel }</span>
							</p>
						</div>
						<p class="text-text-muted text-sm">&commat;{ params.StudySession.BskyProfile.Handle }</p>
					</div>
				</div>
				if params.DoesOwn {
					<div class="block sm:hidden">
						@studySessionAction(params)
					</div>
				}
			</div>
			<div class="flex gap-4">
				<div class="pill pill-primary w-fit">
					{ params.StudySession.Language.Flag }
					{ params.StudySession.Language.Name }
					if params.StudySession.Language.NativeName != nil {
						({ *params.StudySession.Language.NativeName })
					}
				</div>
				if params.DoesOwn {
					<div class="hidden sm:block">
						@studySessionAction(params)
					</div>
				}
			</div>
		</div>
		<span class="font-medium">{ params.StudySession.StudySession.Activity.Name }</span>
		if params.StudySession.StudySession.Description != "" {
			<p class="whitespace-pre-wrap leading-relaxed">
				{ params.StudySession.StudySession.Description }
			</p>
		}
		if params.StudySession.Resource != nil {
			<a
				rel="noopener noreferrer"
				target="_blank"
				if params.StudySession.Resource.Link != nil {
					href={ templ.URL(*params.StudySession.Resource.Link) }
					aria-label={ fmt.Sprintf("Visit %s", *params.StudySession.Resource.Link) }
					title={ fmt.Sprintf("Visit %s", *params.StudySession.Resource.Link) }
				}
				class="flex flex-col sm:flex-row sm:items-center gap-2 py-2 px-4 bg-gray-light hover:opacity-75 rounded-md"
			>
				<div class="flex items-center gap-2 flex-1 min-w-0">
					<i class="w-4 h-4 flex-shrink-0" data-lucide={ getResourceIcon(params.StudySession.Resource.Type) }></i>
					<span title={ params.StudySession.Resource.Description } class="font-medium text-sm truncate">{ params.StudySession.Resource.Title }</span>
				</div>
				if params.StudySession.Resource.Link != nil {
					{{ parsedURL, err := url.Parse(*params.StudySession.Resource.Link) }}
					if err == nil {
						{{ hostname := strings.TrimPrefix(parsedURL.Hostname(), "www.") }}
						<div title={ *params.StudySession.Resource.Link }>
							{ hostname }
						</div>
					}
				}
			</a>
		}
		<hr class="border-gray"/>
		<div class="flex flex-col sm:flex-row justify-between sm:items-center gap-4">
			<div class="flex items-center gap-1">
				@NewReactions(NewReactionsProps{
					User:           params.User,
					SessionDid:     params.StudySession.Did,
					SessionRkey:    params.StudySession.Rkey,
					ReactionEvents: params.StudySession.Reactions,
				})
				<a class="flex items-center gap-1" href={ studySessionUrl } title="comments">
					<i class="w-5 h-5" data-lucide="message-square-share"></i>
					<span>{ params.StudySession.CommentCount }</span>
				</a>
			</div>
			<div class="flex flex-col sm:flex-row sm:items-center gap-2 text-sm text-text-muted">
				<div class="flex items-center gap-1">
					<i class="w-4 h-4" data-lucide="clock"></i>
					<span>{ FormatDuration(params.StudySession.StudySession.Duration) }</span>
				</div>
				<div class="flex items-center gap-1">
					<i class="w-4 h-4" data-lucide="calendar"></i>
					<span>{ params.StudySession.StudySession.Date.Format("January 2, 2006") }</span>
				</div>
			</div>
		</div>
	</div>
}