chatkit/frontend/src/components/step2/ParsedDataSummary.tsx

import { useState } from "react";

interface ParsedDataSummaryProps {
  parsedData: Record<string, unknown>;
}

export function ParsedDataSummary({ parsedData }: ParsedDataSummaryProps) {
  const [expanded, setExpanded] = useState(false);

  const questions = parsedData.questions as { questions?: unknown[] } | undefined;
  const students = parsedData.student_answers as { students?: unknown[] } | undefined;
  const answers = parsedData.teacher_answers as { answers?: unknown[] } | undefined;

  const qCount = questions?.questions?.length ?? 0;
  const sCount = students?.students?.length ?? 0;
  const aCount = answers?.answers?.length ?? 0;

  return (
    <div className="card p-4">
      <button
        onClick={() => setExpanded(!expanded)}
        className="w-full flex items-center justify-between text-left"
      >
        <div className="flex items-center gap-4">
          <h3 className="font-display text-sm font-semibold text-[var(--color-text)]">
            已解析資料
          </h3>
          <div className="flex gap-3 text-xs">
            {qCount > 0 && <span className="badge badge-success">📝 {qCount} 題</span>}
            {sCount > 0 && <span className="badge badge-success">👨‍🎓 {sCount} 位學生</span>}
            {aCount > 0 && <span className="badge badge-success">✅ {aCount} 答案</span>}
          </div>
        </div>
        <span className="text-[var(--color-text-muted)] text-lg">
          {expanded ? "▲" : "▼"}
        </span>
      </button>

      {expanded && (
        <div className="mt-4 pt-4 border-t border-[var(--color-border)] text-sm max-h-64 overflow-y-auto">
          <pre className="text-[var(--color-text-muted)] whitespace-pre-wrap break-words">
            {JSON.stringify(parsedData, null, 2)}
          </pre>
        </div>
      )}
    </div>
  );
}