import { Tag as Tag } from '../b-end.js';
const BIZ_TAG_VARIANT = {
  社区: 'teal',
  直播: 'purple',
  生服: 'pink',
  电商: 'blue',
};

function CommentRow({ item, isLast = false }) {
  const highlighted = Boolean(item.focusLabel);
  return (
    <div
      className={`relative rounded-md border px-5 py-3 ${isLast ? '' : 'mb-2'} ${highlighted ? 'border-[#F4FEFD]' : 'border-[#F4FEFD] bg-blueGrey-100'}`}
      style={
        highlighted
          ? {
              backgroundImage:
                'linear-gradient(215deg, rgba(253,193,101,0.27) 0%, rgba(255,255,255,0.27) 22.2%), linear-gradient(90deg, #F9FAFB 0%, #F9FAFB 100%)',
            }
          : undefined
      }
    >
      {highlighted ? (
        <div className="absolute right-[-1px] top-0 rounded-bl-md rounded-tr-md bg-[#FDC165] px-3 text-[12px] font-semibold leading-5 text-[#FFFDEA]">
          {item.focusLabel}
        </div>
      ) : null}

      <div className="flex items-center justify-between gap-6">
        <div className={`flex min-w-0 items-start gap-2 ${highlighted ? 'pr-20' : ''}`}>
          {item.biz ? (
            <Tag
              variant={BIZ_TAG_VARIANT[item.biz] || 'grey'}
              size="m"
              className="shrink-0 whitespace-nowrap font-semibold"
            >
              {item.biz}
            </Tag>
          ) : null}
          <div
            className="min-w-0 text-[14px] leading-5 text-blueGrey-900"
            style={{
              display: '-webkit-box',
              WebkitLineClamp: highlighted ? 2 : 1,
              WebkitBoxOrient: 'vertical',
              overflow: 'hidden',
            }}
          >
            {item.content}
          </div>
        </div>
        <div className="shrink-0 self-center text-[12px] leading-4 text-blueGrey-500">
          {item.time || '07:56'}
        </div>
      </div>
    </div>
  );
}

/**
 * Dashboard 业务组件：评论卡片（标题 + 评论列表）
 *
 * @param {boolean} [fillHeight=false] — 为 true 时占满父级高度（如监控屏右侧栅格底对齐）；默认 false，按内容 hug 高度，仅保留 p-4
 */
export default function CommentCardPreview({
  title = '评论标题',
  subtitle = '说明文字占位说明文字占位说明文字占位',
  titleIconSrc = '',
  items = [],
  fillHeight = false,
}) {
  return (
    <div
      className={`flex flex-col ${fillHeight ? 'h-full min-h-0' : ''}`}
      style={{ width: '100%', maxWidth: 588 }}
    >
      <div
        className={`rounded-xl bg-white p-4 ${fillHeight ? 'flex h-full min-h-0 flex-col' : ''}`}
      >
        <div className="mb-6 flex min-w-0 shrink-0 items-center gap-3">
          <div className="inline-flex min-w-0 shrink-0 items-center gap-2">
            {titleIconSrc ? (
              <img src={titleIconSrc} alt="" aria-hidden="true" className="h-6 w-6 shrink-0" />
            ) : null}
            <h3
              className="shrink-0 text-lg font-semibold leading-6 text-blueGrey-900"
              style={{ fontWeight: 'var(--font-weight-semibold, 600)' }}
            >
              {title}
            </h3>
          </div>
          <span className="truncate text-xs leading-4 text-blueGrey-500">{subtitle}</span>
        </div>

        <div
          className={`dashboard-scrollbar-hide ${fillHeight ? 'min-h-0 flex-1 overflow-auto' : ''}`}
        >
          {items.map((item, idx) => (
            <CommentRow key={`${item.biz || 'x'}-${idx}`} item={item} isLast={idx === items.length - 1} />
          ))}
        </div>
      </div>
    </div>
  );
}

