package components

import "arabica/internal/models"

// DialogModalProps defines properties for a native HTML5 dialog modal
type DialogModalProps struct {
	ID    string // Dialog ID (e.g., "bean-modal")
	Title string
}

// BeanDialogModal renders the bean creation/edit modal using native <dialog>
templ BeanDialogModal(bean *models.Bean, roasters []models.Roaster) {
	<dialog id="entity-modal" class="modal-dialog">
		<div class="modal-content">
			<h3 class="modal-title">
				if bean != nil {
					Edit Bean
				} else {
					Add Bean
				}
			</h3>
			<form
				if bean != nil {
					hx-put={ "/api/beans/" + bean.RKey }
				} else {
					hx-post="/api/beans"
				}
				hx-trigger="submit"
				hx-swap="none"
				hx-on::after-request="if(event.detail.successful) { this.closest('dialog').close(); htmx.trigger('body', 'refreshManage'); } else if(event.detail.xhr && event.detail.xhr.status === 401) { this.closest('dialog').close(); window.__showSessionExpiredModal(); }"
				class="space-y-4"
			>
				if bean == nil {
					<div x-data="entitySuggest('/api/suggestions/beans')" class="relative">
						<input
							type="text"
							name="name"
							placeholder="Name *"
							required
							class="w-full form-input"
							x-model="query"
							@input.debounce.300ms="search()"
							@blur.debounce.200ms="showSuggestions = false"
							@focus="if (suggestions.length > 0) showSuggestions = true"
							autocomplete="off"
						/>
						<input type="hidden" name="source_ref" x-model="sourceRef"/>
						<template x-if="showSuggestions && suggestions.length > 0">
							<div class="suggestions-dropdown">
								<template x-for="s in suggestions" :key="s.source_uri">
									<button
										type="button"
										class="suggestions-item"
										@mousedown.prevent="selectBeanSuggestion(s)"
									>
										<span class="font-medium" x-text="s.name"></span>
										<template x-if="s.fields.origin">
											<span class="text-xs text-brown-500" x-text="s.fields.origin"></span>
										</template>
										<template x-if="s.count > 1">
											<span class="text-xs text-brown-400" x-text="s.count + ' users'"></span>
										</template>
									</button>
								</template>
							</div>
						</template>
					</div>
				} else {
					<input
						type="text"
						name="name"
						value={ getStringValue(bean, "name") }
						placeholder="Name *"
						required
						class="w-full form-input"
					/>
				}
				<input
					type="text"
					name="origin"
					value={ getStringValue(bean, "origin") }
					placeholder="Origin *"
					required
					class="w-full form-input"
				/>
				<input
					type="text"
					name="variety"
					value={ getStringValue(bean, "variety") }
					placeholder="Variety (e.g. SL28, Typica, Gesha)"
					class="w-full form-input"
				/>
				<select
					name="roaster_rkey"
					class="w-full form-input"
				>
					<option value="">Select Roaster (Optional)</option>
					for _, roaster := range roasters {
						<option
							value={ roaster.RKey }
							if bean != nil && bean.RoasterRKey == roaster.RKey {
								selected
							}
						>
							{ roaster.Name }
						</option>
					}
				</select>
				<select
					name="roast_level"
					class="w-full form-input"
				>
					<option value="">Select Roast Level (Optional)</option>
					for _, level := range models.RoastLevels {
						<option
							value={ level }
							if bean != nil && bean.RoastLevel == level {
								selected
							}
						>
							{ level }
						</option>
					}
				</select>
				<input
					type="text"
					name="process"
					value={ getStringValue(bean, "process") }
					placeholder="Process (e.g. Washed, Natural, Honey)"
					class="w-full form-input"
				/>
				<textarea
					name="description"
					placeholder="Description"
					rows="3"
					class="w-full form-textarea"
				>{ getStringValue(bean, "description") }</textarea>
				// Only show "close bag check" when editing
				if bean != nil {
					<div class="flex items-center gap-2">
						<input
							type="checkbox"
							name="closed"
							value="true"
							id="bean-closed-checkbox-modal"
							if bean != nil && bean.Closed {
								checked
							}
							class="rounded border-brown-300 text-brown-700 focus:ring-brown-500"
						/>
						<label for="bean-closed-checkbox-modal" class="text-sm text-brown-900">
							Bag is closed/finished
						</label>
					</div>
				}
				<div class="flex gap-2">
					<button type="submit" class="flex-1 btn-primary">
						Save
					</button>
					<button
						type="button"
						@click="$el.closest('dialog').close()"
						class="flex-1 btn-secondary"
					>
						Cancel
					</button>
				</div>
			</form>
		</div>
	</dialog>
}

// GrinderDialogModal renders the grinder creation/edit modal using native <dialog>
templ GrinderDialogModal(grinder *models.Grinder) {
	<dialog id="entity-modal" class="modal-dialog">
		<div class="modal-content">
			<h3 class="modal-title">
				if grinder != nil {
					Edit Grinder
				} else {
					Add Grinder
				}
			</h3>
			<form
				if grinder != nil {
					hx-put={ "/api/grinders/" + grinder.RKey }
				} else {
					hx-post="/api/grinders"
				}
				hx-trigger="submit"
				hx-swap="none"
				hx-on::after-request="if(event.detail.successful) { this.closest('dialog').close(); htmx.trigger('body', 'refreshManage'); } else if(event.detail.xhr && event.detail.xhr.status === 401) { this.closest('dialog').close(); window.__showSessionExpiredModal(); }"
				class="space-y-4"
			>
				if grinder == nil {
					<div x-data="entitySuggest('/api/suggestions/grinders')" class="relative">
						<input
							type="text"
							name="name"
							placeholder="Name *"
							required
							class="w-full form-input"
							x-model="query"
							@input.debounce.300ms="search()"
							@blur.debounce.200ms="showSuggestions = false"
							@focus="if (suggestions.length > 0) showSuggestions = true"
							autocomplete="off"
						/>
						<input type="hidden" name="source_ref" x-model="sourceRef"/>
						<template x-if="showSuggestions && suggestions.length > 0">
							<div class="suggestions-dropdown">
								<template x-for="s in suggestions" :key="s.source_uri">
									<button
										type="button"
										class="suggestions-item"
										@mousedown.prevent="selectGrinderSuggestion(s)"
									>
										<span class="font-medium" x-text="s.name"></span>
										<template x-if="s.fields.grinderType">
											<span class="text-xs text-brown-500" x-text="s.fields.grinderType"></span>
										</template>
										<template x-if="s.count > 1">
											<span class="text-xs text-brown-400" x-text="s.count + ' users'"></span>
										</template>
									</button>
								</template>
							</div>
						</template>
					</div>
				} else {
					<input
						type="text"
						name="name"
						value={ getStringValue(grinder, "name") }
						placeholder="Name *"
						required
						class="w-full form-input"
					/>
				}
				<select
					name="grinder_type"
					class="w-full form-input"
					required
				>
					<option value="">Select Grinder Type *</option>
					for _, gType := range models.GrinderTypes {
						<option
							value={ gType }
							if grinder != nil && grinder.GrinderType == gType {
								selected
							}
						>
							{ gType }
						</option>
					}
				</select>
				<select
					name="burr_type"
					class="w-full form-input"
				>
					<option value="">Select Burr Type (Optional)</option>
					for _, bType := range models.BurrTypes {
						<option
							value={ bType }
							if grinder != nil && grinder.BurrType == bType {
								selected
							}
						>
							{ bType }
						</option>
					}
				</select>
				<textarea
					name="notes"
					placeholder="Notes"
					rows="3"
					class="w-full form-textarea"
				>{ getStringValue(grinder, "notes") }</textarea>
				<div class="flex gap-2">
					<button type="submit" class="flex-1 btn-primary">
						Save
					</button>
					<button
						type="button"
						@click="$el.closest('dialog').close()"
						class="flex-1 btn-secondary"
					>
						Cancel
					</button>
				</div>
			</form>
		</div>
	</dialog>
}

// BrewerDialogModal renders the brewer creation/edit modal using native <dialog>
templ BrewerDialogModal(brewer *models.Brewer) {
	<dialog id="entity-modal" class="modal-dialog">
		<div class="modal-content">
			<h3 class="modal-title">
				if brewer != nil {
					Edit Brewer
				} else {
					Add Brewer
				}
			</h3>
			<form
				if brewer != nil {
					hx-put={ "/api/brewers/" + brewer.RKey }
				} else {
					hx-post="/api/brewers"
				}
				hx-trigger="submit"
				hx-swap="none"
				hx-on::after-request="if(event.detail.successful) { this.closest('dialog').close(); htmx.trigger('body', 'refreshManage'); } else if(event.detail.xhr && event.detail.xhr.status === 401) { this.closest('dialog').close(); window.__showSessionExpiredModal(); }"
				class="space-y-4"
			>
				if brewer == nil {
					<div x-data="entitySuggest('/api/suggestions/brewers')" class="relative">
						<input
							type="text"
							name="name"
							placeholder="Name *"
							required
							class="w-full form-input"
							x-model="query"
							@input.debounce.300ms="search()"
							@blur.debounce.200ms="showSuggestions = false"
							@focus="if (suggestions.length > 0) showSuggestions = true"
							autocomplete="off"
						/>
						<input type="hidden" name="source_ref" x-model="sourceRef"/>
						<template x-if="showSuggestions && suggestions.length > 0">
							<div class="suggestions-dropdown">
								<template x-for="s in suggestions" :key="s.source_uri">
									<button
										type="button"
										class="suggestions-item"
										@mousedown.prevent="selectBrewerSuggestion(s)"
									>
										<span class="font-medium" x-text="s.name"></span>
										<template x-if="s.fields.brewerType">
											<span class="text-xs text-brown-500" x-text="s.fields.brewerType"></span>
										</template>
										<template x-if="s.count > 1">
											<span class="text-xs text-brown-400" x-text="s.count + ' users'"></span>
										</template>
									</button>
								</template>
							</div>
						</template>
					</div>
				} else {
					<input
						type="text"
						name="name"
						value={ getStringValue(brewer, "name") }
						placeholder="Name *"
						required
						class="w-full form-input"
					/>
				}
				<input
					type="text"
					name="brewer_type"
					value={ getStringValue(brewer, "brewer_type") }
					placeholder="Type (e.g., Pour-Over, Immersion, Espresso)"
					class="w-full form-input"
				/>
				<textarea
					name="description"
					placeholder="Description"
					rows="3"
					class="w-full form-textarea"
				>{ getStringValue(brewer, "description") }</textarea>
				<div class="flex gap-2">
					<button type="submit" class="flex-1 btn-primary">
						Save
					</button>
					<button
						type="button"
						@click="$el.closest('dialog').close()"
						class="flex-1 btn-secondary"
					>
						Cancel
					</button>
				</div>
			</form>
		</div>
	</dialog>
}

// RoasterDialogModal renders the roaster creation/edit modal using native <dialog>
templ RoasterDialogModal(roaster *models.Roaster) {
	<dialog id="entity-modal" class="modal-dialog">
		<div class="modal-content">
			<h3 class="modal-title">
				if roaster != nil {
					Edit Roaster
				} else {
					Add Roaster
				}
			</h3>
			<form
				if roaster != nil {
					hx-put={ "/api/roasters/" + roaster.RKey }
				} else {
					hx-post="/api/roasters"
				}
				hx-trigger="submit"
				hx-swap="none"
				hx-on::after-request="if(event.detail.successful) { this.closest('dialog').close(); htmx.trigger('body', 'refreshManage'); } else if(event.detail.xhr && event.detail.xhr.status === 401) { this.closest('dialog').close(); window.__showSessionExpiredModal(); }"
				class="space-y-4"
			>
				if roaster == nil {
					<div x-data="entitySuggest('/api/suggestions/roasters')" class="relative">
						<input
							type="text"
							name="name"
							placeholder="Name *"
							required
							class="w-full form-input"
							x-model="query"
							@input.debounce.300ms="search()"
							@blur.debounce.200ms="showSuggestions = false"
							@focus="if (suggestions.length > 0) showSuggestions = true"
							autocomplete="off"
						/>
						<input type="hidden" name="source_ref" x-model="sourceRef"/>
						<template x-if="showSuggestions && suggestions.length > 0">
							<div class="suggestions-dropdown">
								<template x-for="s in suggestions" :key="s.source_uri">
									<button
										type="button"
										class="suggestions-item"
										@mousedown.prevent="selectRoasterSuggestion(s)"
									>
										<span class="font-medium" x-text="s.name"></span>
										<template x-if="s.fields.location">
											<span class="text-xs text-brown-500" x-text="s.fields.location"></span>
										</template>
										<template x-if="s.count > 1">
											<span class="text-xs text-brown-400" x-text="s.count + ' users'"></span>
										</template>
									</button>
								</template>
							</div>
						</template>
					</div>
				} else {
					<input
						type="text"
						name="name"
						value={ getStringValue(roaster, "name") }
						placeholder="Name *"
						required
						class="w-full form-input"
					/>
				}
				<input
					type="text"
					name="location"
					value={ getStringValue(roaster, "location") }
					placeholder="Location"
					class="w-full form-input"
				/>
				<input
					type="url"
					name="website"
					value={ getStringValue(roaster, "website") }
					placeholder="Website"
					class="w-full form-input"
				/>
				<div class="flex gap-2">
					<button type="submit" class="flex-1 btn-primary">
						Save
					</button>
					<button
						type="button"
						@click="$el.closest('dialog').close()"
						class="flex-1 btn-secondary"
					>
						Cancel
					</button>
				</div>
			</form>
		</div>
	</dialog>
}

// ReportDialogModalProps defines properties for the report dialog
type ReportDialogModalProps struct {
	SubjectURI string
	SubjectCID string
}

// ReportDialogModal renders the report modal for submitting content reports
templ ReportDialogModal(props ReportDialogModalProps) {
	<dialog id="report-modal" class="modal-dialog" x-data="{ reason: '', charCount: 0, submitting: false, error: '', success: false }">
		<div class="modal-content">
			<h3 class="modal-title">Report Content</h3>
			<template x-if="!success">
				<form
					@submit.prevent="
						submitting = true;
						error = '';
						const dialog = document.getElementById('report-modal');
						const body = new URLSearchParams({
							subject_uri: $el.querySelector('[name=subject_uri]').value,
							subject_cid: $el.querySelector('[name=subject_cid]').value,
							reason: reason
						});
						fetch('/api/report', {
							method: 'POST',
							headers: {'Content-Type': 'application/x-www-form-urlencoded'},
							body: body
						})
						.then(r => r.json().then(data => ({ok: r.ok, data})))
						.then(({ok, data}) => {
							submitting = false;
							if (ok) {
								success = true;
								setTimeout(() => dialog.close(), 2000);
							} else {
								error = data.message || 'Failed to submit report';
							}
						})
						.catch(() => {
							submitting = false;
							error = 'Network error. Please try again.';
						});
					"
					class="space-y-4"
				>
					<input type="hidden" name="subject_uri" value={ props.SubjectURI }/>
					<input type="hidden" name="subject_cid" value={ props.SubjectCID }/>
					<p class="text-sm text-brown-700">
						Please describe why you're reporting this content. Reports are reviewed by moderators.
					</p>
					<div>
						<textarea
							x-model="reason"
							@input="charCount = reason.length"
							name="reason"
							placeholder="Describe the issue (optional)"
							rows="4"
							maxlength="500"
							class="w-full form-textarea"
						></textarea>
						<div class="flex justify-between text-xs text-brown-500 mt-1">
							<span>Optional, but helpful for moderators</span>
							<span x-text="charCount + '/500'"></span>
						</div>
					</div>
					<template x-if="error">
						<div class="bg-red-100 border border-red-300 text-red-800 px-3 py-2 rounded-lg text-sm" x-text="error"></div>
					</template>
					<div class="flex gap-2">
						<button
							type="submit"
							class="flex-1 btn-primary"
							:disabled="submitting"
						>
							<span x-show="!submitting">Submit Report</span>
							<span x-show="submitting">Submitting...</span>
						</button>
						<button
							type="button"
							@click="$el.closest('dialog').close()"
							class="flex-1 btn-secondary"
							:disabled="submitting"
						>
							Cancel
						</button>
					</div>
				</form>
			</template>
			<template x-if="success">
				<div class="text-center py-4">
					<div class="text-green-600 mb-2">
						<svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path>
						</svg>
					</div>
					<p class="font-medium text-brown-900">Report Submitted</p>
					<p class="text-sm text-brown-600 mt-1">Thank you for helping keep our community safe.</p>
				</div>
			</template>
		</div>
	</dialog>
}

// Helper function to get string value from bean (handles nil case)
func getStringValue(entity interface{}, field string) string {
	if entity == nil {
		return ""
	}

	switch e := entity.(type) {
	case *models.Bean:
		if e == nil {
			return ""
		}
		switch field {
		case "name":
			return e.Name
		case "origin":
			return e.Origin
		case "variety":
			return e.Variety
		case "process":
			return e.Process
		case "description":
			return e.Description
		}
	case *models.Grinder:
		if e == nil {
			return ""
		}
		switch field {
		case "name":
			return e.Name
		case "notes":
			return e.Notes
		}
	case *models.Brewer:
		if e == nil {
			return ""
		}
		switch field {
		case "name":
			return e.Name
		case "brewer_type":
			return e.BrewerType
		case "description":
			return e.Description
		}
	case *models.Roaster:
		if e == nil {
			return ""
		}
		switch field {
		case "name":
			return e.Name
		case "location":
			return e.Location
		case "website":
			return e.Website
		}
	}

	return ""
}