"use client";

import Container from "@/components/elements/Container";
import MultiStepForm from "@/components/projects/NewProject/MultiStepForm";
import { useProjectForm } from "@/contexts/ProjectFormContext";
import useAxios from "@/hooks/useAxios";
import { Project } from "@/types/types";
import React, { useEffect, useState } from "react";

interface IEditProps {
  params: Promise<{ id: string; username: string }>;
}

export default function EditProjectWrapper({ params }: IEditProps) {
  const { request } = useAxios();
  const { updateForm, setIsEditing } = useProjectForm(); // گرفتن تابع آپدیت فرم

  const resolvedParams = React.use(params);
  const { id } = resolvedParams;
  const [fetched, setFetched] = useState<boolean>(false);
  useEffect(() => {
    setIsEditing(true); // ✅ اعلام اینکه در حال ویرایش هستیم

    const fetchAd = async () => {
      if (!id) return;
      const response = await request<{ project: Project }>(
        "GET",
        `/projects/get/web/${id}`
      );

      if (response?.project) {
        const res = response.project;
        updateForm({
          stateId: String(res.province?.id) || "",
          cityId: String(res.city?.id) || "",
          description: res.description || "",
          selectedType: res.project_type || "",
          expertise: res.expertise || null,
          subExpertise: res?.sub_expertise || [],
          gender: res.gender || "",
          age: res.age || "",
          ageMin: res.age_min != null ? String(res.age_min) : "",
          ageMax: res.age_max != null ? String(res.age_max) : "",
          publicType: String(res.conversation_projects) || "",
          projTitle: res.title || "",
          projectTime: res.offer_time || "",
          offerPrice: String(res?.offer_price) || "",
          numberOfPerson: res.numberOfPerson || "",
          neighborhood: res.neighborhood || "",
          address: res.address || "",
          markerCoordinate:
            res.lng != null && res.lat != null
              ? [Number(res.lng), Number(res.lat)]
              : [],
          paymentMethod: res.payment_method || "",
          startDate: res.start_date || "",
          workHoursStart: res.work_hours_start || "",
          workHoursEnd: res.work_hours_end || "",
          collaborationType: res.collaboration_type || "",
          experience: res.experience || "",
          roles: (res.roles || []).map((role) => ({
            id: role._id,
            expertise: role.expertise,
            subExpertise: role.sub_expertise || [],
            numberOfPerson: String(role.number_of_person || 1),
            heightMin: role.height_min != null ? String(role.height_min) : "",
            heightMax: role.height_max != null ? String(role.height_max) : "",
            weightMin: role.weight_min != null ? String(role.weight_min) : "",
            weightMax: role.weight_max != null ? String(role.weight_max) : "",
            sizeMin: role.size_min != null ? String(role.size_min) : "",
            sizeMax: role.size_max != null ? String(role.size_max) : "",
            eyeColor: role.eye_color || "",
            hairColor: role.hair_color || "",
            portfolioRequired: Boolean(role.portfolio_required),
          })),
          _id: res._id || "",
        });
        setFetched(true);
      }
    };

    fetchAd();
  }, [id]);

  return (
    <Container>
      {fetched && <MultiStepForm />}
      <div></div>
    </Container>
  );
}
