"use client";

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

import { useRouter } from "next/navigation";

import {
  generateKundali,
  getSavedKundalis,
  saveKundali,
  deleteSavedKundali,
  SavedKundali,
} from "@/app/lib/kundali";
import { PlaceDetails } from "@/app/lib/places";
import Header from "@/app/components/layout/Header";
import Footer from "@/app/components/layout/Footer";
import PlaceAutocomplete from "@/app/components/PlaceAutocomplete";
import { useLanguage } from "@/app/context/LanguageContext";
import { toContentLang } from "@/app/i18n/locales";
import "./free-kundli.css";

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

  const { locale } = useLanguage();

  const contentLocale = toContentLang(locale);

  /*
  |--------------------------------------------------------------------------
  | Form
  |--------------------------------------------------------------------------
  */

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

  const [gender, setGender] = useState("Male");

  const [birthDate, setBirthDate] = useState("");

  const [birthTime, setBirthTime] = useState("");

  const [birthPlace, setBirthPlace] = useState("");

  /*
  |--------------------------------------------------------------------------
  | Location
  |--------------------------------------------------------------------------
  */

  const [latitude, setLatitude] = useState(26.9124);

  const [longitude, setLongitude] = useState(75.7873);

  const [timezone, setTimezone] = useState(5.5);

  const handleBirthPlaceChange = (value: string) => {
    setBirthPlace(value);
  };

  const handleBirthPlaceSelect = (details: PlaceDetails) => {
    setLatitude(details.latitude);
    setLongitude(details.longitude);
    setTimezone(details.timezone);
  };

  /*
  |--------------------------------------------------------------------------
  | Saved Kundlis
  |--------------------------------------------------------------------------
  */

  const [savedKundalis, setSavedKundalis] = useState<SavedKundali[]>([]);

  const [search, setSearch] = useState("");

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

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

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

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

  /*
  |--------------------------------------------------------------------------
  | Load user + saved Kundlis
  |--------------------------------------------------------------------------
  */

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

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

      return;
    }

    const list = getSavedKundalis();

    setSavedKundalis(list);

    setPageLoading(false);
  }, [router]);

  /*
  |--------------------------------------------------------------------------
  | Search
  |--------------------------------------------------------------------------
  */

  const filteredKundalis = useMemo(() => {
    const keyword = search.trim().toLowerCase();

    if (!keyword) {
      return savedKundalis;
    }

    return savedKundalis.filter((item) =>
      item.name.toLowerCase().includes(keyword),
    );
  }, [savedKundalis, search]);

  /*
  |--------------------------------------------------------------------------
  | Generate Kundali
  |--------------------------------------------------------------------------
  */

  const handleGenerate = async () => {
    try {
      setError("");

      /*
        |--------------------------------------------------------------------------
        | Validation
        |--------------------------------------------------------------------------
        */

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

      if (!birthDate) {
        setError("Please select birth date.");
        return;
      }

      if (!birthTime) {
        setError("Please select birth time.");
        return;
      }

      if (!birthPlace.trim()) {
        setError("Please enter birth place.");
        return;
      }

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

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

        return;
      }

      setLoading(true);

      /*
        |--------------------------------------------------------------------------
        | API Payload
        |--------------------------------------------------------------------------
        */

      const payload = {
        amount: 50,

        is_match: false,

        kundali: [
          {
            id: 0,

            lang: contentLocale,

            name: name.trim(),

            gender,

            birthDate,

            birthTime,

            birthPlace: birthPlace.trim(),

            latitude,

            longitude,

            timezone,

            pdf_type: "small",

            match_type: "north",

            forMatch: false,
          },
        ],
      };

      console.log("Generate Kundali Payload:", payload);

      /*
        |--------------------------------------------------------------------------
        | API
        |--------------------------------------------------------------------------
        */

      const response = await generateKundali(payload);

      console.log("Generate Kundali Response:", response);

      /*
        |--------------------------------------------------------------------------
        | Get API Kundali ID
        |--------------------------------------------------------------------------
        */

      const apiRecord =
        response?.recordList?.[0] ||
        response?.complete_details?.[0] ||
        response?.kundali?.[0] ||
        response?.data?.[0];

      const apiId = apiRecord?.id;

      /*
        |--------------------------------------------------------------------------
        | Local ID
        |--------------------------------------------------------------------------
        |
        | This is used to identify the saved
        | record in browser storage.
        |
        */

      const localId = apiId ? String(apiId) : `${Date.now()}`;

      /*
        |--------------------------------------------------------------------------
        | Save Kundali
        |--------------------------------------------------------------------------
        */

      const saved: SavedKundali = {
        localId,

        apiId,

        name: name.trim(),

        gender,

        birthDate,

        birthTime,

        birthPlace: birthPlace.trim(),

        latitude,

        longitude,

        timezone,

        pdf_type: "small",

        match_type: "north",

        response,

        createdAt: new Date().toISOString(),
      };

      saveKundali(saved);

      /*
        |--------------------------------------------------------------------------
        | Update Saved Kundli UI
        |--------------------------------------------------------------------------
        */

      setSavedKundalis(getSavedKundalis());

      /*
        |--------------------------------------------------------------------------
        | Store currently selected Kundali
        |--------------------------------------------------------------------------
        */

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

      /*
        |--------------------------------------------------------------------------
        | Open detail page
        |--------------------------------------------------------------------------
        */

      router.push(`/free-kundli/${encodeURIComponent(localId)}`);
    } catch (error: any) {
      console.error("Generate Kundali Error:", error);

      if (error?.message === "AUTH_REQUIRED") {
        router.replace("/signin");

        return;
      }

      setError(
        error?.message || "Unable to generate Kundali. Please try again.",
      );
    } finally {
      setLoading(false);
    }
  };

  /*
  |--------------------------------------------------------------------------
  | Delete
  |--------------------------------------------------------------------------
  */

  const handleDelete = (event: React.MouseEvent, localId: string) => {
    event.stopPropagation();

    deleteSavedKundali(localId);

    setSavedKundalis(getSavedKundalis());
  };

  /*
  |--------------------------------------------------------------------------
  | Open saved Kundali
  |--------------------------------------------------------------------------
  */

  const openKundali = (item: SavedKundali) => {
    sessionStorage.setItem("current_kundali", JSON.stringify(item));

    router.push(`/free-kundli/${encodeURIComponent(item.localId)}`);
  };

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

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

  /*
  |--------------------------------------------------------------------------
  | UI
  |--------------------------------------------------------------------------
  */

  return (
    <>
      <Header />
      <main className="free-kundli-page">
        <div className="free-kundli-container">
          {/* =========================================================
            PAGE HEADER
        ========================================================= */}

          <div className="free-kundli-heading">
            <h1>Free Kundli Online By Date of Birth</h1>

            <p>Get an instant & accurate Janam Kundli</p>
          </div>

          {/* =========================================================
            INTRO
        ========================================================= */}

          <section className="kundli-intro-card">
            <p>
              AstroEye's free online kundli tool will help you generate a
              detailed Janam Kundli instantly. Based on the principles of Vedic
              Astrology, this tool provides accurate details of the planetary
              positions, houses, doshas, dashas, nakshatras, etc. in your birth
              chart. Our team of expert astrologers has tested it rigorously to
              deliver the best results. If you are curious about your future or
              want to work through past traumas, this free kundali online tool
              is the right choice for you.
            </p>
          </section>

          {/* =========================================================
            TWO COLUMNS
        ========================================================= */}

          <div className="kundli-create-grid">
            {/* =======================================================
              NEW KUNDLI
          ======================================================= */}

            <section className="new-kundli-card">
              <h2>New Kundli</h2>

              {/* NAME + GENDER */}

              <div className="kundli-row">
                <div className="kundli-field">
                  <label>
                    NAME <span>*</span>
                  </label>

                  <input
                    type="text"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    placeholder="Enter full name, e.g. Rahul Sharma"
                  />
                </div>

                <div className="kundli-field">
                  <label>
                    GENDER <span>*</span>
                  </label>

                  <div className="gender-buttons">
                    <button
                      type="button"
                      className={gender === "Male" ? "active" : ""}
                      onClick={() => setGender("Male")}
                    >
                      Male
                    </button>

                    <button
                      type="button"
                      className={gender === "Female" ? "active" : ""}
                      onClick={() => setGender("Female")}
                    >
                      Female
                    </button>
                  </div>
                </div>
              </div>

              {/* DATE + TIME */}

              <div className="kundli-row">
                <div className="kundli-field">
                  <label>
                    BIRTH DATE <span>*</span>
                  </label>

                  <input
                    type="date"
                    value={birthDate}
                    onChange={(e) => setBirthDate(e.target.value)}
                  />
                </div>

                <div className="kundli-field">
                  <label>
                    BIRTH TIME <span>*</span>
                  </label>

                  <input
                    type="time"
                    value={birthTime}
                    onChange={(e) => setBirthTime(e.target.value)}
                  />
                </div>
              </div>

              {/* BIRTH PLACE */}

              <div className="kundli-field">
                <PlaceAutocomplete
                  label="Birth Place *"
                  placeholder="Search city, e.g. New Delhi, India"
                  value={birthPlace}
                  onChange={handleBirthPlaceChange}
                  onSelect={handleBirthPlaceSelect}
                />
              </div>

              {/* ERROR */}

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

              {/* GENERATE */}

              <button
                type="button"
                className="btn btn-primary px-4"
                onClick={handleGenerate}
                disabled={loading}
              >
                {loading ? "Generating..." : "Generate Kundli"}

                
              </button>
            </section>

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

            <section className="saved-kundli-card">
              <h2>Saved Kundli</h2>

              {/* SEARCH */}

              <div className="kundli-search">
                <span>⌕</span>

                <input
                  type="text"
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                  placeholder="Search kundli by name"
                />
              </div>

              <h3>Recently Opened</h3>

              {/* EMPTY */}

              {filteredKundalis.length === 0 && (
                <div className="no-kundli">
                  <p>No saved kundli found</p>
                </div>
              )}

              {/* SAVED LIST */}

              {filteredKundalis.length > 0 && (
                <div className="saved-kundli-list">
                  {filteredKundalis.map((item) => (
                    <div
                      key={item.localId}
                      className="saved-kundli-item"
                      onClick={() => openKundali(item)}
                    >
                      <div className="kundli-avatar">
                        {item.name.charAt(0).toUpperCase()}
                      </div>

                      <div className="saved-kundli-info">
                        <strong>
                          {item.name}, {item.gender.charAt(0).toUpperCase()}
                        </strong>

                        <span>
                          {formatBirthDate(item.birthDate)}{" "}
                          {formatBirthTime(item.birthTime)}
                        </span>

                        <span>{item.birthPlace}</span>
                      </div>

                      <button
                        type="button"
                        className="delete-kundli-btn"
                        onClick={(event) => handleDelete(event, item.localId)}
                      >
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1024 1024">
                          <path d="M0 0h1024v1024H0z" fill="none" />
                          <path fill="currentColor" d="M360 184h-8c4.4 0 8-3.6 8-8zh304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32M731.3 840H292.7l-24.2-512h487z" />
                        </svg>

                      </button>
                    </div>
                  ))}
                </div>
              )}
            </section>
          </div>
        </div>
      </main>
      <Footer />
    </>
  );
}

/*
|--------------------------------------------------------------------------
| Date formatter
|--------------------------------------------------------------------------
*/

function formatBirthDate(date: string) {
  if (!date) {
    return "";
  }

  const parts = date.split("-");

  if (parts.length !== 3) {
    return date;
  }

  return `${parts[2]} ${getMonthName(Number(parts[1]))} ${parts[0]}`;
}

/*
|--------------------------------------------------------------------------
| Time formatter
|--------------------------------------------------------------------------
*/

function formatBirthTime(time: string) {
  if (!time) {
    return "";
  }

  const [hours, minutes] = time.split(":");

  let hour = Number(hours);

  const ampm = hour >= 12 ? "PM" : "AM";

  hour = hour % 12 || 12;

  return `${String(hour).padStart(2, "0")}:${minutes} ${ampm}`;
}

/*
|--------------------------------------------------------------------------
| Month
|--------------------------------------------------------------------------
*/

function getMonthName(month: number) {
  const months = [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sep",
    "Oct",
    "Nov",
    "Dec",
  ];

  return months[month - 1] || "";
}