"use client";

import React from "react";

import { SEARCH_SCOPE } from "@/lib/frontend/search/urlState";

import SearchQueryBox from "@/components/search/form/SearchQueryBox";
import SearchScopeSelect from "@/components/search/form/SearchScopeSelect";
import SearchLimitSelect from "@/components/search/form/SearchLimitSelect";
import SearchSingleBranchCombobox from "@/components/search/form/SearchSingleBranchCombobox";
import SearchMultiBranchPicker from "@/components/search/form/SearchMultiBranchPicker";

export default function SearchForm({
	branch,
	qDraft,
	onQDraftChange,
	onSubmit,
	currentQuery,
	isSubmitting,
	isAdminDev,
	scope,
	onScopeChange,
	onSingleBranchChange,
	availableBranches,
	branchesStatus,
	selectedBranches,
	onToggleBranch,
	onClearAllBranches,
	limit,
	onLimitChange,
}) {
	const canSearch = typeof qDraft === "string" && qDraft.trim().length > 0;

	return (
		<div className="space-y-4">
			<form
				onSubmit={(e) => {
					e.preventDefault();

					// UX rule:
					// - Only submit when the query is non-empty.
					// - This keeps the Search API safe and avoids accidental “match everything”.
					if (!canSearch) return;

					onSubmit();
				}}
				className="space-y-4"
			>
				{/* 
					Layout goal (RHL-038):
					- Desktop: one row with (1) scope, (2) query, (3) limit
					- Mobile: natural stacking
					Implementation:
					- Use a responsive grid that becomes 3 columns on lg+
					- Align items to the bottom so labels line up nicely.
				*/}
				<div className="flex items-start justify-between gap-3 flex-nowrap">
					<div className="flex justify-start gap-2 items-center">
						{/* 1) Scope (admin/dev only) */}
						{isAdminDev ? (
							<SearchScopeSelect
								branch={branch}
								scope={scope}
								onScopeChange={onScopeChange}
								isSubmitting={isSubmitting}
							/>
						) : null}

						{/* 
					Admin/dev: SINGLE branch selection.
					We keep this *below* the main row so the top row stays exactly:
					Scope | Query | Limit
				*/}
						{isAdminDev && scope === SEARCH_SCOPE.SINGLE ? (
							<div>
								<SearchSingleBranchCombobox
									branch={branch}
									branchesStatus={branchesStatus}
									availableBranches={availableBranches}
									onSingleBranchChange={onSingleBranchChange}
									isSubmitting={isSubmitting}
								/>
							</div>
						) : null}
					</div>

					<div className="flex flex-1">
						{/* 2) Query (always) */}
						<SearchQueryBox
							qDraft={qDraft}
							onQDraftChange={onQDraftChange}
							onSubmit={onSubmit}
							currentQuery={currentQuery}
							isSubmitting={isSubmitting}
							canSearch={canSearch}
						/>
					</div>

					{/* 3) Limit (always) */}
					<SearchLimitSelect
						limit={limit}
						onLimitChange={onLimitChange}
						isSubmitting={isSubmitting}
					/>
				</div>

				{/* 
					Admin/dev: SINGLE branch selection.
					We keep this *below* the main row so the top row stays exactly:
					Scope | Query | Limit
				*/}
				{/* {isAdminDev && scope === SEARCH_SCOPE.SINGLE ? (
					<div>
						<SearchSingleBranchCombobox
							branch={branch}
							branchesStatus={branchesStatus}
							availableBranches={availableBranches}
							onSingleBranchChange={onSingleBranchChange}
							isSubmitting={isSubmitting}
						/>
					</div>
				) : null} */}
			</form>

			{/* Multi scope branch picker remains below the form row (as requested). */}
			{isAdminDev && scope === SEARCH_SCOPE.MULTI ? (
				<SearchMultiBranchPicker
					branchesStatus={branchesStatus}
					availableBranches={availableBranches}
					selectedBranches={selectedBranches}
					onToggleBranch={onToggleBranch}
					onClearAllBranches={onClearAllBranches}
					isSubmitting={isSubmitting}
				/>
			) : null}
		</div>
	);
}