"use client";

import { RiCalculatorLine, RiEyeLine, RiEyeOffLine } from "@remixicon/react";
import { usePrivacyMode } from "@/shared/components/providers/privacy-provider";
import { Badge } from "@/shared/components/ui/badge";

const itemClass =
	"flex w-full items-center gap-2.5 rounded-sm px-2 py-2 text-sm text-foreground hover:bg-accent transition-colors cursor-pointer";

type NavToolsDropdownProps = {
	onOpenCalculator: () => void;
};

export function NavToolsDropdown({ onOpenCalculator }: NavToolsDropdownProps) {
	const { privacyMode, toggle } = usePrivacyMode();

	return (
		<ul className="grid w-72 gap-0.5 p-2">
			<li>
				<button type="button" className={itemClass} onClick={onOpenCalculator}>
					<span className="text-primary shrink-0">
						<RiCalculatorLine className="size-4" />
					</span>
					<span className="flex flex-col flex-1 text-left">
						<span className="font-medium">Calculadora</span>
						<span className="text-xs text-muted-foreground lowercase">
							Faça cálculos rápidos
						</span>
					</span>
				</button>
			</li>
			<li>
				<button type="button" onClick={toggle} className={itemClass}>
					<span className="text-primary shrink-0">
						{privacyMode ? (
							<RiEyeOffLine className="size-4" />
						) : (
							<RiEyeLine className="size-4" />
						)}
					</span>
					<span className="flex flex-col flex-1 text-left">
						<span className="font-medium">Privacidade</span>
						<span className="text-xs text-muted-foreground lowercase">
							Oculta valores na tela
						</span>
					</span>
					{privacyMode && (
						<Badge
							variant="secondary"
							className="text-xs px-1.5 py-0 h-4 text-success"
						>
							Ativo
						</Badge>
					)}
				</button>
			</li>
		</ul>
	);
}

type MobileToolsProps = {
	onClose: () => void;
	onOpenCalculator: () => void;
};

export function MobileTools({ onClose, onOpenCalculator }: MobileToolsProps) {
	const { privacyMode, toggle } = usePrivacyMode();

	return (
		<>
			<button
				type="button"
				onClick={() => {
					onClose();
					onOpenCalculator();
				}}
				className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors text-muted-foreground hover:text-foreground hover:bg-accent"
			>
				<span className="text-muted-foreground shrink-0">
					<RiCalculatorLine className="size-4" />
				</span>
				<span className="flex-1 text-left">calculadora</span>
			</button>
			<button
				type="button"
				onClick={() => {
					toggle();
					onClose();
				}}
				className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors text-muted-foreground hover:text-foreground hover:bg-accent"
			>
				<span className="text-muted-foreground shrink-0">
					{privacyMode ? (
						<RiEyeOffLine className="size-4" />
					) : (
						<RiEyeLine className="size-4" />
					)}
				</span>
				<span className="flex-1 text-left">privacidade</span>
				{privacyMode && (
					<Badge
						variant="secondary"
						className="text-xs px-1.5 py-0 h-4 text-success"
					>
						Ativo
					</Badge>
				)}
			</button>
		</>
	);
}
