"use client";

import { useCallback, useEffect, useState } from "react";
import {
  CalendarDays,
  ArrowLeftRight,
  Wallet,
  AlertCircle,
  CheckCircle,
  ArrowLeft,
  ArrowRight,
} from "lucide-react";
import { submitBookingDecision, previewBookingOptionPrice } from "@/services/refund.service";
import { getMountainRouteDetail } from "@/services/trip.service";
import { formatCurrency } from "@/lib/formatters/currency";
import type { BookingOption, BookingDecisionType, BookingOptionPricePreview, BookingOptions } from "@/types/refund";
import type { OpenTrip } from "@/types/trip";
import TargetScheduleCard from "./TargetScheduleCard";
import TripTransferPicker from "./TripTransferPicker";
import styles from "./BookingDecisionForm.module.css";

interface BookingDecisionFormProps {
  token: string;
  options: BookingOption[];
  trip: BookingOptions["trip"];
}

const ICONS: Record<BookingDecisionType, typeof CalendarDays> = {
  RESCHEDULE: CalendarDays,
  TRIP_TRANSFER: ArrowLeftRight,
  REFUND: Wallet,
};

export default function BookingDecisionForm({ token, options, trip }: BookingDecisionFormProps) {
  const [selected, setSelected] = useState<BookingDecisionType | null>(null);
  const [isPending, setIsPending] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);

  // ── RESCHEDULE: jadwal lain pada gunung & jalur yang sama ──────────────
  const [rescheduleSchedules, setRescheduleSchedules] = useState<OpenTrip[]>([]);
  const [loadingReschedule, setLoadingReschedule] = useState(false);
  const [rescheduleError, setRescheduleError] = useState<string | null>(null);

  // ── Target akhir (dari RESCHEDULE list ATAU dari TripTransferPicker) ───
  const [selectedSchedule, setSelectedSchedule] = useState<OpenTrip | null>(null);

  // ── Price preview untuk target yang dipilih ─────────────────────────────
  const [pricePreview, setPricePreview] = useState<BookingOptionPricePreview | null>(null);
  const [loadingPreview, setLoadingPreview] = useState(false);
  const [previewError, setPreviewError] = useState<string | null>(null);

  useEffect(() => {
    if (selected !== "RESCHEDULE" || !trip.route_id) return;
    let cancelled = false;
    setLoadingReschedule(true);
    setRescheduleError(null);
    getMountainRouteDetail(trip.route_id)
      .then((detail) => {
        if (cancelled) return;
        setRescheduleSchedules(detail.available_schedules.filter((s) => s.id !== trip.schedule_id));
      })
      .catch(() => {
        if (!cancelled) setRescheduleError("Gagal memuat daftar jadwal.");
      })
      .finally(() => {
        if (!cancelled) setLoadingReschedule(false);
      });
    return () => {
      cancelled = true;
    };
  }, [selected, trip.route_id, trip.schedule_id]);

  useEffect(() => {
    if (!selectedSchedule) {
      setPricePreview(null);
      return;
    }
    let cancelled = false;
    setLoadingPreview(true);
    setPreviewError(null);
    previewBookingOptionPrice(token, selectedSchedule.id)
      .then((preview) => {
        if (!cancelled) setPricePreview(preview);
      })
      .catch((err) => {
        if (!cancelled) {
          setPreviewError(err instanceof Error ? err.message : "Gagal menghitung selisih harga.");
        }
      })
      .finally(() => {
        if (!cancelled) setLoadingPreview(false);
      });
    return () => {
      cancelled = true;
    };
  }, [token, selectedSchedule]);

  const chooseDecision = useCallback((code: BookingDecisionType) => {
    setSelected(code);
    setSelectedSchedule(null);
    setPricePreview(null);
    setError(null);
  }, []);

  const handleSubmit = () => {
    if (!selected) {
      setError("Pilih salah satu opsi terlebih dahulu.");
      return;
    }
    if ((selected === "RESCHEDULE" || selected === "TRIP_TRANSFER") && !selectedSchedule) {
      setError("Pilih jadwal tujuan terlebih dahulu.");
      return;
    }
    setError(null);
    setIsPending(true);
    submitBookingDecision(token, selected, selectedSchedule?.id)
      .then(() => setSuccess(true))
      .catch((err) => {
        setError(err instanceof Error ? err.message : "Gagal mengirim keputusan. Coba lagi.");
      })
      .finally(() => setIsPending(false));
  };

  if (success) {
    return (
      <div className={styles.successState}>
        <CheckCircle size={32} className={styles.successIcon} aria-hidden />
        <p className={styles.successText}>
          Keputusan Anda berhasil dikirim. Tim kami akan meninjau permintaan Anda dan menghubungi
          Anda melalui WhatsApp{selected !== "REFUND" ? " setelah disetujui" : ""} untuk proses
          selanjutnya.
        </p>
      </div>
    );
  }

  return (
    <div className={styles.form}>
      {/* ── 3 Option Cards ───────────────────────────────────────────── */}
      <div className={styles.optionList}>
        {options.map((opt) => {
          const Icon = ICONS[opt.code] || CalendarDays;
          const isSelected = selected === opt.code;
          return (
            <button
              key={opt.code}
              type="button"
              onClick={() => chooseDecision(opt.code)}
              className={`${styles.option} ${isSelected ? styles.optionSelected : ""}`}
              id={`booking-option-${opt.code.toLowerCase()}`}
              aria-pressed={isSelected}
            >
              <div className={styles.optionIconWrap} aria-hidden="true">
                <Icon size={22} className={styles.optionIcon} />
              </div>
              <div className={styles.optionBody}>
                <span className={styles.optionTitle}>{opt.label}</span>
                <span className={styles.optionDesc}>{opt.description}</span>
              </div>
              <div className={styles.optionArrowWrap} aria-hidden="true">
                <ArrowRight size={18} className={styles.optionArrow} />
              </div>
            </button>
          );
        })}
      </div>

      {/* ── Dynamic Picker: RESCHEDULE ───────────────────────────────── */}
      {selected === "RESCHEDULE" && (
        <div className={styles.targetSection}>
          <h3 className={styles.targetHeading}>
            Pilih Tanggal Baru — {trip.mountain} via {trip.route}
          </h3>
          {loadingReschedule ? (
            <p className={styles.loadingText}>Memuat daftar jadwal...</p>
          ) : rescheduleError ? (
            <p className={styles.pickerErrorText}>{rescheduleError}</p>
          ) : rescheduleSchedules.length === 0 ? (
            <p className={styles.loadingText}>
              Belum ada jadwal lain yang tersedia untuk gunung dan jalur ini. Silakan pilih opsi
              lain atau hubungi tim kami.
            </p>
          ) : (
            <div className={styles.scheduleList}>
              {rescheduleSchedules.map((s) => (
                <TargetScheduleCard
                  key={s.id}
                  schedule={s}
                  selected={selectedSchedule?.id === s.id}
                  onSelect={() => setSelectedSchedule(s)}
                />
              ))}
            </div>
          )}
        </div>
      )}

      {/* ── Dynamic Picker: TRIP_TRANSFER ────────────────────────────── */}
      {selected === "TRIP_TRANSFER" && trip.schedule_id && (
        <div className={styles.targetSection}>
          <h3 className={styles.targetHeading}>Pilih Gunung, Jalur, dan Tanggal Tujuan</h3>
          <TripTransferPicker
            excludeScheduleId={trip.schedule_id}
            selectedScheduleId={selectedSchedule?.id ?? null}
            onSelectSchedule={setSelectedSchedule}
          />
        </div>
      )}

      {/* ── Target Confirmed & Price Difference Preview ──────────────── */}
      {selectedSchedule && (
        <div className={styles.confirmSection}>
          <div className={styles.confirmHeader}>
            <div>
              <span className={styles.confirmLabel}>Tujuan Dipilih</span>
              <p className={styles.confirmValue}>
                {selectedSchedule.mountain.name} via {selectedSchedule.route.name} —{" "}
                {selectedSchedule.formatted_date}
              </p>
            </div>
            <button
              type="button"
              className={styles.changeBtn}
              onClick={() => setSelectedSchedule(null)}
              id="booking-decision-change-target"
            >
              <ArrowLeft size={13} aria-hidden />
              Ganti
            </button>
          </div>

          {loadingPreview ? (
            <p className={styles.loadingText}>Menghitung selisih biaya...</p>
          ) : previewError ? (
            <p className={styles.pickerErrorText}>{previewError}</p>
          ) : pricePreview ? (
            <div
              className={`${styles.priceNotice} ${
                pricePreview.direction === "ADDITIONAL_PAYMENT"
                  ? styles.priceNoticeWarning
                  : pricePreview.direction === "REFUND"
                    ? styles.priceNoticeInfo
                    : styles.priceNoticeNeutral
              }`}
            >
              {pricePreview.direction === "ADDITIONAL_PAYMENT" && (
                <p>
                  Harga tujuan baru <strong>{formatCurrency(pricePreview.new_total)}</strong> —
                  Anda perlu membayar tambahan <strong>{pricePreview.formatted_difference}</strong>.
                  Invoice pembayaran tambahan akan dikirim setelah tim kami menyetujui permintaan
                  ini.
                </p>
              )}
              {pricePreview.direction === "REFUND" && (
                <p>
                  Harga tujuan baru <strong>{formatCurrency(pricePreview.new_total)}</strong> —
                  Anda berhak menerima refund sebesar{" "}
                  <strong>{pricePreview.formatted_difference}</strong>. Setelah disetujui tim
                  kami, form refund akan dikirim melalui WhatsApp dan email.
                </p>
              )}
              {pricePreview.direction === "NONE" && (
                <p>Tidak ada perbedaan biaya untuk perpindahan ini.</p>
              )}
            </div>
          ) : null}
        </div>
      )}

      {/* ── Error Message ────────────────────────────────────────────── */}
      {error && (
        <div className={styles.errorMsg} role="alert">
          <AlertCircle size={15} aria-hidden />
          <span>{error}</span>
        </div>
      )}

      {/* ── Submit CTA ───────────────────────────────────────────────── */}
      <button
        type="button"
        onClick={handleSubmit}
        disabled={
          isPending ||
          !selected ||
          ((selected === "RESCHEDULE" || selected === "TRIP_TRANSFER") && !selectedSchedule)
        }
        suppressHydrationWarning
        className={styles.submitBtn}
        id="booking-decision-submit"
      >
        <span>{isPending ? "Memproses..." : "Kirim Keputusan"}</span>
        {!isPending && <ArrowRight size={16} aria-hidden="true" />}
      </button>
    </div>
  );
}