"use client";

import { getOneTours } from "@/pages/tours/lib/api";
import StepOne from "@/pages/tours/ui/StepOne";
import StepTwo from "@/pages/tours/ui/StepTwo";
import { useQuery } from "@tanstack/react-query";
import { Hotel, Plane } from "lucide-react";
import { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useParams } from "react-router-dom";

const CreateEditTour = () => {
  const { id } = useParams<{ id: string }>();
  const { t } = useTranslation();
  const isEditMode = useMemo(() => !!id, [id]);
  const [step, setStep] = useState(1);
  const { data } = useQuery({
    queryKey: ["tours_detail", id],
    queryFn: () => {
      return getOneTours({ id: Number(id) });
    },
    select(data) {
      return data.data;
    },
  });

  return (
    <div className="p-8 w-full mx-auto bg-gray-900">
      <h1 className="text-3xl font-bold mb-6 text-center">
        {isEditMode ? "Turni Tahrirlash" : "Yangi Tur Qo'shish"}
      </h1>

      <div className="flex justify-between items-center mb-8">
        <div
          className={`flex-1 text-center py-2 rounded-l-lg ${step === 1 ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground border"}`}
        >
          1. {t("Tur ma'lumotlari")} <Plane className="w-5 h-5 inline ml-2" />
        </div>
        <div
          className={`flex-1 text-center py-2 rounded-r-lg ${step === 2 ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground border"}`}
        >
          2. {t("Mehmonxona")} <Hotel className="w-5 h-5 inline ml-2" />
        </div>
      </div>
      {step === 1 && (
        <StepOne
          setStep={setStep}
          data={data}
          isEditMode={isEditMode}
          id={id}
        />
      )}
      {step === 2 && (
        <StepTwo
          data={data}
          isEditMode={isEditMode}
          step={step}
          setStep={setStep}
        />
      )}
    </div>
  );
};

export default CreateEditTour;
