import { Organization, User } from "@clerk/remix/api.server";
import { Link, useLoaderData } from "@remix-run/react";
import { CreditCard } from "lucide-react";
import { FC } from "react";
import { AppLayoutLoader } from "~/types/AppLayoutLoader.types";
import { Dialog, DialogContent, DialogTrigger } from "../../ui/dialog";

type ApiKeysDialogProps = {
  user: User;
  org: Organization | undefined;
};

export const BillingDialog: FC<ApiKeysDialogProps> = ({ user, org }) => {
  const { customerSession, stripePublishableKey, pricingTableId } = useLoaderData<AppLayoutLoader>();

  const account = org ? org.name : "Personal";

  return (
    <Dialog>
      <DialogTrigger asChild>
        <div
          className={"hover:bg-muted flex cursor-pointer items-center rounded-xl px-2.5 py-2 dark:hover:bg-[#151218]"}
        >
          <div className={"flex w-8 justify-center"}>{<CreditCard className={"text-muted-foreground h-4 w-4"} />}</div>
          <span className="text-muted-foreground ml-1.5 whitespace-nowrap text-sm">Billing</span>
        </div>
      </DialogTrigger>

      <DialogContent className="absolute w-[700px] max-w-[700px]">
        <div>
          <p className={"text-center"}>Make sure this is the right organization before purchasing:</p>
          <p className={"text-primary text-center font-bold underline underline-offset-2"}>{account}</p>
        </div>
        <stripe-pricing-table
          pricing-table-id={pricingTableId}
          publishable-key={stripePublishableKey}
          customer-session-client-secret={customerSession.client_secret}
          client-reference-id={user.id}
        ></stripe-pricing-table>
        <div>
          <p className={"text-muted-foreground text-center text-sm"}>
            To cancel your subscription, please email us at{" "}
            <Link to={"mailto:founders@montelo.ai"} className={"cursor-pointer underline underline-offset-2"}>
              founders@montelo.ai
            </Link>
            .
          </p>
          <p className={"text-muted-foreground text-center text-sm"}>
            We apologize in advance for the inconvenience, we just haven&apos;t had the time to implement this yet.
          </p>
        </div>
      </DialogContent>
    </Dialog>
  );
};

declare global {
  namespace JSX {
    interface IntrinsicElements {
      "stripe-pricing-table": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
    }
  }
}
