"use client";

import { Monitor, Moon, Sparkles, Sun, Zap } from "lucide-react";
import { useTheme } from "next-themes";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
import { useIsMobile } from "@/hooks/use-mobile";
import type { UserSettings } from "@/lib/user-settings";
import { cn } from "@/lib/utils";

interface SettingsPanelProps {
	adminAiEnabled: boolean;
	className?: string;
	hasLoadedSettings: boolean;
	onSettingsChange: (changes: Partial<UserSettings>) => void;
	settings: UserSettings;
}

const settingRowClasses = "rounded-[10px] bg-card p-4 shadow-sm";

export function SettingsPanel({
	adminAiEnabled,
	className,
	hasLoadedSettings,
	onSettingsChange,
	settings,
}: SettingsPanelProps) {
	const isMobile = useIsMobile();
	const { setTheme, theme } = useTheme();
	const valuePrefix = hasLoadedSettings
		? "Current preference"
		: "Default value";
	const summaryTitle = hasLoadedSettings
		? "Current values"
		: "Default values while settings load";
	const summaryDescription = hasLoadedSettings
		? "These values come from LocalCal's saved in-browser settings and can feed future app behavior."
		: "These defaults render first, then any saved values replace them once app settings finish loading.";
	const panelTitle = "App preferences";

	return (
		<section className={className}>
			<div
				className={cn(
					"gap-4",
					isMobile ? "flex flex-col" : "flex items-start justify-between",
				)}
			>
				<div className="space-y-1">
					<p className="text-xs font-semibold uppercase tracking-[0.22em] text-primary">
						Settings
					</p>
					<h2 className="text-lg font-semibold tracking-tight">{panelTitle}</h2>
					<p className="max-w-2xl text-sm leading-relaxed text-muted-foreground">
						These typed preferences are saved in this browser for LocalCal so
						future AI workflow flags can read from one shared model.
					</p>
				</div>
				<Badge variant="outline" className="self-start rounded-full px-3 py-1">
					{hasLoadedSettings ? "Settings ready" : "Checking saved settings"}
				</Badge>
			</div>

			<div
				className={cn(
					"mt-5 grid gap-4",
					isMobile
						? "grid-cols-1"
						: "grid-cols-[minmax(0,1.7fr)_minmax(18rem,1fr)]",
				)}
			>
				<div className="grid gap-4">
					<div className={settingRowClasses}>
						<div className="flex items-start gap-3">
							<div className="mt-0.5 rounded-full bg-primary/10 p-2 text-primary">
								<Zap className="h-4 w-4" />
							</div>
							<div className="min-w-0 flex-1 space-y-3">
								<div className="space-y-1">
									<Label
										htmlFor="settings-skip-ai-review"
										className="cursor-pointer"
									>
										Prefer direct AI event creation
									</Label>
									<p className="text-sm leading-relaxed text-muted-foreground">
										When enabled, a single AI-generated event will be created
										directly instead of waiting on extra review steps.
									</p>
								</div>
								<Label
									htmlFor="settings-skip-ai-review"
									className="min-h-11 cursor-pointer justify-between rounded-[8px] bg-secondary px-3 py-2 shadow-[inset_0_0_0_1px_var(--color-border)]"
								>
									<span className="text-sm font-medium text-foreground">
										{settings.skipAiReview
											? `${valuePrefix}: on`
											: `${valuePrefix}: off`}
									</span>
									<Checkbox
										id="settings-skip-ai-review"
										checked={settings.skipAiReview}
										className="size-5"
										disabled={!hasLoadedSettings}
										onCheckedChange={(checked) => {
											onSettingsChange({ skipAiReview: checked === true });
										}}
									/>
								</Label>
							</div>
						</div>
					</div>

					<div className={settingRowClasses}>
						<div className="flex items-start gap-3">
							<div className="mt-0.5 rounded-full bg-primary/10 p-2 text-primary">
								<Sparkles className="h-4 w-4" />
							</div>
							<div className="min-w-0 flex-1 space-y-3">
								<div className="space-y-1">
									<Label
										htmlFor="settings-ai-enabled"
										className="cursor-pointer"
									>
										Enable AI integrations for this browser
									</Label>
									<p className="text-sm leading-relaxed text-muted-foreground">
										Turn AI creation and summaries on or off locally.
										Admin-level AI disablement still overrides this preference.
									</p>
								</div>
								<Label
									htmlFor="settings-ai-enabled"
									className="min-h-11 cursor-pointer justify-between rounded-[8px] bg-secondary px-3 py-2 shadow-[inset_0_0_0_1px_var(--color-border)]"
								>
									<span className="text-sm font-medium text-foreground">
										{settings.aiEnabled
											? `${valuePrefix}: enabled`
											: `${valuePrefix}: disabled`}
									</span>
									<Checkbox
										id="settings-ai-enabled"
										checked={settings.aiEnabled}
										className="size-5"
										disabled={!hasLoadedSettings || !adminAiEnabled}
										onCheckedChange={(checked) => {
											onSettingsChange({ aiEnabled: checked === true });
										}}
									/>
								</Label>
								{!adminAiEnabled && (
									<p className="text-xs leading-relaxed text-muted-foreground">
										AI is disabled by the administrator, so this local
										preference is read-only.
									</p>
								)}
							</div>
						</div>
					</div>

					<div className={settingRowClasses}>
						<div className="flex items-start gap-3">
							<div className="mt-0.5 rounded-full bg-primary/10 p-2 text-primary">
								<Sun className="h-4 w-4" />
							</div>
							<div className="min-w-0 flex-1 space-y-3">
								<div className="space-y-1">
									<p className="text-sm font-medium text-foreground">
										Theme preference
									</p>
									<p className="text-sm leading-relaxed text-muted-foreground">
										Choose the appearance LocalCal should use on this device.
									</p>
								</div>
								<div
									className={cn(
										"grid gap-2",
										isMobile ? "grid-cols-1" : "grid-cols-3",
									)}
								>
									<Button
										type="button"
										variant={theme === "light" ? "default" : "outline"}
										onClick={() => setTheme("light")}
									>
										<Sun className="h-4 w-4" />
										Light
									</Button>
									<Button
										type="button"
										variant={theme === "dark" ? "default" : "outline"}
										onClick={() => setTheme("dark")}
									>
										<Moon className="h-4 w-4" />
										Dark
									</Button>
									<Button
										type="button"
										variant={theme === "system" ? "default" : "outline"}
										onClick={() => setTheme("system")}
									>
										<Monitor className="h-4 w-4" />
										System
									</Button>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div className={cn(settingRowClasses, "space-y-3")}>
					<div>
						<p className="text-sm font-medium">{summaryTitle}</p>
						<p className="mt-1 text-sm leading-relaxed text-muted-foreground">
							{summaryDescription}
						</p>
					</div>
					<dl
						className={cn(
							"grid gap-3",
							isMobile ? "grid-cols-1" : "grid-cols-2",
						)}
					>
						<div className="rounded-[8px] bg-secondary p-3 shadow-[inset_0_0_0_1px_var(--color-border)]">
							<dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
								Direct create preference
							</dt>
							<dd className="mt-1 text-sm font-medium">
								{settings.skipAiReview
									? `${valuePrefix}: on`
									: `${valuePrefix}: off`}
							</dd>
						</div>
						<div className="rounded-[8px] bg-secondary p-3 shadow-[inset_0_0_0_1px_var(--color-border)]">
							<dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
								AI integrations
							</dt>
							<dd className="mt-1 text-sm font-medium">
								{settings.aiEnabled
									? `${valuePrefix}: enabled`
									: `${valuePrefix}: disabled`}
							</dd>
						</div>
					</dl>
				</div>
			</div>
		</section>
	);
}
