import React from 'react';
import type { QuickAction } from '../../types';
import styles from './index.module.less';
import defaultAvatar from '../../assets/avatar.png';
import iconAiVideo from '../../assets/ai-video.svg';
import iconAiSearch from '../../assets/ai-search.svg';
import iconAiArticle from '../../assets/ai-article.svg';
import iconAiBookOpen from '../../assets/ai-book-open.svg';

interface WelcomePageProps {
  assistantName?: string;
  quickActions?: QuickAction[];
  /** 欢迎区头像，默认包内 avatar.png */
  avatarUrl?: string;
  /** 点击卡片的回调，优先于 action.onClick */
  onCardClick?: (action: QuickAction) => void;
}

const DEFAULT_ACTIONS: QuickAction[] = [
  {
    id: 'monitor',
    title: '调监控',
    description: '查看活动周边视频监控',
    icon: iconAiVideo,
  },
  {
    id: 'resource',
    title: '查资源',
    description: '查看活动周边资源',
    icon: iconAiSearch,
  },
  {
    id: 'consult',
    title: '了解活动',
    description: '查看活动基础信息介绍',
    icon: iconAiArticle,
  },
  {
    id: 'report',
    title: '查看日报',
    description: '查看活动评估报告',
    icon: iconAiBookOpen,
  },
];

export const WelcomePage: React.FC<WelcomePageProps> = ({
  assistantName = '小亦',
  quickActions = DEFAULT_ACTIONS,
  avatarUrl,
  onCardClick,
}) => {
  const avatarSrc = avatarUrl ?? defaultAvatar;

  return (
    <div className={styles.welcome}>
      <div className={styles.header}>
        <img className={styles.avatar} src={avatarSrc} alt="" />
        <span className={styles.greeting}>您好，我是智能助手{assistantName}！</span>
      </div>
      <p className={styles.subtitle}>
        我可以为您提供活动查询等服务，请向我提问吧～
      </p>

      <div className={styles.grid}>
        {quickActions.map(action => {
          const handleClick = onCardClick
            ? () => onCardClick(action)
            : action.onClick;
          return (
            <div
              key={action.id}
              className={styles.card}
              onClick={handleClick}
              role={handleClick ? 'button' : undefined}
              tabIndex={handleClick ? 0 : undefined}
              onKeyDown={
                handleClick
                  ? e => {
                      if (e.key === 'Enter' || e.key === ' ') {
                        e.preventDefault();
                        handleClick();
                      }
                    }
                  : undefined
              }
            >
              {action.icon != null && (
                <span className={styles.cardIconWrap}>
                  {typeof action.icon === 'string' ? (
                    <img className={styles.cardIconImg} src={action.icon} alt="" />
                  ) : (
                    action.icon
                  )}
                </span>
              )}
              <span className={styles.cardTitle}>{action.title}</span>
              <span className={styles.cardDesc}>{action.description}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
};