"use client";

import { useCallback, useEffect, useState } from "react";
import { Mountain as MountainIcon, Route as RouteIcon } from "lucide-react";
import { getMountains } from "@/services/mountain.service";
import { getMountainOpenTripRoutes, getMountainRouteDetail } from "@/services/trip.service";
import type { Mountain, OpenTrip, OpenTripRoute } from "@/types/trip";
import TargetScheduleCard from "./TargetScheduleCard";
import styles from "./TripTransferPicker.module.css";

type WizardStep = "MOUNTAIN" | "ROUTE" | "DATE";

interface TripTransferPickerProps {
  excludeScheduleId: string;
  selectedScheduleId: string | null;
  onSelectSchedule: (schedule: OpenTrip | null) => void;
}

export default function TripTransferPicker({
  excludeScheduleId,
  selectedScheduleId,
  onSelectSchedule,
}: TripTransferPickerProps) {
  const [step, setStep] = useState<WizardStep>("MOUNTAIN");
  const [pickerError, setPickerError] = useState<string | null>(null);

  const [mountains, setMountains] = useState<Mountain[]>([]);
  const [loadingMountains, setLoadingMountains] = useState(true);
  const [selectedMountain, setSelectedMountain] = useState<Mountain | null>(null);

  const [routes, setRoutes] = useState<OpenTripRoute[]>([]);
  const [loadingRoutes, setLoadingRoutes] = useState(false);
  const [selectedRoute, setSelectedRoute] = useState<OpenTripRoute | null>(null);

  const [schedules, setSchedules] = useState<OpenTrip[]>([]);
  const [loadingSchedules, setLoadingSchedules] = useState(false);

  useEffect(() => {
    let cancelled = false;
    setLoadingMountains(true);
    getMountains({ open_trip_only: true, per_page: 50 })
      .then((res) => {
        if (!cancelled) setMountains(res.items);
      })
      .catch(() => {
        if (!cancelled) setPickerError("Gagal memuat daftar gunung.");
      })
      .finally(() => {
        if (!cancelled) setLoadingMountains(false);
      });
    return () => {
      cancelled = true;
    };
  }, []);

  const chooseMountain = useCallback(
    (mountain: Mountain) => {
      setSelectedMountain(mountain);
      setSelectedRoute(null);
      setSchedules([]);
      onSelectSchedule(null);
      setStep("ROUTE");
      setLoadingRoutes(true);
      setPickerError(null);
      getMountainOpenTripRoutes(mountain.id)
        .then(setRoutes)
        .catch(() => setPickerError("Gagal memuat jalur pendakian."))
        .finally(() => setLoadingRoutes(false));
    },
    [onSelectSchedule]
  );

  const chooseRoute = useCallback(
    (route: OpenTripRoute) => {
      setSelectedRoute(route);
      onSelectSchedule(null);
      setStep("DATE");
      setLoadingSchedules(true);
      setPickerError(null);
      getMountainRouteDetail(route.id)
        .then((detail) => {
          setSchedules(detail.available_schedules.filter((s) => s.id !== excludeScheduleId));
        })
        .catch(() => setPickerError("Gagal memuat tanggal tersedia."))
        .finally(() => setLoadingSchedules(false));
    },
    [excludeScheduleId, onSelectSchedule]
  );

  return (
    <div className={styles.wizard}>
      <div className={styles.stepNav}>
        <button
          type="button"
          className={styles.stepCrumb}
          onClick={() => setStep("MOUNTAIN")}
          disabled={step === "MOUNTAIN"}
        >
          Gunung{selectedMountain ? `: ${selectedMountain.name}` : ""}
        </button>
        {selectedMountain && (
          <>
            <span className={styles.stepSep}>/</span>
            <button
              type="button"
              className={styles.stepCrumb}
              onClick={() => setStep("ROUTE")}
              disabled={step === "ROUTE"}
            >
              Jalur{selectedRoute ? `: ${selectedRoute.name}` : ""}
            </button>
          </>
        )}
        {selectedRoute && (
          <>
            <span className={styles.stepSep}>/</span>
            <span className={styles.stepCrumbCurrent}>Tanggal</span>
          </>
        )}
      </div>

      {pickerError && <p className={styles.pickerError}>{pickerError}</p>}

      {step === "MOUNTAIN" &&
        (loadingMountains ? (
          <p className={styles.loadingText}>Memuat daftar gunung...</p>
        ) : (
          <div className={styles.itemList}>
            {mountains.map((m) => (
              <button
                key={m.id}
                type="button"
                className={styles.pickItem}
                onClick={() => chooseMountain(m)}
                id={`transfer-pick-mountain-${m.id}`}
              >
                <MountainIcon size={16} className={styles.pickItemIcon} aria-hidden />
                <span className={styles.pickItemName}>{m.name}</span>
                <span className={styles.pickItemSub}>
                  {[m.regency, m.province].filter(Boolean).join(", ")}
                </span>
              </button>
            ))}
          </div>
        ))}

      {step === "ROUTE" &&
        (loadingRoutes ? (
          <p className={styles.loadingText}>Memuat jalur pendakian...</p>
        ) : (
          <div className={styles.itemList}>
            {routes.map((r) => (
              <button
                key={r.id}
                type="button"
                className={styles.pickItem}
                onClick={() => chooseRoute(r)}
                id={`transfer-pick-route-${r.id}`}
              >
                <RouteIcon size={16} className={styles.pickItemIcon} aria-hidden />
                <span className={styles.pickItemName}>{r.name}</span>
                <span className={styles.pickItemSub}>{r.open_schedule_count} jadwal tersedia</span>
              </button>
            ))}
          </div>
        ))}

      {step === "DATE" &&
        (loadingSchedules ? (
          <p className={styles.loadingText}>Memuat tanggal tersedia...</p>
        ) : schedules.length === 0 ? (
          <p className={styles.loadingText}>Belum ada tanggal tersedia untuk jalur ini.</p>
        ) : (
          <div className={styles.itemList}>
            {schedules.map((s) => (
              <TargetScheduleCard
                key={s.id}
                schedule={s}
                selected={selectedScheduleId === s.id}
                onSelect={() => onSelectSchedule(s)}
              />
            ))}
          </div>
        ))}
    </div>
  );
}