import { AppShell } from "@/components/AppShell";
import { mockNotes, mockWorkspaces } from "@/lib/mock-data";

export default function DashboardPage() {
  const recentNotes = mockNotes.slice(0, 3);

  return (
    <AppShell
      title="Dashboard"
      description="Operational entry point for recent notes, active workspaces, and agent-relevant follow-ups."
      actions={<div className="badge">Scaffold milestone</div>}
    >
      <section style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: "var(--ml-space-4)" }}>
        <div className="surface-card" style={{ padding: "var(--ml-space-5)" }}>
          <div style={{ color: "var(--ml-text-secondary)" }}>Active workspaces</div>
          <div style={{ fontSize: "var(--ml-fs-3xl)", fontWeight: 700, marginTop: "var(--ml-space-2)" }}>{mockWorkspaces.length}</div>
        </div>
        <div className="surface-card" style={{ padding: "var(--ml-space-5)" }}>
          <div style={{ color: "var(--ml-text-secondary)" }}>Tracked notes</div>
          <div style={{ fontSize: "var(--ml-fs-3xl)", fontWeight: 700, marginTop: "var(--ml-space-2)" }}>{mockNotes.length}</div>
        </div>
        <div className="surface-card" style={{ padding: "var(--ml-space-5)" }}>
          <div style={{ color: "var(--ml-text-secondary)" }}>Pending review surfaces</div>
          <div style={{ fontSize: "var(--ml-fs-3xl)", fontWeight: 700, marginTop: "var(--ml-space-2)" }}>2</div>
        </div>
      </section>

      <section className="surface-card" style={{ padding: "var(--ml-space-6)", display: "grid", gap: "var(--ml-space-4)" }}>
        <div style={{ fontSize: "var(--ml-fs-xl)", fontWeight: 700 }}>Recent note activity</div>
        <div style={{ display: "grid", gap: "var(--ml-space-3)" }}>
          {recentNotes.map((note) => (
            <article key={note.id} className="surface-muted" style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }}>
              <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", flexWrap: "wrap" }}>
                <strong>{note.title}</strong>
                <span style={{ color: "var(--ml-text-secondary)" }}>{note.updatedBy}</span>
              </div>
              <div style={{ color: "var(--ml-text-secondary)" }}>{note.excerpt}</div>
              <div style={{ display: "flex", gap: "var(--ml-space-2)", flexWrap: "wrap" }}>
                {note.tags.map((tag) => (
                  <span key={tag} className="badge">#{tag}</span>
                ))}
              </div>
            </article>
          ))}
        </div>
      </section>
    </AppShell>
  );
}