"use client";
import { Block } from "@/components/Block";
import { Loader } from "@/components/Loader";
import { Page } from "@/components/Page";
import { cn } from "@/utils/cn";
import { useRawInitData } from "@telegram-apps/sdk-react";
import { ClipboardList } from "lucide-react";
import { QRCodeSVG } from "qrcode.react";
import { useEffect, useState } from "react";
import { getUrl } from "./actions";

export default function Home() {
  const [url, setUrl] = useState("");
  const [expiryTime, setExpiryTime] = useState(0);
  const [isLoading, setIsLoading] = useState(true);
  const initData = useRawInitData();
  const onCopyClick = async () => {
    if (!url.length) return;
    await navigator.clipboard.writeText(url);
    setIsCopied(true);
    setTimeout(() => {
      setIsCopied(false);
    }, 2000);
  };
  const [isCopied, setIsCopied] = useState(false);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const data = await getUrl(initData);
        setUrl(data.url);
        setExpiryTime(data.expiryTime);
        setIsLoading(false);
      } catch (e) {
        console.error(e);
      }
    };
    fetchData();
  }, [initData]);
  if (isLoading) return <Loader />;

  return (
    <Page back={false}>
      <header className="flex h-12 w-full flex-col items-center justify-center bg-[var(--tg-theme-header-bg-color)]">
        <span className="text-xl font-semibold text-[var(--tg-theme-text-color)]">Nwaifu Proxy</span>
      </header>
      <main className="absolute bottom-0 left-0 flex w-full flex-col items-center gap-3 px-2.5 py-3.5 text-[var(--tg-theme-text-color)]">
        {url && (
          <>
            <Block name="Ссылка">
              <div
                className="relative flex size-52 flex-col items-center justify-center rounded-md bg-white"
                onClick={onCopyClick}
              >
                <div
                  className={cn(
                    "absolute top-0 left-0 flex h-full w-full flex-col items-center justify-center rounded-md bg-[var(--tg-theme-button-color)] opacity-0 transition-opacity",
                    isCopied && "opacity-95"
                  )}
                >
                  <span className="flex flex-row text-lg font-semibold text-[var(--tg-theme-button-text-color)]">
                    Скопировано
                    <ClipboardList className="text-[var(--tg-theme-button-text-color)]" />
                  </span>
                </div>
                <QRCodeSVG value={url} className="size-48" />
              </div>
              <span className="text-center text-sm font-semibold">Нажмите на QR, чтобы скопировать!</span>
            </Block>
            <Block name="Подписка">
              <div className="flex flex-col items-center gap-0.5">
                <span>Статус:</span>
                <span>{expiryTime > Date.now() || expiryTime === 0 ? "Активна" : "Не Активна"}</span>
              </div>
              <div className="flex flex-col items-center gap-0.5">
                <span>Активна до:</span>
                <span>
                  {expiryTime === 0
                    ? "Всегда"
                    : expiryTime > Date.now()
                      ? new Date(expiryTime).toLocaleString("ru-RU")
                      : "Не Активна"}
                </span>
              </div>
            </Block>
          </>
        )}
      </main>
    </Page>
  );
}