"use client";

import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { useToast } from "@/components/ui/use-toast";
import { useParams, useRouter } from "next/navigation";

export default function EditMissionPage() {
  const [loading, setLoading] = useState(true);
  const { toast } = useToast();
  const params = useParams();
  const router = useRouter();
  const missionId = params.missionId as string;

  useEffect(() => {
    toast({
      title: "Fonctionnalité en développement",
      description: "L'édition de mission sera bientôt disponible.",
      variant: "default",
    });
    
    setLoading(false);
  }, [toast]);

  return (
    <div className="bg-gray-50 min-h-screen p-6">
      <div className="bg-white rounded-lg shadow-sm border border-gray-100 mb-6 p-6">
        <h1 className="text-2xl font-bold text-gray-900 mb-6">Modifier la mission</h1>
        
        {loading ? (
          <div className="flex justify-center my-12">
            <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-600"></div>
          </div>
        ) : (
          <div className="space-y-6">
            <p className="text-gray-500">
              La fonctionnalité d'édition de mission est en cours de développement et sera disponible prochainement.
            </p>
            
            <div className="flex gap-4">
              <Button
                onClick={() => router.push(`/missions/${missionId}`)}
                variant="outline"
              >
                Retour à la mission
              </Button>
              
              <Button
                onClick={() => router.push("/missions")}
              >
                Voir toutes les missions
              </Button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}