crush-level-web/src/app/(auth)/share/[userId]/test.tsx

'use client'

import { useParams } from 'next/navigation'
import { useGetAIUserBaseInfo } from '@/hooks/aiUser'
import Image from 'next/image'

// 按钮组件
interface MobileButtonProps {
  showIcon?: boolean
  icon?: React.ReactNode | null
  btnTxt?: string
  showTxt?: boolean
  size?: 'Large' | 'Medium' | 'Small'
  variant?: 'Contrast' | 'Basic' | 'Ghost'
  type?: 'Primary' | 'Secondary' | 'Tertiary' | 'Destructive' | 'VIP'
  state?: 'Default' | 'Disabled' | 'Pressed'
  onClick?: () => void
}

function MobileButton({
  showIcon = true,
  icon = null,
  btnTxt = 'Button',
  showTxt = true,
  size = 'Large',
  variant = 'Basic',
  type = 'Primary',
  state = 'Default',
  onClick,
}: MobileButtonProps) {
  if (size === 'Small' && variant === 'Contrast' && type === 'Tertiary' && state === 'Default') {
    return (
      <button
        onClick={onClick}
        className="relative box-border flex h-8 content-stretch items-center justify-center gap-1 overflow-clip rounded-[999px] bg-[rgba(0,0,0,0.65)] px-4 py-1.5 transition-colors hover:bg-[rgba(0,0,0,0.8)]"
      >
        {showIcon &&
          (icon || (
            <div className="relative h-[15.999px] w-4 shrink-0">
              <div
                className="absolute right-[17.15%] left-1/4 aspect-[9.25554/12.1612] translate-y-[-50%]"
                style={{ top: 'calc(50% + 0.065px)' }}
              >
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                  <path d="M3 2l6 4-6 4V2z" fill="white" />
                </svg>
              </div>
            </div>
          ))}
        {showTxt && (
          <div className="relative flex shrink-0 flex-col justify-center text-center text-[12px] leading-[0] font-medium text-nowrap text-white not-italic">
            <p className="leading-[20px] whitespace-pre">{btnTxt}</p>
          </div>
        )}
      </button>
    )
  }

  return (
    <button
      onClick={onClick}
      className="relative box-border flex h-8 content-stretch items-center justify-center gap-1 overflow-clip rounded-[999px] bg-[rgba(0,0,0,0.65)] px-4 py-1.5 transition-colors hover:bg-[rgba(0,0,0,0.8)]"
    >
      {showIcon && icon}
      {showTxt && <span className="text-[12px] font-medium text-white">{btnTxt}</span>}
    </button>
  )
}

const SharePage = () => {
  const { userId } = useParams()

  const { data: userInfo } = useGetAIUserBaseInfo({
    aiId: userId ? Number(userId) : 0,
  })

  const { homeImageUrl } = userInfo || {}

  const handleChatClick = () => {
    // 跳转到应用或下载页面
    window.open('https://crushlevel.com/download', '_blank')
  }

  return (
    <div className="relative mx-auto h-screen max-w-[750px] overflow-hidden">
      {/* 背景图片 */}
      <div
        className="absolute inset-0 overflow-clip"
        style={{
          background:
            'linear-gradient(180deg, #211A2B 0%, rgba(33, 26, 43, 0.00) 20%, rgba(33, 26, 43, 0.00) 50%, #211A2B 100%)',
        }}
      >
        <div className="absolute inset-0">
          <Image src={homeImageUrl || ''} alt="Background" fill className="object-cover" priority />
        </div>
        <div className="absolute inset-0 bg-black/20" />
      </div>

      {/* 内容容器 */}
      <div className="relative z-10 box-border flex min-h-screen flex-col content-stretch items-start justify-start px-0 pt-4 pb-0">
        {/* 头部用户信息 */}
        <div className="relative box-border flex w-full shrink-0 content-stretch items-start justify-start overflow-clip px-6 py-0">
          <div className="relative flex min-h-px min-w-px shrink-0 grow basis-0 content-stretch items-center justify-start gap-2 self-stretch">
            {/* 用户头像 */}
            <div className="relative size-10 shrink-0 overflow-clip rounded-[99px]">
              {userInfo?.headImg ? (
                <Image
                  src={userInfo.headImg}
                  alt={userInfo.nickname || 'User'}
                  fill
                  className="object-cover"
                />
              ) : (
                <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-purple-400 to-pink-400">
                  <span className="text-lg font-bold text-white">
                    {userInfo?.nickname?.charAt(0) || 'U'}
                  </span>
                </div>
              )}
            </div>

            {/* 用户名和点赞数 */}
            <div className="relative flex shrink-0 flex-col content-stretch items-start justify-start text-center leading-[0] text-nowrap text-white not-italic">
              <div className="relative shrink-0 text-[20px] font-semibold">
                <p className="leading-[24px] text-nowrap whitespace-pre">
                  {userInfo?.nickname || 'Loading...'}
                </p>
              </div>
              <div className="relative shrink-0 text-[12px] font-medium">
                <p className="leading-[20px] text-nowrap whitespace-pre">0 likes</p>
              </div>
            </div>
          </div>
        </div>

        {/* 主要内容区域 */}
        <div className="relative flex min-h-px w-full min-w-px shrink-0 grow basis-0 flex-col content-stretch items-start justify-end">
          {/* 消息内容 */}
          <div className="relative inline-grid shrink-0 grid-cols-[max-content] grid-rows-[max-content] place-items-start px-6 leading-[0]">
            {/* AI信息卡片 */}
            <div className="relative box-border flex w-full shrink-0 flex-col content-stretch items-start justify-start gap-1 px-0 py-2">
              <div className="relative box-border flex w-full shrink-0 flex-col content-stretch items-start justify-start gap-2 rounded-[16px] border border-[rgba(251,222,255,0.2)] bg-[rgba(251,222,255,0.08)] p-[16px] backdrop-blur-[32px] backdrop-filter">
                {/* 介绍文本 */}
                <div className="font-regular relative line-clamp-3 w-full shrink-0 overflow-hidden text-[14px] leading-[20px] text-white">
                  <p>
                    <span className="font-semibold">Intro: </span>
                    <span>
                      {userInfo?.introduction ||
                        'This is an AI character with unique personality and charm. Start chatting to discover more about them!'}
                    </span>
                  </p>
                </div>

                {/* 标签 */}
                <div className="relative flex w-full shrink-0 content-stretch items-start justify-start gap-2">
                  {userInfo?.tagName ? (
                    userInfo.tagName
                      .split(',')
                      .slice(0, 2)
                      .map((tag: string, index: number) => (
                        <div
                          key={index}
                          className="relative box-border flex h-6 min-w-6 shrink-0 content-stretch items-center justify-center gap-1 overflow-clip rounded-[4px] bg-[#d21f77]/45 px-2 py-0.5 backdrop-blur backdrop-filter"
                        >
                          <div className="text-[12px] leading-[20px] font-medium text-white">
                            {tag.trim()}
                          </div>
                        </div>
                      ))
                  ) : (
                    <>
                      <div className="relative box-border flex h-6 min-w-6 shrink-0 content-stretch items-center justify-center gap-1 overflow-clip rounded-[4px] bg-[#d21f77]/45 px-2 py-0.5 backdrop-blur backdrop-filter">
                        <div className="text-[12px] leading-[20px] font-medium text-white">
                          Sensual
                        </div>
                      </div>
                      <div className="relative box-border flex h-6 min-w-6 shrink-0 content-stretch items-center justify-center gap-1 overflow-clip rounded-[4px] bg-[#d21f77]/45 px-2 py-0.5 backdrop-blur backdrop-filter">
                        <div className="text-[12px] leading-[20px] font-medium text-white">
                          Romantic
                        </div>
                      </div>
                    </>
                  )}
                </div>
              </div>
            </div>

            {/* AI生成内容提示 */}
            <div className="relative box-border flex w-full shrink-0 flex-col content-stretch items-center justify-start gap-1 px-0 py-2">
              <div className="relative box-border flex shrink-0 content-stretch items-center justify-center gap-2 rounded-[4px] bg-[rgba(251,222,255,0.08)] px-2 py-1 backdrop-blur-[32px] backdrop-filter">
                <div className="font-regular text-center text-[12px] leading-[20px] text-white">
                  Content generated by AI
                </div>
              </div>
            </div>

            {/* 示例对话消息 */}
            <div className="relative box-border flex w-full shrink-0 content-stretch items-start justify-start gap-4 pt-4 pr-20 pb-2 pl-0">
              <div className="relative box-border flex min-h-px min-w-px shrink-0 grow basis-0 content-stretch items-start justify-start gap-2.5 rounded-[16px] bg-[rgba(0,0,0,0.65)] px-4 pt-5 pb-4 backdrop-blur-[32px] backdrop-filter">
                {/* 语音标签 */}
                <div className="absolute top-[-12px] left-0 box-border flex content-stretch items-center justify-center gap-2 overflow-clip rounded-tl-[8px] rounded-tr-[8px] rounded-br-[8px] bg-[#484151] px-3 py-1">
                  <div className="relative size-3 shrink-0">
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                      <path d="M3 2l6 4-6 4V2z" fill="white" />
                    </svg>
                  </div>
                  <div className="text-[12px] leading-[20px] font-medium text-nowrap text-white">
                    2''
                  </div>
                </div>

                {/* 消息内容 */}
                <div className="font-regular min-h-px min-w-px grow basis-0 text-[14px] leading-[20px] text-white">
                  <span className="text-[#958e9e]">
                    (Watching her parents toast you respectfully, I feel very sad.){' '}
                  </span>
                  <span>Are you?</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 底部品牌区域 */}
        <div className="relative box-border flex w-full shrink-0 content-stretch items-start justify-start gap-1 overflow-clip px-2 py-4">
          <div className="relative box-border flex min-h-px min-w-px shrink-0 grow basis-0 content-stretch items-center justify-start gap-3 rounded-[16px] bg-gradient-to-r from-[#f264a4] to-[#c241e6] px-4 py-2">
            {/* App图标 */}
            <div className="relative size-[24px] shrink-0 overflow-clip rounded-[12px]">
              <Image
                src="/logo.svg"
                alt="Crushlevel Logo"
                width={24}
                height={24}
                className="object-contain"
              />
            </div>

            {/* 品牌信息 */}
            <div className="relative flex min-h-px min-w-px shrink-0 grow basis-0 flex-col content-stretch items-start justify-start">
              <div className="relative h-[14.422px] shrink-0 overflow-clip">
                <Image
                  src="/logo.svg"
                  alt="Crushlevel"
                  width={47}
                  height={14}
                  className="object-contain"
                />
              </div>
              <div className="text-center text-[12px] leading-[20px] font-medium text-nowrap text-white">
                Chat. Crush. AI Date
              </div>
            </div>

            {/* Chat按钮 */}
            <MobileButton
              showIcon={false}
              btnTxt="Chat"
              size="Small"
              variant="Contrast"
              type="Tertiary"
              onClick={handleChatClick}
            />
          </div>
        </div>
      </div>
    </div>
  )
}

export default SharePage