// 사이트 데이터
const sites = [
	{ id: 1, name: "Medium", description: "트렌드와 아이디어 공유 플랫폼", url: "https://medium.com/search?q=" },
	{ id: 2, name: "Ezine Articles", description: "다양한 주제의 전문 기사", url: "https://ezine-articles.com/?s=" },           
	{ id: 3, name: "Sooper Articles", description: "고품질 콘텐츠 아티클", url: "http://www.sooperarticles.com/search/?t=contents&s=" },
	{ id: 4, name: "Article City", description: "무료 기사 디렉토리", url: "http://www.articlecity.com/?s=" },
	{ id: 5, name: "Hub Pages", description: "블로그 및 커뮤니티 콘텐츠", url: "https://hubpages.com/search/?s=" },
	{ id: 6, name: "The Free Library", description: "신문, 잡지, 저널 등의 자료", url: "https://www.thefreelibrary.com/_/search/Search.aspx?SearchBy=0&q=" },
	{ id: 7, name: "Copyrightfree", description: "저작권 없는 콘텐츠", url: "https://about.newsusa.com/search/node?keys=" }
];

// DOM 요소
const searchInput = document.getElementById('searchInput');
const keywordAlert = document.getElementById('keywordAlert');
const recentSearchesElement = document.getElementById('recentSearches');
const sitesListElement = document.getElementById('sitesList');
const bookmarkedSitesElement = document.getElementById('bookmarkedSites');
const newTabToggle = document.getElementById('newTabToggle');
const tags = document.querySelectorAll('.tag');

// 로컬 스토리지에서 데이터 가져오기
let recentSearches = JSON.parse(localStorage.getItem('recentSearches')) || [];
let bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];

// 페이지 로드 시 실행
document.addEventListener('DOMContentLoaded', () => {
	renderSites();
	renderRecentSearches();
	renderBookmarks();
	addEventListeners();
});

// 이벤트 리스너 추가
function addEventListeners() {
	// 엔터 키 입력
	searchInput.addEventListener('keypress', (e) => {
		if (e.key === 'Enter') {
			updateSiteUrls();
		}
	});
	
	// 검색창에서 입력 이벤트 발생 시 알림 숨기기
	searchInput.addEventListener('input', () => {
		keywordAlert.style.display = 'none';
		updateSiteUrls();
	});
	
	// 태그 클릭
	tags.forEach(tag => {
		tag.addEventListener('click', () => {
			searchInput.value = tag.textContent;
			keywordAlert.style.display = 'none';
			updateSiteUrls();
			addToRecentSearches(tag.textContent);
		});
	});
}

// 사이트 URL 업데이트
function updateSiteUrls() {
	const keyword = searchInput.value.trim();
	renderSites();
	renderBookmarks();
}

// 검색 처리 (사이트 카드 클릭 시)
function handleSiteSearch(site) {
	const keyword = searchInput.value.trim();
	
	if (keyword === '') {
		keywordAlert.style.display = 'block';
		searchInput.focus();
		return false;
	}
	
	// 최근 검색어에 추가
	addToRecentSearches(keyword);
	
	// 검색 URL 생성
	const searchUrl = site.url + encodeURIComponent(keyword);
	
	// 새 탭 여부 확인
	const openInNewTab = newTabToggle.checked;
	
	// URL 열기
	if (openInNewTab) {
		window.open(searchUrl, '_blank');
	} else {
		window.open(searchUrl, '_self');
	}
	
	return true;
}

// 최근 검색어에 추가
function addToRecentSearches(keyword) {
	if (!keyword) return;
	
	// 중복 검색어 제거
	recentSearches = recentSearches.filter(item => item !== keyword);
	
	// 새 검색어 추가
	recentSearches.unshift(keyword);
	
	// 최대 5개만 유지
	if (recentSearches.length > 5) {
		recentSearches.pop();
	}
	
	// 로컬 스토리지에 저장
	localStorage.setItem('recentSearches', JSON.stringify(recentSearches));
	
	// UI 업데이트
	renderRecentSearches();
}

// 최근 검색어 렌더링
function renderRecentSearches() {
	recentSearchesElement.innerHTML = '';
	
	if (recentSearches.length === 0) {
		const emptyMessage = document.createElement('span');
		emptyMessage.textContent = '최근 검색 기록이 없습니다';
		emptyMessage.style.color = 'var(--dark-gray)';
		recentSearchesElement.appendChild(emptyMessage);
		return;
	}
	
	recentSearches.forEach(keyword => {
		const span = document.createElement('span');
		span.innerHTML = `<i class="fas fa-history"></i> ${keyword}`;
		span.addEventListener('click', () => {
			searchInput.value = keyword;
			keywordAlert.style.display = 'none';
			updateSiteUrls();
		});
		recentSearchesElement.appendChild(span);
	});
}

// 사이트 목록 렌더링
function renderSites() {
	sitesListElement.innerHTML = '';
	
	sites.forEach(site => {
		const isBookmarked = bookmarks.includes(site.id);
		
		const siteCard = document.createElement('div');
		siteCard.className = 'site-card';
		siteCard.dataset.id = site.id;
		
		siteCard.innerHTML = `
			<div class="site-icon">
				<i class="fas fa-globe"></i>
			</div>
			<div class="site-info">
				<div class="site-name">
					${site.name}
					<i class="fas fa-star bookmark-icon ${isBookmarked ? 'active' : ''}"></i>
				</div>
				<div class="site-desc">${site.description}</div>
			</div>
		`;
		
		const bookmarkIcon = siteCard.querySelector('.bookmark-icon');
		bookmarkIcon.addEventListener('click', (e) => {
			e.stopPropagation();
			toggleBookmark(site.id);
		});
		
		siteCard.addEventListener('click', () => {
			handleSiteSearch(site);
		});
		
		sitesListElement.appendChild(siteCard);
	});
}

// 즐겨찾기 토글
function toggleBookmark(siteId) {
	const index = bookmarks.indexOf(siteId);
	
	if (index === -1) {
		// 즐겨찾기에 추가
		bookmarks.push(siteId);
	} else {
		// 즐겨찾기에서 제거
		bookmarks.splice(index, 1);
	}
	
	// 로컬 스토리지에 저장
	localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
	
	// UI 업데이트
	renderSites();
	renderBookmarks();
}

// 즐겨찾기 렌더링
function renderBookmarks() {
	bookmarkedSitesElement.innerHTML = '';
	
	if (bookmarks.length === 0) {
		const emptyMessage = document.createElement('div');
		emptyMessage.textContent = '즐겨찾기한 사이트가 없습니다';
		emptyMessage.style.color = 'var(--dark-gray)';
		emptyMessage.style.padding = '20px';
		emptyMessage.style.textAlign = 'center';
		bookmarkedSitesElement.appendChild(emptyMessage);
		return;
	}
	
	bookmarks.forEach(siteId => {
		const site = sites.find(s => s.id === siteId);
		if (!site) return;
		
		const siteCard = document.createElement('div');
		siteCard.className = 'site-card';
		
		siteCard.innerHTML = `
			<div class="site-icon">
				<i class="fas fa-globe"></i>
			</div>
			<div class="site-info">
				<div class="site-name">
					${site.name}
					<i class="fas fa-star bookmark-icon active"></i>
				</div>
				<div class="site-desc">${site.description}</div>
			</div>
		`;
		
		const bookmarkIcon = siteCard.querySelector('.bookmark-icon');
		bookmarkIcon.addEventListener('click', (e) => {
			e.stopPropagation();
			toggleBookmark(site.id);
		});
		
		siteCard.addEventListener('click', () => {
			handleSiteSearch(site);
		});
		
		bookmarkedSitesElement.appendChild(siteCard);
	});
}