"use client";

import type { CallReference } from "@/lib/call-reference";
import styles from "./call-reference.module.css";

export default function CallReferencePanel({ references }: { references: CallReference[] }) {
  if (!references.length) return null;

  const source = references[0].source;
  const sourceName = source.file.split("/").at(-1);
  return <section className={`panel ${styles.panel}`} aria-label="原表校对参考">
    <div className={styles.heading}>
      <div><h2>原表校对参考 <span className="count-badge">{references.length} 个片段</span></h2><p>原表片段没有时间对齐，需回听录音定位后填写 EOT。</p></div>
    </div>
    <details className={styles.details} key={references[0].call_id}>
      <summary>查看这通录音的原表片段 <span>供回听核对</span></summary>
      <p className={styles.note}>原表的抢话结论保留作参考。第 5 列没有表头，有值时按原样显示；EOT 标签需针对具体判断时刻重新核对。</p>
      <div className={styles.list}>
        {references.map((reference, index) => <article key={`${reference.source.sheet}-${reference.source.row}`} className={styles.record}>
          <div className={styles.recordHeading}><strong>片段 {String(index + 1).padStart(2, "0")}</strong><span>原表第 {reference.source.row} 行</span></div>
          <dl className={styles.fields}>
            {reference.fields.map((field, fieldIndex) => <div key={fieldIndex} className={field.label.includes("说话") || field.value.length > 40 ? styles.wide : undefined}>
              <dt>{field.label}</dt><dd>{field.value || "未填写"}</dd>
            </div>)}
          </dl>
        </article>)}
      </div>
    </details>
    <div className={styles.source}>
      <span>{sourceName}</span><span>{source.sheet} · 第 {references.map(row => row.source.row).join("、")} 行</span>
    </div>
  </section>;
}