import { AppShell } from "@/components/AppShell";
import { AgentTimeline } from "@/components/AgentTimeline";
import { ProposalReviewCard } from "@/components/ProposalReviewCard";
import { mockAgentTimeline, mockApprovalQueue } from "@/lib/review-data";

export default function ReviewsPage() {
  return (
    <AppShell
      title="Agent review"
      description="Approval queue, proposal comparison, and audit-oriented review surfaces for agent-mediated edits."
      actions={<div className="badge">W3 in progress</div>}
    >
      <section className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-4)" }}>
        <div style={{ fontWeight: 700 }}>Approval queue</div>
        <div style={{ display: "grid", gap: "var(--ml-space-3)" }}>
          {mockApprovalQueue.map((item) => (
            <div key={item.id} className="surface-muted" style={{ padding: "var(--ml-space-4)", display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", alignItems: "center", flexWrap: "wrap" }}>
              <div style={{ display: "grid", gap: 4 }}>
                <strong>{item.title}</strong>
                <span style={{ color: "var(--ml-text-secondary)" }}>{item.owner}</span>
              </div>
              <div style={{ display: "flex", gap: "var(--ml-space-2)", flexWrap: "wrap" }}>
                <span className="badge">{item.severity}</span>
                <span className="badge">{item.status}</span>
              </div>
            </div>
          ))}
        </div>
      </section>

      <ProposalReviewCard
        title="Summary rewrite proposal"
        before={"The note lists required launch items but mixes current scope with later operational work."}
        after={"The note now separates must-ship launch items from explicitly deferred operational follow-ups, improving review clarity for both humans and agents."}
      />

      <AgentTimeline items={mockAgentTimeline} />
    </AppShell>
  );
}
