"use client";

import { useEffect, useState } from "react";

import { searchPlaces, getPlaceDetails } from "@/app/lib/places";
import { generateKundali, KundaliRequest } from "@/app/lib/kundali";
import { ChartStyle } from "@/app/components/kundli/kundliTypes";
import {
  buildKPColumns,
  buildKPPlanetRows,
  buildPlanetRows,
  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 "@/app/free-kundli/[id]/kundli-detail.css";

export interface KundliModalBirthDetails {
  name?: string;
  gender?: string;
  birthDate?: string;
  birthTime?: string;
  birthPlace?: string;
}

interface Props {
  show: boolean;
  onClose: () => void;
  birthDetails: KundliModalBirthDetails;
}

type Status = "idle" | "resolving" | "generating" | "ready" | "error";

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

const TABS: [KundaliTab, string][] = [
  ["basic", "Basic"],
  ["kundli", "Kundli"],
  ["kp", "KP"],
  ["ashtakvarga", "Ashtakvarga"],
  ["charts", "Charts"],
  ["dasha", "Dasha"],
  ["free-report", "Free Report"],
];

// Uses the astrologer's own astrologerToken against POST
// /user/kundali/add — per explicit direction, confirmed this endpoint
// accepts it even though it's namespaced under /user (the astrologer
// app has no end-user session of its own). Renders through the exact
// same tab components as /free-kundli/[id] (extracted to
// app/components/kundli/ specifically for this reuse), so this is the
// real, full Kundli — not a cut-down version.
export default function KundliModal({ show, onClose, birthDetails }: Props) {
  const [status, setStatus] = useState<Status>("idle");
  const [errorMessage, setErrorMessage] = useState("");
  const [rawResponse, setRawResponse] = useState<any>(null);
  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");

  const { name, gender, birthDate, birthTime, birthPlace } = birthDetails;
  const hasEnoughDetails = !!(birthDate && birthTime && birthPlace);

  useEffect(() => {
    if (!show) return;

    setActiveTab("basic");
    setChartStyle("north");
    setSelectedChart("D1");
    setSelectedDasha(0);
    setDashaSystem("vimshottari");
    setReportTab("General");

    if (!hasEnoughDetails) {
      setStatus("error");
      setErrorMessage(
        "Not enough birth details were shared for this consultation to draw a kundli yet.",
      );
      return;
    }

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

    if (!astrologerToken) {
      setStatus("error");
      setErrorMessage("Your astrologer session has expired — please sign in again.");
      return;
    }

    let cancelled = false;
    setStatus("resolving");
    setErrorMessage("");

    (async () => {
      try {
        const predictions = await searchPlaces(birthPlace!);
        const match = predictions[0];

        if (!match) {
          if (!cancelled) {
            setStatus("error");
            setErrorMessage(`Couldn't resolve "${birthPlace}" to a real location.`);
          }
          return;
        }

        const place = await getPlaceDetails(match.placeId);

        if (cancelled) return;

        if (!place) {
          setStatus("error");
          setErrorMessage(`Couldn't resolve "${birthPlace}" to a real location.`);
          return;
        }

        setStatus("generating");

        const payload: KundaliRequest = {
          amount: 50,
          is_match: false,
          kundali: [
            {
              id: 0,
              lang: "en",
              name: name || "Client",
              gender: gender || "",
              birthDate: birthDate!,
              birthTime: birthTime!,
              birthPlace: place.label,
              latitude: place.latitude,
              longitude: place.longitude,
              timezone: place.timezone,
              pdf_type: "small",
              match_type: "north",
              forMatch: false,
            },
          ],
        };

        const response = await generateKundali(payload, astrologerToken);

        if (cancelled) return;

        setRawResponse(response);
        setStatus("ready");
      } catch (error: any) {
        console.error("Kundli modal error:", error);
        if (!cancelled) {
          setStatus("error");
          setErrorMessage(
            error?.message === "AUTH_REQUIRED"
              ? "Your astrologer session has expired — please sign in again."
              : error?.message || "Unable to generate the kundli right now.",
          );
        }
      }
    })();

    return () => {
      cancelled = true;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [show]);

  if (!show) return null;

  // Same extraction chain /free-kundli/[id] uses, fed from this
  // consultation's freshly-generated response instead of a
  // localStorage-saved record.
  const apiResponse = rawResponse ? getApiResponse({ response: rawResponse } as any) : {};
  const complete = getCompleteDetails(apiResponse);
  const record = getRecord(apiResponse);
  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 || {};

  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
    : [];
  const yoginiRows = getYoginiRows(dasha);

  const planetDetails = chart?.planet_details || {};
  const planetRows = buildPlanetRows(planetDetails);
  const kpPlanetRows = buildKPPlanetRows(chart?.kp?.kp_planets ?? chart?.kp_planets);
  const kpCusps = buildKPColumns(chart);

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

  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 : [];

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

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

  const displayName = birth?.name || complete?.name || record?.name || name || "Client";

  return (
    <>
      <div className="modal-backdrop fade show" onClick={onClose} />

      <div className="modal fade show d-block" tabIndex={-1} role="dialog" onClick={onClose}>
        <div
          className="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl"
          onClick={(e) => e.stopPropagation()}
        >
          <div className="modal-content kundli-modal-surface border-0">
            <div className="modal-header bg-warning border-0">
              <h5 className="modal-title w-100 text-center fw-bold">🔯 Kundli</h5>
              <button
                type="button"
                className="btn-close position-absolute"
                style={{ top: 16, right: 16 }}
                aria-label="Close"
                onClick={onClose}
              />
            </div>

            <div className="modal-body p-0">
              {(status === "resolving" || status === "generating") && (
                <p className="text-center terms-text-color text-white mb-0 py-5">
                  {status === "resolving" ? "Locating the birth place..." : "Drawing the chart..."}
                </p>
              )}

              {status === "error" && (
                <p className="text-center terms-text-color text-white mb-0 py-5">
                  {errorMessage}
                </p>
              )}

              {status === "ready" && (
                <div className="kundli-detail-page kundli-modal-content">
                  <div className="kundli-detail-container">
                    <section className="kundli-profile-header">
                      <div className="kundli-header-top">
                        <div className="kundli-header-title">
                          <h1>{displayName}&apos;s Kundli</h1>
                          <p>
                            {birth?.birthDate || record?.birthDate || birthDate}
                            {" • "}
                            {birth?.birthTime || record?.birthTime || birthTime}
                            {" • "}
                            {birth?.birthPlace || record?.birthPlace || birthPlace}
                          </p>
                        </div>
                      </div>
                    </section>

                    <nav className="kundli-tabs">
                      {TABS.map(([tab, label]) => (
                        <button
                          key={tab}
                          type="button"
                          className={activeTab === tab ? "kundli-tab active" : "kundli-tab"}
                          onClick={() => setActiveTab(tab)}
                        >
                          {label}
                        </button>
                      ))}
                    </nav>

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

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

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

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

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

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

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