"use client";

import UniversalModuleRenderer from "@/components/UniversalModuleRenderer";

export default function Home() {
  return (
    <div className="min-h-screen bg-slate-50 font-[family-name:var(--font-geist-sans)]">
      {/* 顶部导航 */}
      <header className="bg-white shadow-sm border-b px-8 py-4 flex items-center justify-between">
        <h1 className="text-2xl font-black text-gray-800 tracking-tight">AI-Native <span className="text-blue-600">CRM</span></h1>
        <div className="flex items-center space-x-4">
          <span className="text-sm font-medium text-gray-500">业务会话 ID: <span className="text-gray-900 bg-gray-100 px-2 py-1 rounded font-mono">{(typeof window !== 'undefined' ? localStorage.getItem("crm_user_id") : "UNKNOWN") || "UNKNOWN"}</span></span>
        </div>
      </header>

      <main className="p-8 max-w-5xl mx-auto mt-8 flex flex-col gap-6">
        <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100 relative overflow-hidden">
          <div className="absolute top-0 right-0 w-32 h-32 bg-blue-50 rounded-bl-full -z-10 opacity-50"></div>
          <h2 className="text-xl font-bold mb-2">👋 欢迎来到您的智能 AI 业务助理</h2>
          <h2 className="text-xl font-bold mb-2"> 测试模式，不能保存到后端！ 以后发布后再测试吧</h2>
          <p className="text-gray-600 text-sm leading-relaxed max-w-2xl">
            无需复杂的配置，直接告诉 AI 您想管理的内容。点击右下角的 <span className="text-blue-600 font-bold">Copilot 智能助手</span> 并输入您的需求，
            例如：<b>“我想创建一个员工入职登记表，包含姓名、职位和入职时间”</b>，系统将立即为您自动生成定制化的业务单据！
          </p>
        </div>

        {/* 这里挂载在页面后台，负责监听并执行 AI 下发的 UI 绘画指令 */}
        <UniversalModuleRenderer />
      </main>
    </div>
  );
}