import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { auth } from "@/lib/auth";
import prisma from "@/lib/db";
import { headers } from "next/headers";
import Link from "next/link";
import BlockDeviceDialog from "../block-device-dialog";
import ClickableRow from "../clickable-row";
import DeviceCard from "../device-card";
import Pagination from "../pagination";

export async function AdminDevicesTable({
  searchParams,
  parentalControl,
}: {
  searchParams: Promise<{
    query: string;
    page: number;
    sortBy: string;
  }>;
  parentalControl?: boolean;
}) {
  const session = await auth.api.getSession({
    headers: await headers()
  })
  const isAdmin = session?.user.role === "ADMIN"
  const query = (await searchParams)?.query || "";
  const page = (await searchParams)?.page;
  const sortBy = (await searchParams)?.sortBy || "asc";
  const totalDevices = await prisma.device.count({
    where: {
      OR: [
        {
          name: {
            contains: query || "",
            mode: "insensitive",
          },
        },
        {
          mac: {
            contains: query || "",
            mode: "insensitive",
          },
        },
      ],
    },
  });

  const totalPages = Math.ceil(totalDevices / 10);
  const limit = 10;
  const offset = (Number(page) - 1) * limit || 0;

  const devices = await prisma.device.findMany({
    where: {
      OR: [
        {
          name: {
            contains: query || "",
            mode: "insensitive",
          },
        },
        {
          mac: {
            contains: query || "",
            mode: "insensitive",
          },
        },
      ],
    },
    include: {
      User: true,
      payments: true,
    },
    skip: offset,
    take: limit,
    orderBy: {
      name: `${sortBy}` as "asc" | "desc",
    },
  });

  return (
    <div>
      {devices.length === 0 ? (
        <div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
          <h3>No devices yet.</h3>
        </div>
      ) : (
        <>
          <div className="hidden sm:block">
            <Table className="overflow-scroll">
              <TableCaption>Table of all devices.</TableCaption>
              <TableHeader>
                <TableRow>
                  <TableHead>Device Name</TableHead>
                  <TableHead>User</TableHead>
                  <TableHead>MAC Address</TableHead>
                  <TableHead>isActive</TableHead>
                  <TableHead>blocked</TableHead>
                  <TableHead>blockedBy</TableHead>
                  <TableHead>expiryDate</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody className="overflow-scroll">
                {devices.map((device) => (
                  <TableRow key={device.id}>
                    <TableCell>
                      <div className="flex flex-col items-start">
                        <Link
                          className="font-medium hover:underline"
                          href={`/devices/${device.id}`}
                        >
                          {device.name}
                        </Link>
                        {device.isActive && (

                          <span className="text-muted-foreground">
                            Active until{" "}
                            {new Date().toLocaleDateString("en-US", {
                              month: "short",
                              day: "2-digit",
                              year: "numeric",
                            })}
                          </span>
                        )}

                        {device.blocked && (
                          <div className="p-2 rounded border my-2">
                            <span>Comment: </span>
                            <p className="text-neutral-500">
                              blocked because he was watching youtube
                            </p>
                          </div>
                        )}

                      </div>
                    </TableCell>
                    <TableCell className="font-medium">{device.User?.name}</TableCell>

                    <TableCell className="font-medium">{device.mac}</TableCell>
                    <TableCell>
                      {device.isActive ? "Active" : "Inactive"}
                    </TableCell>
                    <TableCell>
                      {device.blocked ? "Blocked" : "Not Blocked"}
                    </TableCell>
                    <TableCell>
                      {device.blockedBy ? device.blockedBy : "Not Blocked"}
                    </TableCell>
                    <TableCell>
                      {new Date().toLocaleDateString("en-US", {
                        month: "short",
                        day: "2-digit",
                        year: "numeric",
                      })}
                    </TableCell>
                    <TableCell>
                      <BlockDeviceDialog admin={isAdmin} type={device.blocked ? "unblock" : "block"} device={device} />
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
              <TableFooter>
                <TableRow>
                  <TableCell colSpan={7}>
                    {query.length > 0 && (
                      <p className="text-sm text-muted-foreground">
                        Showing {devices.length} locations for &quot;{query}
                        &quot;
                      </p>
                    )}
                  </TableCell>
                  <TableCell className="text-muted-foreground">
                    {totalDevices} devices
                  </TableCell>
                </TableRow>
              </TableFooter>
            </Table>
            <Pagination totalPages={totalPages} currentPage={page} />
          </div>
          <div className="sm:hidden my-4">
            {devices.map((device) => (
              <DeviceCard parentalControl={parentalControl} key={device.id} device={device} />
            ))}
          </div>
        </>
      )}
    </div>
  );
}