'use client';
import { useRouter, useParams } from "next/navigation";
import { useEffect, useState } from "react";
import axiosInstancee from "@/utils/axios";
import { IAgency } from "@/shared/types/agency";
import AgencyEditForm from "@/shared/sections/agency/agency-edit-form";


export default function AgencyEditPage() {
  const router = useRouter();
  const { id } = useParams(); // Retrieve the 'id' from the dynamic route

  const [currentAgency, setCurrentAgency] = useState<IAgency | undefined>(undefined);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!id) return; // Ensure 'id' is available before making the request

    const fetchAgency = async () => {
      try {
        const response = await axiosInstancee.get(`/api/user/agency/${id}`);
        setCurrentAgency(response.data);
      } catch (error) {
        setError("Failed to load agency information.");
      } finally { 
        setLoading(false);
      }
    };

    fetchAgency();
  }, [id]); // Fetch data only when 'id' is defined

  if (loading) return <p>Loading...</p>;
  if (error) return <p>{error}</p>;

  return (
    <div>
      <h1>Edit Agency</h1>
      <AgencyEditForm currentAgency={currentAgency} /> 
    </div>
  );
}