"use client";

import { useEffect, useState } from "react";

import { useParams, useRouter } from "next/navigation";

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

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

import { getTarotCardBySlug, getMajorArcana, getMinorArcanaBySuit, TarotCard } from "@/app/lib/tarotCards";

import { getTarotCardDetail } from "@/app/lib/tarot";

import { ParsedCardDetail, parseCardDetail } from "@/app/lib/tarotParse";

import "../tarot.css";

export default function TarotCardDetailPage() {
  const params = useParams();

  const router = useRouter();

  const slug = String(params?.card || "");

  const staticCard = getTarotCardBySlug(slug);

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

  const [detail, setDetail] = useState<ParsedCardDetail | null>(null);

  useEffect(() => {
    let cancelled = false;

    async function load() {
      const token = localStorage.getItem("token");

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

      try {
        const result = await getTarotCardDetail(slug);

        if (cancelled) {
          return;
        }

        if (!result.authenticated) {
          router.replace(`/signin?redirect=/tarot/${slug}`);
          return;
        }

        if (result.success && result.data) {
          setDetail(parseCardDetail(result.data));
        }
      } finally {
        if (!cancelled) {
          setLoading(false);
        }
      }
    }

    load();

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

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

  if (!staticCard) {
    return (
      <>
        <Header />

        <main className="tarot-page">
          <div className="tarot-container">
            <section className="tarot-section-card" style={{ textAlign: "center" }}>
              <h2>Card Not Found</h2>

              <p>We couldn&apos;t find a tarot card at this address.</p>

              <TarotCta />
            </section>
          </div>
        </main>

        <Footer />
      </>
    );
  }

  const relatedCards: TarotCard[] = staticCard.suit
    ? getMinorArcanaBySuit(staticCard.suit).filter((card) => card.slug !== staticCard.slug)
    : getMajorArcana().filter((card) => card.slug !== staticCard.slug);

  return (
    <>
      <Header />

      <main className="tarot-page">
        <div className="tarot-container">
          {/* HERO */}

          <div className="tarot-detail-hero">
            <span className="tarot-detail-icon">☀</span>

            <h1 className="tarot-detail-title">{staticCard.name}</h1>
          </div>

          {/* KEY MEANINGS */}

          <section className="tarot-section-card">
            <h2>{staticCard.name} Tarot Card Meaning</h2>

            <p>
              <strong>Key Meanings (Upright):</strong>{" "}
              {detail?.keywordsUpright || staticCard.keywordsUpright}
            </p>

            <p>
              <strong>Key Meanings (Reversed):</strong>{" "}
              {detail?.keywordsReversed || staticCard.keywordsReversed}
            </p>
          </section>

          {/* CARD DESCRIPTION */}

          {detail?.meaning?.overview && (
            <section className="tarot-section-card">
              <h2>{staticCard.name} Card Description</h2>

              <p>{detail.meaning.overview}</p>
            </section>
          )}

          {/* CARD MEANING (upright) */}

          {detail?.meaning &&
            (detail.meaning.love ||
              detail.meaning.career ||
              detail.meaning.finance ||
              detail.meaning.health) && (
              <section className="tarot-section-card">
                <h2>{staticCard.name} Tarot Card Meaning</h2>

                {detail.imageUpright ? (
                  <div className="tarot-card-image-wrap tarot-inline-image">
                    <img src={detail.imageUpright} alt={staticCard.name} loading="lazy" />
                  </div>
                ) : (
                  <div className="tarot-inline-image">
                    <TarotCardVisual card={staticCard} size="md" />
                  </div>
                )}

                {detail.meaning.love && (
                  <>
                    <h3>Love and Relationship</h3>
                    <p>{detail.meaning.love}</p>
                  </>
                )}

                {detail.meaning.finance && (
                  <>
                    <h3>Finance</h3>
                    <p>{detail.meaning.finance}</p>
                  </>
                )}

                {detail.meaning.career && (
                  <>
                    <h3>Career</h3>
                    <p>{detail.meaning.career}</p>
                  </>
                )}

                {detail.meaning.health && (
                  <>
                    <h3>Health</h3>
                    <p>{detail.meaning.health}</p>
                  </>
                )}

                <div className="tarot-clear" />
              </section>
            )}

          {/* REVERSED */}

          {(detail?.imageReversed || staticCard.keywordsReversed) && (
            <section className="tarot-section-card">
              <h2>{staticCard.name} Reversed</h2>

              {detail?.imageReversed && (
                <div className="tarot-card-image-wrap tarot-inline-image">
                  <img src={detail.imageReversed} alt={`${staticCard.name} reversed`} loading="lazy" />
                </div>
              )}

              <p>
                <strong>Key Meanings (Reversed):</strong>{" "}
                {detail?.keywordsReversed || staticCard.keywordsReversed}
              </p>

              <div className="tarot-clear" />
            </section>
          )}

          {/* ONE CARD PULL */}

          {detail?.onePull && (detail.onePull.upright || detail.onePull.reversed) && (
            <section className="tarot-section-card">
              <h2>One Card Pull</h2>

              <div className="tarot-pull-grid">
                <div className="tarot-pull-item yes">
                  <strong>Upright</strong>
                  {detail.onePull.upright || "Yes"}
                </div>

                <div className="tarot-pull-item no">
                  <strong>Reversed</strong>
                  {detail.onePull.reversed || "No"}
                </div>
              </div>
            </section>
          )}

          {/* TIMING */}

          {detail?.timing && (
            <section className="tarot-section-card">
              <h2>Timing</h2>

              <p>{detail.timing}</p>
            </section>
          )}

          {/* EXTRA FIELDS FROM API */}

          {detail && detail.extra.length > 0 && (
            <section className="tarot-section-card">
              <h2>More About {staticCard.name}</h2>

              {detail.extra.map((item, index) => (
                <div className="tarot-extra-item" key={`${item.label}-${index}`}>
                  <strong>{item.label}</strong>
                  <p>{item.text}</p>
                </div>
              ))}
            </section>
          )}

          {/* NO API CONTENT FALLBACK */}

          {!detail && (
            <section className="tarot-section-card">
              <p className="tarot-empty">
                Detailed meanings for this card aren&apos;t available right now — the keywords
                above still give a quick read on {staticCard.name}.
              </p>
            </section>
          )}

          <TarotCta />

          {/* RELATED CARDS */}

          <section className="tarot-section-card">
            <h2>{staticCard.suit ? `More from the Suit of ${capitalize(staticCard.suit)}` : "More Major Arcana Cards"}</h2>

            <div className="tarot-related-strip">
              {relatedCards.map((card) => (
                <a href={`/tarot/${card.slug}`} className="tarot-related-pill" key={card.slug}>
                  {card.name}
                </a>
              ))}
            </div>
          </section>
        </div>
      </main>

      <Footer />
    </>
  );
}

function capitalize(value: string): string {
  return value.charAt(0).toUpperCase() + value.slice(1);
}