"use client";
import { getDetailNews } from "@/pages/news/lib/api";
import StepOne from "@/pages/news/ui/StepOne";
import StepTwo from "@/pages/news/ui/StepTwo";
import { useQuery } from "@tanstack/react-query";

import { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useParams } from "react-router-dom";

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

  useEffect(() => {
    if (id) {
      refetch();
    }
  }, [id]);

  return (
    <div className="p-8 w-full mx-auto bg-gray-900 text-white rounded-2xl shadow-lg">
      <h1 className="text-3xl font-bold mb-6">
        {isEditMode ? t("Yangilikni tahrirlash") : t("Yangi yangilik 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("Yangilik sarlavhasi")}
        </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("Yangilik ma'lumotlari")}
        </div>
      </div>
      {step === 1 && (
        <StepOne
          isEditMode={isEditMode}
          setStep={setStep}
          data={data!}
          id={Number(id)}
        />
      )}
      {step === 2 && (
        <StepTwo key={id} data={data!} isEditMode={isEditMode} id={id!} />
      )}
    </div>
  );
};

export default AddNews;
