package components

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

type IssueFormProps struct {
	PostAction   string
	PatchAction  string
	DeleteAction string // Optional: URL for delete confirmation modal
	Title        string
	Description  string
	Status       string
	CloseReason  string // Set when status is "closed"
	Priority     int
	IssueType    string
	Class        string
	Attrs        templ.Attributes
	Target       string // Optional: if empty, server controls via HX-Target header
}

templ IssueForm(props IssueFormProps) {
	<div class={ "w-full max-w-lg mx-auto ", props.Class } x-data="{ status: $el.dataset.status }" data-status={ props.Status }>
		<form
			class="form space-y-1"
			if props.PatchAction != "" {
				hx-patch={ props.PatchAction }
			}
			if props.PostAction != "" {
				hx-post={ props.PostAction }
			}
			if props.Target != "" {
				hx-target={ props.Target }
			}
			hx-swap="innerHTML"
			{ props.Attrs... }
		>
			@base.Input(base.InputProps{
				Name:     "title",
				Label:    "Title",
				Value:    props.Title,
				Class:    "w-full",
				Required: true,
			})
			@base.Textarea(base.TextareaProps{
				Name:  "description",
				Label: "Description",
				Value: props.Description,
				Class: "w-full",
			})
			@base.Select(base.SelectProps{
				Name:     "status",
				Label:    "Status",
				Required: true,
				Options: []base.SelectOption{
					{Label: "Open", Value: "open", Selected: props.Status == "open"},
					{Label: "In Progress", Value: "in_progress", Selected: props.Status == "in_progress"},
					{Label: "Closed", Value: "closed", Selected: props.Status == "closed"},
				},
				Size:  "md",
				Attrs: templ.Attributes{"x-model": "status"},
			})
			// Show close reason input when status is closed; not adding close reason to db
			if props.PatchAction != "" {
				<div x-show="status === 'closed'" x-cloak>
					@base.Textarea(base.TextareaProps{
						Name:        "close_reason",
						Label:       "Reason for closing issue",
						Value:       props.CloseReason,
						Class:       "w-full",
						Placeholder: "Describe why this issue is being closed...",
						Rows:        3,
					})
				</div>
			}
			@base.Select(base.SelectProps{
				Name:     "issue_type",
				Label:    "Issue Type",
				Required: true,
				Options: []base.SelectOption{
					{Label: "Task", Value: "task", Selected: props.IssueType == "task"},
					{Label: "Bug", Value: "bug", Selected: props.IssueType == "bug"},
					{Label: "Feature", Value: "feature", Selected: props.IssueType == "feature"},
					{Label: "Chore", Value: "chore", Selected: props.IssueType == "chore"},
				},
				Size: "md",
			})
			@base.Range(base.RangeProps{
				Name:  "priority",
				Label: "Priority",
				Class: "flex-1",
				Min:   0,
				Max:   4,
				Value: props.Priority,
				Step:  1,
			})
			<button type="submit" class="btn btn-primary w-full mt-4">
				Submit Issue
			</button>
		</form>
		if props.DeleteAction != "" {
			<button
				type="button"
				class="btn btn-error w-full mt-2"
				hx-get={ props.DeleteAction }
				hx-target="#modal-container"
				hx-swap="innerHTML"
			>
				Delete Issue
			</button>
		}
		if props.Target == "" {
			<div id="result"></div>
		}
	</div>
}

type IssueTableProps struct {
	Issues []*models.Issue
}

templ IssueTable(props IssueTableProps) {
	@base.Table(
		[]templ.Component{
			base.PlainText("ID"),
			base.PlainText("Title"),
			base.PlainText("Status"),
			base.PlainText("Type"),
			base.PlainText("Priority"),
			base.PlainText("Actions"),
		},
		[]templ.Component{
			IssueRows(props.Issues),
		},
		templ.Attributes{},
	)
}

templ IssueRows(issues []*models.Issue) {
	for _, issue := range issues {
		<tr class="hover">
			<td class="px-4 py-2 border">
				<a
					class="link link-primary font-mono"
					hx-get={ "/issues/" + issue.ID }
					hx-target="main"
					hx-swap="innerHTML"
					hx-push-url="true"
				>{ issue.ID }</a>
			</td>
			<td class="px-4 py-2 border">
				<a
					class="hover:text-primary"
					hx-get={ "/issues/" + issue.ID }
					hx-target="main"
					hx-swap="innerHTML"
					hx-push-url="true"
				>{ issue.Title }</a>
			</td>
			<td class="px-4 py-2 border">{ string(issue.Status) }</td>
			<td class="px-4 py-2 border">{ string(issue.IssueType) }</td>
			<td class="px-4 py-2 border">{ fmt.Sprintf("P%d", issue.Priority) }</td>
			<td class="px-4 py-2 border">
				<button
					type="button"
					class="btn btn-error btn-xs btn-ghost"
					hx-delete={ "/issues/" + issue.ID }
					hx-confirm="Are you sure you want to delete this issue? This action cannot be undone."
					hx-target="body"
					title="Delete issue"
				>
					Delete
				</button>
			</td>
		</tr>
	}
}