import { ButtonPrimary } from "components/Buttons";
import { Modal } from "components/Modal";
import { useState } from "react";
import { createCheckoutSession } from "actions/createCheckoutSession";
import { DotLoader } from "components/utils/DotLoader";
import { ToggleGroup } from "components/ToggleGroup";

export const UpgradeContent = () => {
  let [cadence, setCadence] = useState<"year" | "month">("year");
  let [loading, setLoading] = useState(false);
  let [error, setError] = useState<string | null>(null);

  async function handleCheckout() {
    setLoading(true);
    setError(null);
    let result = await createCheckoutSession(cadence, window.location.href);
    if (result.ok) {
      window.location.href = result.value.url;
    } else {
      setError(result.error);
      setLoading(false);
    }
  }

  return (
    <div className="flex flex-col justify-center text-center sm:gap-4 gap-2 w-full">
      <h2>Get Leaflet Pro!</h2>
      <div className="flex sm:flex-row flex-col sm:gap-8 gap-4 items-stretch w-full">
        <div className="text-secondary sm:py-6 py-4 px-4">
          <div className="font-bold text-primary">Analytics</div>
          <div className="">Views per Post</div>
          <div className="">Subscriber Counts</div>
          <div className="">Top Referrers</div>
          <hr className="my-4 border-border-light" />
          <div className="font-bold text-primary">Coming ASAP</div>
          <div className="">Emails</div>
          <div className="">Paid Membership</div>
        </div>
        <div className="sm:w-64  w-full accent-container flex justify-center items-center">
          <div className="flex flex-col justify-center text-center py-6">
            <ToggleGroup
              className="mb-3"
              value={cadence}
              onChange={setCadence}
              options={[
                { value: "year", label: "Yearly" },
                { value: "month", label: "Monthly" },
              ]}
            />
            <div className="flex gap-1 items-baseline justify-center">
              <div className="text-2xl font-bold leading-tight">
                {cadence === "year" ? "$120" : "$12"}
              </div>
              <div className="text-secondary pb-4">
                {cadence === "year" ? "/year" : "/month"}
              </div>
            </div>
            <ButtonPrimary
              fullWidth
              className="mx-auto"
              onClick={handleCheckout}
              disabled={loading}
            >
              {loading ? <DotLoader /> : "Get it!"}
            </ButtonPrimary>
            {error && <div className="text-sm text-red-500 mt-2">{error}</div>}
          </div>
        </div>
      </div>
    </div>
  );
};

export const UpgradeModal = (props: {
  trigger: React.ReactNode;
  asChild?: boolean;
}) => {
  return (
    <Modal
      asChild={props.asChild}
      className="sm:w-fit w-[90vw]"
      trigger={<div className="sm:w-full">{props.trigger}</div>}
    >
      <UpgradeContent />
    </Modal>
  );
};

export const InlineUpgradeToPro = (props: { compact?: boolean }) => {
  return (
    <div className="text-center  text-secondary">
      <UpgradeToProButton fullWidth compact={props.compact} />
      <div
        className={`${props.compact ? `text-sm` : "text-base"} leading-snug text-tertiary pt-2`}
      >
        Analytics for all your pubs! <br /> Emails and membership coming soon.
      </div>
    </div>
  );
};

export const UpgradeToProButton = (props: {
  fullWidth?: boolean;
  compact?: boolean;
}) => {
  return (
    <UpgradeModal
      asChild
      trigger={
        <ButtonPrimary
          type="button"
          compact={props.compact}
          fullWidth={props.fullWidth}
          className={props.compact ? `text-sm` : "text-base"}
        >
          Upgrade to Leaflet Pro!
        </ButtonPrimary>
      }
    />
  );
};
