import type { LegacySidebarModel } from "./legacySidebarModel";
import { LegacyFeedbackPanel } from "../LegacyFeedbackPanel";
import { formatLegacyPercent } from "./legacyAppConfig";

interface LegacyMetaProgressPanelProps {
  model: LegacySidebarModel;
}

export function LegacyMetaProgressPanel({
  model,
}: LegacyMetaProgressPanelProps) {
  return (
    <article className="panel">
      <div className="panel-head">
        <h2>Meta Progress</h2>
        <p>
          Totals still flow through the original persistence rules, while
          runtime feedback now lands in one shared activity stream.
        </p>
      </div>
      {model.totals ? (
        <div className="legacy-meta">
          <div className="legacy-meta-card">
            <span>Remakes</span>
            <strong>{model.totals.times}</strong>
          </div>
          <div className="legacy-meta-card">
            <span>Achievements</span>
            <strong>{model.totals.achievement}</strong>
          </div>
          <div className="legacy-meta-card">
            <span>Talent collection</span>
            <strong>{formatLegacyPercent(model.totals.talentRate)}</strong>
          </div>
          <div className="legacy-meta-card">
            <span>Event collection</span>
            <strong>{formatLegacyPercent(model.totals.eventRate)}</strong>
          </div>
        </div>
      ) : (
        <div className="empty-block">Loading totals...</div>
      )}
      <div className="signal-section">
        <LegacyFeedbackPanel activities={model.activities} />
      </div>
    </article>
  );
}
