Momento/memento-note/components/dashboard-sentiment-chip.tsx

'use client'

import { Heart } from 'lucide-react'
import type { LucideIcon } from 'lucide-react'
import { useLanguage } from '@/lib/i18n'
import { DashboardWidgetTitleRow } from '@/components/dashboard-widget-title-row'

interface EmotionMeta {
  Icon: LucideIcon
  color: string
}

export interface DashboardSentimentChipProps {
  available: boolean
  loading?: boolean
  dominantEmotion?: string
  summary?: string
  emotions?: Record<string, number>
  emotionMeta: Record<string, EmotionMeta>
}

export function DashboardSentimentChip({
  available,
  loading,
  dominantEmotion,
  summary,
  emotions,
  emotionMeta,
}: DashboardSentimentChipProps) {
  const { t } = useLanguage()

  if (loading) {
    return (
      <div className="rounded-2xl border border-border/30 bg-white dark:bg-zinc-900 p-4">
        <div className="h-24 rounded-xl bg-stone-50 dark:bg-zinc-950/30 animate-pulse" />
      </div>
    )
  }

  return (
    <div className="rounded-2xl border border-border/30 bg-white dark:bg-zinc-900 p-4 min-h-[140px]">
      <DashboardWidgetTitleRow
        widgetId="sentiment"
        icon={<Heart size={12} className="text-brand-accent" />}
        title={t('homeDashboard.sentiment')}
      />

      {!available || !dominantEmotion ? (
        <p className="text-[11px] text-concrete italic leading-relaxed">
          {t('homeDashboard.notEnoughNotes')}
        </p>
      ) : (
        <div className="space-y-3">
          <div className="flex items-center gap-3">
            {(() => {
              const meta = emotionMeta[dominantEmotion] || emotionMeta.reflective
              const Icon = meta?.Icon
              return (
                <div
                  className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0"
                  style={{ backgroundColor: `${meta.color}18`, color: meta.color }}
                >
                  {Icon && <Icon size={18} strokeWidth={1.75} />}
                </div>
              )
            })()}
            <div className="min-w-0">
              <p className="text-lg font-serif font-semibold text-ink dark:text-dark-ink">
                {t(`homeDashboard.emotions.${dominantEmotion}`)}
              </p>
              <p className="text-[9px] font-mono uppercase tracking-wider text-concrete">
                {t('homeDashboard.sentimentDominant')}
              </p>
            </div>
          </div>

          {summary && (
            <p className="text-[11px] text-concrete leading-relaxed border-s-2 border-brand-accent/30 ps-3">
              {summary}
            </p>
          )}

          {emotions && (
            <div className="space-y-2 pt-1">
              {Object.entries(emotions)
                .sort(([, a], [, b]) => b - a)
                .slice(0, 4)
                .map(([key, val]) => {
                  const em = emotionMeta[key]
                  return (
                    <div key={key} className="flex items-center gap-2">
                      <span className="text-[8px] font-mono uppercase text-concrete w-16 truncate">
                        {t(`homeDashboard.emotions.${key}`)}
                      </span>
                      <div className="flex-1 h-1.5 rounded-full bg-stone-100 dark:bg-zinc-800 overflow-hidden">
                        <div
                          className="h-full rounded-full"
                          style={{
                            width: `${Math.min(val * 100, 100)}%`,
                            backgroundColor: em?.color || 'var(--color-brand-accent)',
                          }}
                        />
                      </div>
                    </div>
                  )
                })}
            </div>
          )}
        </div>
      )}
    </div>
  )
}