import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
import { Database } from "@/types/supabase";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";
import Link from "next/link";
import prisma from "@/lib/prisma";
import { CreateWorkspace } from "@/components/create-workspace";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";

async function getSession(supabase: any) {
  const {
    data: { session },
  } = await supabase.auth.getSession();
  return session;
}

async function fetchWorkspaces() {
  const supabase = createServerComponentClient<Database>({ cookies });
  const session = await getSession(supabase);

  if (!session) redirect("/auth");

  try {
    const profile_with_workspaces = await prisma.profile.findUnique({
      where: {
        id: session.user.id,
      },
      include: {
        profile_workspace: {
          include: {
            workspace: true,
          },
        },
      },
    });

    if (!profile_with_workspaces) throw new Error("No profile found.");

    const workspaces = profile_with_workspaces.profile_workspace.map((pw) => ({
      ...pw.workspace,
      id: String(pw.workspace.id),
    }));

    console.log(workspaces);
    return workspaces;
  } catch (err) {
    console.error(err);
  }
}

export async function WorkspaceSelector({
  workspaceID,
}: {
  workspaceID?: string;
}) {
  const workspaces = await fetchWorkspaces();

  if (!workspaces) {
    return (
      <div className="flex flex-col h-screen max-h-screen overflow-hidden border-r">
        <div className="flex justify-center items-center p-4">
          {" "}
          {/* Adjusted for center alignment */}
          <Link href="/">
            <svg
              fill="#7C3AED"
              width="32px"
              height="32px"
              viewBox="0 0 15 15"
              version="1.1"
              id="circle"
              xmlns="http://www.w3.org/2000/svg"
              className="align-middle"
            >
              <path d="M14,7.5c0,3.5899-2.9101,6.5-6.5,6.5S1,11.0899,1,7.5S3.9101,1,7.5,1S14,3.9101,14,7.5z" />
            </svg>
          </Link>
        </div>
        <div className="flex flex-col flex-grow overflow-y-auto p-4 space-y-6">
          <div className="py-4">
            <CreateWorkspace />
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="flex flex-col h-screen max-h-screen overflow-hidden border-r">
      <div className="flex justify-center items-center p-4">
        {" "}
        {/* Adjusted for center alignment */}
        <Link href="/">
          <svg
            fill="#7C3AED"
            width="32px"
            height="32px"
            viewBox="0 0 15 15"
            version="1.1"
            id="circle"
            xmlns="http://www.w3.org/2000/svg"
            className="align-middle"
          >
            <path d="M14,7.5c0,3.5899-2.9101,6.5-6.5,6.5S1,11.0899,1,7.5S3.9101,1,7.5,1S14,3.9101,14,7.5z" />
          </svg>
        </Link>
      </div>
      <div className="flex flex-col flex-grow overflow-y-auto p-4 space-y-6">
        {workspaces?.map((workspace) => (
          <Link href={`/w/${workspace.id}`} key={workspace.id}>
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger>
                  <Avatar
                    className={cn(
                      "rounded-md ring-offset-background hover:ring-2 hover:ring-ring hover:ring-offset-2",
                      workspace.id === workspaceID
                        ? "ring-2 ring-ring ring-offset-2"
                        : ""
                    )}
                  >
                    <AvatarImage src="" />
                    <AvatarFallback className="rounded-md">
                      {workspace.name.toUpperCase().slice(0, 2)}
                    </AvatarFallback>
                  </Avatar>
                </TooltipTrigger>
                <TooltipContent side="right" sideOffset={10}>
                  {workspace.name}
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
          </Link>
        ))}
        <div className="py-4">
          <CreateWorkspace />
        </div>
      </div>
    </div>
  );
}