'use client';

import {Badge} from '@astryxdesign/core/Badge';
import type {ReportInsight} from '@/features/loyaly-ai/types/chat';

export function InsightCardsBlock({insights}: {insights: ReportInsight[]}) {
  if (!insights || insights.length === 0) return null;

  const getInsightMeta = (type: ReportInsight['type']) => {
    switch (type) {
      case 'opportunity':
        return {
          icon: '💡',
          badgeVariant: 'info' as const,
          label: 'Opportunity',
          borderClass: 'border-blue-500/30 bg-blue-500/[0.03]',
        };
      case 'risk':
        return {
          icon: '⚠️',
          badgeVariant: 'warning' as const,
          label: 'Risk Alert',
          borderClass: 'border-amber-500/30 bg-amber-500/[0.03]',
        };
      case 'growth':
        return {
          icon: '📈',
          badgeVariant: 'success' as const,
          label: 'Growth Factor',
          borderClass: 'border-emerald-500/30 bg-emerald-500/[0.03]',
        };
      case 'best_performer':
        return {
          icon: '🏆',
          badgeVariant: 'success' as const,
          label: 'Top Performer',
          borderClass: 'border-purple-500/30 bg-purple-500/[0.03]',
        };
    }
  };

  return (
    <div className="space-y-3 w-full">
      {insights.map((insight) => {
        const meta = getInsightMeta(insight.type);
        return (
          <div
            key={insight.id || insight.title}
            className={`rounded-xl border p-4 shadow-sm space-y-2 transition-colors ${meta.borderClass}`}
          >
            {/*
              `flex-wrap` so the label and the badges drop to their own lines
              rather than compressing each other. Without it, a narrow panel
              set the title and "87% confidence" against a Badge that will not
              shrink, and the title absorbed the entire deficit.
            */}
            <div className="flex flex-wrap items-start justify-between gap-x-2 gap-y-1.5">
              <div className="flex items-start gap-2 min-w-0">
                <span className="text-lg shrink-0">{meta.icon}</span>
                <span className="text-base font-bold text-white whitespace-normal break-words min-w-0">
                  {insight.title}
                </span>
              </div>
              <div className="flex items-center gap-2 shrink-0">
                {insight.confidence ? (
                  <span className="text-sm font-semibold text-zinc-300 font-mono tabular-nums whitespace-nowrap">
                    {insight.confidence}% confidence
                  </span>
                ) : null}
                <Badge variant={meta.badgeVariant} label={meta.label} />
              </div>
            </div>

            <p className="text-sm font-medium text-zinc-200 leading-relaxed whitespace-normal break-words">
              {insight.explanation}
            </p>

            {insight.recommendedAction ? (
              <div className="pt-2 flex flex-wrap items-baseline gap-x-2 gap-y-1 text-sm font-semibold">
                <span className="text-amber-300 font-bold shrink-0">Action:</span>
                <span className="text-white whitespace-normal break-words min-w-0">
                  {insight.recommendedAction}
                </span>
              </div>
            ) : null}
          </div>
        );
      })}
    </div>
  );
}
