"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 { getTarotCardDetail, getThreeCardReading } 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 LoveCardReadingPage() {
  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/love-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/love-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/love-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/love-card-reading");
        return;
      }

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

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

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

  return (
    <>
      <Header />

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

            <p>
              No matter how straightforward or complicated an issue in your romantic life may be,
              it always seems to take over everything. Our Love Tarot Card Reading gives you the
              guidance you need with a past, present, and future look at where things stand.
            </p>
          </div>

          {step === "form" && (
            <div className="tarot-form-card">
              <h2 className="tarot-picking-title">Get Your Love Card Reading</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">
                Bring the relationship or question to mind, then draw your cards.
              </p>

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

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

          {step === "picking" && (
            <div className="tarot-form-card tarot-picking-card">
              <h2 className="tarot-picking-title">Pick Your Card</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>}

                  <div className="tarot-reveal-actions">
                    <button type="button" className="tarot-secondary-btn" onClick={handleChooseAgain}>
                      I want to pick the cards again
                    </button>

                    <button
                      type="button"
                      className="tarot-submit-btn"
                      onClick={handleSeePredictions}
                      disabled={loadingPrediction}
                    >
                      {loadingPrediction ? "Loading..." : "I want to see predictions"}
                    </button>
                  </div>
                </>
              )}
            </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 />
    </>
  );
}