"use client";

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 { ROUTES } from "@/router/routes";

import styles from "./coins-rules-screen.module.css";

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

const COIN_RULES: readonly CoinRuleItem[] = [
  {
    title: "Standard Chat",
    cost: "2 coins / message",
    free: "50 free messages weekly",
    icon: MessageCircle,
  },
  {
    title: "Private Chat",
    cost: "10 coins / message",
    free: "1 free message daily",
    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 function CoinsRulesScreen() {
  return (
    <MobileShell background="#fcf3f4">
      <main className={styles.screen}>
        <header className={styles.header}>
          <BackButton
            href={ROUTES.sidebar}
            variant="soft"
            aria-label="Back to sidebar"
          />

          <div className={styles.hero}>
            <span className={styles.heroIcon} aria-hidden="true">
              <FaCoins size={24} />
            </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 size={20} strokeWidth={2.3} />
          </div>
          <div>
            <h2 className={styles.freeTitle}>Free Allowance</h2>
            <p className={styles.freeText}>
              Standard chat includes 50 free messages weekly. Private chat
              includes 1 free message daily.
            </p>
          </div>
        </section>

        <section className={styles.ruleList} aria-label="Coins usage rules">
          {COIN_RULES.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 size={18} 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>
  );
}
