"use client"

import { useState, useRef } from 'react';
import { fetchFruits } from '@/app/lib/action';
import { useClickOutside } from '@/app/hooks/useClickOutside';
import Link from 'next/link';

export default function NotificationsButton() {
	const [isOpen, setIsOpen] = useState(false);
	const [data, setData] = useState<string | null>(null);
	const [loading, setLoading] = useState(false);
	const [error, setError] = useState<string | null>(null);
	const menuRef = useRef<HTMLDivElement | null>(null);

	useClickOutside(menuRef, () => {
		setIsOpen(false);
	});

	const fetchData = async () => {
		setLoading(true);
		setError(null);

		try {
			const result = await fetchFruits();
			setData("result");
			setIsOpen(true);
		} catch (err) {
			setError('error message');
		} finally {
			setLoading(false);
		}
	};

	const handleButtonClick = () => {
		if (!isOpen) {
			fetchData();
		} else {
			setIsOpen(false);
		}
	};

	return (
		<div className="notification-wrapper" ref={menuRef}>
			<button
				className="icon-btn"
				id="notifications-btn"
				title="Уведомления"
				onClick={handleButtonClick}
			>
				<svg viewBox="0 0 24 24" fill="currentColor" style={{ width: "20px", height: "20px" }}>
					<path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"></path>
				</svg>
			</button>
			<div className={`notification-dropdown ${isOpen ? 'show' : ''}`}>
				{error ? (
					<div className="p-4 text-red-500">{error}</div>
				) : (
					<>
						<div className='notification-header'>
							<h4>Уведомления</h4>
							<span className="notification-count">Нет новых</span>
						</div>
						{data ? (
							<div className="notification-list">
								<div className="notification-item">
									<div className="notification-icon">✅</div>
									<div className="notification-content">
										<div className="notification-title">🪙 Токены добавлены</div>
										<div className="notification-text">На ваш баланс добавлено 100 токенов. Теперь вы можете защитить ещё больше файлов!</div>
										<div className="notification-time">4 дн назад</div>
									</div>
								</div>
								{JSON.stringify(data)}
							</div>
						) : (
							<p>Нет данных</p>
						)}
						<div className="notification-footer">
							<Link href="/pages/notifications" className="notification-link">Посмотреть все</Link>
						</div>
					</>
				)}
			</div>
		</div>
	)
}