import { CurrencyManager } from "@/FormTableExt/Manage/Currency/CurrencyManager";
import { useGameItems } from "@/context/GameItemsContext";
import React, { useEffect } from "react";

/** 頂部玩家資訊列 */
const Player = () => {
	const { player } = useGameItems();
	const { aId, name, m } = player;

	function onLoad() {
	}

	useEffect(() => {
		onLoad();
	}, []);

	return (
		<header style={barStyle} className="lp-rise">
			<div style={brandStyle}>
				<span className="lp-dot" />
				<span className="lp-kicker">LP BOT</span>
			</div>

			<div style={statsStyle}>
				<div style={statStyle}>
					<span className="lp-label">AID</span>
					<span className="lp-mono" style={statValueStyle}>{aId ?? "-"}</span>
				</div>
				<div style={dividerStyle} />
				<div style={statStyle}>
					<span className="lp-label">暱稱</span>
					<span style={{ ...statValueStyle, fontFamily: "var(--lp-font-body)" }}>{name ?? "-"}</span>
				</div>
				<div style={dividerStyle} />
				<div style={statStyle}>
					<span className="lp-label">金幣</span>
					<span className="lp-mono" style={{ ...statValueStyle, color: "var(--lp-amber)" }}>
						{CurrencyManager.GetNumberWithComma(m)}
					</span>
				</div>
			</div>
		</header>
	);
};

export default Player;

const barStyle: React.CSSProperties = {
	display: "flex",
	alignItems: "center",
	justifyContent: "space-between",
	gap: 16,
	padding: "12px 20px",
	borderBottom: "1px solid var(--lp-line)",
	background: "linear-gradient(180deg, rgba(22, 29, 40, 0.9), rgba(16, 21, 29, 0.9))",
	backdropFilter: "blur(6px)",
	flexWrap: "wrap",
};

const brandStyle: React.CSSProperties = {
	display: "flex",
	alignItems: "center",
	gap: 10,
};

const statsStyle: React.CSSProperties = {
	display: "flex",
	alignItems: "center",
	gap: 18,
	flexWrap: "wrap",
};

const statStyle: React.CSSProperties = {
	display: "flex",
	alignItems: "baseline",
	gap: 8,
};

const statValueStyle: React.CSSProperties = {
	fontSize: 15,
	fontWeight: 600,
	color: "var(--lp-text)",
};

const dividerStyle: React.CSSProperties = {
	width: 1,
	height: 18,
	background: "var(--lp-line)",
};
