// Schema (source of truth)
export const tasks = pgTable("tasks", {
  id: uuid("id").primaryKey().defaultRandom(),
  title: varchar("title", { length: 255 }).notNull(),
  status: varchar("status", { enum: ["todo", "in_progress", "done"] }).notNull().default("todo"),
  assigneeId: uuid("assignee_id").references(() => users.id),
  createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
});
 
// Infer types from schema
type Task = typeof tasks.$inferSelect;
type NewTask = typeof tasks.$inferInsert;
 
// Zod schema for validation (mirrors DB schema)
const createTaskSchema = z.object({
  title: z.string().min(1).max(255),
  status: z.enum(["todo", "in_progress", "done"]).default("todo"),
  assigneeId: z.string().uuid().optional(),
});
 
// Server Action uses the same types
"use server";
async function createTask(input: z.infer<typeof createTaskSchema>): Promise<Task> {
  const data = createTaskSchema.parse(input);
  const [task] = await db.insert(tasks).values(data).returning();
  revalidatePath("/tasks");
  return task;
}
 
// Component receives the same type
function TaskCard({ task }: { task: Task }) {
  return <div>{task.title}</div>;
}

// actions/projects.ts
"use server";
 
import { db } from "@/db";
import { projects } from "@/db/schema";
import { createProjectSchema, updateProjectSchema } from "@/lib/validations/project";
import { auth } from "@/lib/auth";
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
import { eq, and } from "drizzle-orm";
 
// ALWAYS: Return a typed result, not throw
type ActionResult<T> =
  | { success: true; data: T }
  | { success: false; error: string; fieldErrors?: Record<string, string[]> };
 
export async function createProject(
  formData: FormData
): Promise<ActionResult<{ id: string }>> {
  const session = await auth();
  if (!session?.user) {
    return { success: false, error: "Unauthorized" };
  }
 
  const raw = Object.fromEntries(formData);
  const parsed = createProjectSchema.safeParse(raw);
 
  if (!parsed.success) {
    return {
      success: false,
      error: "Validation failed",
      fieldErrors: parsed.error.flatten().fieldErrors,
    };
  }
 
  try {
    const [project] = await db
      .insert(projects)
      .values({
        ...parsed.data,
        ownerId: session.user.id,
      })
      .returning({ id: projects.id });
 
    revalidatePath("/projects");
    return { success: true, data: { id: project.id } };
  } catch (error) {
    console.error("Failed to create project:", error);
    return { success: false, error: "Failed to create project" };
  }
}
 
export async function deleteProject(projectId: string): Promise<ActionResult<null>> {
  const session = await auth();
  if (!session?.user) {
    return { success: false, error: "Unauthorized" };
  }
 
  const project = await db.query.projects.findFirst({
    where: and(eq(projects.id, projectId), eq(projects.ownerId, session.user.id)),
  });
 
  if (!project) {
    return { success: false, error: "Project not found" };
  }
 
  await db.delete(projects).where(eq(projects.id, projectId));
  revalidatePath("/projects");
  return { success: true, data: null };
}

"use client";
 
import { useOptimistic, useTransition } from "react";
import { toggleTaskStatus } from "@/actions/tasks";
import { toast } from "sonner";
 
interface Task {
  id: string;
  title: string;
  status: "todo" | "in_progress" | "done";
}
 
function TaskList({ tasks }: { tasks: Task[] }) {
  const [optimisticTasks, setOptimisticTask] = useOptimistic(
    tasks,
    (state, update: { id: string; status: Task["status"] }) =>
      state.map((t) => (t.id === update.id ? { ...t, status: update.status } : t))
  );
 
  const [isPending, startTransition] = useTransition();
 
  const handleToggle = (task: Task) => {
    const nextStatus = task.status === "done" ? "todo" : "done";
 
    startTransition(async () => {
      // Optimistically update UI
      setOptimisticTask({ id: task.id, status: nextStatus });
 
      // Perform server action
      const result = await toggleTaskStatus(task.id, nextStatus);
      if (!result.success) {
        toast.error(result.error);
        // React automatically reverts the optimistic update on error
      }
    });
  };
 
  return (
    <ul>
      {optimisticTasks.map((task) => (
        <li key={task.id} className="flex items-center gap-3">
          <button onClick={() => handleToggle(task)}>
            {task.status === "done" ? "Completed" : "Mark done"}
          </button>
          <span className={task.status === "done" ? "line-through" : ""}>
            {task.title}
          </span>
        </li>
      ))}
    </ul>
  );
}

// app/(app)/projects/page.tsx -- Server Component
import { db } from "@/db";
import { projects } from "@/db/schema";
import { auth } from "@/lib/auth";
import { eq, desc, like, sql } from "drizzle-orm";
import { redirect } from "next/navigation";
import { Suspense } from "react";
import { ProjectList } from "@/components/projects/project-list";
import { ProjectListSkeleton } from "@/components/projects/project-list-skeleton";
 
interface PageProps {
  searchParams: Promise<{ q?: string; page?: string }>;
}
 
export default async function ProjectsPage({ searchParams }: PageProps) {
  const session = await auth();
  if (!session?.user) redirect("/login");
 
  const { q, page } = await searchParams;
 
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold">Projects</h1>
        <Button asChild>
          <Link href="/projects/new">New Project</Link>
        </Button>
      </div>
 
      <SearchInput defaultValue={q} />
 
      <Suspense fallback={<ProjectListSkeleton />}>
        <ProjectListLoader query={q} page={Number(page) || 1} userId={session.user.id} />
      </Suspense>
    </div>
  );
}
 
// Separate async component for streaming
async function ProjectListLoader({
  query,
  page,
  userId,
}: {
  query?: string;
  page: number;
  userId: string;
}) {
  const pageSize = 12;
 
  const where = and(
    eq(projects.ownerId, userId),
    query ? like(projects.name, `%${query}%`) : undefined
  );
 
  const [items, countResult] = await Promise.all([
    db.query.projects.findMany({
      where,
      orderBy: [desc(projects.updatedAt)],
      limit: pageSize,
      offset: (page - 1) * pageSize,
      with: { tasks: { columns: { id: true, status: true } } },
    }),
    db.select({ count: sql<number>`count(*)` }).from(projects).where(where),
  ]);
 
  const totalPages = Math.ceil(countResult[0].count / pageSize);
 
  return (
    <ProjectList
      projects={items}
      currentPage={page}
      totalPages={totalPages}
    />
  );
}

// 1. Database layer: Catch constraint violations
try {
  await db.insert(users).values(data);
} catch (error) {
  if (error.code === "23505") {
    // Unique violation
    return { success: false, error: "Email already exists" };
  }
  throw error; // Re-throw unexpected errors
}
 
// 2. Server Action layer: Return typed results (never throw to the client)
export async function createItem(data: FormData): Promise<ActionResult<Item>> {
  try {
    // ... validation, auth, db operation
    return { success: true, data: item };
  } catch (error) {
    console.error("createItem failed:", error);
    Sentry.captureException(error);
    return { success: false, error: "An unexpected error occurred" };
  }
}
 
// 3. Client layer: Handle results and show feedback
const handleSubmit = async (data: FormValues) => {
  const result = await createItem(new FormData(/* ... */));
  if (result.success) {
    toast.success("Item created");
    router.push(`/items/${result.data.id}`);
  } else {
    toast.error(result.error);
    if (result.fieldErrors) {
      // Set field-level errors on the form
      Object.entries(result.fieldErrors).forEach(([field, messages]) => {
        form.setError(field as any, { message: messages[0] });
      });
    }
  }
};
 
// 4. Page-level error boundary: error.tsx
// app/(app)/projects/error.tsx
"use client";
 
export default function ProjectsError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <div className="flex flex-col items-center gap-4 py-20">
      <h2 className="text-xl font-semibold">Something went wrong</h2>
      <p className="text-muted-foreground">{error.message}</p>
      <Button onClick={reset}>Try again</Button>
    </div>
  );
}
 
// 5. Not found: not-found.tsx
// app/(app)/projects/[id]/not-found.tsx
export default function ProjectNotFound() {
  return (
    <div className="flex flex-col items-center gap-4 py-20">
      <h2 className="text-xl font-semibold">Project not found</h2>
      <Button asChild>
        <Link href="/projects">Back to projects</Link>
      </Button>
    </div>
  );
}