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

import { DrawnCard, drawRandomCards, TAROT_DECK } from "@/app/lib/tarotCards";
import { getTarotCardDetail, getYesNoReading } from "@/app/lib/tarot";
import { useLanguage } from "@/app/context/LanguageContext";
import { toContentLang } from "@/app/i18n/locales";
import {
  ParsedReading,
  extractCardBackCandidates,
  extractCardImage,
  looksLikeContent,
  parseReading,
  unwrapUntil,
} from "@/app/lib/tarotParse";

import "../tarot.css";

type Step = "form" | "picking";

export default function YesNoCardReadingPage() {
  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 [question, setQuestion] = useState("");

  const [drawn, setDrawn] = useState<DrawnCard | null>(null);

  const [revealImageUrl, setRevealImageUrl] = useState<string | undefined>(undefined);

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

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

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

  const [reading, setReading] = useState<ParsedReading | null>(null);

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

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

    setPageLoading(false);

    // Best-effort: every card shares the same back design, so one
    // lookup is enough to skin the whole face-down fan with real
    // artwork instead of the CSS placeholder.
    getTarotCardDetail(TAROT_DECK[0].slug)
      .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/yes-no-card-reading");
      return;
    }

    setStep("picking");
  };

  const handlePickCard = () => {
    const [picked] = drawRandomCards(1);

    setDrawn(picked);
    setRevealImageUrl(undefined);

    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) setRevealImageUrl(url);
      })
      .catch(() => {});
  };

  const handleChooseAgain = () => {
    setDrawn(null);
    setRevealImageUrl(undefined);
    setReading(null);
    setError("");
    setStep("picking");
  };

  const handleSeePredictions = async () => {
    if (!drawn) return;

    setError("");

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

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

    setLoadingPrediction(true);

    try {
      const response = await getYesNoReading({
        name: name.trim(),
        card: drawn.card.slug,
        direction: drawn.direction,
        lang: contentLocale,
      });

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

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

      setReading(parseReading(response.data, drawn.direction));
    } catch (err) {
      console.error("Yes/No card reading error:", err);
      setError("Something went wrong. Please try again.");
    } finally {
      setLoadingPrediction(false);
    }
  };

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

  return (
    <>
      <Header />

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

            <p>
              A quick, straightforward answer to a specific question — draw a card and read it as
              a Yes or a No.
            </p>
          </div>

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

              <div className="tarot-field">
                <label>Your Question (optional, just for you)</label>

                <input
                  type="text"
                  value={question}
                  onChange={(event) => setQuestion(event.target.value)}
                  placeholder="e.g. Will this opportunity work out?"
                />
              </div>

              <p className="tarot-hint">
                Phrase your question so it can be answered with a clear yes or no, then draw.
              </p>

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

              <button type="button" className="tarot-submit-btn" onClick={handleStartPicking}>
                🎯 Draw for Yes / No
              </button>
            </div>
          )}

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

              {question && (
                <p style={{ textAlign: "center", opacity: 0.7, fontSize: "13px" }}>
                  &quot;{question}&quot;
                </p>
              )}

              <p className="tarot-hint">Focus on your question, then tap any card below.</p>

              <TarotCardPicker onPick={handlePickCard} backImageCandidates={backImageCandidates} />
            </div>
          )}

          {step === "picking" && drawn && !reading && (
            <div className="tarot-form-card tarot-reveal-card">
              <TarotCardVisual
                card={drawn.card}
                direction={drawn.direction}
                size="lg"
                imageUrl={revealImageUrl}
                eager
              />

              <h2 className="tarot-reveal-title">
                {drawn.card.name} ({drawn.direction === "upright" ? "Upright" : "Reversed"})
              </h2>

              {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>
          )}

          {reading && drawn && (
            <>
              {question && (
                <p style={{ textAlign: "center", opacity: 0.7, fontSize: "13px" }}>
                  &quot;{question}&quot;
                </p>
              )}

              <section className="tarot-section-card">
                <h2 className="tarot-love-result-heading">Your Prediction Of Yes / No Card</h2>

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

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

                    {reading.answer && <p className="tarot-yes-no-answer">{reading.answer}</p>}

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

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

                <a href={`/tarot/${drawn.card.slug}`} className="tarot-cta-btn secondary">
                  Learn About {drawn.card.name}
                </a>
              </div>
            </>
          )}

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

      <Footer />
    </>
  );
}