import { createSignal, Show } from "solid-js";

export const BannerAd = () => {
  const [isExpanded, setIsExpanded] = createSignal(false);
  const [isVisible, setIsVisible] = createSignal(true);

  const toggleExpand = () => {
    setIsExpanded(!isExpanded());
  };

  const dismiss = () => {
    setIsVisible(false);
  };

  // hook to auto expand after 2 seconds
  setTimeout(() => {
    setIsExpanded(true);
  }, 200);

  const formattedDate = new Date().toLocaleDateString(undefined, {
    month: "long",
    day: "numeric",
  });

  const randomAmount = Math.floor(Math.random() * 700) / 100;
  const donationAmount = `$${randomAmount}`;

  return (
    <Show when={isVisible()}>
      <div
        class="overflow-hidden rounded-xl bg-red-800 transition-[max-height] duration-3500 ease-in"
        style={{
          "max-height": isExpanded() ? "1000px" : "0px",
        }}
      >
        <div class="relative mx-auto max-w-7xl px-4 py-3 sm:px-6 lg:pr-8">
          <button
            type="button"
            onclick={setIsExpanded.bind(null, false)}
            class="absolute top-0 right-0 aspect-square rounded-md p-2 text-neutral-500 transition-colors hover:bg-neutral-200/50 hover:text-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-700/50 dark:hover:text-neutral-200"
            aria-label="Dismiss banner"
          >
            <span class="iconify lucide--x -mb-0.5 aspect-square"></span>
          </button>
          <div class="flex items-center justify-between gap-4">
            <div class="flex min-w-0 flex-1 items-center gap-3">
              <span class="iconify lucide--badge-info mt-2 mb-auto shrink-0 text-2xl text-blue-600 dark:text-blue-300"></span>
              <div class="min-w-0 flex-1">
                <p class="mt-1 text-2xl font-medium text-neutral-900 dark:text-neutral-100">
                  The protocol we were promised
                </p>
                <p class="mt-2 text-base font-medium text-neutral-700 dark:text-neutral-300">
                  {formattedDate}: An important update for developers and users in the ATProto
                  ecosystem.
                </p>
                <p class="mt-2 text-base text-neutral-700 dark:text-neutral-300">
                  You deserve an explanation, so please don't skip this 1-minute read. It's{" "}
                  {formattedDate}, and our fundraiser won't last long. If you've lost count of how
                  many times you've used PDSls this year, whether you're browsing feeds, running
                  tooling, or hosting your own PDS, we hope that means it's given you real value.
                  Please join the small percentage of users who give what they can to help keep this
                  valuable resource free, open, and available for everyone.
                </p>
                <p class="mt-2 text-base text-neutral-700 dark:text-neutral-300">
                  After a year, PDSls is still the tool we were promised—a utility for open,
                  decentralized infrastructure. By using the AT Protocol today, you're choosing a
                  free internet: one where you control your data, find communities without
                  algorithmic manipulation, and build without depending on corporate gatekeepers.
                </p>
                <p class="mt-2 text-base text-neutral-700 dark:text-neutral-300">
                  Most users don't donate, so your gift matters. If PDSls has given you{" "}
                  {donationAmount} of value, please donate {donationAmount} right now—or consider a
                  monthly gift to help sustain development all year long. Thank you.
                </p>

                <p class="font-pecita mt-2 text-xl text-neutral-700 dark:text-neutral-300">
                  - Juliet
                </p>

                <div class="mt-4 space-y-3 border-t pt-4">
                  <div>
                    <p class="mb-2 text-base font-medium text-neutral-900 dark:text-neutral-100">
                      1. How often would you like to donate?
                    </p>
                    <div class="flex flex-wrap gap-3">
                      <label class="flex items-center gap-2">
                        <input type="radio" name="frequency" value="once" checked class="h-4 w-4" />
                        <span class="text-base font-semibold">Once</span>
                      </label>
                      <label class="flex items-center gap-2">
                        <input type="radio" name="frequency" value="monthly" class="h-4 w-4" />
                        <span class="text-base font-semibold">Monthly</span>
                      </label>
                      <label class="flex items-center gap-2">
                        <input type="radio" name="frequency" value="annual" class="h-4 w-4" />
                        <span class="text-base font-semibold">Annual</span>
                      </label>
                    </div>
                    <p class="ml-20 text-xs dark:text-red-300">Support PDSls year-round</p>
                  </div>

                  <div>
                    <p class="mb-2 text-base font-medium text-neutral-900 dark:text-neutral-100">
                      2. Please select an amount (USD)
                    </p>
                    <p class="mb-2 text-xs text-neutral-600 dark:text-neutral-400">
                      The average donation in the United States is around $13.
                    </p>
                    <div class="grid grid-cols-3 gap-2">
                      <label class="flex items-center gap-2">
                        <input type="radio" name="amount" value="2.75" class="h-4 w-4" />
                        <span class="text-base font-semibold">{donationAmount}</span>
                      </label>
                      <label class="flex items-center gap-2">
                        <input type="radio" name="amount" value="15" class="h-4 w-4" />
                        <span class="text-base font-semibold">$15</span>
                      </label>
                      <label class="flex items-center gap-2">
                        <input type="radio" name="amount" value="25" class="h-4 w-4" />
                        <span class="text-base font-semibold">$25</span>
                      </label>
                      <label class="flex items-center gap-2">
                        <input type="radio" name="amount" value="50" class="h-4 w-4" />
                        <span class="text-base font-semibold">$50</span>
                      </label>
                      <label class="flex items-center gap-2">
                        <input type="radio" name="amount" value="100" class="h-4 w-4" />
                        <span class="text-base font-semibold">$100</span>
                      </label>
                      <label class="flex items-center gap-2">
                        <input type="radio" name="amount" value="250" class="h-4 w-4" />
                        <span class="text-base font-semibold">$250</span>
                      </label>
                      <label class="flex items-center gap-2">
                        <input type="radio" name="amount" value="500" class="h-4 w-4" />
                        <span class="text-base font-semibold">$500</span>
                      </label>
                      <label class="flex items-center gap-2">
                        <input type="radio" name="amount" value="other" class="h-4 w-4" />
                        <span class="text-base font-semibold">Other</span>
                      </label>
                    </div>
                  </div>

                  <div>
                    <p class="mb-2 text-base font-medium text-neutral-900 dark:text-neutral-100">
                      3. Please select a payment method
                    </p>
                    <div class="grid grid-cols-3 gap-2">
                      <button
                        type="button"
                        class="flex items-center justify-center gap-2 rounded border border-neutral-300 bg-white px-3 py-2 text-base font-semibold transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:hover:bg-neutral-700"
                      >
                        <img
                          src="https://kagi.com/proxy/110-1105172_paypal-new-logo-merchant-accounts-online-merchant-paypal-logo-png.png?c=SYXRosL0JFAnlGeOt8kB0Jktas5N9Vbjt8cEXa27yJsAd1LTTlyV3rSJ8USu1IVzBOGAh_zLYYOt-Moq7O3LMyIqDXrklv16pXm0Av-jCDfgbBVEUggUU4uqFp1K_PGBkGqUuqOHb4G_-3dE3T2G6DityzTnYCFiXHSNFq8alFri9ISkZCz0IgfM7MhnnQWP"
                          alt="PayPal"
                          class="h-5 w-auto"
                        />
                      </button>
                      <button
                        type="button"
                        class="flex items-center justify-center gap-2 rounded border border-neutral-300 bg-white px-3 py-2 text-base font-semibold transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:hover:bg-neutral-700"
                      >
                        <img
                          src="https://kagi.com/proxy/960px-Venmo_Logo.svg.png?c=9cn5Kxse4yD05EJkf6QML9dK4clUbdQ9Oq4d5gDoyHBwiX43u0CCAEVi8DMCHFAXB_4SPMIM3XonpLx3YAbGFdKN5oLtvbZkeI1qfMNgNuR5EHe63vp7STkzzJvEJCaJx-59UH9sb9WYRqYaLJ6KQQ%3D%3D"
                          alt="Venmo"
                          class="h-5 w-auto"
                        />
                      </button>
                      <button
                        type="button"
                        class="flex items-center justify-center gap-2 rounded border border-neutral-300 bg-white px-3 py-2 text-base font-semibold transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:hover:bg-neutral-700"
                      >
                        <img
                          src="https://kagi.com/proxy/1280px-Apple_Pay_logo.svg.png?c=9cn5Kxse4yD05EJkf6QML9dK4clUbdQ9Oq4d5gDoyHBwiX43u0CCAEVi8DMCHFAXmg1ajdVNJfnUy93IEnIHpsT89SSh6N04Z2tlt9tAfjsdfsX8mknl0r-KpZLErORH3kcyJBtZpQ6wGw77721JBtUsNg5B0z4c4mCYBTESF0M%3D"
                          alt="Apple Pay"
                          class="h-5 w-auto"
                        />
                      </button>
                    </div>
                  </div>

                  <button
                    type="button"
                    class="w-full rounded-md bg-neutral-300 px-4 py-2 text-base font-semibold text-neutral-500 dark:bg-neutral-600 dark:text-neutral-400"
                    disabled
                  >
                    Continue
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Show>
  );
};