"use client";

import { useEffect, useMemo, useState } from "react";

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

import { getSavedKundalis, SavedKundali } from "@/app/lib/kundali";

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

import { ChartStyle } from "@/app/components/kundli/kundliTypes";

import {
  buildKPColumns,
  buildKPPlanetRows,
  buildPlanetRows,
  formatBirthDate,
  formatBirthTime,
  getApiResponse,
  getCompleteDetails,
  getKundliChartImageUrl,
  getPlanetPredictions,
  getRecord,
  getYoginiRows,
} from "@/app/components/kundli/kundliParse";

import {
  AshtakvargaTab,
  BasicTab,
  ChartsTab,
  DashaTab,
  FreeReportTab,
  KpTab,
  KundliTabContent,
} from "@/app/components/kundli/KundliTabs";

import "./kundli-detail.css";

/*
|--------------------------------------------------------------------------
| Types
|--------------------------------------------------------------------------
*/

type KundaliTab =
  | "basic"
  | "kundli"
  | "kp"
  | "ashtakvarga"
  | "charts"
  | "dasha"
  | "free-report";

/*
|--------------------------------------------------------------------------
| Page
|--------------------------------------------------------------------------
*/

export default function KundaliDetailPage() {
  const params = useParams();
  const router = useRouter();

  const [kundali, setKundali] = useState<SavedKundali | null>(null);

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

  const [activeTab, setActiveTab] = useState<KundaliTab>("basic");

  const [chartStyle, setChartStyle] = useState<ChartStyle>("north");

  const [selectedChart, setSelectedChart] = useState("D1");

  const [selectedDasha, setSelectedDasha] = useState(0);

  const [dashaSystem, setDashaSystem] = useState<"vimshottari" | "yogini">("vimshottari");

  const [reportTab, setReportTab] = useState("General");

  /*
  |--------------------------------------------------------------------------
  | Load Saved Kundali
  |--------------------------------------------------------------------------
  */

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

    if (!token) {
      router.replace("/signin");
      return;
    }

    const id = String(params?.id || "");

    if (!id) {
      setLoading(false);
      return;
    }

    const savedKundalis = getSavedKundalis();

    const found = savedKundalis.find(
      (item) => String(item.localId) === id || String((item as any)?.id) === id,
    );

    if (!found) {
      setLoading(false);
      return;
    }

    /*
     * Keep complete saved object.
     */

    setKundali(found);

    /*
     * Keep current Kundali in session.
     */

    sessionStorage.setItem("current_kundali", JSON.stringify(found));

    /*
     * Read chart style from actual API.
     */

    const response = getApiResponse(found);

    const complete = getCompleteDetails(response);

    const apiStyle = complete?.birth_details?.chart_style;

    if (apiStyle === "south" || apiStyle === "north") {
      setChartStyle(apiStyle);
    }

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

  /*
  |--------------------------------------------------------------------------
  | Loading
  |--------------------------------------------------------------------------
  */

  if (loading) {
    return (
      <>
        <Header />

        <main className="kundli-detail-loading">
          <div className="kundli-loading-spinner">Loading Kundli...</div>
        </main>

        <Footer />
      </>
    );
  }

  /*
  |--------------------------------------------------------------------------
  | Not Found
  |--------------------------------------------------------------------------
  */

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

        <main className="kundli-detail-page">
          <div className="kundli-detail-container">
            <div className="kundli-not-found">
              <h1>Kundli Not Found</h1>

              <p>The requested Kundli could not be found.</p>

              <button type="button" onClick={() => router.push("/free-kundli")}>
                ← Back to Free Kundli
              </button>
            </div>
          </div>
        </main>

        <Footer />
      </>
    );
  }

  /*
  |--------------------------------------------------------------------------
  | Actual API Response
  |--------------------------------------------------------------------------
  */

  const response = getApiResponse(kundali);

  const complete = getCompleteDetails(response);

  const record = getRecord(response);

  const birth = complete?.birth_details || {};

  const details = complete?.details || {};

  const basic = details?.basic_details || {};

  const panchang = basic?.panchang || {};

  const chart = details?.chart || {};

  const ashtakvarga = details?.ashtakvarga || {};

  const dasha = details?.dasha || {};

  /*
  |--------------------------------------------------------------------------
  | PDF
  |--------------------------------------------------------------------------
  */

  const pdfUrl =
    complete?.pdf_url ||
    record?.pdf_link ||
    (kundali as any)?.pdf_url ||
    (kundali as any)?.pdf_link ||
    "";

  /*
  |--------------------------------------------------------------------------
  | Dasha
  |--------------------------------------------------------------------------
  */

  const vimshottari = dasha?.vimshottari || {};

  const mahadasha = vimshottari?.mahadasha || {};

  const mahadashaNames = Array.isArray(mahadasha?.mahadasha)
    ? mahadasha.mahadasha
    : [];

  const mahadashaOrder = Array.isArray(mahadasha?.mahadasha_order)
    ? mahadasha.mahadasha_order
    : [];

  const dashaPredictions = Array.isArray(
    vimshottari?.mahadasha_predictions?.dashas,
  )
    ? vimshottari.mahadasha_predictions.dashas
    : [];

  /*
   * Yogini Dasha — no confirmed real field names (not in the Postman
   * collection, and not yet seen in a real pasted response). Scans
   * several plausible shapes defensively; renders an empty state
   * rather than fabricated rows if none match.
   */

  const yoginiRows = getYoginiRows(dasha);

  /*
  |--------------------------------------------------------------------------
  | Planet Details
  |--------------------------------------------------------------------------
  */

  const planetDetails = chart?.planet_details || {};

  const planetRows = buildPlanetRows(planetDetails);

  /*
  |--------------------------------------------------------------------------
  | KP Planets
  |--------------------------------------------------------------------------
  */

  const kpPlanetRows = buildKPPlanetRows(chart?.kp?.kp_planets ?? chart?.kp_planets);

  /*
  |--------------------------------------------------------------------------
  | KP Cusps
  |--------------------------------------------------------------------------
  */

  const kpCusps = buildKPColumns(chart);

  /*
  |--------------------------------------------------------------------------
  | House Details
  |--------------------------------------------------------------------------
  */

  const houses = Array.isArray(chart?.house_details)
    ? chart.house_details
    : Array.isArray(chart?.houses)
      ? chart.houses
      : Array.isArray(chart?.bhava_details)
        ? chart.bhava_details
        : [];

  /*
  |--------------------------------------------------------------------------
  | Ashtakvarga
  |--------------------------------------------------------------------------
  */

  const avakData = ashtakvarga?.ashtakvarga || {};

  const avakOrder = Array.isArray(avakData?.ashtakvarga_order)
    ? avakData.ashtakvarga_order
    : [];

  const avakPoints = Array.isArray(avakData?.ashtakvarga_points)
    ? avakData.ashtakvarga_points
    : [];

  const avakTotal = Array.isArray(avakData?.ashtakvarga_total)
    ? avakData.ashtakvarga_total
    : [];

  /*
  |--------------------------------------------------------------------------
  | Free Report Predictions
  |--------------------------------------------------------------------------
  */

  const planetPredictions = getPlanetPredictions(details);

  const houseLordPredictions = Array.isArray(details?.house_lord_predictions)
    ? details.house_lord_predictions
    : [];

  /*
  |--------------------------------------------------------------------------
  | Main
  |--------------------------------------------------------------------------
  */

  return (
    <>
      <Header />

      <main className="kundli-detail-page">
        <div className="kundli-detail-container">
          {/* ======================================================
              HEADER
          ====================================================== */}

          <section className="kundli-profile-header">
            <div className="kundli-header-top">
              <div className="kundli-header-title">
                <h1>
                  {birth?.name ||
                    complete?.name ||
                    record?.name ||
                    kundali.name}
                  's Kundli
                </h1>

                <p>
                  {formatBirthDate(
                    birth?.birthDate || record?.birthDate || kundali.birthDate,
                  )}

                  {" • "}

                  {formatBirthTime(
                    birth?.birthTime || record?.birthTime || kundali.birthTime,
                  )}

                  {" • "}

                  {birth?.birthPlace ||
                    record?.birthPlace ||
                    kundali.birthPlace}
                </p>
              </div>
            </div>
          </section>

          {/* ======================================================
              TABS
          ====================================================== */}

          <nav className="kundli-tabs">
            {[
              ["basic", "Basic"],
              ["kundli", "Kundli"],
              ["kp", "KP"],
              ["ashtakvarga", "Ashtakvarga"],
              ["charts", "Charts"],
              ["dasha", "Dasha"],
              ["free-report", "Free Report"],
            ].map(([tab, label]) => (
              <TabButton
                key={tab}
                label={label}
                tab={tab as KundaliTab}
                activeTab={activeTab}
                onClick={setActiveTab}
              />
            ))}
          </nav>

          {/* ======================================================
              BASIC
          ====================================================== */}

          {activeTab === "basic" && (
            <BasicTab birth={birth} basic={basic} panchang={panchang} details={details} />
          )}

          {/* ======================================================
              KUNDLI
          ====================================================== */}

          {activeTab === "kundli" && (
            <KundliTabContent
              chart={chart}
              planetRows={planetRows}
              houses={houses}
              chartStyle={chartStyle}
              setChartStyle={setChartStyle}
              getChartImage={getChartImage}
            />
          )}

          {/* ======================================================
              KP
          ====================================================== */}

          {activeTab === "kp" && (
            <KpTab
              chart={chart}
              kpPlanetRows={kpPlanetRows}
              kpCusps={kpCusps}
              birth={birth}
              panchang={panchang}
              chartStyle={chartStyle}
              setChartStyle={setChartStyle}
              getChartImage={getChartImage}
            />
          )}

          {/* ======================================================
              ASHTAKVARGA
          ====================================================== */}

          {activeTab === "ashtakvarga" && (
            <AshtakvargaTab
              ashtakvarga={ashtakvarga}
              avakOrder={avakOrder}
              avakPoints={avakPoints}
              avakTotal={avakTotal}
            />
          )}

          {/* ======================================================
              CHARTS
          ====================================================== */}

          {activeTab === "charts" && (
            <ChartsTab
              chart={chart}
              selectedChart={selectedChart}
              setSelectedChart={setSelectedChart}
              chartStyle={chartStyle}
              getChartImage={getChartImage}
            />
          )}

          {/* ======================================================
              DASHA
          ====================================================== */}

          {activeTab === "dasha" && (
            <DashaTab
              mahadasha={mahadasha}
              mahadashaNames={mahadashaNames}
              mahadashaOrder={mahadashaOrder}
              dashaPredictions={dashaPredictions}
              selectedDasha={selectedDasha}
              setSelectedDasha={setSelectedDasha}
              dashaSystem={dashaSystem}
              setDashaSystem={setDashaSystem}
              yoginiRows={yoginiRows}
              getChartImage={getChartImage}
            />
          )}

          {/* ======================================================
              FREE REPORT
          ====================================================== */}

          {activeTab === "free-report" && (
            <FreeReportTab
              details={details}
              planetPredictions={planetPredictions}
              houseLordPredictions={houseLordPredictions}
              dashaPredictions={dashaPredictions}
              reportTab={reportTab}
              setReportTab={setReportTab}
            />
          )}

          {/* ======================================================
              PDF CTA
          ====================================================== */}

          <PdfReportCTA pdfUrl={pdfUrl} />

          {/* ======================================================
              ASTROLOGER CTA
          ====================================================== */}

          <AstrologerCTA router={router} />
        </div>
      </main>

      <Footer />
    </>
  );

  /*
  |--------------------------------------------------------------------------
  | Generate Chart URL
  |--------------------------------------------------------------------------
  */

  function getChartImage(div: string): string {
    return getKundliChartImageUrl(div, chart, birth, chartStyle);
  }
}

/*
|--------------------------------------------------------------------------
| TAB BUTTON
|--------------------------------------------------------------------------
*/

function TabButton({
  label,
  tab,
  activeTab,
  onClick,
}: {
  label: string;
  tab: KundaliTab;
  activeTab: KundaliTab;
  onClick: (tab: KundaliTab) => void;
}) {
  return (
    <button
      type="button"
      className={activeTab === tab ? "kundli-tab active" : "kundli-tab"}
      onClick={() => onClick(tab)}
    >
      {label}
    </button>
  );
}

/*
|--------------------------------------------------------------------------
| PDF CTA
|--------------------------------------------------------------------------
*/

function PdfReportCTA({ pdfUrl }: { pdfUrl: string }) {
  return (
    <section className="kundli-pdf-cta">
      <div className="pdf-icon">📄</div>

      <div className="pdf-content">
        <h3>Get your full Kundli as a PDF</h3>

        <p>
          Download your complete birth chart, planetary details, dashas and
          predictions.
        </p>
      </div>

      {pdfUrl ? (
        <a
          href={pdfUrl}
          target="_blank"
          rel="noopener noreferrer"
          className="btn btn-primary h-100"
        >
          View PDF Report ↓ 
        </a>
      ) : (
        <button type="button" disabled>
          PDF Not Available
        </button>
      )}
    </section>
  );
}

/*
|--------------------------------------------------------------------------
| Astrologer CTA
|--------------------------------------------------------------------------
*/

function AstrologerCTA({ router }: { router: ReturnType<typeof useRouter> }) {
  return (
    <section className="kundli-astrologer-cta">
      <div className="cta-icon">🔮</div>

      <h2>Want a deeper Kundli analysis?</h2>

      <p>
        To know more about what your kundli says about your love, career, health
        and finance, consult our expert astrologers.
      </p>

      <button type="button" className="btn btn-primary px-5" onClick={() => router.push("/chat-with-astrologer")}>
        Chat with Astrologer
      </button>
    </section>
  );
}