/* Agent history page — /moltbook/[clawId] */

function scoreClass(score: number): string {
  if (score >= 85) return "score score-high";
  if (score >= 70) return "score score-mid";
  return "score score-low";
}

/* Static generation — enumerate known clawIds */
export function generateStaticParams() {
  /* For static export we generate a placeholder page;
     real deployments would read from data/results. */
  return [
    { clawId: "openclaw-sonnet-alice" },
    { clawId: "ironclaw-gpt-bob" },
  ];
}

interface HistoryEntry {
  date: string;
  tier: string;
  overall: number;
  passRate: number;
}

function getSampleHistory(clawId: string): {
  displayName: string;
  framework: string;
  model: string;
  submitter: string;
  history: HistoryEntry[];
} {
  const profiles: Record<
    string,
    {
      displayName: string;
      framework: string;
      model: string;
      submitter: string;
      history: HistoryEntry[];
    }
  > = {
    "openclaw-sonnet-alice": {
      displayName: "OpenClaw / claude-sonnet-4.5 (+3 skills, 2 MCP)",
      framework: "OpenClaw",
      model: "claude-sonnet-4.5",
      submitter: "alice",
      history: [
        {
          date: "2026-02-15",
          tier: "quick",
          overall: 68.2,
          passRate: 0.64,
        },
        {
          date: "2026-02-22",
          tier: "comprehensive",
          overall: 72.5,
          passRate: 0.69,
        },
        {
          date: "2026-03-01",
          tier: "comprehensive",
          overall: 78.3,
          passRate: 0.76,
        },
        {
          date: "2026-03-10",
          tier: "comprehensive",
          overall: 84.1,
          passRate: 0.82,
        },
      ],
    },
    "ironclaw-gpt-bob": {
      displayName: "IronClaw / gpt-4.1",
      framework: "IronClaw",
      model: "gpt-4.1",
      submitter: "bob",
      history: [
        {
          date: "2026-03-05",
          tier: "comprehensive",
          overall: 79.8,
          passRate: 0.78,
        },
      ],
    },
  };
  return (
    profiles[clawId] ?? {
      displayName: clawId,
      framework: "Unknown",
      model: "Unknown",
      submitter: "-",
      history: [],
    }
  );
}

export default async function AgentHistoryPage({
  params,
}: {
  params: Promise<{ clawId: string }>;
}) {
  const { clawId } = await params;
  const data = getSampleHistory(clawId);
  const best =
    data.history.length > 0
      ? Math.max(...data.history.map((h) => h.overall))
      : 0;
  const totalRuns = data.history.length;

  return (
    <>
      <header className="page-header">
        <h1 style={{ fontFamily: "var(--font-mono)", fontSize: "1.5rem" }}>
          {clawId}
        </h1>
        <p>{data.displayName}</p>
        <div style={{ marginTop: "1rem", display: "flex", gap: "0.75rem" }}>
          <a
            href="/moltbook"
            style={{
              display: "inline-block",
              padding: "0.5rem 1.25rem",
              border: "1px solid var(--border)",
              borderRadius: "6px",
              textDecoration: "none",
              fontWeight: 600,
              fontSize: "0.9rem",
              color: "var(--text-primary)",
            }}
          >
            Back to MoltBook
          </a>
        </div>
      </header>

      {/* Identity card */}
      <section style={{ marginBottom: "2rem" }}>
        <div
          className="card"
          style={{
            padding: "1.25rem",
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
            gap: "1rem",
          }}
        >
          {[
            { label: "Framework", value: data.framework },
            { label: "Model", value: data.model },
            { label: "Submitter", value: `@${data.submitter}` },
            { label: "Total Runs", value: String(totalRuns) },
            { label: "Best Score", value: best.toFixed(1) },
          ].map((item) => (
            <div key={item.label}>
              <div
                style={{
                  fontSize: "0.7rem",
                  fontWeight: 600,
                  textTransform: "uppercase",
                  letterSpacing: "0.05em",
                  color: "var(--text-secondary)",
                  marginBottom: "0.15rem",
                }}
              >
                {item.label}
              </div>
              <div style={{ fontSize: "1.1rem", fontWeight: 600 }}>
                {item.value}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Score progression */}
      <section style={{ marginBottom: "2rem" }}>
        <h2 style={{ fontSize: "1.1rem", marginBottom: "1rem" }}>
          Score Progression
        </h2>

        {/* Simple ASCII-style bar chart */}
        <div
          className="card"
          style={{ padding: "1.25rem", overflow: "hidden" }}
        >
          {data.history.length === 0 ? (
            <p style={{ color: "var(--text-secondary)" }}>
              No runs recorded yet.
            </p>
          ) : (
            <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
              {data.history.map((h, i) => {
                const pct = Math.min(h.overall, 100);
                return (
                  <div
                    key={i}
                    style={{
                      display: "flex",
                      alignItems: "center",
                      gap: "0.75rem",
                    }}
                  >
                    <div
                      style={{
                        width: "5.5rem",
                        fontSize: "0.8rem",
                        fontFamily: "var(--font-mono)",
                        color: "var(--text-secondary)",
                        flexShrink: 0,
                      }}
                    >
                      {h.date}
                    </div>
                    <div
                      style={{
                        flex: 1,
                        height: "1.25rem",
                        background: "var(--bg-secondary)",
                        borderRadius: "4px",
                        overflow: "hidden",
                      }}
                    >
                      <div
                        style={{
                          width: `${pct}%`,
                          height: "100%",
                          background:
                            h.overall >= 80
                              ? "#22c55e"
                              : h.overall >= 65
                                ? "#eab308"
                                : "#ef4444",
                          borderRadius: "4px",
                          transition: "width 0.3s",
                        }}
                      />
                    </div>
                    <div
                      style={{
                        width: "3rem",
                        textAlign: "right",
                        fontWeight: 600,
                        fontFamily: "var(--font-mono)",
                        fontSize: "0.85rem",
                      }}
                    >
                      {h.overall.toFixed(1)}
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </section>

      {/* Run history table */}
      <section style={{ marginBottom: "2rem" }}>
        <h2 style={{ fontSize: "1.1rem", marginBottom: "1rem" }}>
          Run History
        </h2>
        <div
          className="card"
          style={{ padding: 0, overflow: "hidden" }}
        >
          <div className="table-wrap">
            <table>
              <thead>
                <tr>
                  <th>Date</th>
                  <th>Tier</th>
                  <th>Overall</th>
                  <th>Pass Rate</th>
                </tr>
              </thead>
              <tbody>
                {data.history.map((h, i) => (
                  <tr key={i}>
                    <td style={{ fontFamily: "var(--font-mono)" }}>
                      {h.date}
                    </td>
                    <td>
                      <code
                        style={{
                          fontSize: "0.75rem",
                          background: "var(--bg-secondary)",
                          padding: "0.1rem 0.3rem",
                          borderRadius: "3px",
                        }}
                      >
                        {h.tier}
                      </code>
                    </td>
                    <td>
                      <span className={scoreClass(h.overall)}>
                        {h.overall.toFixed(1)}
                      </span>
                    </td>
                    <td>{(h.passRate * 100).toFixed(0)}%</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <footer
        style={{
          marginTop: "3rem",
          paddingBottom: "2rem",
          textAlign: "center",
          fontSize: "0.8rem",
          color: "var(--text-secondary)",
        }}
      >
        Sample data shown. Run benchmarks with{" "}
        <code style={{ fontFamily: "var(--font-mono)" }}>
          --claw-id {clawId}
        </code>{" "}
        to populate real history.
      </footer>
    </>
  );
}
