'use client';

import { useJobDraft } from './job-draft-context';
import {
  BriefcaseIcon,
  MapPinIcon,//import Hero from '@/components/hero';
  CurrencyEuroIcon,
  BuildingOfficeIcon,
  SparklesIcon,
  UserGroupIcon,
  GiftIcon,
  HeartIcon,
  ExclamationTriangleIcon,
  CheckCircleIcon
} from '@heroicons/react/24/outline';
import { useState, useEffect } from 'react';

// ========== CONSTANTES DE TAILLES ==========
const ICON_SIZES = {
  xs: 'w-3 h-3',
  sm: 'w-4 h-4',
  md: 'w-5 h-5',
  lg: 'w-6 h-6',
} as const;

export default function JobForm() {
  const { job, setJob, legalMinSalary, isSalaryCompliant } = useJobDraft();
  const [suggestions, setSuggestions] = useState([]);
  const [showSuggestions, setShowSuggestions] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');

  // Fonction pour rechercher des villes
  const searchCities = async (query) => {
    if (!query) {
      setSuggestions([]);
      return;
    }

    try {
      const response = await fetch(`https://geo.api.gouv.fr/communes?nom=${query}`);
      const data = await response.json();

      const citySuggestions = data.map(city => ({
        name: city.nom,
        code: city.code,
        department: city.departement?.nom,
        postalCodes: city.codesPostaux
      }));

      setSuggestions(citySuggestions);
    } catch (error) {
      console.error("Erreur lors de la recherche des villes:", error);
      setSuggestions([]);
    }//import Hero from '@/components/recruiter/hero';
  };

  // Effet pour rechercher quand le terme de recherche change
  useEffect(() => {
    const timer = setTimeout(() => {
      searchCities(searchTerm);
    }, 300);

    return () => clearTimeout(timer);
  }, [searchTerm]);

  // Sélection d'une suggestion
  const selectSuggestion = (suggestion) => {
    setJob({
      ...job,
      location: {
        ...job.location,
        city: suggestion.name,
        department: suggestion.department,
        postalCode: suggestion.postalCodes?.[0]
      }
    });
    setSearchTerm('');
    setShowSuggestions(false);
  };

  const addItem = (field: 'skills' | 'softSkills' | 'benefits' | 'seniorAdaptations' | 'constraints') => {
    const value = prompt(`Ajouter un élément à ${field}:`);
    if (value?.trim()) {
      setJob({ ...job, [field]: [...job[field], value.trim()] });
    }
  };

  const removeItem = (field: 'skills' | 'softSkills' | 'benefits' | 'seniorAdaptations' | 'constraints', index: number) => {
    setJob({ ...job, [field]: job[field].filter((_, i) => i !== index) });
  };

  return (
    <div className="space-y-4 sm:space-y-6">
      {/* ========== TYPE D'OFFRE (RESPONSIVE GRID) ========== */}
      <div className="rounded-lg sm:rounded-xl border p-4 sm:p-6 bg-white">
        <h3 className="font-semibold text-base sm:text-lg mb-3 sm:mb-4 flex items-center gap-2">
          <BriefcaseIcon className={`${ICON_SIZES.md} text-gray-600 flex-shrink-0`} />
          <span>Type d'offre</span>
        </h3>

        {/* Grid responsive : 1 colonne mobile, 2 colonnes desktop */}
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
          {/* ========== OFFRE STANDARD ========== */}
          <label
            className={`relative flex items-center gap-3 p-4 border-2 rounded-lg cursor-pointer transition-all ${
              job.offerType === 'standard'
                ? 'border-blue-500 bg-blue-50 shadow-md'
                : 'border-gray-200 hover:border-blue-300 hover:bg-gray-50'
            }`}
          >
            <input
              type="radio"
              name="offerType"
              value="standard"
              checked={job.offerType === 'standard'}
              onChange={(e) => setJob({ ...job, offerType: e.target.value as 'standard' | 'premium' })}
              className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600 flex-shrink-0"
            />

            <div className="flex items-center gap-2 flex-1 min-w-0">
              <span className="w-3 h-3 rounded-full bg-blue-500 flex-shrink-0"></span>
              <span className="font-semibold text-sm sm:text-base text-gray-900">
                Standard
              </span>
            </div>

            {/* Checkmark si sélectionné */}
            {job.offerType === 'standard' && (
              <CheckCircleIcon className={`${ICON_SIZES.md} text-blue-600 flex-shrink-0 absolute top-2 right-2`} />
            )}
          </label>

          {/* ========== OFFRE PREMIUM ========== */}
          <label
            className={`relative flex items-center gap-3 p-4 border-2 rounded-lg cursor-pointer transition-all ${
              job.offerType === 'premium'
                ? 'border-amber-500 bg-amber-50 shadow-md'
                : 'border-gray-200 hover:border-amber-300 hover:bg-gray-50'
            }`}
          >
            <input
              type="radio"
              name="offerType"
              value="premium"
              checked={job.offerType === 'premium'}
              onChange={(e) => setJob({ ...job, offerType: e.target.value as 'standard' | 'premium' })}
              className="w-4 h-4 sm:w-5 sm:h-5 text-amber-600 flex-shrink-0"
            />

            <div className="flex items-center gap-2 flex-1 min-w-0">
              <span className="w-3 h-3 rounded-full bg-amber-500 flex-shrink-0"></span>
              <span className="font-semibold text-sm sm:text-base text-gray-900">
                Premium
              </span>
            </div>

            {/* Checkmark si sélectionné */}
            {job.offerType === 'premium' && (
              <CheckCircleIcon className={`${ICON_SIZES.md} text-amber-600 flex-shrink-0 absolute top-2 right-2`} />
            )}
          </label>
        </div>

        {/* ========== MESSAGE INFORMATIF (contexte Premium) ========== */}
        {job.offerType === 'premium' && (
          <div className="mt-4 p-3 sm:p-4 bg-gradient-to-r from-amber-50 to-orange-50 border border-amber-300 rounded-lg text-xs sm:text-sm text-amber-900 flex items-start gap-2 shadow-sm">
            <SparklesIcon className={`${ICON_SIZES.md} text-amber-600 flex-shrink-0 mt-0.5`} />
            <div>
              <strong className="block mb-1">✨ Offre Premium activée</strong>
              <p className="text-amber-800">
                Votre annonce sera mise en avant et bénéficiera d'une visibilité maximale auprès des candidats.
              </p>
            </div>
          </div>
        )}

        {job.offerType === 'standard' && (
          <div className="mt-4 p-3 sm:p-4 bg-blue-50 border border-blue-200 rounded-lg text-xs sm:text-sm text-blue-900 flex items-start gap-2">
            <CheckCircleIcon className={`${ICON_SIZES.md} text-blue-600 flex-shrink-0 mt-0.5`} />
            <div>
              <strong className="block mb-1">📢 Offre Standard</strong>
              <p className="text-blue-800">
                Votre annonce sera visible dans les résultats de recherche classiques.
              </p>
            </div>
          </div>
        )}
      </div>

      {/* ========== Compagnie========== */}
      <div className="rounded-lg sm:rounded-xl border p-4 sm:p-6 bg-white">
        <label className="block">
          <span className="font-semibold text-base sm:text-lg mb-2 flex items-center gap-2">
            <BuildingOfficeIcon className={`${ICON_SIZES.md} text-gray-600 flex-shrink-0`} />
            <span>Société *</span>
          </span>
          <input
            type="text"
            value={job.company}
            onChange={(e) => setJob({ ...job, company: e.target.value })}
            placeholder="Nom de votre société"
            className="mt-2 w-full px-3 sm:px-4 py-2 text-sm sm:text-base border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          />
        </label>
      </div>

      {/* ========== TITRE ========== */}
      <div className="rounded-lg sm:rounded-xl border p-4 sm:p-6 bg-white">
        <label className="block">
          <span className="font-semibold text-base sm:text-lg mb-2 flex items-center gap-2">
            <BriefcaseIcon className={`${ICON_SIZES.md} text-gray-600 flex-shrink-0`} />
            <span>Titre du poste *</span>
          </span>
          <input
            type="text"
            value={job.title}
            onChange={(e) => setJob({ ...job, title: e.target.value })}
            placeholder="Ex: Développeur Senior Full-Stack"
            className="mt-2 w-full px-3 sm:px-4 py-2 text-sm sm:text-base border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          />
        </label>
      </div>

      {/* ========== TYPE DE CONTRAT ========== */}
      <div className="rounded-lg sm:rounded-xl border p-4 sm:p-6 bg-white">
        <label className="block">
          <span className="font-semibold text-base sm:text-lg mb-2 flex items-center gap-2">
            <BriefcaseIcon className={`${ICON_SIZES.md} text-gray-600 flex-shrink-0`} />
            <span>Type de contrat *</span>
          </span>
          <select
            value={job.contractType || 'CDI'}
            onChange={(e) => setJob({...job, contractType: e.target.value})}
            className="mt-2 w-full px-3 sm:px-4 py-2 text-sm sm:text-base border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            required
          >
            <option value="CDI">CDI - Contrat à Durée Indéterminée</option>
            <option value="CDD">CDD - Contrat à Durée Déterminée</option>
            <option value="Intérim">Intérim</option>
            <option value="Alternance">Alternance/Apprentissage</option>
            <option value="Stage">Stage</option>
            <option value="Freelance">Freelance/Indépendant</option>
            <option value="Temporaire">Temporaire</option>
          </select>
        </label>
      </div>

      {/* ========== DESCRIPTION DU POSTE ========== */}
      <div className="rounded-lg sm:rounded-xl border p-4 sm:p-6 bg-white">
        <label className="block">
          <span className="font-semibold text-base sm:text-lg mb-2 flex items-center gap-2">
            <BriefcaseIcon className={`${ICON_SIZES.md} text-gray-600 flex-shrink-0`} />
            <span>Description du poste *</span>
          </span>
          <textarea
            value={job.description?.content?.[0]?.content?.[0]?.text || ''}
            onChange={(e) => setJob({
              ...job,
              description: {
                type: 'doc',
                content: [{ type: 'paragraph', content: [{ type: 'text', text: e.target.value }] }]
              }
            })}
            rows={8}
            placeholder="Décrivez en détail le poste, ses missions et responsabilités..."
            className="mt-2 w-full px-3 sm:px-4 py-2 text-sm sm:text-base border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-y"
          />
        </label>
      </div>

      {/* ========== MISSIONS ========== */}
      <div className="rounded-lg sm:rounded-xl border p-4 sm:p-6 bg-white">
        <label className="block">
          <span className="font-semibold text-base sm:text-lg mb-2 block">🎯 Missions principales *</span>
          <textarea
            value={job.missions?.content?.[0]?.content?.[0]?.text || ''}
            onChange={(e) => setJob({
              ...job,
              missions: {
                type: 'doc',
                content: [{ type: 'paragraph', content: [{ type: 'text', text: e.target.value }] }]
              }
            })}
            rows={6}
            placeholder="Listez les missions et responsabilités..."
            className="mt-2 w-full px-3 sm:px-4 py-2 text-sm sm:text-base border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-y"
          />
        </label>
      </div>

      {/* ========== PROFIL CANDIDAT ========== */}
      <div className="rounded-lg sm:rounded-xl border p-4 sm:p-6 bg-white">
        <label className="block">
          <span className="font-semibold text-base sm:text-lg mb-2 flex items-center gap-2">
            <UserGroupIcon className={`${ICON_SIZES.md} text-gray-600 flex-shrink-0`} />
            <span>Profil recherché *</span>
          </span>
          <textarea
            value={job.candidateProfile?.content?.[0]?.content?.[0]?.text || ''}
            onChange={(e) => setJob({
              ...job,
              candidateProfile: {
                type: 'doc',
                content: [{ type: 'paragraph', content: [{ type: 'text', text: e.target.value }] }]
              }
            })}
            rows={6}
            placeholder="Décrivez le profil idéal..."
            className="mt-2 w-full px-3 sm:px-4 py-2 text-sm sm:text-base border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-y"
          />
        </label>
      </div>

      {/* ========== RÉMUNÉRATION ========== */}
      <div className="rounded-lg sm:rounded-xl border p-4 sm:p-6 bg-white">
        <h3 className="font-semibold text-base sm:text-lg mb-3 sm:mb-4 flex items-center gap-2">
          <CurrencyEuroIcon className={`${ICON_SIZES.md} text-gray-600 flex-shrink-0`} />
          <span>Rémunération *</span>
        </h3>

        {/* Unité - Stack sur mobile */}
        <div className="mb-4 flex flex-col sm:flex-row gap-2 sm:gap-4">
          <label className="flex items-center gap-2">
            <input
              type="radio"
              checked={job.salaryUnit === 'monthly'}
              onChange={() => {
                // ✅ CONVERSION ANNUEL → MENSUEL
                const newMin = job.salaryUnit === 'annual' && job.salaryMin > 0
                  ? Math.round(job.salaryMin / 12)
                  : job.salaryMin;
                const newMax = job.salaryUnit === 'annual' && job.salaryMax > 0
                  ? Math.round(job.salaryMax / 12)
                  : job.salaryMax;

                setJob({
                  ...job,
                  salaryUnit: 'monthly',
                  salaryMin: newMin,
                  salaryMax: newMax
                });
              }}
              className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600 flex-shrink-0"
            />
            <span className="text-sm sm:text-base">Mensuel (brut)</span>
          </label>
          <label className="flex items-center gap-2">
            <input
              type="radio"
              checked={job.salaryUnit === 'annual'}
              onChange={() => {
                // ✅ CONVERSION MENSUEL → ANNUEL
                const newMin = job.salaryUnit === 'monthly' && job.salaryMin > 0
                  ? Math.round(job.salaryMin * 12)
                  : job.salaryMin;
                const newMax = job.salaryUnit === 'monthly' && job.salaryMax > 0
                  ? Math.round(job.salaryMax * 12)
                  : job.salaryMax;

                setJob({
                  ...job,
                  salaryUnit: 'annual',
                  salaryMin: newMin,
                  salaryMax: newMax
                });
              }}
              className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600 flex-shrink-0"
            />
            <span className="text-sm sm:text-base">Annuel (brut)</span>
          </label>
        </div>

        {/* Fourchette salariale */}
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
          <label className="block">
            <span className="text-sm text-gray-600 block mb-2">Minimum *</span>
            <div className="relative">
              <input
                type="number"
                value={job.salaryMin || ''}
                onChange={(e) => setJob({ ...job, salaryMin: Number(e.target.value) })}
                placeholder={job.salaryUnit === 'monthly' ? '2000' : '24000'}
                className="w-full px-3 sm:px-4 py-2 text-sm sm:text-base border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent pr-8"
              />
              <span className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm">€</span>
            </div>
          </label>

          <label className="block">
            <span className="text-sm text-gray-600 block mb-2">Maximum</span>
            <div className="relative">
              <input
                type="number"
                value={job.salaryMax || ''}
                onChange={(e) => setJob({ ...job, salaryMax: Number(e.target.value) })}
                placeholder={job.salaryUnit === 'monthly' ? '2500' : '30000'}
                className="w-full px-3 sm:px-4 py-2 text-sm sm:text-base border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent pr-8"
              />
              <span className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm">€</span>
            </div>
          </label>
        </div>

        {/* Alerte conformité */}
        {job.salaryMin > 0 && (
          <div className={`mt-4 p-3 rounded-lg flex items-start gap-2 text-sm ${
            isSalaryCompliant
              ? 'bg-green-50 text-green-800'
              : 'bg-red-50 text-red-800'
          }`}>
            {isSalaryCompliant ? (
              <>
                <CheckCircleIcon className="w-5 h-5 flex-shrink-0 mt-0.5" />
                <span>✅ Rémunération conforme au SMIC ({legalMinSalary.toLocaleString('fr-FR')} € brut/an)</span>
              </>
            ) : (
              <>
                <ExclamationTriangleIcon className="w-5 h-5 flex-shrink-0 mt-0.5" />
                <span>⚠️ Attention : Le salaire minimum doit être au moins égal au SMIC ({legalMinSalary.toLocaleString('fr-FR')} € brut/an)</span>
              </>
            )}
          </div>
        )}
      </div>

      {/* ========== LOCALISATION ========== */}
      <div className="rounded-lg sm:rounded-xl border p-4 sm:p-6 bg-white">
        <h3 className="font-semibold text-base sm:text-lg mb-3 sm:mb-4 flex items-center gap-2">
          <MapPinIcon className={`${ICON_SIZES.md} text-gray-600 flex-shrink-0`} />
          <span>Localisation *</span>
        </h3>

        <div className="space-y-4">
          <div className="relative">
            <label className="block">
              <span className="font-semibold text-base sm:text-lg mb-2 flex items-center gap-2">
                <MapPinIcon className={`${ICON_SIZES.md} text-gray-600 flex-shrink-0`} />
                <span>Ville *</span>
              </span>
              <input
                type="text"
                value={searchTerm || job.location.city}
                onChange={(e) => {
                  setSearchTerm(e.target.value);
                  setShowSuggestions(true);
                }}
                placeholder="Rechercher une ville..."
                className="mt-2 w-full px-3 sm:px-4 py-2 text-sm sm:text-base border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              />
              {showSuggestions && suggestions.length > 0 && (
                <ul className="absolute z-10 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-60 overflow-y-auto">
                  {suggestions.map((suggestion, index) => (
                    <li
                      key={index}
                      onClick={() => selectSuggestion(suggestion)}
                      className="px-4 py-2 hover:bg-gray-100 cursor-pointer flex justify-between"
                    >
                      <span>{suggestion.name}</span>
                      <span className="text-sm text-gray-500">{suggestion.department}</span>
                    </li>
                  ))}
                </ul>
              )}
            </label>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <input
              type="text"
              value={job.location.postalCode}
              onChange={(e) => setJob({ ...job, location: { ...job.location, postalCode: e.target.value } })}
              placeholder="Code postal *"
              className="px-3 sm:px-4 py-2 text-sm sm:text-base border rounded-lg focus:ring-2 focus:ring-blue-500"
            />
            <input
              type="text"
              value={job.location.department}
              onChange={(e) => setJob({ ...job, location: { ...job.location, department: e.target.value } })}
              placeholder="Département *"
              className="px-3 sm:px-4 py-2 text-sm sm:text-base border rounded-lg focus:ring-2 focus:ring-blue-500"
            />
          </div>

          <select
            value={job.location.remote}
            onChange={(e) => setJob({ ...job, location: { ...job.location, remote: e.target.value as any } })}
            className="w-full px-3 sm:px-4 py-2 text-sm sm:text-base border rounded-lg focus:ring-2 focus:ring-blue-500"
          >
            <option value="none">Présentiel uniquement</option>
            <option value="partial">Télétravail partiel</option>
            <option value="full">Télétravail complet</option>
          </select>
        </div>
      </div>

      {/* ========== COMPÉTENCES TECHNIQUES ========== */}
      <div className="rounded-lg sm:rounded-xl border p-4 sm:p-6 bg-white">
        <h3 className="font-semibold text-base sm:text-lg mb-3 sm:mb-4 flex items-center gap-2">
          <SparklesIcon className={`${ICON_SIZES.md} text-gray-600 flex-shrink-0`} />
          <span>Compétences techniques</span>
        </h3>
        <div className="flex flex-wrap gap-2 mb-3">
          {job.skills.map((skill, i) => (
            <span key={i} className="px-2 sm:px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-xs sm:text-sm flex items-center gap-1 sm:gap-2">
              <span className="truncate max-w-[150px] sm:max-w-none">{skill}</span>
              <button onClick={() => removeItem('skills', i)} className="hover:text-blue-600 flex-shrink-0">✕</button>
            </span>
          ))}
        </div>
        <button onClick={() => addItem('skills')} className="text-blue-600 hover:text-blue-700 text-xs sm:text-sm font-medium">
          + Ajouter une compétence
        </button>
      </div>

      {/* ========== COMPÉTENCES SOFT ========== */}
      <div className="rounded-lg sm:rounded-xl border p-4 sm:p-6 bg-white">
        <h3 className="font-semibold text-base sm:text-lg mb-3 sm:mb-4 flex items-center gap-2">
          <HeartIcon className={`${ICON_SIZES.md} text-gray-600 flex-shrink-0`} />
          <span>Compétences soft</span>
        </h3>
        <div className="flex flex-wrap gap-2 mb-3">
          {job.softSkills.map((skill, i) => (
            <span key={i} className="px-2 sm:px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-xs sm:text-sm flex items-center gap-1 sm:gap-2">
              <span className="truncate max-w-[150px] sm:max-w-none">{skill}</span>
              <button onClick={() => removeItem('softSkills', i)} className="hover:text-purple-600 flex-shrink-0">✕</button>
            </span>
          ))}
        </div>
        <button onClick={() => addItem('softSkills')} className="text-purple-600 hover:text-purple-700 text-xs sm:text-sm font-medium">
          + Ajouter une compétence soft
        </button>
      </div>

      {/* ========== AVANTAGES ========== */}
      <div className="rounded-lg sm:rounded-xl border p-4 sm:p-6 bg-white">
        <h3 className="font-semibold text-base sm:text-lg mb-3 sm:mb-4 flex items-center gap-2">
          <GiftIcon className={`${ICON_SIZES.md} text-gray-600 flex-shrink-0`} />
          <span>Avantages</span>
        </h3>
        <div className="flex flex-wrap gap-2 mb-3">
          {job.benefits.map((benefit, i) => (
            <span key={i} className="px-2 sm:px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs sm:text-sm flex items-center gap-1 sm:gap-2">
              <span className="truncate max-w-[150px] sm:max-w-none">{benefit}</span>
              <button onClick={() => removeItem('benefits', i)} className="hover:text-green-600 flex-shrink-0">✕</button>
            </span>
          ))}
        </div>
        <button onClick={() => addItem('benefits')} className="text-green-600 hover:text-green-700 text-xs sm:text-sm font-medium">
          + Ajouter un avantage
        </button>
      </div>

      {/* ========== ADAPTATIONS SENIORS ========== */}
      <div className="rounded-lg sm:rounded-xl border p-4 sm:p-6 bg-white">
        <h3 className="font-semibold text-base sm:text-lg mb-3 sm:mb-4 flex items-center gap-2">
          <UserGroupIcon className={`${ICON_SIZES.md} text-gray-600 flex-shrink-0`} />
          <span>Adaptations pour les seniors</span>
        </h3>
        <div className="flex flex-wrap gap-2 mb-3">
          {job.seniorAdaptations.map((adapt, i) => (
            <span key={i} className="px-2 sm:px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-xs sm:text-sm flex items-center gap-1 sm:gap-2">
              <span className="truncate max-w-[150px] sm:max-w-none">{adapt}</span>
              <button onClick={() => removeItem('seniorAdaptations', i)} className="hover:text-amber-600 flex-shrink-0">✕</button>
            </span>
          ))}
        </div>
        <button onClick={() => addItem('seniorAdaptations')} className="text-amber-600 hover:text-amber-700 text-xs sm:text-sm font-medium">
          + Ajouter une adaptation
        </button>
      </div>

      {/* ========== CONTRAINTES ========== */}
      <div className="rounded-lg sm:rounded-xl border p-4 sm:p-6 bg-white">
        <h3 className="font-semibold text-base sm:text-lg mb-3 sm:mb-4 flex items-center gap-2">
          <ExclamationTriangleIcon className={`${ICON_SIZES.md} text-gray-600 flex-shrink-0`} />
          <span>Contraintes du poste</span>
        </h3>
        <div className="flex flex-wrap gap-2 mb-3">
          {job.constraints.map((constraint, i) => (
            <span key={i} className="px-2 sm:px-3 py-1 bg-red-100 text-red-800 rounded-full text-xs sm:text-sm flex items-center gap-1 sm:gap-2">
              <span className="truncate max-w-[150px] sm:max-w-none">{constraint}</span>
              <button onClick={() => removeItem('constraints', i)} className="hover:text-red-600 flex-shrink-0">✕</button>
            </span>
          ))}
        </div>
        <button onClick={() => addItem('constraints')} className="text-red-600 hover:text-red-700 text-xs sm:text-sm font-medium">
          + Ajouter une contrainte
        </button>
      </div>
    </div>
  );
}