import type { LegacySidebarModel } from "./legacySidebarModel";
import { LEGACY_STAT_DEFINITIONS } from "../../legacy/interop.js";
import { MetricSection } from "../MetricSection";
import { legacyGradeClass } from "../legacyUi";

interface LegacyStatsPanelProps {
  model: LegacySidebarModel;
}

export function LegacyStatsPanel({ model }: LegacyStatsPanelProps) {
  return (
    <article className="panel">
      <div className="panel-head">
        <h2>Current Stats</h2>
        <p>These values still come directly from the original runtime state.</p>
      </div>
      <div className="metric-stack">
        <MetricSection
          definitions={LEGACY_STAT_DEFINITIONS}
          description="Legacy core stats from the original project."
          title="Stats"
          values={model.currentRecord}
        />
      </div>
      <div className="signal-section">
        <div className="section-head">
          <h3>Selected Talents</h3>
          <p>
            The draft and inheritance flow still use the original talent pool
            directly.
          </p>
        </div>
        {model.selectedTalents.length ? (
          <div className="legacy-chip-list">
            {model.selectedTalents.map((talent) => (
              <span
                className={`signal-pill ${legacyGradeClass(talent.grade)}`}
                key={talent.id}
              >
                {talent.name}
              </span>
            ))}
          </div>
        ) : (
          <div className="signal-empty">No talents selected yet.</div>
        )}
      </div>
    </article>
  );
}
