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

import { DrawnCard, drawRandomCards } from "@/app/lib/tarotCards";
import { getThreeCardReading, getTarotCardDetail } from "@/app/lib/tarot";
import { useLanguage } from "@/app/context/LanguageContext";
import { toContentLang } from "@/app/i18n/locales";
import {
  ParsedSpread,
  extractCardBackCandidates,
  extractCardImage,
  looksLikeContent,
  parseSpreadReading,
  unwrapUntil,
} from "@/app/lib/tarotParse";

import "../tarot.css";

const POSITIONS = ["Past", "Present", "Future"];

type Step = "form" | "picking";

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

  const { locale } = useLanguage();

  const contentLocale = toContentLang(locale);

  const [pageLoading, setPageLoading] = useState(true);

  const [step, setStep] = useState<Step>("form");

  const [name, setName] = useState("");

  const [picks, setPicks] = useState<DrawnCard[]>([]);

  const [revealedCount, setRevealedCount] = useState(0);

  const [revealImageUrls, setRevealImageUrls] = useState<(string | undefined)[]>([]);

  const [backImageCandidates, setBackImageCandidates] = useState<string[]>([]);

  const [loadingPrediction, setLoadingPrediction] = useState(false);

  const [error, setError] = useState("");

  const [drawnCards, setDrawnCards] = useState<DrawnCard[] | null>(null);

  const [spread, setSpread] = useState<ParsedSpread | null>(null);

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

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

    setPageLoading(false);

    // Best-effort: every card shares the same back design, so one
    // lookup skins both the fan and the empty spread slots with real
    // artwork instead of the CSS placeholder.
    getTarotCardDetail("the_fool")
      .then((result) => {
        if (!result.authenticated || !result.success) return;

        const report = unwrapUntil(result.data, looksLikeContent);
        const candidates = extractCardBackCandidates(report);

        if (candidates.length) setBackImageCandidates(candidates);
      })
      .catch(() => {});
  }, [router]);

  const handleStartPicking = () => {
    setError("");

    if (!name.trim()) {
      setError("Please enter your name first.");
      return;
    }

    const token = localStorage.getItem("token");

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

    setPicks(drawRandomCards(3));
    setRevealedCount(0);
    setRevealImageUrls([]);
    setStep("picking");
  };

  const handleFanClick = () => {
    setRevealedCount((current) => {
      if (current >= 3) return current;

      const index = current;
      const picked = picks[index];

      // Best-effort: upgrade this slot from the CSS placeholder to
      // real artwork once the card detail loads.
      getTarotCardDetail(picked.card.slug)
        .then((result) => {
          if (!result.authenticated || !result.success) return;

          const report = unwrapUntil(result.data, looksLikeContent);
          const url = extractCardImage(report, picked.direction);

          if (url) {
            setRevealImageUrls((urls) => {
              const next = [...urls];
              next[index] = url;
              return next;
            });
          }
        })
        .catch(() => {});

      return current + 1;
    });
  };

  const handleChooseAgain = () => {
    setPicks(drawRandomCards(3));
    setRevealedCount(0);
    setRevealImageUrls([]);
    setSpread(null);
    setDrawnCards(null);
    setError("");
    setStep("picking");
  };

  const handleSeePredictions = async () => {
    setError("");

    const token = localStorage.getItem("token");

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

    setLoadingPrediction(true);
    setSpread(null);

    try {
      const response = await getThreeCardReading({
        name: name.trim(),
        cards: picks.map((entry) => ({ card: entry.card.slug, direction: entry.direction })),
        lang: contentLocale,
      });

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

      if (!response.success) {
        setError(response.message || "Unable to draw your spread right now.");
        return;
      }

      setDrawnCards(picks);
      setSpread(parseSpreadReading(response.data, picks.map((entry) => entry.direction)));
    } catch (err) {
      console.error("Three card reading error:", err);
      setError("Something went wrong. Please try again.");
    } finally {
      setLoadingPrediction(false);
    }
  };

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

  return (
    <>
      <Header />

      <main className="tarot-page">
        <div className="tarot-container">
          <div className="tarot-hero">
            <h1>Three Card Reading</h1>

            <p>
              A past, present, and future spread — three cards drawn together for a fuller
              picture of where a situation has been, where it stands, and where it&apos;s headed.
            </p>
          </div>

          {step === "form" && (
            <div className="tarot-form-card">
              <h2 className="tarot-picking-title">Ask Question</h2>

              <div className="tarot-field">
                <label>Your Name</label>

                <input
                  type="text"
                  value={name}
                  onChange={(event) => setName(event.target.value)}
                  placeholder="Enter your name"
                />
              </div>

              <p className="tarot-hint">
                Focus on the situation you want clarity on, then draw your three cards.
              </p>

              {error && <div className="tarot-error">{error}</div>}

              <button type="button" className="tarot-submit-btn" onClick={handleStartPicking}>
                🔮 Draw Three Cards
              </button>
            </div>
          )}

          {step === "picking" && (
            <div className="tarot-form-card tarot-picking-card">
              <h2 className="tarot-picking-title">Pick Your Cards</h2>

              <p className="tarot-hint">
                Tap the spread below three times — one card each for Past, Present, and Future.
              </p>

              {revealedCount < 3 && (
                <TarotCardPicker onPick={handleFanClick} backImageCandidates={backImageCandidates} />
              )}

              <div className="tarot-spread-row">
                {POSITIONS.map((label, index) => (
                  <div className="tarot-spread-slot" key={label}>
                    <span className="tarot-spread-slot-label">{label}</span>

                    {index < revealedCount ? (
                      <TarotCardVisual
                        card={picks[index].card}
                        direction={picks[index].direction}
                        size="md"
                        imageUrl={revealImageUrls[index]}
                        eager
                      />
                    ) : (
                      <div className="tarot-card-visual size-md">
                        <div className={`tarot-card-face ${backImageCandidates.length ? "has-image" : ""}`}>
                          <TarotCardBack candidates={backImageCandidates} className="tarot-card-image" />
                        </div>
                      </div>
                    )}
                  </div>
                ))}
              </div>

              {revealedCount === 3 && (
                <>
                  {error && <div className="tarot-error">{error}</div>}

                  <button
                    type="button"
                    className="tarot-submit-btn"
                    onClick={handleSeePredictions}
                    disabled={loadingPrediction}
                  >
                    {loadingPrediction ? "Loading..." : "I want to see predictions"}
                  </button>

                  <button type="button" className="tarot-secondary-btn" onClick={handleChooseAgain}>
                    Choose Cards Again
                  </button>
                </>
              )}
            </div>
          )}

          {spread && drawnCards && (
            <>
              <section className="tarot-section-card">
                <h2 className="tarot-love-result-heading">Your Prediction Of Three Card</h2>

                {spread.perCard.length === drawnCards.length ? (
                  spread.perCard.map((reading, index) => (
                    <div
                      className={`tarot-love-card-row ${index % 2 === 1 ? "reverse" : ""}`}
                      key={drawnCards[index].card.slug}
                    >
                      <div className="tarot-love-card-image">
                        <TarotCardVisual
                          card={drawnCards[index].card}
                          direction={drawnCards[index].direction}
                          size="md"
                          imageUrl={reading.image}
                          eager
                        />
                      </div>

                      <div className="tarot-love-card-text">
                        <h3>
                          {drawnCards[index].card.name}{" "}
                          <span className="tarot-love-position">({POSITIONS[index]})</span>
                        </h3>

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

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

                        {(() => {
                          const meaningItems = reading.meaning
                            ? [
                                { 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)
                            : [];

                          return meaningItems.length > 0 ? (
                            <div className="tarot-meaning-grid">
                              {meaningItems.map((item) => (
                                <div className="tarot-meaning-item" key={item.label}>
                                  <strong>{item.label}</strong>
                                  <p>{item.text}</p>
                                </div>
                              ))}
                            </div>
                          ) : null;
                        })()}

                        {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 === 0 &&
                          !reading.meaning?.overview &&
                          !reading.meaning?.love &&
                          !reading.meaning?.career &&
                          !reading.meaning?.finance &&
                          !reading.meaning?.health &&
                          reading.extra.length === 0 && (
                            <p className="tarot-empty">
                              A detailed interpretation isn&apos;t available right now, but this
                              position drew {drawnCards[index].card.name}.
                            </p>
                          )}
                      </div>
                    </div>
                  ))
                ) : (
                  <>
                    {spread.overall.paragraphs.map((paragraph, i) => (
                      <p key={i}>{paragraph}</p>
                    ))}

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

                    {spread.overall.paragraphs.length === 0 && spread.overall.extra.length === 0 && (
                      <p className="tarot-empty">
                        A detailed interpretation isn&apos;t available right now, but your spread
                        was {drawnCards.map((c) => c.card.name).join(", ")}.
                      </p>
                    )}
                  </>
                )}
              </section>

              <div className="tarot-cta-row">
                <button type="button" className="tarot-cta-btn primary" onClick={handleChooseAgain}>
                  🔮 Draw Again
                </button>
              </div>
            </>
          )}

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

      <Footer />
    </>
  );
}