'use client'

import { useParams } from 'next/navigation'
import { useGetAIUserBaseInfo, useGetAIUserStat } from '@/hooks/aiUser'
import Image from 'next/image'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { formatNumberToKMB, openApp } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { Tag } from '@/components/ui/tag'
import {
  calculateAudioDuration,
  formatAudioDuration,
  parseTextWithBrackets,
} from '@/utils/textParser'
import { useGetIMUserInfo, useGetShareUserInfo } from '@/hooks/useIm'
import React from 'react'

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

  const { data: imUserInfo } = useGetShareUserInfo({
    aiId: userId ? Number(userId) : 0,
  })
  const { data: statData } = useGetAIUserStat({ aiId: Number(userId) })
  const { likedNum } = statData || {}

  const { backgroundImg, headImg } = imUserInfo || {}

  // 计算预估的音频时长
  const estimatedDuration = React.useMemo(() => {
    return calculateAudioDuration(
      imUserInfo?.dialoguePrologue || '',
      imUserInfo?.dialogueSpeechRate || 0
    )
  }, [imUserInfo?.dialoguePrologue, imUserInfo?.dialogueSpeechRate])

  // 格式化时长显示
  const formattedDuration = formatAudioDuration(estimatedDuration)

  const textParts = parseTextWithBrackets(imUserInfo?.dialoguePrologue || '')

  const handleOpenApp = () => {
    openApp(`crushlevel://profile/${userId}`)
  }

  return (
    <div className="relative mx-auto h-screen w-full max-w-[750px]">
      <div className="absolute inset-0">
        <Image src={backgroundImg || ''} alt="Background" fill className="object-cover" priority />

        <div
          className="absolute inset-0"
          style={{
            background:
              'linear-gradient(180deg, #211A2B 0%, rgba(33, 26, 43, 0.00) 20%, rgba(33, 26, 43, 0.00) 50%, #211A2B 100%)',
          }}
        />
      </div>

      <div className="absolute inset-0 flex flex-col justify-between">
        <div className="shrink-0 px-6 py-4">
          <div className="flex items-center gap-2">
            <Avatar className="size-10">
              <AvatarImage src={headImg || ''} />
              <AvatarFallback>{imUserInfo?.nickname?.charAt(0) || ''}</AvatarFallback>
            </Avatar>
            <div>
              <div className="txt-title-m">{imUserInfo?.nickname || ''}</div>
              <div className="txt-label-s">{formatNumberToKMB(likedNum || 0)} Likes</div>
            </div>
          </div>
          <div />
        </div>
        <div className="flex min-h-0 flex-1 flex-col justify-end overflow-auto">
          <div className="flex flex-col justify-end">
            <div className="px-6 py-2">
              <div className="bg-surface-element-normal border-outline-normal rounded-lg border border-solid p-4 backdrop-blur-[32px]">
                <div className="txt-body-m line-clamp-3">{imUserInfo?.introduction}</div>
                <div
                  className="mt-2 flex items-center justify-between gap-4"
                  onClick={handleOpenApp}
                >
                  <div className="flex items-center gap-2">
                    <Tag variant="purple" size="small">
                      {imUserInfo?.characterName}
                    </Tag>
                    <Tag variant="magenta" size="small">
                      {imUserInfo?.tagName}
                    </Tag>
                  </div>
                  <i className="iconfont icon-icon-fullImage !text-[12px]" />
                </div>
              </div>
            </div>
          </div>

          <div className="flex items-center justify-center px-6 py-2">
            <div className="txt-label-s bg-surface-element-normal rounded-xs px-2 py-1 text-center">
              Content generated by AI
            </div>
          </div>
          <div className="px-6 pt-4 pb-2">
            <div className="bg-surface-element-dark-normal txt-body-m relative w-[80%] rounded-lg px-4 pt-5 pb-4 backdrop-blur-[32px]">
              {textParts.map((part, index) => (
                <span key={index} className={part.isInBrackets ? 'text-txt-secondary-normal' : ''}>
                  {part.text}
                </span>
              ))}

              <div className="bg-surface-float-normal hover:bg-surface-float-hover absolute -top-3 left-0 flex cursor-pointer items-center gap-2 rounded-tl-sm rounded-r-sm px-3 py-1">
                <div className="flex h-3 w-3 items-center">
                  <i className="iconfont icon-Play !text-[12px] leading-none" />
                </div>
                <span className="txt-label-s">{formattedDuration}</span>
              </div>
            </div>
          </div>
        </div>
        <div className="shrink-0 px-4 py-2 pb-10">
          <div
            className="flex items-center justify-between gap-3 rounded-lg px-4 py-2 backdrop-blur-lg"
            style={{
              background: 'var(--glo-color-transparent-purple-t20, rgba(251, 222, 255, 0.2))',
            }}
          >
            <div className="flex items-center gap-3">
              <Image
                src="/icons/square-logo.svg"
                className="overflow-hidden rounded-[12px]"
                alt="chat"
                width={48}
                height={48}
              />
              <div className="flex flex-col gap-1">
                <Image src="/images/share/logo.svg" alt="chat" width={103} height={32} />
                <div className="txt-label-s">Chat, Crush, AI Date</div>
              </div>
            </div>
            <Button variant="primary" size="small" className="min-w-auto" onClick={handleOpenApp}>
              Chat
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default SharePage
