"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 TarotCardVisual from "@/app/components/tarot/TarotCardVisual";
import TarotCta from "@/app/components/tarot/TarotCta";

import { getTarotCardBySlug } from "@/app/lib/tarotCards";

import { parseReading } from "@/app/lib/tarotParse";

import "../../tarot.css";

interface StoredResult {
  name: string;
  slug: string;
  direction: "upright" | "reversed";
  data: any;
}

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

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

  const [result, setResult] = useState<StoredResult | null>(null);

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

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

    const raw = sessionStorage.getItem("tarot_one_card_result");

    if (raw) {
      try {
        setResult(JSON.parse(raw));
      } catch {
        setResult(null);
      }
    }

    setLoading(false);
  }, [router]);

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

  const card = result ? getTarotCardBySlug(result.slug) : undefined;

  if (!result || !card) {
    return (
      <>
        <Header />

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

              <p>Draw a card first to see your reading here.</p>

              <a href="/tarot/one-card-reading" className="tarot-submit-btn" style={{ display: "inline-block", width: "auto", padding: "0 28px", textDecoration: "none", lineHeight: "50px" }}>
                🎴 Draw a Card
              </a>
            </section>
          </div>
        </main>

        <Footer />
      </>
    );
  }

  const reading = parseReading(result.data, result.direction);

  return (
    <>
      <Header />

      <main className="tarot-page">
        <div className="tarot-container">
          <section className="tarot-section-card">
            <h2 className="tarot-love-result-heading">Your Prediction Of One Card</h2>

            <div className="tarot-love-card-row">
              <div className="tarot-love-card-image">
                <TarotCardVisual
                  card={card}
                  direction={result.direction}
                  size="md"
                  imageUrl={reading.image}
                  eager
                />
              </div>

              <div className="tarot-love-card-text">
                <h3>
                  {card.name}{" "}
                  <span className="tarot-love-position">
                    ({result.direction === "upright" ? "Upright" : "Reversed"})
                  </span>
                </h3>

                {reading.paragraphs.map((paragraph, i) => (
                  <p key={i}>{paragraph}</p>
                ))}

                {reading.meaning?.overview && <p>{reading.meaning.overview}</p>}

                {reading.meaning && (
                  <div className="tarot-meaning-grid">
                    {[
                      { label: "Love & Relationships", text: reading.meaning.love },
                      { label: "Career", text: reading.meaning.career },
                      { label: "Finance", text: reading.meaning.finance },
                      { label: "Health", text: reading.meaning.health },
                    ]
                      .filter((item) => item.text)
                      .map((item) => (
                        <div className="tarot-meaning-item" key={item.label}>
                          <strong>{item.label}</strong>
                          <p>{item.text}</p>
                        </div>
                      ))}
                  </div>
                )}

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

                {!reading.paragraphs.length && !reading.meaning && (
                  <p className="tarot-empty">
                    A detailed interpretation isn&apos;t available right now, but your card was{" "}
                    {card.name}.
                  </p>
                )}
              </div>
            </div>
          </section>

          <div className="tarot-cta-row">
            <a href="/tarot/one-card-reading" className="tarot-cta-btn primary">
              Choose Card Again
            </a>

            <a href="/talk-to-astrologer" className="tarot-cta-btn primary">
              Consult With Tarot Readers
            </a>
          </div>

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

      <Footer />
    </>
  );
}