import { auth } from "~/server/auth";
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "~/app/_components/ui/table";
import { UserNav } from "~/app/_components/user-nav";
import { DataTable } from "~/app/_components/data-table";
import { z } from "zod";
import { promises as fs } from "fs";
import path from "path";
import { columns } from "~/app/_components/columns";
import { taskSchema } from "~/app/_components/schema";

async function getTasks() {
  const data = await fs.readFile(
    path.join(process.cwd(), "src/app/_data/tasks.json"),
  );

  const tasks = JSON.parse(data.toString());

  return z.array(taskSchema).parse(tasks);
}

export default async function Home() {
  const session = await auth();
  if (!session) {
    <main>
      <h1>Not signed in</h1>
    </main>;
  }

  const tasks = await getTasks();

  return (
    <main className="my-20">
      <h1 className="my-20 text-center text-2xl font-bold lowercase underline underline-offset-4">
        {session?.user.name ? `${session.user.name}'s notes` : "notes"}
      </h1>

      <div className="mx-auto max-w-7xl px-6">
        {/* <Table>
          <TableCaption>A list of your recent invoices.</TableCaption>
          <TableHeader>
            <TableRow>
              <TableHead className="w-[100px]">Invoice</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Method</TableHead>
              <TableHead className="text-right">Amount</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow>
              <TableCell className="font-medium">INV001</TableCell>
              <TableCell>Paid</TableCell>
              <TableCell>Credit Card</TableCell>
              <TableCell className="text-right">$250.00</TableCell>
            </TableRow>
          </TableBody>
        </Table> */}
        <div className="hidden h-full flex-1 flex-col space-y-8 p-8 md:flex">
          <div className="flex items-center justify-between space-y-2">
            <div>
              <h2 className="text-2xl font-bold tracking-tight">
                Welcome back!
              </h2>
              <p className="text-muted-foreground">
                Here&apos;s a list of your tasks for this month!
              </p>
            </div>
            <div className="flex items-center space-x-2">
              <UserNav />
            </div>
          </div>
          <DataTable data={tasks} columns={columns} />
        </div>
      </div>
    </main>
  );
}