"use client";

import { useState, useEffect } from "react";
import { Cookie, X, Settings } from "lucide-react";

export default function CookieBanner() {
	const [isVisible, setIsVisible] = useState(false);
	const [showPreferences, setShowPreferences] = useState(false);
	const [preferences, setPreferences] = useState({
		necessary: true,
		analytics: false,
		marketing: false,
	});

	// Verifică dacă există deja consimțământ salvat
	useEffect(() => {
		const getCookie = (name) => {
			const value = `; ${document.cookie}`;
			const parts = value.split(`; ${name}=`);
			if (parts.length === 2) return parts.pop().split(";").shift();
			return null;
		};

		const savedConsent = getCookie("cookie_consent");
		if (!savedConsent) {
			// Nu există consimțământ salvat, arată banner-ul
			setIsVisible(true);
		} else {
			// Există deja consimțământ, nu arăta banner-ul
			setIsVisible(false);
			try {
				const parsed = JSON.parse(decodeURIComponent(savedConsent));
				setPreferences(parsed);
				console.log("Preferințe încărcate:", parsed);
			} catch (e) {
				console.error("Eroare la parsarea cookie-ului:", e);
			}
		}
	}, []);

	if (!isVisible) return null;

	const saveCookieConsent = (prefs) => {
		const cookieValue = encodeURIComponent(JSON.stringify(prefs));
		// Salvează pentru 1 an
		const maxAge = 365 * 24 * 60 * 60;
		document.cookie = `cookie_consent=${cookieValue}; max-age=${maxAge}; path=/; SameSite=Lax`;
	};

	const handleAcceptAll = () => {
		const prefs = { necessary: true, analytics: true, marketing: true };
		setPreferences(prefs);
		saveCookieConsent(prefs);
		setIsVisible(false);
		console.log("Toate cookie-urile acceptate");
		// Aici activezi Google Analytics, Facebook Pixel, etc.
	};

	const handleRejectAll = () => {
		const prefs = { necessary: true, analytics: false, marketing: false };
		setPreferences(prefs);
		saveCookieConsent(prefs);
		setIsVisible(false);
		console.log("Cookie-uri opționale respinse");
	};

	const handleSavePreferences = () => {
		saveCookieConsent(preferences);
		setIsVisible(false);
		console.log("Preferințe salvate:", preferences);
	};

	return (
		<>
			<div className='cookie-overlay'>
				<div className='cookie-container'>
					<div className='cookie-card'>
						{/* Header */}
						<div className='cookie-header'>
							<div className='header-content'>
								<div className='icon-wrapper'>
									<Cookie size={20} />
								</div>
								<div>
									<h3 className='title'>Cookie-uri și confidențialitate</h3>
									<p className='subtitle'>Respectăm confidențialitatea ta</p>
								</div>
							</div>
							<button onClick={() => setIsVisible(false)} className='close-btn'>
								<X size={20} />
							</button>
						</div>

						{/* Content */}
						{!showPreferences ? (
							<>
								<div className='cookie-content'>
									<p className='description'>
										Folosim cookie-uri pentru a-ți oferi o experiență optimă. Cookie-urile
										esențiale sunt necesare pentru funcționarea site-ului, iar cele
										opționale ne ajută să îmbunătățim serviciile.
									</p>
									<a href='/politica-cookies' className='policy-link'>
										Citește politica de cookie-uri →
									</a>
								</div>

								{/* Buttons */}
								<div className='cookie-actions'>
									<button onClick={handleAcceptAll} className='btn btn-primary'>
										Acceptă toate
									</button>
									<button onClick={handleRejectAll} className='btn btn-secondary'>
										Refuză opționale
									</button>
									<button
										onClick={() => setShowPreferences(true)}
										className='btn btn-outline'>
										<Settings size={16} />
										<span className='settings-text'>Personalizează</span>
									</button>
								</div>
							</>
						) : (
							<>
								<div className='preferences-content'>
									{/* Necessary Cookies */}
									<div className='preference-item'>
										<div className='preference-info'>
											<h4 className='preference-title'>Cookie-uri necesare</h4>
											<p className='preference-desc'>
												Esențiale pentru funcționarea site-ului
											</p>
										</div>
										<div className='toggle-wrapper'>
											<div className='toggle toggle-disabled'>
												<div className='toggle-circle'></div>
											</div>
											<span className='toggle-label'>Obligatoriu</span>
										</div>
									</div>

									{/* Analytics Cookies */}
									<div className='preference-item'>
										<div className='preference-info'>
											<h4 className='preference-title'>Cookie-uri de analiză</h4>
											<p className='preference-desc'>
												Ne ajută să înțelegem cum folosești site-ul
											</p>
										</div>
										<button
											onClick={() =>
												setPreferences({
													...preferences,
													analytics: !preferences.analytics,
												})
											}
											className='toggle-btn'>
											<div
												className={`toggle ${
													preferences.analytics ? "toggle-active" : ""
												}`}>
												<div className='toggle-circle'></div>
											</div>
										</button>
									</div>

									{/* Marketing Cookies */}
									<div className='preference-item'>
										<div className='preference-info'>
											<h4 className='preference-title'>Cookie-uri de marketing</h4>
											<p className='preference-desc'>
												Folosite pentru a-ți afișa reclame relevante
											</p>
										</div>
										<button
											onClick={() =>
												setPreferences({
													...preferences,
													marketing: !preferences.marketing,
												})
											}
											className='toggle-btn'>
											<div
												className={`toggle ${
													preferences.marketing ? "toggle-active" : ""
												}`}>
												<div className='toggle-circle'></div>
											</div>
										</button>
									</div>
								</div>

								{/* Preference Buttons */}
								<div className='cookie-actions'>
									<button onClick={handleSavePreferences} className='btn btn-primary'>
										Salvează preferințele
									</button>
									<button
										onClick={() => setShowPreferences(false)}
										className='btn btn-secondary'>
										Înapoi
									</button>
								</div>
							</>
						)}
					</div>
				</div>
			</div>

			<style jsx>{`
				.cookie-overlay {
					position: fixed;
					inset: 0;
					z-index: 9999;
					display: flex;
					align-items: flex-end;
					justify-content: center;
					pointer-events: none;
				}

				.cookie-container {
					pointer-events: auto;
					width: 100%;
					max-width: 32rem;
					margin-bottom: 1.5rem;
					margin-left: 1rem;
					margin-right: 1rem;
				}

				.cookie-card {
					background: white;
					border-radius: 1rem;
					box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
					border: 1px solid #e5e7eb;
					overflow: hidden;
				}

				.cookie-header {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					padding: 1.5rem;
					padding-bottom: 1rem;
				}

				.header-content {
					display: flex;
					align-items: center;
					gap: 0.75rem;
				}

				.icon-wrapper {
					width: 2.5rem;
					height: 2.5rem;
					background: linear-gradient(to bottom right, #e0f2fe, #ddd6fe);
					border-radius: 0.75rem;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #0d6efd;
				}

				.title {
					font-size: 1.125rem;
					font-weight: 600;
					color: #111827;
					margin: 0;
				}

				.subtitle {
					font-size: 0.75rem;
					color: #6b7280;
					margin: 0.125rem 0 0 0;
				}

				.close-btn {
					color: #9ca3af;
					background: none;
					border: none;
					padding: 0.25rem;
					border-radius: 0.5rem;
					cursor: pointer;
					transition: all 0.2s;
				}

				.close-btn:hover {
					color: #4b5563;
					background: #f9fafb;
				}

				.cookie-content {
					padding: 0 1.5rem 1rem 1.5rem;
				}

				.description {
					font-size: 0.875rem;
					color: #4b5563;
					line-height: 1.6;
					margin: 0;
				}

				.policy-link {
					font-size: 0.875rem;
					color: #0d6efd;
					font-weight: 500;
					display: inline-flex;
					align-items: center;
					margin-top: 0.5rem;
					text-decoration: none;
					transition: color 0.2s;
				}

				.policy-link:hover {
					color: #0b5ed7;
					text-decoration: underline;
				}

				.cookie-actions {
					padding: 0 1.5rem 1.5rem 1.5rem;
					display: flex;
					flex-direction: column;
					gap: 0.75rem;
				}

				.btn {
					padding: 0.75rem 1.5rem;
					border-radius: 0.75rem;
					font-weight: 500;
					cursor: pointer;
					transition: all 0.2s;
					border: none;
					font-size: 0.875rem;
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 0.5rem;
				}

				.btn-primary {
					background: linear-gradient(to right, #0d6efd, #0b5ed7);
					color: white;
					box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
				}

				.btn-primary:hover {
					background: linear-gradient(to right, #0b5ed7, #0a58ca);
					box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
				}

				.btn-secondary {
					background: #f3f4f6;
					color: #374151;
				}

				.btn-secondary:hover {
					background: #e5e7eb;
				}

				.btn-outline {
					background: white;
					border: 2px solid #e5e7eb;
					color: #374151;
				}

				.btn-outline:hover {
					border-color: #d1d5db;
					background: #f9fafb;
				}

				.settings-text {
					display: none;
				}

				.preferences-content {
					padding: 0 1.5rem 1rem 1.5rem;
					display: flex;
					flex-direction: column;
					gap: 1rem;
				}

				.preference-item {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					padding: 1rem;
					background: #f9fafb;
					border-radius: 0.75rem;
				}

				.preference-info {
					flex: 1;
				}

				.preference-title {
					font-size: 0.875rem;
					font-weight: 500;
					color: #111827;
					margin: 0;
				}

				.preference-desc {
					font-size: 0.75rem;
					color: #6b7280;
					margin: 0.25rem 0 0 0;
				}

				.toggle-wrapper {
					margin-left: 1rem;
					display: flex;
					flex-direction: column;
					align-items: flex-end;
				}

				.toggle-btn {
					background: none;
					border: none;
					padding: 0;
					cursor: pointer;
					margin-left: 1rem;
				}

				.toggle {
					width: 3rem;
					height: 1.5rem;
					border-radius: 9999px;
					display: flex;
					align-items: center;
					padding: 0 0.25rem;
					transition: all 0.3s;
					background: #d1d5db;
				}

				.toggle-active {
					background: #0d6efd;
					justify-content: flex-end;
				}

				.toggle-disabled {
					background: #0d6efd;
					justify-content: flex-end;
					opacity: 0.5;
					cursor: not-allowed;
				}

				.toggle-circle {
					width: 1rem;
					height: 1rem;
					background: white;
					border-radius: 9999px;
				}

				.toggle-label {
					font-size: 0.75rem;
					color: #9ca3af;
					margin-top: 0.25rem;
				}

				@media (min-width: 640px) {
					.cookie-actions {
						flex-direction: row;
					}

					.btn {
						flex: 1;
					}

					.btn-outline {
						flex: 0 0 auto;
					}

					.settings-text {
						display: inline;
					}
				}
			`}</style>
		</>
	);
}
