cozsweet-frontend-nextjs/src/app/coins-rules/coins-rules-screen.tsx

"use client";

import { useEffect } from "react";
import {
  Gift,
  ImageIcon,
  MessageCircle,
  Mic2,
  Sparkles,
} from "lucide-react";
import { FaCoins } from "react-icons/fa6";

import { BackButton } from "@/app/_components";
import { MobileShell } from "@/app/_components/core";
import {
  resolveGlobalRouteContext,
  type GlobalReturnToValue,
} from "@/router/global-route-context";
import { useAuthState } from "@/stores/auth/auth-context";
import { useUserDispatch, useUserState } from "@/stores/user/user-context";

import {
  FREE_PRIVATE_MESSAGE_DAILY_COUNT,
  FREE_STANDARD_CHAT_DAILY_COUNT,
} from "./coins-rules.constants";
import styles from "./coins-rules-screen.module.css";

interface CoinRuleItem {
  title: string;
  cost: string;
  free?: string;
  icon: typeof MessageCircle;
}

const formatDailyFreeMessages = (count: number, label: string): string =>
  `${Math.max(0, Math.trunc(count))} free ${label} daily`;

const createCoinRules = (
  dailyFreeChatLimit: number,
  dailyFreePrivateLimit: number,
): readonly CoinRuleItem[] => [
  {
    title: "Standard Chat",
    cost: "2 coins / message",
    free: formatDailyFreeMessages(dailyFreeChatLimit, "messages"),
    icon: MessageCircle,
  },
  {
    title: "Private Chat",
    cost: "10 coins / message",
    free: formatDailyFreeMessages(dailyFreePrivateLimit, "private messages"),
    icon: Sparkles,
  },
  {
    title: "Voice Message",
    cost: "20 coins / message",
    icon: Mic2,
  },
  // {
  //   title: "Voice Call",
  //   cost: "50 coins / call",
  //   icon: Phone,
  // },
  {
    title: "Photo",
    cost: "40 coins / photo",
    icon: ImageIcon,
  },
  {
    title: "Private Album",
    cost: "10 photos / 300 coins",
    icon: ImageIcon,
  },
  {
    title: "Private Album",
    cost: "20 photos / 600 coins",
    icon: ImageIcon,
  },
] as const;

export interface CoinsRulesScreenProps {
  returnTo?: GlobalReturnToValue;
}

export function CoinsRulesScreen({ returnTo }: CoinsRulesScreenProps) {
  const navigation = resolveGlobalRouteContext(returnTo);
  const authState = useAuthState();
  const userState = useUserState();
  const userDispatch = useUserDispatch();
  const dailyFreeChatLimit =
    userState.currentUser?.dailyFreeChatLimit ?? FREE_STANDARD_CHAT_DAILY_COUNT;
  const dailyFreePrivateLimit =
    userState.currentUser?.dailyFreePrivateLimit ??
    FREE_PRIVATE_MESSAGE_DAILY_COUNT;
  const standardChatLabel = formatDailyFreeMessages(
    dailyFreeChatLimit,
    "messages",
  );
  const privateChatLabel = formatDailyFreeMessages(
    dailyFreePrivateLimit,
    "private messages",
  );
  const coinRules = createCoinRules(dailyFreeChatLimit, dailyFreePrivateLimit);

  useEffect(() => {
    if (!authState.hasInitialized || authState.isLoading) return;
    if (authState.loginStatus === "notLoggedIn") return;
    userDispatch({ type: "UserFetch" });
  }, [
    authState.hasInitialized,
    authState.isLoading,
    authState.loginStatus,
    userDispatch,
  ]);

  return (
    <MobileShell background="#fcf3f4">
      <main className={styles.screen}>
        <header className={styles.header}>
          <BackButton
            href={navigation.profileUrl}
            variant="soft"
            aria-label="Back to profile"
          />

          <div className={styles.hero}>
            <span className={styles.heroIcon} aria-hidden="true">
              <FaCoins />
            </span>
            <p className={styles.eyebrow}>Coins Guide</p>
            <h1 className={styles.title}>Coin Usage Rules</h1>
            <p className={styles.subtitle}>
              See how many coins each interaction costs before you top up.
            </p>
          </div>
        </header>

        <section className={styles.freeCard} aria-label="Free quota">
          <div className={styles.freeIcon} aria-hidden="true">
            <Gift strokeWidth={2.3} />
          </div>
          <div>
            <h2 className={styles.freeTitle}>Free Allowance</h2>
            <p className={styles.freeText}>
              Standard chat includes {standardChatLabel}. Private chat includes{" "}
              {privateChatLabel}.
            </p>
          </div>
        </section>

        <section className={styles.ruleList} aria-label="Coins usage rules">
          {coinRules.map((rule, index) => {
            const Icon = rule.icon;
            return (
              <article
                key={`${rule.title}-${rule.cost}`}
                className={styles.ruleCard}
                style={{ animationDelay: `${index * 45}ms` }}
              >
                <span className={styles.ruleIcon} aria-hidden="true">
                  <Icon strokeWidth={2.35} />
                </span>
                <div className={styles.ruleContent}>
                  <h2 className={styles.ruleTitle}>{rule.title}</h2>
                  {rule.free ? (
                    <p className={styles.freeBadge}>{rule.free}</p>
                  ) : null}
                </div>
                <p className={styles.cost}>{rule.cost}</p>
              </article>
            );
          })}
        </section>
      </main>
    </MobileShell>
  );
}