package components

import "fmt"

type ModalProps struct {
	ID       string
	Title    string
	Open     bool
	Content  templ.Component
	MaxWidth string // Optional: custom max-width class (defaults to max-w-xl)
}

templ Modal(props ModalProps) {
	{{
		maxWidth := props.MaxWidth
		if maxWidth == "" {
			maxWidth = "max-w-xl"
		}
	}}
	<div
		class={ "fixed inset-0 z-50 items-center justify-center mx-auto", maxWidth }
		id={ props.ID }
		x-data={ `{ open: ` + fmt.Sprintf("%t", props.Open) + ` }` }
		x-show="open"
		role="dialog"
		aria-modal="true"
		aria-labelledby="modal-title"
	>
		<div class="fixed inset-0 bg-gray-500/50" @click="open = false"></div>
		<div class="flex min-h-full items-center justify-center p-4 pointer-events-none">
			<div class={ "relative bg-base-100 rounded-lg w-full pointer-events-auto" }>
				<div class="flex justify-between items-center p-4 border-b">
					<h2 class="font-bold text-lg" id="modal-title">{ props.Title }</h2>
					<button type="button" class="btn btn-ghost" @click="open = false">✕</button>
				</div>
				<div class="p-4">
					if props.Content != nil {
						@props.Content
					}
				</div>
			</div>
		</div>
	</div>
}

templ ModalContainer() {
	<div id="modal-container"></div>
}

type ConfirmModalProps struct {
	Title         string
	Message       string
	ConfirmText   string
	CancelText    string
	ConfirmAction string
	ConfirmClass  string
	IssueID       string
}

templ ConfirmModal(props ConfirmModalProps) {
	<div
		class="fixed inset-0 z-50 max-w-xl items-center justify-center mx-auto"
		id="confirm-modal"
		x-data="{ open: true }"
		x-show="open"
		role="dialog"
		aria-modal="true"
		aria-labelledby="confirm-modal-title"
	>
		<div class="fixed inset-0 bg-gray-500/50" @click="open = false"></div>
		<div class="flex min-h-full items-center justify-center p-4 pointer-events-none">
			<div class="relative bg-base-100 rounded-lg w-full pointer-events-auto shadow-xl">
				<div class="flex justify-between items-center p-4 border-b">
					<h2 class="font-bold text-lg" id="confirm-modal-title">{ props.Title }</h2>
					<button type="button" class="btn btn-ghost btn-sm" @click="open = false">✕</button>
				</div>
				<div class="p-6">
					<p class="text-base-content/80">{ props.Message }</p>
				</div>
				<div class="flex gap-2 p-4 border-t justify-end">
					<button
						type="button"
						class="btn btn-ghost"
						@click="open = false"
					>
						if props.CancelText != "" {
							{ props.CancelText }
						} else {
							Cancel
						}
					</button>
					<button
						type="button"
						class={ "btn", props.ConfirmClass }
						hx-delete={ props.ConfirmAction }
						hx-target="body"
						@click="open = false"
					>
						if props.ConfirmText != "" {
							{ props.ConfirmText }
						} else {
							Confirm
						}
					</button>
				</div>
			</div>
		</div>
	</div>
}