package routes

import (
	"github.com/LazyBachelor/LazyPM/internal/models"
	"github.com/LazyBachelor/LazyPM/pkg/web/components"
	"github.com/LazyBachelor/LazyPM/pkg/web/components/base"
)

type DashboardProps struct {
	Issues        []*models.Issue
	SelectedIssue *models.Issue
	BaseURL       string
	QueryParam    string
	EmptyText     string
}

templ Dashboard(props DashboardProps) {
	@BaseLayout() {
		@DashboardContent(props)
	}
}

templ DashboardContent(props DashboardProps) {
	<div class="flex flex-row">
		<div class="w-full flex flex-col border-r border-base-200 overflow-auto">
			<div class="flex p-2 border-b border-base-200 justify-between items-center gap-2">
				<div class="w-full">
					@components.SearchForm(components.SearchFormProps{
						RootURL:     props.BaseURL,
						SearchQuery: props.QueryParam,
						Target:      "#issue-list-container",
					})
				</div>
				<button
					class="btn btn-primary"
					hx-get="/issues/create"
					hx-target="#modal-container"
					hx-swap="innerHTML"
				>
					New Issue
				</button>
			</div>
			<div
				id="issue-list-container"
			>
				@DashboardIssueList(props.Issues, props.SelectedIssue.ID)
			</div>
		</div>
		<div id="issue-detail-container" class="w-full max-[770px]:hidden">
			@DashboardIssueDetail(props.SelectedIssue, props.EmptyText)
		</div>
	</div>
}

templ DashboardIssueDetail(selectedIssue *models.Issue, emptyText string) {
	if selectedIssue != nil {
		<div class="max-w-2xl p-2">
			@components.IssueDetail(components.IssueDetailProps{
				Issue: selectedIssue,
			})
		</div>
	} else {
		<div class="flex flex-col items-center justify-center">
			<p class="text-center">{ emptyText }</p>
			<a href="/" class="btn btn-primary btn-sm mt-4">Create an issue</a>
		</div>
	}
}

templ DashboardIssueList(issues []*models.Issue, selectedID string) {
	<section class="flex">
		@base.Table(
			[]templ.Component{
				base.PlainText("ID"),
				base.PlainText("Title"),
				base.PlainText("Status"),
				base.PlainText("Type"),
				base.PlainText("Priority"),
			},
			[]templ.Component{
				DashboardIssueRows(issues, selectedID),
			},
			templ.Attributes{},
		)
	</section>
}

templ DashboardIssueRows(issues []*models.Issue, selectedID string) {
	if len(issues) == 0 {
		<tr><td colspan="5" class="text-center py-4">No issues</td></tr>
	}
	for _, issue := range issues {
		{{
			var active string
			if selectedID == issue.ID {
				active = "bg-primary/10"
			}
		}}
		<tr
			hx-get="/"
			class={ "hover cursor-pointer min-h-full w-full", active }
			hx-target="main"
			hx-vals={ `{"selected-issue": "` + issue.ID + `"}` }
			hx-swap="innerHTML"
		>
			<td class="min-w-20 truncate">{ issue.ID }</td>
			<td class="truncate max-w-60">{ issue.Title }</td>
			<td>
				@components.StatusBadge(issue.Status)
			</td>
			<td>
				@components.TypeBadge(issue.IssueType)
			</td>
			<td>
				@components.PriorityBadge(issue.Priority)
			</td>
		</tr>
	}
}