"use client";
import { ButtonPrimary } from "components/Buttons";
import { useActionState, useEffect, useState } from "react";
import { Input } from "components/Input";
import { useIdentityData } from "components/IdentityProvider";
import {
  confirmEmailAuthToken,
  requestAuthEmailToken,
} from "actions/emailAuth";
import { subscribeToPublicationWithEmail } from "actions/subscribeToPublicationWithEmail";
import { ArrowRightTiny } from "components/Icons/ArrowRightTiny";
import { ShareSmall } from "components/Icons/ShareSmall";
import { Popover } from "components/Popover";
import { BlueskyTiny } from "components/Icons/BlueskyTiny";
import { useToaster } from "components/Toast";
import * as Dialog from "@radix-ui/react-dialog";
import {
  subscribeToPublication,
  unsubscribeToPublication,
} from "./subscribeToPublication";
import { DotLoader } from "components/utils/DotLoader";
import { addFeed } from "./addFeed";
import { useSearchParams } from "next/navigation";
import LoginForm from "app/login/LoginForm";
import { RSSSmall } from "components/Icons/RSSSmall";
import { OAuthErrorMessage, isOAuthSessionError } from "components/OAuthError";
import { RSSTiny } from "components/Icons/RSSTiny";

export const SubscribeWithBluesky = (props: {
  compact?: boolean;
  pubName: string;
  pub_uri: string;
  base_url: string;
  subscribers: { identity: string }[];
}) => {
  let { identity } = useIdentityData();
  let searchParams = useSearchParams();
  let [successModalOpen, setSuccessModalOpen] = useState(
    !!searchParams.has("showSubscribeSuccess"),
  );
  let [localSubscribeState, setLocalSubscribeState] = useState<
    "subscribed" | "unsubscribed"
  >("subscribed");
  let subscribed =
    identity?.atp_did &&
    localSubscribeState !== "unsubscribed" &&
    props.subscribers.find((s) => s.identity === identity.atp_did);

  if (successModalOpen)
    return (
      <SubscribeSuccessModal
        open={successModalOpen}
        setOpen={setSuccessModalOpen}
      />
    );
  if (subscribed) {
    return (
      <ManageSubscription
        {...props}
        onUnsubscribe={() => setLocalSubscribeState("unsubscribed")}
      />
    );
  }
  return (
    <div className="flex flex-col gap-2 text-center justify-center">
      <div className="flex flex-row gap-2 place-self-center">
        <BlueskySubscribeButton
          setLocalSubscribeState={() => setLocalSubscribeState("subscribed")}
          compact={props.compact}
          pub_uri={props.pub_uri}
          setSuccessModalOpen={setSuccessModalOpen}
        />
        <a
          href={`${props.base_url}/rss`}
          className="flex"
          target="_blank"
          aria-label="Subscribe to RSS"
        >
          {props.compact ? (
            <RSSTiny className="self-center" aria-hidden />
          ) : (
            <RSSSmall className="self-center" aria-hidden />
          )}
        </a>
      </div>
    </div>
  );
};

export const ManageSubscription = (props: {
  pub_uri: string;
  subscribers: { identity: string }[];
  base_url: string;
  compact?: boolean;
  onUnsubscribe?: () => void;
}) => {
  let toaster = useToaster();
  let [hasFeed] = useState(false);
  let [, unsubscribe, unsubscribePending] = useActionState(async () => {
    await unsubscribeToPublication(props.pub_uri);
    toaster({
      content: "You unsubscribed.",
      type: "success",
    });
    props.onUnsubscribe?.();
  }, null);
  return (
    <Popover
      trigger={
        <div
          className={`text-accent-contrast w-fit ${props.compact ? "text-xs" : "text-sm"}`}
        >
          Manage Subscription
        </div>
      }
    >
      <div
        className={`max-w-sm flex flex-col gap-1 ${props.compact && "text-sm"}`}
      >
        <h4>Update Options</h4>

        {!hasFeed && (
          <a
            href="https://bsky.app/profile/leaflet.pub/feed/subscribedPublications"
            target="_blank"
            className=" place-self-center"
          >
            <ButtonPrimary fullWidth compact className="!px-4">
              Bluesky Custom Feed
            </ButtonPrimary>
          </a>
        )}

        <a
          href={`${props.base_url}/rss`}
          className="flex"
          target="_blank"
          aria-label="Subscribe to RSS"
        >
          <ButtonPrimary fullWidth compact>
            Get RSS
          </ButtonPrimary>
        </a>

        <hr className="border-border-light my-1" />

        <form action={unsubscribe}>
          <button className="font-bold w-full text-accent-contrast text-center  mx-auto">
            {unsubscribePending ? (
              <DotLoader className="w-fit mx-auto" />
            ) : (
              "Unsubscribe"
            )}
          </button>
        </form>
      </div>
    </Popover>
  );
};

let BlueskySubscribeButton = (props: {
  pub_uri: string;
  setSuccessModalOpen: (open: boolean) => void;
  compact?: boolean;
  setLocalSubscribeState: () => void;
}) => {
  let { identity } = useIdentityData();
  let toaster = useToaster();
  let [oauthError, setOauthError] = useState<
    import("src/atproto-oauth").OAuthSessionError | null
  >(null);
  let [, subscribe, subscribePending] = useActionState(async () => {
    setOauthError(null);
    let result = await subscribeToPublication(
      props.pub_uri,
      window.location.href + "?refreshAuth",
    );
    if (!result.success) {
      if (isOAuthSessionError(result.error)) {
        setOauthError(result.error);
      }
      return;
    }
    if (result.hasFeed === false) {
      props.setSuccessModalOpen(true);
    }
    toaster({ content: <div>You're Subscribed!</div>, type: "success" });
    props.setLocalSubscribeState();
  }, null);

  let [isClient, setIsClient] = useState(false);
  useEffect(() => {
    setIsClient(true);
  }, []);

  if (!identity?.atp_did) {
    return (
      <Popover
        asChild
        className="max-w-xs"
        trigger={
          <ButtonPrimary
            compact={props.compact}
            className={`place-self-center ${props.compact && "text-sm"}`}
          >
            <BlueskyTiny /> Subscribe with Bluesky
          </ButtonPrimary>
        }
      >
        {isClient && (
          <LoginForm
            text="Log in to subscribe to this publication!"
            noEmail
            redirectRoute={window?.location.href + "?refreshAuth"}
            action={{ action: "subscribe", publication: props.pub_uri }}
          />
        )}
      </Popover>
    );
  }

  return (
    <div className="flex flex-col gap-2 place-self-center">
      <form
        action={subscribe}
        className="place-self-center flex flex-row gap-1"
      >
        <ButtonPrimary
          compact={props.compact}
          className={props.compact ? "text-sm" : ""}
        >
          {subscribePending ? (
            <DotLoader />
          ) : (
            <>
              <BlueskyTiny /> Subscribe with Bluesky
            </>
          )}
        </ButtonPrimary>
      </form>
      {oauthError && (
        <OAuthErrorMessage
          error={oauthError}
          className="text-center text-sm text-accent-1"
        />
      )}
    </div>
  );
};

const SubscribeSuccessModal = ({
  open,
  setOpen,
}: {
  open: boolean;
  setOpen: (open: boolean) => void;
}) => {
  let searchParams = useSearchParams();
  let [loading, setLoading] = useState(false);
  let toaster = useToaster();
  return (
    <Dialog.Root open={open} onOpenChange={setOpen}>
      <Dialog.Trigger asChild></Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-primary data-[state=open]:animate-overlayShow opacity-10 blur-xs" />
        <Dialog.Content
          className={`
      z-20 opaque-container
      fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
      w-96 px-3 py-4
      max-w-(--radix-popover-content-available-width)
      max-h-(--radix-popover-content-available-height)
      overflow-y-scroll no-scrollbar
      flex flex-col gap-1 text-center justify-center
      `}
        >
          <Dialog.Title asChild={true}>
            <h3>Subscribed!</h3>
          </Dialog.Title>
          <Dialog.Description className="w-full flex flex-col">
            You'll get updates about this publication via a Feed just for you.
            <ButtonPrimary
              className="place-self-center mt-4"
              onClick={async () => {
                if (loading) return;

                setLoading(true);
                let feedurl =
                  "https://bsky.app/profile/leaflet.pub/feed/subscribedPublications";
                await addFeed();
                toaster({ content: "Feed added!", type: "success" });
                setLoading(false);
                window.open(feedurl, "_blank");
              }}
            >
              {loading ? <DotLoader /> : "Add Bluesky Feed"}
            </ButtonPrimary>
            <button
              className="text-accent-contrast mt-1"
              onClick={() => {
                const newUrl = new URL(window.location.href);
                newUrl.searchParams.delete("showSubscribeSuccess");
                window.history.replaceState({}, "", newUrl.toString());
                setOpen(false);
              }}
            >
              No thanks
            </button>
          </Dialog.Description>
          <Dialog.Close />
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
};

export const SubscribeOnPost = () => {
  return <div></div>;
};