"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import toast from "react-hot-toast";

import DashboardSidebar from "@/app/components/astrologer/DashboardSidebar";
import NotificationBell from "@/app/components/notifications/NotificationBell";
import {
  getAstrologerSettlementConsultations,
  AstrologerSettlementConsultationsData,
} from "@/app/lib/astrologer";

type StatusFilter = "ALL" | "PENDING" | "TO_BE_SETTLED" | "ON_HOLD" | "SETTLED";
type MediumFilter = "ALL" | "CHAT" | "AUDIO";

function formatMoney(value: number | string | null | undefined) {
  const amount = Number(value ?? 0);
  if (!Number.isFinite(amount)) return "₹0";
  return `₹${Math.round(amount).toLocaleString("en-IN")}`;
}

function statusClass(status: string) {
  const s = status.toUpperCase();
  if (s.includes("SETTLED") && !s.includes("TO_BE")) return "settled";
  if (s.includes("TO_BE")) return "to-be-settled";
  if (s.includes("HOLD")) return "on-hold";
  return "pending";
}

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

  const [astrologerToken, setAstrologerToken] = useState<string | null>(null);
  const [data, setData] = useState<AstrologerSettlementConsultationsData | null>(null);
  const [statusFilter, setStatusFilter] = useState<StatusFilter>("ALL");
  const [mediumFilter, setMediumFilter] = useState<MediumFilter>("ALL");
  const [loading, setLoading] = useState(true);

  const load = useCallback(
    async (token: string, status: StatusFilter, medium: MediumFilter) => {
      setLoading(true);

      try {
        const response = await getAstrologerSettlementConsultations(token, {
          status,
          medium,
          page: 1,
          limit: 50,
        });

        if (response?.success) {
          setData(response.data ?? null);
        } else {
          setData(null);
          toast.error(response?.message || "Unable to load consultations.");
        }
      } catch (error) {
        console.error("Settlement consultations error:", error);
        setData(null);
        toast.error("Unable to load consultations.");
      } finally {
        setLoading(false);
      }
    },
    [],
  );

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

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

    setAstrologerToken(token);
    void load(token, statusFilter, mediumFilter);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [router]);

  useEffect(() => {
    if (!astrologerToken) return;
    void load(astrologerToken, statusFilter, mediumFilter);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [statusFilter, mediumFilter, astrologerToken]);

  const items = useMemo(() => data?.items ?? [], [data]);

  return (
    <div className="astrologer-consultations-page">
      <DashboardSidebar active="Consultations" />

      <main className="astrologer-consultations-main">
        <div className="cons-breadcrumb">
          <span>Home</span>
          <span className="cons-breadcrumb-chevron">›</span>
          <strong>Consultations</strong>
        </div>

        <header className="cons-page-header">
          <div>
            <h1>Consultations</h1>
            <p>Every chat &amp; call consultation, and its settlement status</p>
          </div>

          <NotificationBell
            audience="astrologer"
            token={astrologerToken}
            notificationsHref="/astrologer/notifications"
            dark
          />
        </header>

        <section className="cons-stat-grid">
          <div className="cons-stat-card">
            <span>Pending Review</span>
            <strong>{loading ? "--" : formatMoney(data?.pendingAmount)}</strong>
          </div>
          <div className="cons-stat-card">
            <span>To Be Settled</span>
            <strong>{loading ? "--" : formatMoney(data?.toBeSettledAmount)}</strong>
          </div>
          <div className="cons-stat-card">
            <span>On Hold</span>
            <strong>{loading ? "--" : formatMoney(data?.onHoldAmount)}</strong>
          </div>
          <div className="cons-stat-card">
            <span>Settled</span>
            <strong>{loading ? "--" : formatMoney(data?.settledAmount)}</strong>
          </div>
          <div className="cons-stat-card highlight">
            <span>Total Earning</span>
            <strong>{loading ? "--" : formatMoney(data?.totalEarning)}</strong>
          </div>
        </section>

        <div className="cons-filter-row">
          <select
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value as StatusFilter)}
          >
            <option value="ALL">All Statuses</option>
            <option value="PENDING">Pending</option>
            <option value="TO_BE_SETTLED">To Be Settled</option>
            <option value="ON_HOLD">On Hold</option>
            <option value="SETTLED">Settled</option>
          </select>

          <select
            value={mediumFilter}
            onChange={(e) => setMediumFilter(e.target.value as MediumFilter)}
          >
            <option value="ALL">All Mediums</option>
            <option value="CHAT">Chat</option>
            <option value="AUDIO">Call</option>
          </select>
        </div>

        <section className="cons-table-card">
          <table className="cons-table">
            <thead>
              <tr>
                <th>Medium</th>
                <th>Consultation No.</th>
                <th>Date</th>
                <th>Duration</th>
                <th>Rate</th>
                <th>Gross</th>
                <th>Earning</th>
                <th>Status</th>
              </tr>
            </thead>

            <tbody>
              {loading ? (
                <tr>
                  <td colSpan={8} className="cons-table-state">
                    Loading consultations...
                  </td>
                </tr>
              ) : items.length === 0 ? (
                <tr>
                  <td colSpan={8} className="cons-table-state">
                    <strong>No consultations found</strong>
                    <span>Consultations will appear here once you have had one.</span>
                  </td>
                </tr>
              ) : (
                items.map((item) => (
                  <tr
                    key={item.consultationId}
                    className="cons-table-row"
                    role="link"
                    tabIndex={0}
                    aria-label="View consultation details"
                    onClick={() => router.push(`/astrologer/consultations/${item.consultationId}`)}
                    onKeyDown={(event) => {
                      if (event.key === "Enter" || event.key === " ") {
                        event.preventDefault();
                        router.push(`/astrologer/consultations/${item.consultationId}`);
                      }
                    }}
                  >
                    <td>
                      <span className={`cons-medium-icon ${item.medium === "AUDIO" ? "audio" : "chat"}`}>
                        {item.medium === "AUDIO" ? "📞" : "💬"}
                      </span>
                    </td>
                    <td className="cons-mono">{item.consultationNo}</td>
                    <td>{item.consultationDate}</td>
                    <td>{item.duration}</td>
                    <td>₹{item.ratePerMinute}/min</td>
                    <td>{formatMoney(item.grossAmount)}</td>
                    <td className="cons-earning">{formatMoney(item.astrologerEarning)}</td>
                    <td>
                      <span className={`cons-status ${statusClass(item.settlementStatus)}`}>
                        {item.statusLabel}
                      </span>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </section>
      </main>

      <style jsx>{`
        .astrologer-consultations-page {
          min-height: 100vh;
          display: flex;
        }

        .astrologer-consultations-main {
          flex: 1;
          min-width: 0;
          padding: 28px 32px;
        }

        .cons-breadcrumb {
          display: flex;
          align-items: center;
          gap: 9px;
          color: #aaa29c;
          font-size: 14px;
          margin-bottom: 8px;
        }

        .cons-breadcrumb strong {
          color: #ddd6d0;
          font-weight: 500;
        }

        .cons-breadcrumb-chevron {
          color: #736c67;
          font-size: 19px;
        }

        .cons-page-header {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 16px;
          flex-wrap: wrap;
        }

        .cons-page-header h1 {
          margin: 0;
          font-size: 29px;
          line-height: 1.2;
          font-weight: 700;
          letter-spacing: -0.5px;
        }

        .cons-page-header p {
          margin: 5px 0 17px;
          color: #b8b0aa;
          font-size: 15px;
        }

        .cons-stat-grid {
          display: grid;
          grid-template-columns: repeat(5, minmax(0, 1fr));
          gap: 10px;
          margin-bottom: 20px;
        }

        .cons-stat-card {
          min-height: 84px;
          padding: 15px 18px;
          box-sizing: border-box;
          border: 1px solid rgba(133, 112, 99, 0.32);
          background: linear-gradient(135deg, rgba(42, 33, 29, 0.95), rgba(29, 25, 23, 0.92));
          box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
          border-radius: 13px;
        }

        .cons-stat-card span {
          display: block;
          color: #b8b0aa;
          font-size: 13px;
        }

        .cons-stat-card strong {
          display: block;
          margin-top: 6px;
          font-size: 21px;
          color: #f6f1ed;
          font-weight: 700;
        }

        .cons-stat-card.highlight strong {
          color: #ffd800;
        }

        .cons-filter-row {
          display: flex;
          gap: 12px;
          margin-bottom: 17px;
        }

        .cons-filter-row select {
          height: 40px;
          padding: 0 12px;
          border-radius: 7px;
          border: 1px solid rgba(129, 109, 97, 0.4);
          background: rgba(35, 29, 26, 0.92);
          color: #eee8e3;
          font-size: 14px;
        }

        .cons-table-card {
          overflow: hidden;
          border: 1px solid rgba(133, 112, 99, 0.32);
          background: linear-gradient(135deg, rgba(42, 33, 29, 0.95), rgba(29, 25, 23, 0.92));
          box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
          border-radius: 13px;
        }

        .cons-table {
          width: 100%;
          border-collapse: collapse;
          min-width: 900px;
          font-size: 14px;
        }

        .cons-table th,
        .cons-table td {
          height: 49px;
          padding: 0 15px;
          text-align: left;
          border-bottom: 1px solid rgba(116, 98, 88, 0.2);
          white-space: nowrap;
        }

        .cons-table th {
          height: 42px;
          color: #b8afa8;
          background: rgba(16, 14, 13, 0.35);
          font-size: 13px;
          font-weight: 500;
        }

        .cons-table td {
          color: #ddd6d0;
        }

        .cons-table tbody tr:last-child td {
          border-bottom: 0;
        }

        .cons-mono {
          font-family: monospace;
          font-size: 12.5px;
          color: #cfc8c2;
        }

        .cons-medium-icon {
          display: inline-grid;
          place-items: center;
          width: 32px;
          height: 32px;
          border-radius: 8px;
        }

        .cons-medium-icon.chat {
          border: 1px solid rgba(0, 220, 166, 0.45);
          background: rgba(0, 155, 115, 0.1);
        }

        .cons-medium-icon.audio {
          border: 1px solid rgba(255, 216, 0, 0.4);
          background: rgba(150, 116, 0, 0.12);
        }

        .cons-earning {
          color: #00dca6 !important;
          font-weight: 700;
        }

        .cons-status {
          display: inline-flex;
          align-items: center;
          height: 30px;
          padding: 0 11px;
          border-radius: 6px;
          font-size: 12px;
          white-space: nowrap;
        }

        .cons-status.pending {
          color: #ffd800;
          border: 1px solid rgba(255, 216, 0, 0.4);
          background: rgba(150, 116, 0, 0.12);
        }

        .cons-status.to-be-settled {
          color: #6fb8ff;
          border: 1px solid rgba(111, 184, 255, 0.4);
          background: rgba(30, 90, 150, 0.15);
        }

        .cons-status.on-hold {
          color: #ff5c65;
          border: 1px solid rgba(255, 80, 90, 0.4);
          background: rgba(150, 30, 40, 0.12);
        }

        .cons-status.settled {
          color: #00dca6;
          border: 1px solid rgba(0, 220, 166, 0.38);
          background: rgba(0, 151, 112, 0.1);
        }

        .cons-table-row {
          cursor: pointer;
          transition: background 0.15s ease;
        }

        .cons-table-row:hover,
        .cons-table-row:focus-visible {
          background: rgba(255, 214, 0, 0.06);
        }

        .cons-table-row:focus-visible {
          outline: 1px solid rgba(255, 214, 0, 0.5);
          outline-offset: -1px;
        }

        .cons-table-state {
          height: 160px !important;
          text-align: center !important;
          color: #aaa19a !important;
        }

        .cons-table-state > strong,
        .cons-table-state > span {
          display: block;
          margin-top: 6px;
        }

        @media (max-width: 1100px) {
          .astrologer-consultations-main {
            width: calc(100% - 180px);
            margin-left: 180px;
            padding: 16px 18px 28px;
          }

          .cons-stat-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }

        @media (max-width: 760px) {
          .astrologer-consultations-main {
            width: 100%;
            margin-left: 0;
            padding: 16px 12px 24px;
          }

          .cons-stat-grid {
            grid-template-columns: 1fr;
          }

          .cons-table-card {
            overflow-x: auto;
          }
        }
      `}</style>
    </div>
  );
}