'use client'

import { useEffect, useState } from 'react'
import { FileText, Heart, Sparkles } from 'lucide-react'
import { H5MarkdownRenderer } from '@/components/h5/h5-markdown-renderer'
import type { H5WelcomeHighlight, H5WelcomeLayout } from '@/lib/h5/theme-presets'
import type { PageInfo } from '@/lib/h5/types'
import { isImageUrl } from '@/lib/h5/format'

interface H5WelcomeCardProps {
  pageInfo: PageInfo
  layout?: H5WelcomeLayout
  highlights?: readonly H5WelcomeHighlight[]
}

function WelcomeAvatar({ pageInfo }: { pageInfo: PageInfo }): React.JSX.Element {
  const [imageFailed, setImageFailed] = useState(false)
  const iconValue = pageInfo.iconEmoji.trim()
  const displayName = pageInfo.assistantName || pageInfo.pageTitle

  useEffect(() => {
    setImageFailed(false)
  }, [iconValue])

  if (iconValue && !imageFailed && isImageUrl(iconValue)) {
    return (
      <div className="h5-welcome-icon">
        <img src={iconValue} alt={`${displayName}形象`} onError={() => setImageFailed(true)} />
      </div>
    )
  }

  if (iconValue && !isImageUrl(iconValue)) {
    return <div className="h5-welcome-icon">{iconValue}</div>
  }

  return (
    <div className="h5-welcome-icon h5-welcome-icon-monogram">
      {displayName.charAt(0).toUpperCase()}
    </div>
  )
}

function HighlightIcon({ icon }: { icon: H5WelcomeHighlight['icon'] }): React.JSX.Element {
  if (icon === 'heart') return <Heart size={21} fill="currentColor" />
  if (icon === 'report') return <FileText size={21} />
  return <Sparkles size={21} />
}

function StandardWelcomeCard({ pageInfo }: { pageInfo: PageInfo }): React.JSX.Element {
  return (
    <div className="h5-welcome-card">
      <WelcomeAvatar pageInfo={pageInfo} />
      <h1 className="h5-welcome-title">{pageInfo.assistantName || pageInfo.pageTitle}</h1>
      {pageInfo.description ? <p className="h5-welcome-desc">{pageInfo.description}</p> : null}
      {pageInfo.welcomeMessage ? (
        <>
          <div className="h5-welcome-label">开场白</div>
          <div className="h5-welcome-body">
            <H5MarkdownRenderer content={pageInfo.welcomeMessage} />
          </div>
        </>
      ) : null}
    </div>
  )
}

function ProfileWelcomeCard({
  pageInfo,
  highlights,
}: {
  pageInfo: PageInfo
  highlights: readonly H5WelcomeHighlight[]
}): React.JSX.Element {
  return (
    <div className="h5-welcome-card h5-welcome-card-profile">
      <section className="h5-welcome-profile-card" aria-labelledby="h5-welcome-profile-title">
        <div className="h5-welcome-profile-content">
          <div className="h5-welcome-profile-media">
            <WelcomeAvatar pageInfo={pageInfo} />
          </div>
          <div className="h5-welcome-profile-identity">
            <h1 id="h5-welcome-profile-title" className="h5-welcome-profile-title">
              你好，我是 <span>{pageInfo.assistantName || pageInfo.pageTitle}</span>
              <Sparkles className="h5-welcome-profile-sparkle" size={18} aria-hidden="true" />
            </h1>
            {pageInfo.description ? <p className="h5-welcome-profile-desc">{pageInfo.description}</p> : null}
          </div>
          {pageInfo.welcomeMessage ? (
            <div className="h5-welcome-profile-body">
              <H5MarkdownRenderer content={pageInfo.welcomeMessage} />
            </div>
          ) : null}
        </div>

        {highlights.length > 0 ? (
          <div className="h5-welcome-highlights">
            {highlights.map((item) => (
              <div key={item.title} className={`h5-welcome-highlight h5-welcome-highlight-${item.icon}`}>
                <div className="h5-welcome-highlight-icon" aria-hidden="true">
                  <HighlightIcon icon={item.icon} />
                </div>
                <div>
                  <h2>{item.title}</h2>
                  <p>{item.description}</p>
                </div>
              </div>
            ))}
          </div>
        ) : null}
      </section>
    </div>
  )
}

export function H5WelcomeCard({
  pageInfo,
  layout = 'standard',
  highlights = [],
}: H5WelcomeCardProps): React.JSX.Element {
  if (layout === 'profile-card') {
    return <ProfileWelcomeCard pageInfo={pageInfo} highlights={highlights} />
  }
  return <StandardWelcomeCard pageInfo={pageInfo} />
}