"use client";
import { Waitlist } from "@prisma/client";
import { createContext, ReactNode, useContext, useState } from "react";

type WaitlistContextProps = {
  waitlistID: Waitlist["id"] | null;
  setWaitlistID: (waitlist: Waitlist["id"] | null) => void;
};

const WaitlistContext = createContext<WaitlistContextProps | undefined>(
  undefined,
);

export function WaitlistProvider({ children }: { children: ReactNode }) {
  const [waitlistID, setWaitlistID] = useState<Waitlist["id"] | null>(null);

  return (
    <WaitlistContext.Provider value={{ waitlistID, setWaitlistID }}>
      {children}
    </WaitlistContext.Provider>
  );
}

export function useWaitlistContext() {
  const context = useContext(WaitlistContext);
  if (context === undefined) {
    throw new Error(
      "useWaitlistContext must be used within a WaitlistProvider",
    );
  }
  return context;
}

"use client";

import { useWaitlistContext } from "@/context/waitlist";
import { ReactNode } from "react";
import { WaitlistErrorCard } from "./waitlist-error-card";

export const WaitlistWrapper = ({ children }: { children: ReactNode }) => {
  const { waitlistID } = useWaitlistContext();

  if (!waitlistID) {
    return (
      <WaitlistErrorCard title="Not selected" description="Not selected" />
    );
  }

  return <div>{children}</div>;
};

"use client";
...
type Props = {
  waitlists: Waitlist[];
};

export const Combobox = ({ waitlists }: Props) => {
  const [open, setOpen] = useState(false);
  const { waitlistID, setWaitlistID } = useWaitlistContext();

  const getWaitlistNameById = (id: string) => {
    const waitlist = waitlists.find((w) => w.id === id);
    return waitlist ? waitlist.name : null;
  };

  const handleSelect = (currentValue: string) => {
    const newValue = currentValue === waitlistID ? null : currentValue;
    if (newValue) {
      setWaitlistID(newValue);
    }
    setOpen(false);
  };

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          className="w-full justify-between"
        >
          {!waitlistID ? "Select Waitlist" : getWaitlistNameById(waitlistID)}
          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[200px] p-0">
        <Command>
          <CommandEmpty>No waitlist found.</CommandEmpty>
          <CommandList>
            <CommandGroup>
              {waitlists.map((waitlist) => (
                <CommandItem
                  key={waitlist.id}
                  value={waitlist.id}
                  onSelect={(currentValue) => handleSelect(currentValue)}
                >
                  {waitlist.name}
                  <CheckIcon
                    className={cn(
                      "ml-auto h-4 w-4",
                      waitlistID === waitlist.id ? "opacity-100" : "opacity-0",
                    )}
                  />
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
};

"use client";

import { useWaitlistContext } from "@/context/waitlist";
import { Waitlist } from "@prisma/client";
import { Loader2 } from "lucide-react";
import { ReactNode, useEffect, useState } from "react";
import { WaitlistErrorCard } from "./waitlist-error-card";

export const WaitlistWrapper = ({ children }: { children: ReactNode }) => {
  const { waitlistID } = useWaitlistContext();
  const [waitlistData, setWaitlistData] = useState<Waitlist | undefined>(
    undefined,
  );
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState<boolean>(false);

  useEffect(() => {
    if (waitlistID) {
      const fetchWaitlist = async () => {
        setLoading(true);

        try {
          const response = await fetch(`/api/waitlists/${waitlistID}`);
          if (!response.ok) {
            throw new Error(`Failed to fetch waitlist: ${response.statusText}`);
          }

          const data: Waitlist = await response.json();
          setWaitlistData(data);
          setError(null);
        } catch (error: unknown) {
          if (error instanceof Error) {
            setError(error.message);
          } else {
            setError("An unexpected error occurred");
          }
        } finally {
          setLoading(false);
        }
      };

      fetchWaitlist();
    }
  }, [waitlistID]);

  if (!waitlistID) {
    return (
      <WaitlistErrorCard title="Not selected" description="Not selected" />
    );
  }

  if (loading) {
    return (
      <div className="flex h-full w-full items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
      </div>
    );
  }

  if (error) {
    return <WaitlistErrorCard title="There was an error" description={error} />;
  }

  return (
    <div>
      {waitlistData?.name}
      {children}
    </div>
  );
};

import { WaitlistErrorCard } from "@/components/shared/waitlist-error-card";
import { WaitlistWrapper } from "@/components/shared/waitlist-wrapper";
import getUserSession from "@/lib/getUserSession";
import { getUserWaitlist } from "@/lib/prisma.queries";
import { Handshake, UserPlus, Users, Verified } from "lucide-react";
import { redirect } from "next/navigation";
import { CustomChart } from "./components/custom-chart";
import { StatCard } from "./components/stat-card";

export default async function AnalyticsPage() {
  const session = await getUserSession();
  const user = session?.user;

  if (!user || !user.id) {
    redirect("/authentication");
  }

  const waitlist = await getUserWaitlist(user.id);

  if (!waitlist) {
    return (
      <WaitlistErrorCard title="Not found" description="add description" link />
    );
  }

  return (
    <WaitlistWrapper>
      <div className="container space-y-6 py-8">
        <h3>Analytics</h3>
        <div className="grid gap-4 lg:grid-cols-2 xl:grid-cols-4">
          <StatCard
            label="Total Signups"
            value={2135}
            icon={<Users className="h-5 w-5 text-muted-foreground" />}
          />
          <StatCard
            label="Joined Via Refferals"
            value={256}
            icon={<Handshake className="h-5 w-5 text-muted-foreground" />}
          />
          <StatCard
            label="Verified Emails"
            value={65}
            icon={<Verified className="h-5 w-5 text-muted-foreground" />}
            valueIsPercentage
          />
          <StatCard
            label="Joined Today"
            value={31}
            icon={<UserPlus className="h-5 w-5 text-muted-foreground" />}
          />
        </div>
        <CustomChart />
      </div>
    </WaitlistWrapper>
  );
}