import type { CustomWorldAgentSessionSnapshot } from '../../../packages/shared/src/contracts/customWorldAgent';

type CustomWorldAgentSummaryPanelProps = {
  session: CustomWorldAgentSessionSnapshot;
};

function readSummaryText(
  draftProfile: Record<string, unknown> | null,
  fallback: string,
) {
  const title =
    typeof draftProfile?.title === 'string' ? draftProfile.title.trim() : '';
  const summary =
    typeof draftProfile?.summary === 'string'
      ? draftProfile.summary.trim()
      : '';

  return {
    title: title || '世界摘要待整理',
    summary: summary || fallback,
  };
}

export function CustomWorldAgentSummaryPanel({
  session,
}: CustomWorldAgentSummaryPanelProps) {
  const pendingCount = session.pendingClarifications.length;
  const { title, summary } = readSummaryText(
    session.draftProfile,
    '第一阶段先收住世界设定，后续阶段再把这里整理成更完整的世界底稿摘要。',
  );

  return (
    <div className="rounded-[1.75rem] border border-white/10 bg-black/20 px-4 py-4">
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div>
          <div className="text-[11px] font-bold tracking-[0.2em] text-zinc-400">
            顶部摘要
          </div>
          <div className="mt-2 text-lg font-semibold text-white">
            {title}
          </div>
        </div>
        <div className="flex flex-wrap gap-2">
          <span className="rounded-full border border-white/10 bg-black/24 px-3 py-1 text-[11px] text-zinc-300">
            消息 {session.messages.length}
          </span>
          <span className="rounded-full border border-sky-300/20 bg-sky-500/10 px-3 py-1 text-[11px] text-sky-100">
            待澄清 {pendingCount}
          </span>
        </div>
      </div>
      <div className="mt-3 text-sm leading-7 text-zinc-300">
        {summary}
      </div>
    </div>
  );
}