import { notFound } from "next/navigation";
import { AppShell } from "@/components/AppShell";
import { NoteEditor } from "@/components/NoteEditor";
import { MetadataPanel } from "@/components/MetadataPanel";
import { LinkedNotesPanel } from "@/components/LinkedNotesPanel";
import { TaskReviewPanel } from "@/components/TaskReviewPanel";
import { ArtifactPanel } from "@/components/ArtifactPanel";
import { AgentTimeline } from "@/components/AgentTimeline";
import { getNoteById } from "@/lib/mock-data";
import { mockAgentTimeline } from "@/lib/review-data";

export default async function NoteDetailPage({
  params,
}: {
  params: Promise<{ noteId: string }>;
}) {
  const { noteId } = await params;
  const note = getNoteById(noteId);

  if (!note) {
    notFound();
  }

  return (
    <AppShell
      title={note.title}
      description="Editable note surface with metadata, linked context, tasks, and artifact placeholders."
      actions={<div className="badge">Review: {note.metadata.reviewState}</div>}
    >
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.7fr) minmax(320px, 1fr)", gap: "var(--ml-space-4)" }}>
        <NoteEditor note={note} />

        <aside style={{ display: "grid", gap: "var(--ml-space-4)" }}>
          <MetadataPanel note={note} />
          <LinkedNotesPanel linkedNotes={note.linkedNotes} />
          <TaskReviewPanel tasks={note.tasks} />
          <ArtifactPanel artifacts={note.artifacts} />
          <AgentTimeline items={mockAgentTimeline} />
        </aside>
      </div>
    </AppShell>
  );
}