import type { GameSliceSession } from "../types";
import { SLICE_OBJECTIVES, getObjectiveProgress } from "../sliceObjectives";
import { metricLabel, slicePanel } from "./sliceStyles";

export function SliceObjectiveTracker({ session }: { session: GameSliceSession }) {
  const progress = getObjectiveProgress(session);
  return (
    <section style={{ ...slicePanel, padding: 12, minHeight: 248 }}>
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 10 }}>
        <strong style={{ color: "#f0a030", fontSize: 12 }}>Guidance</strong>
        <span style={metricLabel}>{progress.percent}%</span>
      </div>
      <div style={{ height: 6, background: "rgba(255,255,255,0.06)", borderRadius: 999, overflow: "hidden", marginBottom: 10 }}>
        <div style={{ width: `${progress.percent}%`, height: "100%", background: "#f0a030" }} />
      </div>
      <div style={{ display: "grid", gap: 6 }}>
        {SLICE_OBJECTIVES.map((objective) => {
          const done = session.completedObjectives.includes(objective.id);
          const active = session.activeObjectiveId === objective.id;
          return (
            <div key={objective.id} style={{ display: "grid", gridTemplateColumns: "18px 1fr", gap: 8, opacity: done || active ? 1 : 0.58 }}>
              <span style={{ color: done ? "#22c55e" : active ? "#22d3ee" : "#64748b" }}>{done ? "✓" : active ? ">" : "·"}</span>
              <div>
                <div style={{ fontSize: 12, color: active ? "#f8fafc" : "#d4dce8" }}>{objective.title}</div>
                <div style={{ fontSize: 10, color: "#94a3b8" }}>{objective.detail}</div>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}
