"use client"

import { Suspense } from "react"
import { useRouter, useSearchParams } from "next/navigation"

import BarreProgression from "@/app/composants/offres/creation/BarreProgression"
import FormulaireDescription from "@/app/composants/offres/creation/FormulaireDescription"
import AssistantIA from "@/app/composants/offres/creation/AssistantIA"

function ContenuEtape2() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const metier = searchParams.get("metier") || ""

  const allerEtapeSuivante = () => {
    router.push(
      `/entreprise/offres/creation/etape-3?metier=${encodeURIComponent(metier)}`
    )
  }

  const allerEtapePrecedente = () => {
    router.push("/entreprise/offres/creation/etape-1")
  }

  return (
    <main className="flex flex-col bg-background-light dark:bg-background-dark min-h-screen">

      {/* Header */}
      <header className="h-16 flex items-center justify-between px-8 bg-white/90 dark:bg-slate-900/90 backdrop-blur-md border-b border-slate-200/60 dark:border-slate-700/50 shadow-sm">
        <div className="flex items-center gap-4">
          <button
            onClick={allerEtapePrecedente}
            className="p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition"
          >
            <span className="material-symbols-outlined text-slate-500">arrow_back</span>
          </button>
          <h2 className="text-lg font-bold">Créer une offre d&apos;emploi</h2>
          {metier && (
            <span className="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm font-semibold">
              {metier}
            </span>
          )}
        </div>

        <div className="flex items-center gap-4">
          <button className="relative p-2 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full transition-colors">
            <span className="material-symbols-outlined">notifications</span>
            <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full border-2 border-white dark:border-slate-900"></span>
          </button>
          <button className="flex items-center gap-2 px-3 py-1.5 bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-lg transition-colors text-sm font-semibold">
            Aide
            <span className="material-symbols-outlined text-sm">help</span>
          </button>
        </div>
      </header>

      <div className="px-8 py-6 max-w-5xl mx-auto w-full">

        <BarreProgression etape={2} />

        <div className="text-center mb-10">
          <h1 className="text-3xl font-bold mb-4">Description de l&apos;offre</h1>
          <p className="text-slate-500">Détaillez les missions et les attentes pour ce poste.</p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
          <div className="lg:col-span-2 space-y-6">
            <FormulaireDescription metier={metier} />
          </div>
          <div className="space-y-6">
            <AssistantIA metier={metier} />
          </div>
        </div>

        {/* Footer navigation */}
        <div className="flex justify-between pb-8">
          <button
            onClick={allerEtapePrecedente}
            className="px-6 py-3 border border-slate-200 dark:border-slate-700 rounded-lg font-semibold flex items-center gap-2 hover:bg-slate-50 dark:hover:bg-slate-800 transition"
          >
            <span className="material-symbols-outlined">arrow_back</span>
            Retour
          </button>

          <div className="flex items-center gap-4">
            <button className="text-slate-500 text-sm font-medium hover:underline">
              Enregistrer en brouillon
            </button>
            <button
              onClick={allerEtapeSuivante}
              className="px-10 py-3 bg-primary hover:bg-primary/90 text-white rounded-lg font-bold shadow-lg flex items-center gap-2 transition"
            >
              Suivant
              <span className="material-symbols-outlined">arrow_forward</span>
            </button>
          </div>
        </div>

      </div>
    </main>
  )
}

// Suspense est obligatoire avec useSearchParams dans Next.js
export default function PageEtape2() {
  return (
    <Suspense fallback={
      <div className="flex items-center justify-center min-h-screen text-slate-500">
        Chargement...
      </div>
    }>
      <ContenuEtape2 />
    </Suspense>
  )
}