<template>
	<view class="room-page">
		<view class="glow glow-a"></view>
		<view class="glow glow-b"></view>
		<view class="nav" :style="{ paddingTop: menuButtonInfo.top + 'px' }">
			<view class="back" @tap="back">‹</view>
			<view class="room-user">
				<view class="room-name">{{ companion.name }}</view>
				<view class="room-meta">{{ roomModeText }} · {{ countdownText }} 后自然结束</view>
			</view>
			<view class="more" @tap="showSafety = true">···</view>
		</view>

		<view class="radio-room">
			<view class="radio-orbit"></view>
			<view class="radio-core">FM</view>
			<view class="radio-copy">
				<view class="radio-title">深夜电台陪伴中</view>
				<view class="radio-sub">你们已经安静陪伴了 {{ silentMinutes }} 分钟</view>
			</view>
		</view>

		<view class="timer-card">
			<view>
				<view class="timer-label">沉默陪伴模式</view>
				<view class="timer-title">{{ companion.prompt }}</view>
			</view>
			<view class="timer-pill">{{ countdownText }}</view>
		</view>

		<view class="silent-modes">
			<view class="silent-chip" v-for="item in silentModes" :key="item" @tap="sendPresence(item)">
				{{ item }}
			</view>
		</view>

		<view class="messages">
			<view class="system-line">你们被放进同一个频道。不说话也算陪伴。</view>
			<view class="hesitate-line">对方删掉了一句话</view>
			<view class="msg-row other">
				<view class="avatar" :class="roomMode">{{ companion.avatar }}</view>
				<view class="bubble">{{ companion.firstMessage }}</view>
			</view>
			<view class="msg-row mine">
				<view class="bubble muted">我在，刚好也想安静一会。</view>
			</view>
			<view class="hesitate-line right">对方正在犹豫输入</view>
			<view class="msg-row other">
				<view class="avatar" :class="roomMode">{{ companion.avatar }}</view>
				<view class="bubble">那就不用急着聊，先一起待 15 分钟。</view>
			</view>
		</view>

		<view class="presence-row">
			<view class="presence-chip" v-for="item in presenceActions" :key="item" @tap="sendPresence(item)">
				{{ item }}
			</view>
		</view>

		<view class="input-bar">
			<input class="input" v-model="draft" placeholder="轻轻说一句，或保持安静" />
			<view class="send" @tap="sendMessage">发送</view>
		</view>

		<view class="safety-mask" v-if="showSafety" @tap="showSafety = false">
			<view class="safety-panel" @tap.stop>
				<view class="safety-title">安全与退出</view>
				<view class="safety-item" @tap="report">举报不适内容</view>
				<view class="safety-item" @tap="block">拉黑这个对象</view>
				<view class="safety-item quiet" @tap="finishRoom">提前结束陪伴</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {
					top: 24
				},
				roomMode: 'i',
				secondsLeft: 15 * 60,
				timer: null,
				draft: '',
				showSafety: false,
				presenceActions: ['我在', '听着呢', '慢慢说', '抱一下空气'],
				silentModes: ['一起听歌', '一起倒计时', '一起自习', '一起失眠'],
				companions: {
					i: {
						name: '月台旁的影子',
						avatar: '月',
						prompt: '如果今晚可以把一个念头放在操场边，你想放什么？',
						firstMessage: '我刚从图书馆出来，路上风有点凉。'
					},
					e: {
						name: '便利店灯光',
						avatar: '光',
						prompt: '今晚聊一个不重要的小事，越轻越好。',
						firstMessage: '我刚买了夜宵，突然很想知道大家今晚都在干嘛。'
					}
				}
			}
		},
		computed: {
			companion() {
				return this.companions[this.roomMode] || this.companions.i
			},
			roomModeText() {
				return this.roomMode === 'i' ? '安静陪伴' : '轻轻热闹'
			},
			silentMinutes() {
				return Math.max(1, 15 - Math.ceil(this.secondsLeft / 60))
			},
			countdownText() {
				const minutes = String(Math.floor(this.secondsLeft / 60)).padStart(2, '0')
				const seconds = String(this.secondsLeft % 60).padStart(2, '0')
				return `${minutes}:${seconds}`
			}
		},
		onLoad(options) {
			if (uni.getMenuButtonBoundingClientRect) {
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			}
			if (options && options.mode) {
				this.roomMode = options.mode
			}
			this.startTimer()
		},
		onUnload() {
			this.clearTimer()
		},
		methods: {
			startTimer() {
				this.clearTimer()
				this.timer = setInterval(() => {
					if (this.secondsLeft <= 0) {
						this.finishRoom()
						return
					}
					this.secondsLeft -= 1
				}, 1000)
			},
			clearTimer() {
				if (this.timer) {
					clearInterval(this.timer)
					this.timer = null
				}
			},
			sendPresence(text) {
				uni.showToast({
					title: `已发送：${text}`,
					icon: 'none'
				})
			},
			sendMessage() {
				if (!this.draft.trim()) {
					uni.showToast({
						title: '也可以先不说话',
						icon: 'none'
					})
					return
				}
				this.draft = ''
				uni.showToast({
					title: '已轻轻送出',
					icon: 'none'
				})
			},
			report() {
				this.showSafety = false
				uni.showToast({
					title: '已收到举报',
					icon: 'none'
				})
			},
			block() {
				this.showSafety = false
				uni.showToast({
					title: '已拉黑',
					icon: 'none'
				})
			},
			finishRoom() {
				this.clearTimer()
				uni.redirectTo({
					url: '/package1/ieBrowser/chatList'
				})
			},
			back() {
				uni.redirectTo({ url: '/package1/ieBrowser/index' })
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f7f9ff;
	}

	.room-page {
		min-height: 100vh;
		padding: 0 28rpx 176rpx;
		box-sizing: border-box;
		color: #161b2e;
		background:
			radial-gradient(circle at 14% 10%, rgba(139, 124, 255, 0.2), rgba(139, 124, 255, 0) 280rpx),
			radial-gradient(circle at 82% 18%, rgba(169, 255, 231, .42), rgba(169, 255, 231, 0) 320rpx),
			linear-gradient(180deg, #fbfdff 0%, #eef4ff 64%, #fff4e8 100%);
		position: relative;
		overflow: hidden;
	}

	.room-page::before {
		content: '';
		position: absolute;
		inset: 0;
		pointer-events: none;
		opacity: .1;
		background-image: radial-gradient(circle, rgba(22,27,46,.7) 0 1rpx, transparent 1rpx);
		background-size: 44rpx 44rpx;
		animation: noiseFloat 8s steps(5) infinite;
	}

	.glow {
		position: absolute;
		border-radius: 50%;
		filter: blur(10rpx);
	}

	.glow-a {
		right: -120rpx;
		top: 210rpx;
		width: 300rpx;
		height: 300rpx;
		background: rgba(169, 255, 231, 0.34);
	}

	.glow-b {
		left: -150rpx;
		bottom: 180rpx;
		width: 360rpx;
		height: 360rpx;
		background: rgba(255, 184, 209, 0.22);
	}

	.nav {
		position: relative;
		z-index: 1;
		height: 96rpx;
		display: flex;
		align-items: center;
	}

	.back,
	.more {
		width: 62rpx;
		color: rgba(22, 27, 46, 0.62);
		font-size: 54rpx;
		line-height: 56rpx;
	}

	.more {
		text-align: right;
		font-size: 34rpx;
	}

	.room-user {
		flex: 1;
		text-align: center;
	}

	.room-name {
		font-size: 31rpx;
		font-weight: 800;
	}

	.room-meta {
		margin-top: 8rpx;
		color: rgba(22, 27, 46, 0.46);
		font-size: 21rpx;
	}

	.timer-card,
	.topic-card {
		position: relative;
		z-index: 1;
		border: 1rpx solid rgba(255, 255, 255, 0.78);
		background: rgba(255, 255, 255, 0.62);
		backdrop-filter: blur(24rpx);
		box-shadow: 0 20rpx 64rpx rgba(96, 112, 160, 0.12);
	}

	.timer-card {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 22rpx;
		padding: 30rpx;
		border-radius: 34rpx;
	}

	.radio-room {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		margin-top: 18rpx;
		padding: 34rpx;
		border-radius: 44rpx;
		background: rgba(255,255,255,.58);
		border: 1rpx solid rgba(255,255,255,.78);
		backdrop-filter: blur(24rpx);
		box-shadow: 0 24rpx 72rpx rgba(96,112,160,.13);
		overflow: hidden;
	}

	.radio-orbit {
		position: absolute;
		right: -40rpx;
		top: -60rpx;
		width: 260rpx;
		height: 260rpx;
		border-radius: 50%;
		border: 1rpx solid rgba(139,124,255,.16);
		animation: radioSpin 16s linear infinite;
	}

	.radio-core {
		width: 108rpx;
		height: 108rpx;
		margin-right: 24rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 108rpx;
		color: #11162a;
		background: linear-gradient(145deg, #ffffff, #a9ffe7);
		font-size: 30rpx;
		font-weight: 800;
		box-shadow: 0 18rpx 48rpx rgba(169,255,231,.3);
		animation: breathe 3s ease-in-out infinite;
	}

	.radio-copy {
		position: relative;
		z-index: 1;
	}

	.radio-title {
		font-size: 32rpx;
		font-weight: 800;
	}

	.radio-sub {
		margin-top: 10rpx;
		color: rgba(22,27,46,.52);
		font-size: 24rpx;
	}

	.silent-modes {
		position: relative;
		z-index: 1;
		display: flex;
		overflow-x: auto;
		white-space: nowrap;
		margin-top: 22rpx;
	}

	.silent-chip {
		flex-shrink: 0;
		margin-right: 14rpx;
		padding: 16rpx 24rpx;
		border-radius: 999rpx;
		color: rgba(22,27,46,.62);
		background: rgba(255,255,255,.62);
		border: 1rpx solid rgba(255,255,255,.72);
		backdrop-filter: blur(18rpx);
		font-size: 23rpx;
	}

	.timer-label,
	.topic-label {
		color: #6c69d8;
		font-size: 22rpx;
	}

	.timer-title {
		margin-top: 12rpx;
		font-size: 30rpx;
		font-weight: 800;
	}

	.timer-pill {
		width: 126rpx;
		height: 70rpx;
		border-radius: 999rpx;
		text-align: center;
		line-height: 70rpx;
		color: #09101f;
		background: #dffef4;
		font-size: 28rpx;
		font-weight: 800;
	}

	.topic-card {
		margin-top: 24rpx;
		padding: 26rpx;
		border-radius: 30rpx;
	}

	.topic-text {
		margin-top: 12rpx;
		color: rgba(22, 27, 46, 0.72);
		font-size: 27rpx;
		line-height: 42rpx;
	}

	.messages {
		position: relative;
		z-index: 1;
		padding-top: 34rpx;
	}

	.system-line {
		width: 560rpx;
		margin: 0 auto 30rpx;
		text-align: center;
		color: rgba(22, 27, 46, 0.36);
		font-size: 22rpx;
		line-height: 34rpx;
	}

	.hesitate-line {
		width: 260rpx;
		margin: 0 auto 24rpx;
		padding: 8rpx 18rpx;
		border-radius: 999rpx;
		color: rgba(22,27,46,.36);
		background: rgba(255,255,255,.46);
		font-size: 20rpx;
		animation: fadeHint 2.8s ease-in-out infinite;
	}

	.hesitate-line.right {
		margin-right: 18rpx;
	}

	.msg-row {
		display: flex;
		align-items: flex-start;
		margin-bottom: 30rpx;
	}

	.msg-row.mine {
		justify-content: flex-end;
	}

	.avatar {
		width: 72rpx;
		height: 72rpx;
		margin-right: 16rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 72rpx;
		font-size: 27rpx;
		font-weight: 800;
	}

	.avatar.i {
		color: #f7f4ff;
		background: linear-gradient(145deg, #8b7cff, #dde7ff);
	}

	.avatar.e {
		color: #07101e;
		background: linear-gradient(145deg, #a9ffe7, #fff0b8);
	}

	.bubble {
		max-width: 500rpx;
		padding: 22rpx 26rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.78);
		border-radius: 30rpx;
		background: rgba(255, 255, 255, 0.62);
		color: rgba(22, 27, 46, 0.72);
		font-size: 27rpx;
		line-height: 42rpx;
	}

	.mine .bubble {
		color: #09101f;
		background: #dffef4;
	}

	.bubble.muted {
		background: rgba(223, 254, 244, 0.88);
	}

	.presence-row {
		position: fixed;
		left: 28rpx;
		right: 28rpx;
		bottom: 132rpx;
		z-index: 10;
		display: flex;
		overflow-x: auto;
		white-space: nowrap;
	}

	.presence-chip {
		flex-shrink: 0;
		height: 58rpx;
		line-height: 58rpx;
		padding: 0 22rpx;
		margin-right: 14rpx;
		border-radius: 999rpx;
		color: rgba(22, 27, 46, 0.58);
		background: rgba(255, 255, 255, 0.62);
		box-shadow: 0 12rpx 30rpx rgba(96, 112, 160, .1);
		font-size: 23rpx;
	}

	.input-bar {
		position: fixed;
		left: 24rpx;
		right: 24rpx;
		bottom: 30rpx;
		z-index: 10;
		height: 88rpx;
		padding: 10rpx;
		box-sizing: border-box;
		border: 1rpx solid rgba(255, 255, 255, 0.78);
		border-radius: 999rpx;
		background: rgba(255, 255, 255, 0.72);
		backdrop-filter: blur(18rpx);
		display: flex;
		align-items: center;
	}

	.input {
		flex: 1;
		height: 66rpx;
		padding: 0 24rpx;
		border-radius: 999rpx;
		color: #161b2e;
		background: rgba(238, 244, 255, 0.72);
		font-size: 25rpx;
	}

	.send {
		height: 66rpx;
		line-height: 66rpx;
		margin-left: 10rpx;
		padding: 0 26rpx;
		border-radius: 999rpx;
		color: #09101f;
		background: #a9ffe7;
		font-size: 24rpx;
		font-weight: 800;
	}

	.safety-mask {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 20;
		display: flex;
		align-items: flex-end;
		padding: 28rpx;
		background: rgba(22, 27, 46, 0.18);
		backdrop-filter: blur(18rpx);
		box-sizing: border-box;
	}

	.safety-panel {
		width: 100%;
		padding: 30rpx;
		border-radius: 38rpx;
		background: rgba(255, 255, 255, 0.86);
		box-sizing: border-box;
	}

	.safety-title {
		margin-bottom: 18rpx;
		font-size: 30rpx;
		font-weight: 800;
	}

	.safety-item {
		height: 86rpx;
		line-height: 86rpx;
		border-top: 1rpx solid rgba(22, 27, 46, 0.08);
		color: rgba(22, 27, 46, 0.72);
		font-size: 26rpx;
	}

	.safety-item.quiet {
		color: #6c69d8;
	}

	@keyframes noiseFloat {
		0%, 100% { transform: translate3d(0,0,0); }
		50% { transform: translate3d(12rpx,-8rpx,0); }
	}

	@keyframes radioSpin {
		from { transform: rotate(0); }
		to { transform: rotate(360deg); }
	}

	@keyframes breathe {
		0%, 100% { transform: scale(.98); }
		50% { transform: scale(1.05); }
	}

	@keyframes fadeHint {
		0%, 100% { opacity: .38; transform: translateY(0); }
		50% { opacity: .82; transform: translateY(-4rpx); }
	}
</style>
