<script setup>
// 分析页目前为静态占位，实现基础对话 UI，后续接入真实 AI 逻辑
</script>

<template>
  <div class="h-full flex flex-col animate-fade-in pb-6">
    <div class="flex items-center gap-3 mb-4">
      <div
        class="w-10 h-10 rounded-full bg-gradient-warm flex items-center justify-center text-white shadow-lg shadow-orange-200"
      >
        <i class="ph-fill ph-sparkle" />
      </div>
      <div>
        <h2 class="text-xl font-extrabold text-stone-800">AI 财务顾问</h2>
        <p class="text-xs text-stone-400">Powered by Gemini</p>
      </div>
    </div>

    <!-- Chat Area -->
    <div class="flex-1 overflow-y-auto space-y-5 pr-1 pb-2">
      <!-- Bot Message -->
      <div class="flex gap-3">
        <div
          class="w-8 h-8 rounded-full bg-stone-100 flex items-center justify-center text-stone-400 mt-1 shrink-0"
        >
          <i class="ph-fill ph-robot" />
        </div>
        <div
          class="bg-white p-4 rounded-2xl rounded-tl-none shadow-sm border border-stone-100 text-sm text-stone-600 leading-relaxed max-w-[85%]"
        >
          <p>你好 Alex！👋 我分析了你本周的饮食记录。</p>
          <div class="mt-3 bg-stone-50 rounded-xl p-3 border border-stone-100">
            <div class="flex items-center gap-2 mb-2">
              <i class="ph-fill ph-warning text-orange-400" />
              <span class="font-bold text-stone-700 text-xs">高热量警告</span>
            </div>
            <p class="text-xs">
              周二和周四的晚餐摄入热量超标 30%，主要是因为“炸鸡”和“奶茶”。
            </p>
          </div>
          <p class="mt-3">建议今晚尝试清淡饮食，比如蔬菜沙拉或三文鱼。</p>
        </div>
      </div>

      <!-- User Message -->
      <div class="flex gap-3 flex-row-reverse">
        <div
          class="bg-stone-700 text-white p-4 rounded-2xl rounded-tr-none shadow-lg text-sm max-w-[85%]"
        >
          如果是自己做饭，有什么推荐的食谱吗？要简单的。
        </div>
      </div>

      <!-- Bot Message 2 -->
      <div class="flex gap-3">
        <div
          class="w-8 h-8 rounded-full bg-stone-100 flex items-center justify-center text-stone-400 mt-1 shrink-0"
        >
          <i class="ph-fill ph-robot" />
        </div>
        <div
          class="bg-white p-4 rounded-2xl rounded-tl-none shadow-sm border border-stone-100 text-sm text-stone-600 leading-relaxed max-w-[85%]"
        >
          <p>基于你冰箱里的食材（上次记录），推荐：</p>
          <p class="font-bold text-stone-800 mt-2 mb-1">🥑 牛油果虾仁拌饭</p>
          <ul class="list-disc list-inside text-xs space-y-1 marker:text-orange-400">
            <li>热量：约 450 kcal</li>
            <li>耗时：10 分钟</li>
            <li>成本：约 ¥18</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- Input Area -->
    <div class="mt-2 relative shrink-0">
      <input
        type="text"
        placeholder="输入消息..."
        class="w-full pl-5 pr-12 py-3.5 rounded-full bg-white border border-stone-100 focus:outline-none focus:border-orange-300 focus:ring-4 focus:ring-orange-50 transition text-sm shadow-sm text-stone-700 font-medium placeholder-stone-300"
      />
      <button
        class="absolute right-2 top-2 w-9 h-9 bg-gradient-warm text-white rounded-full flex items-center justify-center hover:scale-105 transition shadow-md"
      >
        <i class="ph-bold ph-arrow-up" />
      </button>
    </div>
  </div>
</template>

