"use client";

import { useSearchParams, useRouter, usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import { useIdentityData } from "./IdentityProvider";
import { Modal } from "./Modal";
import { ButtonPrimary } from "./Buttons";
import { theme } from "tailwind.config";
import { replaceWithoutParams } from "src/utils/replaceWithoutParams";

export function SubscriptionSuccessModal() {
  let searchParams = useSearchParams();
  let router = useRouter();
  let pathname = usePathname();
  let { identity, mutate } = useIdentityData();
  let [open, setOpen] = useState(false);
  let [loading, setLoading] = useState(true);

  let isUpgradeSuccess = searchParams.get("upgrade") === "success";

  useEffect(() => {
    if (!isUpgradeSuccess) return;
    setOpen(true);
    setLoading(true);
    mutate().then(() => setLoading(false));
  }, [isUpgradeSuccess]);

  function handleOpenChange(next: boolean) {
    setOpen(next);
    if (!next) {
      replaceWithoutParams(router, pathname, searchParams, ["upgrade"], {
        scroll: false,
      });
    }
  }

  if (!isUpgradeSuccess && !open) return null;

  return (
    <Modal
      open={open}
      onOpenChange={handleOpenChange}
      trigger={<span />}
      className="sm:max-w-sm sm:w-[1000px] w-full"
    >
      {loading ? (
        <div className="flex flex-col items-center gap-3 py-4">
          <div className="h-5 w-5 animate-spin rounded-full border-2 border-border border-t-accent-contrast" />
          <p className="text-secondary text-sm">
            Activating your subscription...
          </p>
        </div>
      ) : (
        <div className="flex flex-col  py-2 justify-center text-center">
          <div className="mx-auto pb-2">
            <ProIllo />
          </div>
          <h2 className="pb-1">Welcome to Pro!</h2>
          <p className="text-secondary pb-3">
            <strong>Thank you for supporting Leaflet.</strong>
            <br />
            We're looking forward to bringing you even cooler stuff in the near
            future!
          </p>
          <ButtonPrimary
            className="mx-auto mb-2"
            onClick={() => handleOpenChange(false)}
          >
            Got it, Thanks!
          </ButtonPrimary>
        </div>
      )}
    </Modal>
  );
}

const ProIllo = () => {
  return (
    <svg
      width="69"
      height="58"
      viewBox="0 0 69 58"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M32.0028 25.5087C34.1077 19.0924 49.3153 7.03434 59.1925 6.73505C62.9478 6.62126 66.9368 7.93871 68.026 10.7968C69.2287 13.9525 54.4704 19.3379 55.6833 23.6235C57.4984 30.0369 63.8312 24.671 67.058 30.0369C68.3413 32.171 71.6957 37.8804 63.4278 44.6788C49.9594 55.7531 0.301929 63.5712 0.00262139 50.701C-0.296686 37.8307 25.1212 46.4852 32.0028 25.5087Z"
        fill={theme.colors["accent-2"]}
      />
      <path
        d="M48.5194 32.3093C48.8592 29.0701 50.985 29.1006 51.3352 32.3093C51.6854 35.5175 52.7318 37.5464 53.2116 38.0711C53.6914 38.5957 54.5596 39.2064 57.5085 39.8731C60.4575 40.5397 60.3849 42.4955 57.5085 42.7656C54.6319 43.0356 54.0461 43.8922 53.2116 44.8047C52.3773 45.7174 51.7271 47.6088 51.3445 50.7618C50.9618 53.9152 48.8913 53.889 48.5287 50.7618C48.1661 47.6345 46.9105 45.316 46.443 44.8047C45.9756 44.2936 44.4606 43.0173 41.9461 42.7656C39.4329 42.5133 39.4663 40.2925 41.9485 39.8731C44.4301 39.4535 45.5199 38.7092 46.1035 38.0711C46.6875 37.4324 48.1795 35.5473 48.5194 32.3093ZM45.8013 9.06458C47.281 9.02478 47.2573 9.66421 47.2336 10.3109C47.2184 10.7239 47.2034 11.1415 47.58 11.3874C47.9515 11.6299 48.8873 11.5453 49.961 11.4479C51.6815 11.2918 53.7599 11.1026 54.4579 12.1757C55.0709 13.1204 54.2904 14.0612 53.5418 14.9612C52.9082 15.7229 52.2984 16.4565 52.5768 17.1422C52.8046 17.702 53.2717 18.0189 53.7301 18.328C54.48 18.8337 55.2053 19.3223 54.8159 20.8369C54.4042 22.438 51.9287 22.8718 49.6076 23.2783C47.663 23.6189 45.8256 23.9402 45.4037 24.9129C45.1392 25.5232 45.5794 25.8083 46.071 26.1267C46.658 26.5069 47.3206 26.9367 46.9499 28.0287C46.0811 30.5841 43.1787 30.584 40.4557 30.584C38.1188 30.584 35.9124 30.5848 35.2357 32.2C34.8454 33.1326 35.4363 33.2982 36.0844 33.4788C36.8779 33.7 37.7587 33.9461 37.0307 35.6529C35.6356 38.9212 30.4299 38.9511 25.6653 38.9779C23.9183 38.9877 22.2295 38.9975 20.8104 39.1662C20.6487 39.1857 20.5045 39.2783 20.4197 39.4173C19.1139 41.56 18.1896 43.9185 17.2017 46.4324C16.9847 46.9844 16.7643 47.5445 16.5367 48.1111C16.2356 48.8599 15.3837 49.2231 14.6347 48.9226C13.8854 48.6217 13.5223 47.7699 13.8232 47.0206C14.9441 44.2301 16.2366 41.6636 17.6504 39.308C19.9582 35.0584 24.5076 29.8437 29.3181 25.9267C33.5984 22.3631 37.6865 19.6964 42.4437 17.6724C43.039 17.4191 42.8625 16.7216 42.2414 16.9004C38.0221 18.1197 34.2911 20.5387 30.4249 22.9761C26.2202 25.6269 22.6975 29.2123 20.529 31.8187C20.1467 32.2782 19.3088 31.8997 19.4292 31.3141C20.0314 28.3848 20.6472 25.6099 21.3847 23.5876L21.1568 23.6155C19.1554 23.8912 18.628 24.3386 17.9155 25.1175L17.6179 25.4965C16.9451 26.4889 16.4173 28.2406 16.0903 30.9351C15.7399 33.8221 13.9408 33.9804 13.4256 31.4722L13.3419 30.9351C12.9877 27.8816 11.7615 25.6166 11.3051 25.1175C10.905 24.6807 9.72273 23.9639 7.78941 23.6271L6.91515 23.5085C4.613 23.2781 4.49701 21.3576 6.48964 20.7811L6.91515 20.6834C9.03563 20.325 10.1146 19.8083 10.7331 19.2674L10.9726 19.0349C11.5073 18.4498 12.8205 16.3628 13.2559 13.4987L13.3326 12.9151C13.665 9.75445 15.7386 9.78415 16.081 12.9151C16.4228 16.0477 17.4469 18.5219 17.9155 19.0349C18.3841 19.547 19.2315 20.0327 22.1101 20.6834C22.3847 20.7455 22.6307 20.8242 22.8519 20.9067C24.1417 19.5507 24.5953 19.9503 25.1677 20.4533C25.6512 20.878 26.2194 21.3761 27.4417 20.9508C28.2408 20.6723 29.2729 18.8604 30.4249 16.8399C32.1094 13.8855 34.0498 10.4831 35.8891 10.7666C38.1076 11.1085 37.9705 12.3354 37.8655 13.2801C37.7918 13.9427 37.7355 14.4651 38.5165 14.445C39.3116 14.4237 40.0856 13.4902 40.9835 12.4058C42.2245 10.9072 43.7026 9.12113 45.8013 9.06458ZM14.6091 17.4445C13.9823 18.9641 13.2385 20.0856 12.7304 20.6416C12.2231 21.1964 11.5835 21.6482 10.7842 22.0251C11.5797 22.3604 12.3113 22.7903 12.8467 23.2923L13.0629 23.5108L13.2582 23.7434C13.7158 24.3301 14.1835 25.2206 14.5696 26.1778C14.5888 26.2253 14.604 26.2757 14.6231 26.3243C14.9795 25.259 15.4614 24.2722 16.1577 23.5108C16.6072 23.0193 17.1851 22.4298 18.1364 21.9786C17.2881 21.6125 16.6597 21.1905 16.1577 20.6416C15.7874 20.2365 15.512 19.7124 15.3276 19.3232C15.112 18.8679 14.8934 18.3199 14.6905 17.7096C14.6619 17.6235 14.6374 17.5339 14.6091 17.4445ZM19.4199 1.31479C19.6048 -0.446532 20.7618 -0.429975 20.9522 1.31479C21.1426 3.05974 21.712 4.43815 21.9729 4.72349C22.234 5.00854 22.7074 5.27969 24.3097 5.64193C25.9123 6.00463 25.8731 7.06668 24.3097 7.21374C22.7454 7.36058 22.4268 7.61501 21.9729 8.11126C21.5192 8.60757 21.1649 9.63552 20.9568 11.3502C20.7487 13.0652 19.6217 13.051 19.4246 11.3502C19.2275 9.65095 18.5469 8.39067 18.2922 8.11126C18.038 7.83329 17.2135 7.35062 15.8461 7.21374C14.4793 7.07668 14.4968 5.87032 15.8461 5.64193C17.1956 5.41388 17.7886 5.07044 18.1062 4.72349C18.4236 4.37637 19.2351 3.07635 19.4199 1.31479Z"
        fill={theme.colors["accent-1"]}
      />
    </svg>
  );
};