<template>
	<view class="ds-page chat-page">
		<view class="chat-top ds-surface">
			<view class="chat-top__row">
				<view class="chat-top__info">
					<text class="chat-top__enterprise">{{ enterprise.name }}</text>
					<text class="chat-top__user">{{ user.name }} · 企业主</text>
				</view>
				<view class="chat-top__logout" @tap="logout">退出</view>
			</view>
		</view>

		<scroll-view
			class="chat-list"
			scroll-y
			:scroll-into-view="scrollIntoView"
			:show-scrollbar="false"
			:enhanced="true"
			:bounces="false"
		>
			<view class="ds-container chat-list__inner">
				<view class="chat-welcome ds-notice ds-notice--soft">
					<text class="chat-welcome__title">草稿优先</text>
					<text class="chat-welcome__text">直接描述用工需求，我会先生成办理草稿和成本方案，你再确认或修改。</text>
				</view>

				<view
					v-for="msg in messages"
					:key="msg.id"
					:id="'msg-' + msg.id"
					class="chat-item"
					:class="'chat-item--' + msg.role"
				>
					<view class="chat-item__row">
						<view v-if="msg.role === 'agent'" class="ds-avatar">助</view>
						<view class="chat-bubble-wrap">
							<text v-if="msg.role === 'agent'" class="chat-bubble__role">用工助手</text>
							<view class="chat-bubble">
								<text class="chat-bubble__text">{{ msg.content }}</text>
								<text class="chat-bubble__time">{{ msg.time }}</text>
							</view>
							<view v-if="msg.showDraftAction" class="chat-action ds-card" @tap="goDraft">
								<text class="chat-action__eyebrow">NEXT STEP</text>
								<text class="chat-action__title">用工草稿已生成</text>
								<text class="chat-action__desc">查看默认字段，补充工作内容后进入成本对比</text>
								<view class="chat-action__cta">
									<text>查看草稿</text>
									<text class="chat-action__arrow">→</text>
								</view>
							</view>
						</view>
						<view v-if="msg.role === 'user'" class="ds-avatar ds-avatar--user">{{ user.avatarText }}</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="chat-compose">
			<scroll-view
				class="chat-compose__prompts"
				scroll-x
				:show-scrollbar="false"
				:enhanced="true"
				enable-flex
			>
				<view class="chat-compose__prompts-track">
					<view
						v-for="(item, index) in quickPrompts"
						:key="index"
						class="chat-compose__chip"
						@tap="usePrompt(item)"
					>{{ item }}</view>
				</view>
			</scroll-view>
			<view class="chat-compose__bar">
				<input
					class="chat-compose__input"
					v-model="inputText"
					placeholder="描述你的用工需求…"
					confirm-type="send"
					@confirm="send"
				/>
				<view class="chat-compose__send" @tap="send">发送</view>
			</view>
		</view>

		<EmployerTabBar current="chat" />
	</view>
</template>

<script>
import EmployerTabBar from '@/components/EmployerTabBar.vue'
import demoStore from '@/common/demo-store.js'
import { requireEmployerLogin } from '@/common/auth-guard.js'
import { QUICK_PROMPTS } from '@/common/demo-data.js'

export default {
	components: { EmployerTabBar },
	data() {
		return {
			enterprise: {},
			user: {},
			messages: [],
			quickPrompts: QUICK_PROMPTS,
			inputText: '',
			scrollIntoView: ''
		}
	},
	onShow() {
		if (!requireEmployerLogin()) return
		this.enterprise = demoStore.getEnterprise()
		this.user = demoStore.getUser()
		this.messages = demoStore.getMessages()
		this.scrollToBottom()
	},
	methods: {
		scrollToBottom() {
			this.$nextTick(() => {
				const last = this.messages[this.messages.length - 1]
				if (last) this.scrollIntoView = 'msg-' + last.id
			})
		},
		send() {
			const text = this.inputText.trim()
			if (!text) return
			this.inputText = ''
			demoStore.sendMessage(text)
			this.messages = demoStore.getMessages()
			this.scrollToBottom()
		},
		usePrompt(text) {
			this.inputText = text
			this.send()
		},
		goDraft() {
			uni.navigateTo({ url: '/packageA/employer/draft' })
		},
		logout() {
			demoStore.logout()
			uni.redirectTo({ url: '/packageA/auth/login' })
		}
	}
}
</script>

<style lang="scss" scoped>
.chat-page {
	height: 100vh;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
}

.chat-top {
	position: fixed;
	top: $ds-h-window-top;
	left: 0;
	right: 0;
	z-index: 101;
	height: $ds-h-chat-top;
	box-sizing: border-box;
	padding: 20rpx 32rpx;
	border-bottom: 1rpx solid #dbeafe;
	background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
}

.chat-top__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.chat-top__enterprise {
	display: block;
	font-size: 30rpx;
	font-weight: 600;
	color: #1e40af;
}

.chat-top__user {
	display: block;
	margin-top: 4rpx;
	font-size: 22rpx;
	color: #737373;
}

.chat-top__logout {
	font-size: 24rpx;
	color: #737373;
	padding: 12rpx 0 12rpx 24rpx;
}

.chat-list {
	position: fixed;
	top: calc(#{$ds-h-window-top} + #{$ds-h-chat-top});
	left: 0;
	right: 0;
	width: 100%;
	height: calc(100vh - #{$ds-h-window-top} - #{$ds-h-chat-top} - #{$ds-h-chat-compose} - #{$ds-h-tabbar} - #{$ds-h-safe-bottom});
	box-sizing: border-box;
	overflow: hidden;
}

.chat-list__inner {
	padding-top: 24rpx;
	padding-bottom: 24rpx;
}

.chat-welcome {
	margin-bottom: 32rpx;
}

.chat-welcome__title {
	display: block;
	font-size: 26rpx;
	font-weight: 600;
	color: #0891b2;
	margin-bottom: 8rpx;
}

.chat-welcome__text {
	display: block;
	font-size: 24rpx;
	color: #525252;
	line-height: 1.6;
}

.chat-item {
	margin-bottom: 32rpx;
}

.chat-item__row {
	display: flex;
	align-items: flex-start;
	gap: 16rpx;
}

.chat-item--user .chat-item__row {
	flex-direction: row-reverse;
}

.chat-bubble-wrap {
	flex: none;
	width: calc(100% - 80rpx);
	min-width: 0;
}

.chat-item--user .chat-bubble-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.chat-bubble__role {
	display: block;
	font-size: 20rpx;
	color: #a3a3a3;
	margin-bottom: 8rpx;
}

.chat-bubble {
	max-width: 100%;
	padding: 20rpx 24rpx;
	background: #ffffff;
	border: 1rpx solid #dbeafe;
	border-radius: 4rpx 16rpx 16rpx 16rpx;
}

.chat-item--user .chat-bubble {
	background: linear-gradient(135deg, #1e40af, #2563eb);
	border-color: transparent;
	border-radius: 16rpx 4rpx 16rpx 16rpx;
}

.chat-bubble__text {
	display: block;
	font-size: 28rpx;
	line-height: 1.65;
	color: #0a0a0a;
}

.chat-item--user .chat-bubble__text,
.chat-item--user .chat-bubble__time {
	color: #ffffff;
}

.chat-bubble__time {
	display: block;
	margin-top: 10rpx;
	font-size: 20rpx;
	color: #a3a3a3;
}

.chat-action {
	margin-top: 16rpx;
	padding: 24rpx;
	background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
	border-color: #93c5fd;
}

.chat-action__eyebrow {
	display: block;
	font-size: 20rpx;
	letter-spacing: 0.12em;
	color: #2563eb;
	margin-bottom: 8rpx;
}

.chat-action__title {
	display: block;
	font-size: 30rpx;
	font-weight: 600;
	color: #0a0a0a;
}

.chat-action__desc {
	display: block;
	margin-top: 8rpx;
	font-size: 24rpx;
	color: #737373;
	line-height: 1.5;
}

.chat-action__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 20rpx;
	padding-top: 20rpx;
	border-top: 1rpx solid #dbeafe;
	font-size: 28rpx;
	font-weight: 500;
	color: #2563eb;
}

.chat-action__arrow {
	font-size: 32rpx;
}

.chat-compose {
	position: fixed;
	left: 0;
	right: 0;
	height: $ds-h-chat-compose;
	bottom: calc(#{$ds-h-tabbar} + #{$ds-h-safe-bottom});
	z-index: 99;
	background: #ffffff;
	border-top: 1rpx solid #ececec;
	box-shadow: 0 -4rpx 24rpx rgba(15, 23, 42, 0.06);
	box-sizing: border-box;
}

.chat-compose__prompts {
	width: 100%;
	height: 72rpx;
	box-sizing: border-box;
}

.chat-compose__prompts-track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 12rpx;
	height: 72rpx;
	padding: 0 32rpx;
	box-sizing: border-box;
}

.chat-compose__chip {
	flex: none;
	padding: 12rpx 20rpx;
	font-size: 22rpx;
	color: #1e40af;
	background: #eff6ff;
	border: 1rpx solid #bfdbfe;
	white-space: nowrap;
}

.chat-compose__bar {
	display: flex;
	align-items: center;
	gap: 16rpx;
	padding: 16rpx 32rpx 20rpx;
}

.chat-compose__input {
	flex: none;
	width: calc(100% - 136rpx);
	height: 80rpx;
	padding: 0 24rpx;
	font-size: 28rpx;
	background: #f8fafc;
	border: 1rpx solid #cbd5e1;
	box-sizing: border-box;
}

.chat-compose__send {
	flex: none;
	width: 120rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 28rpx;
	font-weight: 500;
	color: #ffffff;
	background: linear-gradient(135deg, #1e40af, #2563eb);
}
</style>
