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

export default function SearchPage() {
  return (
    <AppShell
      title="Search"
      description="Lexical search, tag filtering, and retrieval entry points. Semantic ranking and explainability remain follow-up work."
      actions={<div className="badge">Advanced retrieval next</div>}
    >
      <section className="surface-card" style={{ padding: "var(--ml-space-6)", display: "grid", gap: "var(--ml-space-4)" }}>
        <input className="input-shell" placeholder="Search notes, tags, tasks, and linked context" />
        <div style={{ display: "flex", gap: "var(--ml-space-2)", flexWrap: "wrap" }}>
          <span className="badge">workspace:all</span>
          <span className="badge">status:active</span>
          <span className="badge">source:manual+agent</span>
        </div>
        <div style={{ display: "grid", gap: "var(--ml-space-3)" }}>
          {mockNotes.map((note) => (
            <article key={note.id} className="surface-muted" style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }}>
              <strong>{note.title}</strong>
              <span style={{ color: "var(--ml-text-secondary)" }}>{note.excerpt}</span>
              <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>
  );
}