"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { MissionsAdminPanel } from "@/components/missions/missions-admin-panel";
import { Button } from "@/components/ui/button";
import { ArrowLeft, Home } from "lucide-react";

export default function EditMissionPage({ params }: { params: { missionId: string }}) {
  const router = useRouter();
  const { missionId } = params;
  const [isLoading, setIsLoading] = useState(true);
  
  // Check if the mission exists
  useEffect(() => {
    const checkMission = async () => {
      try {
        const response = await fetch(`/api/centrale/${missionId}`);
        if (!response.ok) {
          console.error('Mission not found, redirecting to list');
          router.push('/centrale');
        }
        setIsLoading(false);
      } catch (error) {
        console.error('Error checking mission:', error);
        router.push('/centrale');
      }
    };
    
    checkMission();
  }, [missionId, router]);
  
  if (isLoading) {
    return <div className="p-8 text-center">Loading...</div>;
  }
  
  return (
    <div className="flex flex-col h-full w-full bg-white">
      <div className="bg-white border-b border-gray-100 py-3 px-6 flex items-center justify-between">
        <div className="flex items-center space-x-4">
          <Button 
            variant="ghost" 
            size="sm" 
            onClick={() => router.push(`/centrale/${missionId}`)}
            className="text-gray-600 hover:text-gray-900"
          >
            <ArrowLeft className="h-4 w-4 mr-2" />
            Retour aux détails
          </Button>
          
          <Button 
            variant="ghost" 
            size="sm"
            onClick={() => router.push("/centrale")}
            className="text-gray-600 hover:text-gray-900"
          >
            <Home className="h-4 w-4 mr-2" />
            Liste des missions
          </Button>
        </div>
      </div>
      
      <div className="flex-1 overflow-auto bg-white">
        <MissionsAdminPanel missionId={missionId} />
      </div>
    </div>
  );
}