"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 { formatMuhuratRange } from "@/app/lib/panchangParse";

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

const WEEKDAY_SLOTS: { day: string; slot: string }[] = [
  { day: "Monday", slot: "2nd slot of the day" },
  { day: "Tuesday", slot: "7th slot of the day" },
  { day: "Wednesday", slot: "5th slot of the day" },
  { day: "Thursday", slot: "6th slot of the day" },
  { day: "Friday", slot: "4th slot of the day" },
  { day: "Saturday", slot: "3rd slot of the day" },
  { day: "Sunday", slot: "8th (last) slot of the day" },
];

export default function RahuKaalPage() {
  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, muhuratRows, samvatRows } = usePanchangData(
    activeDate,
    activeLocation,
    "/panchang/rahu-kaal",
  );

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

  const rahuKaalRow = muhuratRows.find((row) => row.label === "Rahu Kaal");

  const abhijitMuhurta = derivedToday?.advanced_details?.abhijit_muhurta;

  return (
    <>
      <Header />

      <main className="panchang-page">
        <div className="panchang-container">
          <div className="panchang-hero">
            <h1>
              <span className="panchang-hero-accent">Rahu Kaal Today</span>
            </h1>

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

            <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">
            <span className="panchang-callout-label">Rahu Kaal</span>

            <span className="panchang-callout-value">
              {rahuKaalRow ? formatMuhuratRange(rahuKaalRow.value) : "Not available for this date"}
            </span>

            <p className="panchang-callout-note">
              Rahu Kaal is considered an inauspicious window — it&apos;s best to avoid starting new
              or important work during this period.
            </p>
          </div>

          {abhijitMuhurta && (
            <div className="panchang-callout auspicious">
              <span className="panchang-callout-label">Abhijit Muhurta (Auspicious)</span>

              <span className="panchang-callout-value">
                {formatMuhuratRange(abhijitMuhurta)}
              </span>

              <p className="panchang-callout-note">
                Abhijit Muhurta is one of the most auspicious windows of the day — a good time to
                begin important work, if it doesn&apos;t overlap with Rahu Kaal.
              </p>
            </div>
          )}

          {/* PANCHANG DETAILS */}

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

          {/* INAUSPICIOUS TIMINGS */}

          {muhuratRows.length > 0 && (
            <section className="panchang-section-card accent-red">
              <h2>
                Inauspicious Timings <span className="panchang-heading-sub">(Ashubha Muhurat)</span>
              </h2>

              <table className="panchang-kv-table panchang-muhurat-table">
                <tbody>
                  {muhuratRows.map((row) => (
                    <tr key={row.label}>
                      <td className="panchang-kv-label">{row.label}</td>
                      <td className="panchang-kv-value panchang-muhurat-range">
                        {formatMuhuratRange(row.value)}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </section>
          )}

          {/* EDUCATIONAL CONTENT */}

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

            <p>
              Rahu Kaal (also called Rahu Kalam) is a roughly 90-minute window that occurs once
              every day, ruled by the shadow planet Rahu. Vedic tradition treats it as a
              low-energy period best kept free of new beginnings — starting a journey, signing a
              contract, launching a business, or holding a wedding ceremony are all traditionally
              postponed until after it passes.
            </p>

            <p>
              It isn&apos;t considered dangerous so much as unproductive — a "pause" in the day
              where effort tends not to bear fruit as easily. Routine work, chores, and anything
              already in progress are generally unaffected.
            </p>

            <h3>How Is Rahu Kaal Calculated?</h3>

            <p>
              The period between sunrise and sunset is split into eight equal parts. Each weekday
              is assigned a fixed slot out of those eight — which is why Rahu Kaal falls at a
              different time every day, and shifts slightly with the seasons as day length
              changes.
            </p>

            <div className="panchang-table-wrap">
              <table className="panchang-table">
                <thead>
                  <tr>
                    <th>Weekday</th>
                    <th>Rahu Kaal Slot</th>
                  </tr>
                </thead>

                <tbody>
                  {WEEKDAY_SLOTS.map((row) => (
                    <tr key={row.day}>
                      <td>
                        <strong>{row.day}</strong>
                      </td>
                      <td>{row.slot}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            <h3>What to Avoid During Rahu Kaal</h3>

            <ul className="panchang-edu-list">
              <li>Starting a new job, business, or major project</li>
              <li>Signing contracts or important documents</li>
              <li>Beginning travel for an important purpose</li>
              <li>Wedding ceremonies and other auspicious rituals</li>
              <li>Buying property, vehicles, or other big-ticket purchases</li>
              <li>Any Griha Pravesh (housewarming) or naming ceremony</li>
            </ul>
          </section>

          {/* FAQ */}

          <section className="panchang-section-card">
            <h2>Frequently Asked Questions</h2>

            <div className="panchang-faq-item">
              <strong>Does Rahu Kaal occur every single day?</strong>

              <p>
                Yes — Rahu Kaal occurs once every day, at a different time depending on the
                weekday and your location&apos;s sunrise/sunset.
              </p>
            </div>

            <div className="panchang-faq-item">
              <strong>How can I check today&apos;s Rahu Kaal for my city?</strong>

              <p>
                Use the search bar above — pick your city and date, then tap "Get Rahu Kaal" to
                see the exact window for that location.
              </p>
            </div>

            <div className="panchang-faq-item">
              <strong>How long does Rahu Kaal usually last?</strong>

              <p>
                Around 90 minutes on an average day, since it&apos;s always one-eighth of the
                daylight period. It runs slightly longer in summer and shorter in winter.
              </p>
            </div>

            <div className="panchang-faq-item">
              <strong>Is it safe to travel during Rahu Kaal?</strong>

              <p>
                Routine, already-planned travel is generally fine. It&apos;s specifically starting
                something new — like the first leg of an important journey — that&apos;s
                traditionally avoided.
              </p>
            </div>
          </section>

          <PanchangRelatedPages current="/panchang/rahu-kaal" />
        </div>
      </main>

      <Footer />
    </>
  );
}