imphnen-frontend-service/apps/gacha/src/app/page.tsx

import { ArrowDownOutlined } from '@ant-design/icons';
import { Button } from '@imphnen-frontend-service/ui/atoms';
import { FC, Fragment, ReactElement, useState } from 'react';
import ModalFormForgotPassword from './_components/form/modal-form-forgot-password';
import ModalFormLogin from './_components/form/modal-form-login';
import ModalFormRegister from './_components/form/modal-form-register';
import { GachaItem } from './_components/item/gacha-item';
import { useModalLogin } from '@imphnen-frontend-service/utils';
import { useGachaItemList, useUserCredits, useExecuteGachaRoll } from '@imphnen-frontend-service/service';
import { toast } from 'sonner';
import type { TGachaRollItemDto } from '@imphnen-frontend-service/service';

export const Components: FC = (): ReactElement => {
  const { showModalLogin, setShowModalLogin } = useModalLogin();
  const [showModalForgotPassword, setShowModalForgotPassword] = useState(false);
  const [showModalRegister, setShowModalRegister] = useState(false);
  const [spinResult, setSpinResult] = useState<TGachaRollItemDto | null>(null);

  const { data: creditsData } = useUserCredits();
  const { data: itemsData } = useGachaItemList({ per_page: 10 });
  const executeRoll = useExecuteGachaRoll();

  const gachaItems = itemsData?.data ?? [];
  const availableRolls = creditsData?.available_rolls ?? 0;

  const scrollToRoulette = () => {
    const rouletteSection = document.getElementById('roulette');
    if (rouletteSection) {
      rouletteSection.scrollIntoView({ behavior: 'smooth' });
    }
  };

  const handleForgotPasswordClick = () => {
    setShowModalLogin(false);
    setShowModalForgotPassword(true);
  };

  const handleSpin = async () => {
    if (availableRolls <= 0) {
      toast.error('Kamu tidak punya gacha roll. Beli dulu ya!');
      return;
    }
    try {
      const result = await executeRoll.mutateAsync();
      setSpinResult(result);
      const wonItem = gachaItems.find((item) => item.id === result.item_id);
      toast.success(`Selamat! Kamu mendapatkan: ${wonItem?.name ?? 'item'}`);
    } catch {
      toast.error('Gagal spin gacha. Coba lagi ya!');
    }
  };

  return (
    <Fragment>
      <section
        id="landing-page"
        className="my-12 md:my-24 grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 justify-items-center max-w-[1280px] items-center justify-center mx-[32px] md:mx-[60px] lg:mx-[80px] xl:mx-auto"
      >
        <div className="order-none lg:order-1 flex flex-col col-span-4 md:col-span-8 lg:col-span-4 md:w-full lg:w-fit items-center gap-7 md:gap-13 text-primary-500 mb-10 md:mb-20">
          <img
            src="/logos/logo.svg"
            alt="IMPHNEN Logo"
            className="w-[170px] md:w-[317px]"
          />

          <div className="font-semibold text-center">
            <div className="text-p1 md:text-h2 lg:font-bold text-center">
              <p>New Merchandise</p>
              <p>Coming UP</p>
            </div>
            <div className="text-base md:text-p2 mt-3">
              Periode Gacha: 1 - 31 Maret 2025
            </div>
          </div>

          <div className="text-center font-semibold text-p3 md:text-p1">
            <p>Let's Go Checkout Our Merch &</p>
            <p>Gacha Your Prize Here</p>
          </div>

          {creditsData && (
            <div className="text-center text-p3 md:text-p2 bg-primary-100 rounded-md px-4 py-2 border border-primary-300">
              <span className="font-semibold">Roll tersisa: </span>
              <span className="text-primary-600 font-bold">{availableRolls}</span>
            </div>
          )}

          <Button
            size="sm"
            variant="bordered"
            className="flex gap-3 px-3 md:px-5 py-2 md:py-4 bg-primary-100 border border-primary-500 border-dashed rounded md:rounded-md animate-bounce text-label2 md:text-p2"
            onClick={scrollToRoulette}
          >
            <ArrowDownOutlined />
            <span>Scroll For Gacha</span>
            <ArrowDownOutlined />
          </Button>
        </div>

        <div className="order-1 lg:order-none flex flex-col col-span-4 justify-center items-center mb-8 relative">
          <div className="relative h-[150px] md:h-[230px]">
            <img
              width={400}
              height={400}
              src="/merch/1.png"
              alt="Merch 1"
              className="relative top-[3px] md:top-[6px] left-[4px] md:left-[7px] z-10 w-[165px] md:w-[266px]"
            />
            <img
              width={400}
              height={400}
              className="absolute top-0 left-0 min-w-[174px] md:min-w-[280px] z-0"
              src="/merch/Vector-1.svg"
              alt=""
            />
            <img
              className="absolute hidden lg:block -bottom-[50px] -right-[50px]"
              src="/landing-arrow-1.svg"
              alt=""
            />
          </div>
          <div className="px-3 py-1 text-primary-500 font-semibold text-base md:text-p2 bg-white shadow-md rounded">
            Official Merch IMPHNEN
          </div>
          <div className="mt-2 text-primary-500 font-bold text-p2 md:text-h3">
            ~ 175k ~
          </div>
        </div>
        <div className="order-2 flex flex-col col-span-4 justify-center items-center mb-8 relative">
          <div className="relative h-[130px] md:h-[230px]">
            <img
              width={400}
              height={400}
              src="/merch/2.png"
              alt="Merch 2"
              className="relative top-[5px] md:top-[8px] left-0 md:left-[5px] z-10 w-[165px] md:w-[277px]"
            />
            <img
              width={400}
              height={400}
              className="absolute top-0 -left-[5px] md:-left-[8px] z-0 min-w-[174px] md:min-w-[302px]"
              src="/merch/Vector-2.svg"
              alt="Merch 3"
            />
            <img
              className="absolute hidden lg:block -bottom-[100px] -left-[55px]"
              src="/landing-arrow-2.svg"
              alt="Merch 1"
            />
          </div>
          <div className="px-3 py-1 text-primary-500 font-semibold text-base md:text-p2 bg-white shadow-md rounded">
            IMPHNEN Mini Merch
          </div>
          <div className="mt-2 text-primary-500 font-bold text-p2 md:text-h3">
            ~ 90k ~
          </div>
        </div>
      </section>

      <section
        id="roulette"
        className="mt-20 pb-50 lg:py-90 mx-[32px] md:mx-[60px] lg:mx-[80px] xl:mx-auto lg:max-w-[1280px] grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 justify-items-center gap-y-16 md:gap-y-28"
      >
        <div className="col-span-4 md:col-span-8 lg:col-span-6 text-primary-500 bg-white rounded-lg md:rounded-xl p-5 md:py-9 md:px-13 shadow md:max-w-[430px]">
          <header className="mb-4">
            <h3 className="font-semibold text-p3 md:text-h2">Gacha Roulette</h3>
          </header>
          <h4 className="font-semibold my-2 text-base md:text-p1">
            How to participate
          </h4>
          <p className="text-base md:text-p2">
            Kamu harus melakukan pembelian merch batch 2 di shopee IMPHNEN
          </p>
          <h4 className="font-semibold my-2 text-base md:text-p1">
            How to gacha
          </h4>
          <ol className="text-base md:text-p2 list-decimal list-outside ml-4 md:ml-6">
            <li>First, press the "Spin Now" button</li>
            <li>
              If the merch does not match you can reroll by paying IDR5,000
            </li>
            <li>If it is appropriate you can submit</li>
            <li>Then fill in the data for your merch delivery process</li>
          </ol>
        </div>

        <div className="col-span-4 md:col-span-8 lg:col-span-6 flex flex-col items-center gap-4 md:gap-8 overflow-x-hidden">
          <div className="bg-white text-primary-500 font-medium text-p3 md:text-h3 shadow py-2 px-4 md:py-4 md:px-8 max-w-fit rounded-md md:rounded-lg">
            {spinResult
              ? `Hadiahmu: ${gachaItems.find((i) => i.id === spinResult.item_id)?.name ?? 'Item'}`
              : 'Here Take Your Prize'}
          </div>
          <section
            id="gacha-play"
            className="flex flex-nowrap overflow-auto w-full gap-x-8 snap-x snap-mandatory"
          >
            {gachaItems.length > 0 ? (
              gachaItems.map((item) => (
                <GachaItem
                  key={item.id}
                  src="/gacha/certificate.png"
                  label={item.name}
                />
              ))
            ) : (
              <>
                <GachaItem src="/gacha/certificate.png" label="Sertifikat + Laminating" />
                <GachaItem src="/gacha/lanyard-id-card.png" label="Lanyard + ID Card" />
                <GachaItem src="/gacha/pin.png" label="Pin" />
                <GachaItem src="/gacha/sticker.png" label="Sticker Isi 3" />
                <GachaItem src="/gacha/sticker.png" label="Sticker Isi 5" />
                <GachaItem src="/gacha/gelang-karet.png" label="Gelang Karet" className="h-[86px] md:h-[160px]" />
              </>
            )}
          </section>
          <Button
            variant="secondary"
            size="md"
            onClick={handleSpin}
            disabled={executeRoll.isPending}
          >
            {executeRoll.isPending ? 'Spinning...' : 'Spin Now'}
          </Button>
        </div>
      </section>
      <div className="sticky bottom-0 h-[86px] md:h-[200px] bg-gradient-to-b from-primary-500/0 to-primary-500/50 to-80%"></div>

      <ModalFormLogin
        isOpen={showModalLogin}
        onClose={() => setShowModalLogin(false)}
        onForgotPassword={handleForgotPasswordClick}
        setIsOpenRegisterModal={setShowModalRegister}
        key="login"
      />

      <ModalFormRegister
        isOpen={showModalRegister}
        onClose={() => {
          setShowModalRegister(false);
        }}
        key="register"
      />

      <ModalFormForgotPassword
        isOpen={showModalForgotPassword}
        onClose={() => {
          setShowModalForgotPassword(false);
          setShowModalLogin(true);
        }}
        key="forgot-password"
      />
    </Fragment>
  );
};

export default Components;