frontend/src/components/EventCard.jsx

import React from "react";
import AxisItemRow from "./AxisItemRow";
import axisDefinitions from "../data/axisDefinitions";

// One event's applicable A/V/AVB/TC_COUNT rows, grouped together - mirrors the
// guideline's "recommended order per video" (identify events -> judge A/V per
// event -> AVB -> TC_COUNT), instead of the old axis-major layout.
export default function EventCard({ event, annotations, onChangeField, isPractice = false, grading }) {
  const eventAnnotations = annotations.events[event.id];

  const rows = [];
  if (event.axes.a) rows.push("a");
  if (event.axes.v) rows.push("v");
  if (event.axes.avb) rows.push("avb");

  return (
    <section className="event-card">
      <header className="event-card-header">
        <span className="event-modality">{event.modalityLabel}</span>
        <h4>{event.label}</h4>
        <p className="muted event-definition">{event.definition}</p>
      </header>

      <div className="event-axis-rows">
        {rows.map((axisId) => {
          const def = axisDefinitions[axisId];
          const field = eventAnnotations[axisId];
          return (
            <AxisItemRow
              key={axisId}
              axisKey={def.key}
              title={def.title}
              summary={def.summary}
              kind="verdict"
              value={field.label}
              rationale={field.rationale}
              onChangeValue={(value) => onChangeField(event.id, axisId, "label", value)}
              onChangeRationale={(value) => onChangeField(event.id, axisId, "rationale", value)}
              isPractice={isPractice}
              grading={grading && grading[axisId]}
            />
          );
        })}

        <AxisItemRow
          axisKey={axisDefinitions.tcCount.key}
          title={axisDefinitions.tcCount.title}
          summary={axisDefinitions.tcCount.summary}
          kind="count"
          value={eventAnnotations.tcCount.value}
          rationale={eventAnnotations.tcCount.rationale}
          onChangeValue={(value) => onChangeField(event.id, "tcCount", "value", value)}
          onChangeRationale={(value) => onChangeField(event.id, "tcCount", "rationale", value)}
          isPractice={isPractice}
          grading={grading && grading.tcCount}
        />
      </div>
    </section>
  );
}