"use client";

import { useEffect, useState } from "react";

import { useRouter } from "next/navigation";

import Header from "@/app/components/layout/Header";
import Footer from "@/app/components/layout/Footer";

import TarotDeckGrid from "@/app/components/tarot/TarotDeckGrid";
import TarotCta from "@/app/components/tarot/TarotCta";

import { getTarotCardsList } from "@/app/lib/tarot";
import { CardImageEntry, parseCardImageMap } from "@/app/lib/tarotParse";

import "./tarot.css";

const READING_TYPES = [
  {
    icon: "🎴",
    title: "One Card Reading",
    description: "Pull a single card for quick, focused insight into a particular situation.",
    href: "/tarot/one-card-reading",
  },
  {
    icon: "🔮",
    title: "Three Card Reading",
    description: "A past, present, and future spread for a fuller picture of where things stand.",
    href: "/tarot/three-card-reading",
  },
  {
    icon: "💞",
    title: "Love Card Reading",
    description: "Gain clarity on matters of the heart with a reading focused on love.",
    href: "/tarot/love-card-reading",
  },
  {
    icon: "🎯",
    title: "Yes / No Card Reading",
    description: "A quick, straightforward answer to a specific yes-or-no question.",
    href: "/tarot/yes-no-card-reading",
  },
];

export default function TarotHubPage() {
  const router = useRouter();

  const [loading, setLoading] = useState(true);

  const [imageMap, setImageMap] = useState<Record<string, CardImageEntry>>({});

  useEffect(() => {
    const token = localStorage.getItem("token");

    if (!token) {
      router.replace("/signin?redirect=/tarot");
      return;
    }

    setLoading(false);

    // Non-blocking: the deck grid already renders fine with its
    // CSS placeholders, this just upgrades each card to its real
    // artwork once the (fairly large) card list has loaded.
    let cancelled = false;

    getTarotCardsList()
      .then((result) => {
        if (cancelled) return;

        if (result.authenticated && result.success) {
          setImageMap(parseCardImageMap(result.data));
        }
      })
      .catch((err) => {
        console.error("Tarot card images load error:", err);
      });

    return () => {
      cancelled = true;
    };
  }, [router]);

  if (loading) {
    return (
      <>
        <Header />
        <main className="horoscope-loading">Loading Tarot...</main>
        <Footer />
      </>
    );
  }

  return (
    <>
      <Header />

      <main className="tarot-page">
        <div className="tarot-container">
          <div className="tarot-hero">
            <h1>Tarot Cards Reading</h1>

            <p>
              Tarot cards work on mystical energy and reflect the story unfolding in your life.
              Pick a reading below, or explore the full deck to learn what each card means.
            </p>
          </div>

          {/* READING TYPES */}

          <div className="tarot-reading-types">
            {READING_TYPES.map((item) => (
              <a href={item.href} className="tarot-reading-type-card" key={item.href}>
                <span className="tarot-reading-type-icon">{item.icon}</span>

                <strong>{item.title}</strong>

                <span>{item.description}</span>
              </a>
            ))}
          </div>

          {/* EDUCATIONAL CONTENT */}

          <section className="tarot-section-card">
            <h2>How to Get the Most Out of a Tarot Reading</h2>

            <p>
              Before you draw, take a moment to settle your thoughts and focus clearly on the
              question you want answered. A calm mind and a specific question tend to produce a
              reading that feels more relevant and easier to interpret.
            </p>

            <p>
              A standard tarot deck has 78 cards split into two groups. The <strong>Major
              Arcana</strong> (22 cards, The Fool through The World) represents major life themes
              and turning points. The <strong>Minor Arcana</strong> (56 cards across four suits —
              Wands, Cups, Swords, and Pentacles) reflects the day-to-day details: work, emotions,
              conflicts, and resources.
            </p>

            <p>
              A card drawn <strong>upright</strong> generally carries its meaning at full
              strength, while a card drawn <strong>reversed</strong> (upside down) often points to
              that energy being blocked, delayed, or turned inward.
            </p>
          </section>

          {/* FAQ */}

          <section className="tarot-section-card">
            <h2>Frequently Asked Questions</h2>

            <div className="tarot-faq-item">
              <strong>Can I read tarot for myself?</strong>

              <p>
                Yes — self-readings are common. Just try to stay as objective as possible when
                interpreting a card that touches on something personal.
              </p>
            </div>

            <div className="tarot-faq-item">
              <strong>How many readings can I do in a day?</strong>

              <p>
                One to three card pulls a day is a reasonable rule of thumb. Pulling repeatedly
                for the same question tends to muddy the answer rather than clarify it.
              </p>
            </div>

            <div className="tarot-faq-item">
              <strong>How accurate is a tarot reading?</strong>

              <p>
                Tarot works best as a tool for reflection rather than a fixed prediction — the
                cards offer a perspective on your situation that you then apply to your own
                judgment and circumstances.
              </p>
            </div>
          </section>

          <TarotCta />

          {/* FULL DECK */}

          <TarotDeckGrid imageMap={imageMap} />
        </div>
      </main>

      <Footer />
    </>
  );
}