---
import { Icon } from "astro-icon/components";
import { announcementConfig } from "@/config/announcementConfig";
import I18nKey from "@/i18n/i18nKey";
import { i18n } from "@/i18n/translation";
import WidgetLayout from "./WidgetLayout.astro";

const config = announcementConfig;

interface Props {
	class?: string;
	style?: string;
}
const className = Astro.props.class;
const style = Astro.props.style;
const contentText = config.content || config.text || "";
const link = config.link;
const hasLink = link && link.enable !== false && link.text && link.url;
const isExternal =
	hasLink &&
	(link.external === true ||
		(/^https?:\/\//i.test(link.url) && link.external !== false));
const closeDuration = Number(config.closeDuration ?? 86400);
---

<!-- 组件显示由 sidebarConfig 统一控制，有内容时渲染 -->
{contentText && (
	<WidgetLayout
		name={config.title || i18n(I18nKey.announcement)}
		id="announcement"
		class={className}
		style={style}
	>
		<div class="announcement-wrapper flex flex-col" data-close-duration={String(closeDuration)}>
			<!-- 公告栏内容 -->
			<div class="announcement-content">
				{contentText}
			</div>

			<!-- 可选链接和关闭按钮 -->
			{(hasLink || config.closable) && (
				<div class="announcement-actions">
					<div>
						{hasLink && (
							<a
								href={link.url}
								target={isExternal ? "_blank" : "_self"}
								rel={isExternal ? "noopener noreferrer" : undefined}
								class="announcement-btn m3-state-layer"
							>
								<span>{link.text}</span>
								{isExternal && (
									<Icon
										name="material-symbols:arrow-outward-rounded"
										class="announcement-btn__icon"
									/>
								)}
							</a>
						)}
					</div>

					{config.closable && (
						<button
							type="button"
							class="announcement-close-btn m3-state-layer"
							onclick="closeAnnouncement()"
							aria-label={i18n(I18nKey.announcementClose)}
							title={i18n(I18nKey.announcementClose)}
						>
							<Icon name="material-symbols:close-rounded" class="announcement-close-btn__icon" />
						</button>
					)}
				</div>
			)}
		</div>
	</WidgetLayout>
)}

<style lang="stylus">
.announcement-content
	font: var(--m3e-type-body-medium)
	color: var(--on-surface-variant)
	line-height: 1.6
	margin-bottom: var(--m3e-space-3)
	word-break: break-word
	white-space: pre-line

.announcement-actions
	display: flex
	align-items: center
	justify-content: space-between
	gap: var(--m3e-space-3)

.announcement-btn
	display: inline-flex
	align-items: center
	gap: var(--m3e-space-1)
	height: 2rem
	padding: 0 var(--m3e-space-3)
	border-radius: var(--shape-corner-m)
	background: var(--secondary-container)
	color: var(--on-secondary-container)
	font: var(--m3e-type-label-medium)
	font-weight: 500
	text-decoration: none
	--m3e-state-color: var(--on-secondary-container)
	transition: background-color var(--m3e-duration-short) var(--m3e-easing-standard)

	&__icon
		width: 1rem
		height: 1rem
		opacity: 0.8

.announcement-close-btn
	display: flex
	align-items: center
	justify-content: center
	width: 2rem
	height: 2rem
	border-radius: var(--shape-corner-full)
	background: var(--btn-regular-bg)
	color: var(--on-surface-variant)
	cursor: pointer
	border: none
	--m3e-state-color: var(--error)
	transition:
		color var(--m3e-duration-short) var(--m3e-easing-standard),
		background-color var(--m3e-duration-short) var(--m3e-easing-standard)

	&:hover
		color: var(--error)
		background: var(--error-container)

	&__icon
		width: 1.125rem
		height: 1.125rem
</style>

<script>
	const STORAGE_KEY_CLOSED = "announcementClosed";
	const STORAGE_KEY_TIME = "announcementClosedTime";

	function isAnnouncementExpired(durationSeconds: number): boolean {
		if (Number.isNaN(durationSeconds) || durationSeconds <= 0) {
			return false;
		}
		const closedTime = localStorage.getItem(STORAGE_KEY_TIME);
		if (!closedTime) {
			return true;
		}
		const elapsedSeconds = (Date.now() - Number(closedTime)) / 1000;
		return elapsedSeconds > durationSeconds;
	}

	function closeAnnouncement() {
		const widgetLayouts = document.querySelectorAll<HTMLElement>(
			'widget-layout[data-id="announcement"]',
		);
		if (widgetLayouts.length > 0) {
			widgetLayouts.forEach((widget) => {
				const container = widget.closest<HTMLElement>(".sidebar-widget") || widget;
				container.style.display = "none";
			});
			localStorage.setItem(STORAGE_KEY_CLOSED, "true");
			localStorage.setItem(STORAGE_KEY_TIME, Date.now().toString());
		}
	}

	function checkAnnouncementClosed() {
		const widgetLayouts = document.querySelectorAll<HTMLElement>(
			'widget-layout[data-id="announcement"]',
		);
		if (widgetLayouts.length === 0) return;

		const wrapper = document.querySelector<HTMLElement>(".announcement-wrapper");
		const durationAttr = wrapper?.getAttribute("data-close-duration");
		const durationSeconds = durationAttr ? Number.parseFloat(durationAttr) : 86400;

		const isClosed = localStorage.getItem(STORAGE_KEY_CLOSED) === "true";
		if (!isClosed) {
			widgetLayouts.forEach((widget) => {
				const container = widget.closest<HTMLElement>(".sidebar-widget") || widget;
				container.style.display = "";
				widget.style.display = "";
			});
			return;
		}

		if (isAnnouncementExpired(durationSeconds)) {
			localStorage.removeItem(STORAGE_KEY_CLOSED);
			localStorage.removeItem(STORAGE_KEY_TIME);
			widgetLayouts.forEach((widget) => {
				const container = widget.closest<HTMLElement>(".sidebar-widget") || widget;
				container.style.display = "";
				widget.style.display = "";
			});
		} else {
			widgetLayouts.forEach((widget) => {
				const container = widget.closest<HTMLElement>(".sidebar-widget") || widget;
				container.style.display = "none";
			});
		}
	}

	if (document.readyState === "loading") {
		document.addEventListener("DOMContentLoaded", checkAnnouncementClosed);
	} else {
		checkAnnouncementClosed();
	}

	document.addEventListener("swup:content:replace", checkAnnouncementClosed);

	const globalObj = window as unknown as {
		closeAnnouncement: () => void;
		checkAnnouncementClosed: () => void;
	};
	globalObj.closeAnnouncement = closeAnnouncement;
	globalObj.checkAnnouncementClosed = checkAnnouncementClosed;
</script>