import { useState } from 'react'
import { formatStyle8DEngagementLine, style8DEngagementNotice, type StoredStyle8DProfile } from '../lib/styleProfile'
import { Badge, Notice } from './ui'

export function Style8DAnalysisMeta({ profile }: { profile: StoredStyle8DProfile }) {
  const [showStats, setShowStats] = useState(false)
  const notice =
    profile.engagement.verdict !== 'strong' ? style8DEngagementNotice(profile.engagement.verdict) : null

  return (
    <div className="space-y-3">
      <div className="ac-persona-8d-meta">
        <p className="text-sm font-semibold text-ink">{formatStyle8DEngagementLine(profile)}</p>
        <div className="flex flex-wrap items-center gap-2">
          {profile.engagement.verdict === 'strong' ? (
            <Badge tone="success">適合對標</Badge>
          ) : profile.engagement.verdict === 'usable' ? (
            <Badge tone="warning">互動偏低</Badge>
          ) : (
            <Badge tone="sky">資料不足</Badge>
          )}
          <button
            type="button"
            className="ac-evidence-toggle !min-h-0 !border-0 !bg-transparent !p-0 text-[11px] font-bold text-brand"
            onClick={() => setShowStats((prev) => !prev)}
          >
            {showStats ? '收起數據' : '查看數據'}
          </button>
        </div>
      </div>

      {showStats ? (
        <div className="ac-persona-8d-stats">
          <span>樣本 {profile.postCount} 篇</span>
          <span>中位 {profile.engagement.medianInteractions}</span>
          <span>平均 {profile.engagement.averageInteractions}</span>
          <span>
            達 {profile.engagement.threshold} 互動 {profile.engagement.postsAboveThreshold} 篇
          </span>
        </div>
      ) : null}

      {notice ? <Notice tone={notice.tone} title={notice.title} message={notice.message} /> : null}
    </div>
  )
}