import { motion } from 'framer-motion';
import {
  PenSquare,
  Code2,
  BarChart3,
  FileText,
  Bot,
} from 'lucide-react';
import { TKMindAvatar } from './TKMindAvatar';

const features = [
  { icon: PenSquare, text: '写作创作' },
  { icon: Code2, text: '编程开发' },
  { icon: BarChart3, text: '数据分析' },
  { icon: FileText, text: '文档总结' },
  { icon: Bot, text: '自动执行' },
];

export function ChatWelcomePanel({ compact }: { compact?: boolean }) {
  if (compact) {
    return (
      <div className="empty-state empty-state-compact">
        <TKMindAvatar />
        <h2>TKMind</h2>
        <p>继续和空间里的 Agent 对话</p>
      </div>
    );
  }

  return (
    <div className="welcome-panel">
      <div className="welcome-panel-content">
        <motion.div
          initial={{ opacity: 0, y: -15 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="welcome-panel-avatar-wrap"
        >
          <TKMindAvatar size="lg" className="welcome-panel-avatar" />
        </motion.div>

        <motion.h2
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.15 }}
          className="welcome-panel-brand"
        >
          TKMind智趣
        </motion.h2>

        <motion.h1
          initial={{ opacity: 0, y: 18 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.25 }}
          className="welcome-panel-headline"
        >
          <span className="welcome-panel-headline-base">你的全能</span>
          <span className="welcome-panel-headline-gradient">AI 助手</span>
        </motion.h1>

        <motion.p
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.4 }}
          className="welcome-panel-subtitle"
        >
          想到什么，就发什么。
        </motion.p>

        <motion.p
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.55 }}
          className="welcome-panel-description"
        >
          写作创作、编程开发、数据分析、文档总结、自动执行任务，统统交给 TKMind 智趣。
        </motion.p>

        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.7 }}
          className="welcome-panel-actions"
        >
          {features.map((item) => {
            const Icon = item.icon;
            return (
              <div key={item.text} className="welcome-panel-pill">
                <span className="welcome-panel-pill-icon" aria-hidden="true">
                  <Icon size={22} strokeWidth={2} />
                </span>
                <span>{item.text}</span>
              </div>
            );
          })}
        </motion.div>

        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.95 }}
          className="welcome-panel-hint"
        >
          <div className="welcome-panel-hint-arrow">↓</div>
          <div className="text-base">在下方输入你的问题或任务</div>
        </motion.div>
      </div>
    </div>
  );
}