"use client";

import { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import Link from "@/app/components/LocaleLink";

import DashboardSidebar from "@/app/components/astrologer/DashboardSidebar";
import {
  getAstrologerSettlementConsultations,
  getAstrologerConsultationMessages,
  AstrologerSettlementConsultation,
} from "@/app/lib/astrologer";

interface TranscriptMessage {
  id: number;
  senderType: string;
  body: string;
  sentAt: string;
}

interface RawConsultationMessage {
  id: number;
  sender_type: string;
  body: string;
  sent_at: string;
}

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 AstrologerConsultationDetailPage() {
  const router = useRouter();
  const params = useParams<{ id: string }>();
  const consultationId = Number(params?.id);

  const [consultation, setConsultation] = useState<AstrologerSettlementConsultation | null>(null);
  const [messages, setMessages] = useState<TranscriptMessage[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

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

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

    if (!consultationId) {
      setError("This consultation link is invalid.");
      setLoading(false);
      return;
    }

    let cancelled = false;

    (async () => {
      try {
        // No per-id settlement endpoint exists — the same "re-fetch the
        // list, find the row client-side" pattern already used for
        // wallet/settlement-history/[id] and wallet/transaction/[id].
        const listResponse = await getAstrologerSettlementConsultations(token, {
          status: "ALL",
          medium: "ALL",
          page: 1,
          limit: 200,
        });

        if (cancelled) return;

        const match = (listResponse?.data?.items ?? []).find(
          (item: AstrologerSettlementConsultation) => item.consultationId === consultationId,
        );

        if (!match) {
          setError("Consultation not found.");
          setLoading(false);
          return;
        }

        setConsultation(match);

        // Read-only transcript — best-effort, empty for AUDIO or if the
        // call fails, since the consultation summary above is the
        // primary content of this page.
        try {
          const messagesResponse = await getAstrologerConsultationMessages(consultationId, token);

          if (!cancelled && messagesResponse?.success) {
            const items: RawConsultationMessage[] = messagesResponse?.data?.items ?? [];
            setMessages(
              items.map((m) => ({
                id: m.id,
                senderType: m.sender_type,
                body: m.body,
                sentAt: m.sent_at,
              })),
            );
          }
        } catch (messagesError) {
          console.error("Consultation messages error:", messagesError);
        }

        setLoading(false);
      } catch (err) {
        console.error("Consultation detail error:", err);
        if (!cancelled) {
          setError("Unable to load consultation details.");
          setLoading(false);
        }
      }
    })();

    return () => {
      cancelled = true;
    };
  }, [consultationId, router]);

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

      <main className="astrologer-consultation-detail-main">
        <div className="cons-breadcrumb">
          <Link href="/astrologer/consultations">Consultations</Link>
          <span className="cons-breadcrumb-chevron">›</span>
          <strong>{consultation?.consultationNo || "Details"}</strong>
        </div>

        {loading ? (
          <p className="cons-loading">Loading consultation...</p>
        ) : error || !consultation ? (
          <div className="astrologer-panel card-bg-primary cons-empty-card">
            <p className="mb-0">{error || "Consultation not found."}</p>
          </div>
        ) : (
          <>
            <header className="cons-detail-header">
              <div>
                <h1>{consultation.consultationNo}</h1>
                <p>{consultation.consultationDate}</p>
              </div>
              <span className={`cons-status ${statusClass(consultation.settlementStatus)}`}>
                {consultation.statusLabel}
              </span>
            </header>

            <section className="astrologer-panel card-bg-primary cons-detail-grid">
              <div>
                <span>Medium</span>
                <strong>{consultation.medium === "AUDIO" ? "📞 Call" : "💬 Chat"}</strong>
              </div>
              <div>
                <span>Duration</span>
                <strong>{consultation.duration}</strong>
              </div>
              <div>
                <span>Billed Minutes</span>
                <strong>{consultation.billedMinutes}</strong>
              </div>
              <div>
                <span>Rate</span>
                <strong>₹{consultation.ratePerMinute}/min</strong>
              </div>
              <div>
                <span>Gross Amount</span>
                <strong>{formatMoney(consultation.grossAmount)}</strong>
              </div>
              <div>
                <span>Platform Fee</span>
                <strong>{formatMoney(consultation.platformFee)}</strong>
              </div>
              <div>
                <span>Your Earning</span>
                <strong className="cons-earning-value">
                  {formatMoney(consultation.astrologerEarning)}
                </strong>
              </div>
              {consultation.isFreeChat && (
                <div>
                  <span>Free Minutes</span>
                  <strong>{consultation.freeMinutes ?? 0}</strong>
                </div>
              )}
            </section>

            {consultation.medium === "CHAT" && (
              <section className="astrologer-panel card-bg-primary consult-messages-panel cons-transcript-panel">
                <h5 className="cons-transcript-title">Chat Transcript</h5>

                {messages.length === 0 ? (
                  <p className="terms-text-color small mb-0 text-center">No messages available.</p>
                ) : (
                  messages.map((m) => {
                    const mine = m.senderType === "ASTROLOGER";
                    return (
                      <div key={m.id} className={`consult-msg-row ${mine ? "mine" : ""}`}>
                        {!mine && <div className="consult-msg-avatar">U</div>}
                        <div className="consult-msg-bubble">
                          {m.body}
                          <div className="consult-msg-time">{(m.sentAt || "").slice(11, 16)}</div>
                        </div>
                        {mine && (
                          <div className="consult-msg-avatar self">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                              <path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z" />
                            </svg>
                          </div>
                        )}
                      </div>
                    );
                  })
                )}
              </section>
            )}
          </>
        )}
      </main>

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

        .astrologer-consultation-detail-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: 18px;
        }

        .cons-breadcrumb :global(a) {
          color: #aaa29c;
        }

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

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

        .cons-loading {
          color: #b8b0aa;
        }

        .cons-empty-card {
          padding: 24px;
          text-align: center;
          color: #b8b0aa;
        }

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

        .cons-detail-header h1 {
          margin: 0;
          font-size: 25px;
          font-family: monospace;
        }

        .cons-detail-header p {
          margin: 5px 0 0;
          color: #b8b0aa;
          font-size: 14px;
        }

        .cons-status {
          display: inline-flex;
          align-items: center;
          height: 32px;
          padding: 0 13px;
          border-radius: 6px;
          font-size: 13px;
          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-detail-grid {
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: 18px;
          padding: 22px 24px;
          margin-bottom: 18px;
        }

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

        .cons-detail-grid strong {
          display: block;
          margin-top: 6px;
          font-size: 18px;
          color: #f6f1ed;
        }

        .cons-earning-value {
          color: #00dca6 !important;
        }

        .cons-transcript-panel {
          padding: 20px 22px;
        }

        .cons-transcript-title {
          margin: 0 0 14px;
          font-size: 16px;
        }

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

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

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

          .cons-detail-grid {
            grid-template-columns: 1fr;
          }
        }
      `}</style>
    </div>
  );
}