"use client";

import { useState } from "react";

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

import PanchangSearchBar from "@/app/components/panchang/PanchangSearchBar";
import PanchangDetailsTable from "@/app/components/panchang/PanchangDetailsTable";
import PanchangRelatedPages from "@/app/components/panchang/PanchangRelatedPages";

import { DEFAULT_PANCHANG_LOCATION, getTodayDate, PanchangLocation } from "@/app/lib/panchang";

import { usePanchangData } from "@/app/lib/usePanchangData";

import { extractField, formatPanchangElement } from "@/app/lib/panchangParse";

import "@/app/panchang/panchang.css";

const VAAR_LIST: { day: string; sanskrit: string; planet: string; significance: string }[] = [
  { day: "Sunday", sanskrit: "Ravivaar", planet: "Sun", significance: "Vitality, authority, government and official matters." },
  { day: "Monday", sanskrit: "Somvaar", planet: "Moon", significance: "Emotions, family, travel and matters of the mind." },
  { day: "Tuesday", sanskrit: "Mangalvaar", planet: "Mars", significance: "Courage, competition, property and physical strength." },
  { day: "Wednesday", sanskrit: "Budhvaar", planet: "Mercury", significance: "Communication, learning, trade and business deals." },
  { day: "Thursday", sanskrit: "Guruvaar", planet: "Jupiter", significance: "Wisdom, education, spirituality and important ceremonies." },
  { day: "Friday", sanskrit: "Shukravaar", planet: "Venus", significance: "Relationships, luxury, art and financial matters." },
  { day: "Saturday", sanskrit: "Shanivaar", planet: "Saturn", significance: "Discipline, labour, and matters requiring patience." },
];

export default function VaarPage() {
  const [activeDate, setActiveDate] = useState(getTodayDate());

  const [activeLocation, setActiveLocation] = useState<PanchangLocation>(DEFAULT_PANCHANG_LOCATION);

  const [activeLocationLabel, setActiveLocationLabel] = useState(DEFAULT_PANCHANG_LOCATION.label);

  const { loading, error, derivedToday, dateLabel, samvatRows } = usePanchangData(
    activeDate,
    activeLocation,
    "/panchang/vaar",
  );

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

  const weekdayValue = extractField(derivedToday, ["weekday", "day"]);

  const weekdayName = formatPanchangElement(weekdayValue);

  const todayVaar = VAAR_LIST.find(
    (item) => item.day.toLowerCase() === String(weekdayName).toLowerCase(),
  );

  return (
    <>
      <Header />

      <main className="panchang-page">
        <div className="panchang-container">
          <div className="panchang-hero">
            <h1>
              <span className="panchang-hero-accent">Today&apos;s Vaar</span>
            </h1>

            <PanchangSearchBar
              date={activeDate}
              onDateChange={setActiveDate}
              location={activeLocation}
              locationLabel={activeLocationLabel}
              onLocationChange={(location, label) => {
                setActiveLocation(location);
                setActiveLocationLabel(label);
              }}
              buttonLabel="Get Vaar"
            />

            <div className="panchang-summary-row">
              <span className="panchang-location">📍 {activeLocationLabel}</span>

              <span className="panchang-date-label">{dateLabel}</span>
            </div>
          </div>

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

          {/* PRIMARY RESULT */}

          <div className="panchang-callout auspicious">
            <span className="panchang-callout-label">Today&apos;s Vaar</span>

            <span className="panchang-callout-value">
              {weekdayName}
              {todayVaar ? ` (${todayVaar.sanskrit})` : ""}
            </span>

            {todayVaar && (
              <p className="panchang-callout-note">
                Ruled by <strong>{todayVaar.planet}</strong> — {todayVaar.significance}
              </p>
            )}
          </div>

          {/* PANCHANG DETAILS */}

          <PanchangDetailsTable derivedToday={derivedToday} samvatRows={samvatRows} />

          {/* EDUCATIONAL CONTENT */}

          <section className="panchang-section-card panchang-edu-section">
            <h2>What Is Vaar and Why Does It Matter?</h2>

            <p>
              Vaar is simply the Sanskrit term for the day of the week — but in Vedic astrology
              each of the seven Vaars is ruled by a specific planet, and that ruling planet&apos;s
              nature is believed to colour the general energy of the day. This is why certain days
              are traditionally favoured for certain activities — Thursday (Guruvaar) for
              starting education or spiritual pursuits, Friday (Shukravaar) for matters of love
              and finance, and so on.
            </p>

            <p>
              Vaar is one of the five core elements of the Panchang, alongside Tithi, Nakshatra,
              Yoga, and Karana — together they form the basis for choosing an auspicious muhurat.
            </p>

            <h3>The Seven Vaars</h3>

            <div className="panchang-table-wrap">
              <table className="panchang-table">
                <thead>
                  <tr>
                    <th>Weekday</th>
                    <th>Sanskrit Name</th>
                    <th>Ruling Planet</th>
                    <th>Significance</th>
                  </tr>
                </thead>

                <tbody>
                  {VAAR_LIST.map((item) => (
                    <tr key={item.day}>
                      <td>
                        <strong>{item.day}</strong>
                      </td>
                      <td>{item.sanskrit}</td>
                      <td>{item.planet}</td>
                      <td>{item.significance}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </section>

          <PanchangRelatedPages current="/panchang/vaar" />
        </div>
      </main>

      <Footer />
    </>
  );
}