"use client";

import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import {
	Button,
	Card,
	CardContent,
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuTrigger,
	Input,
	Label,
	Switch,
} from "@mdxui/primitives";
import { cn } from "@mdxui/primitives/lib/utils";
import { Copy, GripVertical, MoreVertical, Trash2 } from "lucide-react";
import { QuestionPreview } from "./question-preview";
import type { SurveyQuestion } from "./types";

interface QuestionItemProps {
	question: SurveyQuestion;
	index: number;
	onUpdate: (questionId: string, updates: Partial<SurveyQuestion>) => void;
	onDelete: (questionId: string) => void;
	onDuplicate: (questionId: string) => void;
	onSelect?: () => void;
	readOnly: boolean;
}

export function QuestionItem({
	question,
	index,
	onUpdate,
	onDelete,
	onDuplicate,
	onSelect: _onSelect,
	readOnly,
}: QuestionItemProps) {
	const {
		attributes,
		listeners,
		setNodeRef,
		transform,
		transition,
		isDragging,
	} = useSortable({
		id: question.id,
		disabled: readOnly,
	});

	const style = {
		transform: CSS.Transform.toString(transform),
		transition,
	};

	return (
		<div
			ref={setNodeRef}
			style={style}
			className={cn("touch-none", isDragging && "opacity-50")}
		>
			<Card>
				<CardContent className="p-4">
					<div className="space-y-4">
						<div className="flex items-start gap-3">
							{!readOnly && (
								<button
									type="button"
									className="mt-2 cursor-grab touch-none active:cursor-grabbing"
									{...attributes}
									{...listeners}
								>
									<GripVertical className="size-5 text-muted-foreground" />
								</button>
							)}
							<div className="flex-1 space-y-3">
								<div className="flex items-start gap-2">
									<div className="flex size-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary">
										{index + 1}
									</div>
									<div className="flex-1 space-y-2">
										<Input
											value={question.title}
											onChange={(e) =>
												onUpdate(question.id, { title: e.target.value })
											}
											placeholder="Question title"
											className="font-medium"
											disabled={readOnly}
										/>
										<Input
											value={question.description || ""}
											onChange={(e) =>
												onUpdate(question.id, { description: e.target.value })
											}
											placeholder="Description (optional)"
											className="text-sm text-muted-foreground"
											disabled={readOnly}
										/>
									</div>
								</div>

								<QuestionPreview
									question={question}
									onUpdate={onUpdate}
									readOnly={readOnly}
								/>

								<div className="flex items-center justify-between">
									<div className="flex items-center gap-2">
										<Switch
											id={`required-${question.id}`}
											checked={question.required}
											onCheckedChange={(checked) =>
												onUpdate(question.id, { required: checked })
											}
											disabled={readOnly}
										/>
										<Label
											htmlFor={`required-${question.id}`}
											className="text-sm"
										>
											Required
										</Label>
									</div>

									{!readOnly && (
										<DropdownMenu>
											<DropdownMenuTrigger asChild>
												<Button variant="ghost" size="icon-sm">
													<MoreVertical className="size-4" />
												</Button>
											</DropdownMenuTrigger>
											<DropdownMenuContent align="end">
												<DropdownMenuItem
													onClick={() => onDuplicate(question.id)}
												>
													<Copy className="mr-2 size-4" />
													Duplicate
												</DropdownMenuItem>
												<DropdownMenuItem
													onClick={() => onDelete(question.id)}
													className="text-destructive"
												>
													<Trash2 className="mr-2 size-4" />
													Delete
												</DropdownMenuItem>
											</DropdownMenuContent>
										</DropdownMenu>
									)}
								</div>
							</div>
						</div>
					</div>
				</CardContent>
			</Card>
		</div>
	);
}