"use client";

import {
	Button,
	Checkbox,
	Input,
	Label,
	RadioGroup,
	RadioGroupItem,
	Slider,
	Textarea,
} from "@mdxui/primitives";
import { Plus, X } from "lucide-react";
import type { QuestionOption, SurveyQuestion } from "./types";

interface QuestionPreviewProps {
	question: SurveyQuestion;
	onUpdate: (questionId: string, updates: Partial<SurveyQuestion>) => void;
	readOnly: boolean;
}

export function QuestionPreview({
	question,
	onUpdate,
	readOnly,
}: QuestionPreviewProps) {
	const handleAddOption = () => {
		const newOption: QuestionOption = {
			id: crypto.randomUUID(),
			label: `Option ${(question.options?.length || 0) + 1}`,
			value: `option-${(question.options?.length || 0) + 1}`,
		};
		onUpdate(question.id, {
			options: [...(question.options || []), newOption],
		});
	};

	const handleUpdateOption = (optionId: string, label: string) => {
		onUpdate(question.id, {
			options: question.options?.map((opt) =>
				opt.id === optionId
					? { ...opt, label, value: label.toLowerCase().replace(/\s+/g, "-") }
					: opt,
			),
		});
	};

	const handleRemoveOption = (optionId: string) => {
		onUpdate(question.id, {
			options: question.options?.filter((opt) => opt.id !== optionId),
		});
	};

	switch (question.type) {
		case "text":
		case "email":
		case "url":
		case "number":
			return (
				<Input
					type={question.type}
					placeholder={question.placeholder || "Your answer"}
					disabled
					className="opacity-50"
				/>
			);

		case "textarea":
			return (
				<Textarea
					placeholder={question.placeholder || "Your answer"}
					disabled
					className="opacity-50"
					rows={3}
				/>
			);

		case "single-choice":
			return (
				<div className="space-y-2">
					<RadioGroup disabled>
						{question.options?.map((option) => (
							<div key={option.id} className="flex items-center gap-2">
								<RadioGroupItem value={option.value} id={option.id} />
								{readOnly ? (
									<Label htmlFor={option.id}>{option.label}</Label>
								) : (
									<div className="flex flex-1 items-center gap-2">
										<Input
											value={option.label}
											onChange={(e) =>
												handleUpdateOption(option.id, e.target.value)
											}
											placeholder="Option label"
											className="flex-1"
										/>
										<Button
											variant="ghost"
											size="icon-sm"
											onClick={() => handleRemoveOption(option.id)}
											disabled={(question.options?.length || 0) <= 2}
										>
											<X className="size-4" />
										</Button>
									</div>
								)}
							</div>
						))}
					</RadioGroup>
					{!readOnly && (
						<Button variant="ghost" size="sm" onClick={handleAddOption}>
							<Plus className="mr-2 size-4" />
							Add Option
						</Button>
					)}
				</div>
			);

		case "multiple-choice":
			return (
				<div className="space-y-2">
					{question.options?.map((option) => (
						<div key={option.id} className="flex items-center gap-2">
							<Checkbox id={option.id} disabled />
							{readOnly ? (
								<Label htmlFor={option.id}>{option.label}</Label>
							) : (
								<div className="flex flex-1 items-center gap-2">
									<Input
										value={option.label}
										onChange={(e) =>
											handleUpdateOption(option.id, e.target.value)
										}
										placeholder="Option label"
										className="flex-1"
									/>
									<Button
										variant="ghost"
										size="icon-sm"
										onClick={() => handleRemoveOption(option.id)}
										disabled={(question.options?.length || 0) <= 2}
									>
										<X className="size-4" />
									</Button>
								</div>
							)}
						</div>
					))}
					{!readOnly && (
						<Button variant="ghost" size="sm" onClick={handleAddOption}>
							<Plus className="mr-2 size-4" />
							Add Option
						</Button>
					)}
				</div>
			);

		case "rating":
			return (
				<div className="flex gap-2">
					{[1, 2, 3, 4, 5].map((rating) => (
						<Button
							key={rating}
							variant="outline"
							size="icon"
							disabled
							className="size-10"
						>
							{rating}
						</Button>
					))}
				</div>
			);

		case "scale":
			return (
				<div className="space-y-2">
					<Slider disabled defaultValue={[50]} max={100} step={1} />
					<div className="flex justify-between text-xs text-muted-foreground">
						<span>0</span>
						<span>50</span>
						<span>100</span>
					</div>
				</div>
			);

		case "date":
			return <Input type="date" disabled className="opacity-50" />;

		case "boolean":
			return (
				<RadioGroup disabled>
					<div className="flex items-center gap-2">
						<RadioGroupItem value="yes" id="yes" />
						<Label htmlFor="yes">Yes</Label>
					</div>
					<div className="flex items-center gap-2">
						<RadioGroupItem value="no" id="no" />
						<Label htmlFor="no">No</Label>
					</div>
				</RadioGroup>
			);

		default:
			return null;
	}
}