import React, { useState, useEffect } from 'react'
import { useApi } from '../api/client'
import Modal from '../components/Modal'

const ContactPage = () => {
  const api = useApi()
  const [entries, setEntries] = useState([])
  const [filtered, setFiltered] = useState([])
  const [agencies, setAgencies] = useState([])
  const [selectedAgency, setSelectedAgency] = useState('')
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
  const [modalOpen, setModalOpen] = useState(false)
  const [detailEntry, setDetailEntry] = useState(null)

  const fetchEntries = async () => {
    setLoading(true)
    setError(null)
    try {
      const res = await api.get('/formulaire')
      const list = res.data || []
      setEntries(list)
      setFiltered(list)

      // récupérer agences uniques
      const uniq = []
      list.forEach(e => {
        const name = e.agency?.name || 'Inconnue'
        const id = e.agency?._id || ''
        if (id && !uniq.find(u => u.id === id)) {
          uniq.push({ id, name })
        }
      })
      setAgencies(uniq)

    } catch (err) {
      console.error(err)
      setError('Impossible de charger les entrées de formulaire.')
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    fetchEntries()
  }, [])

  useEffect(() => {
    if (!selectedAgency || selectedAgency === 'all') {
      setFiltered(entries)
    } else {
      setFiltered(entries.filter(e => e.agency && e.agency._id === selectedAgency))
    }
  }, [selectedAgency, entries])

  const openDetail = async (id) => {
    try {
      const res = await api.get(`/formulaire/${id}`)
      setDetailEntry(res.data)
      setModalOpen(true)
    } catch (err) {
      console.error('Impossible de charger le détail', err)
      alert('Impossible de charger le détail.')
    }
  }

  const closeDetail = () => {
    setModalOpen(false)
    setDetailEntry(null)
  }

  const formatDate = (iso) => {
    if (!iso) return ''
    return new Date(iso).toLocaleString()
  }

  // ✅ helper pour message
  const getMessage = (entry) => {
    const w = entry.whiseData || {}
    const f = entry.fields || {}

    return (
      w.Message ||
      f.Message ||
      f.comment ||
      ''
    )
  }

  return (
    <div className="space-y-4">
      <h1 className="text-lg font-semibold text-slate-100">
        Entrées des formulaires WordPress
      </h1>

      <div className="flex items-center gap-2">
        <label>Filtrer par agence :</label>
        <select
          value={selectedAgency}
          onChange={e => setSelectedAgency(e.target.value)}
          className="rounded bg-slate-800 text-slate-100 px-2 py-1"
        >
          <option value="all">Toutes</option>
          {agencies.map(a => (
            <option key={a.id} value={a.id}>{a.name}</option>
          ))}
        </select>
      </div>

      {loading ? (
        <p>Chargement...</p>
      ) : error ? (
        <p className="text-red-400">{error}</p>
      ) : filtered.length === 0 ? (
        <p>Aucune entrée trouvée.</p>
      ) : (
        <div className="overflow-x-auto">
          <table className="min-w-full text-sm text-left text-slate-100">
            <thead>
              <tr>
                <th className="px-3 py-2">Date</th>
                <th className="px-3 py-2">Agence</th>
                <th className="px-3 py-2">Prénom</th>
                <th className="px-3 py-2">Nom</th>
                <th className="px-3 py-2">Email</th>
                <th className="px-3 py-2">Téléphone</th>
                <th className="px-3 py-2">Message</th>
                <th className="px-3 py-2"></th>
              </tr>
            </thead>

            <tbody>
              {filtered.map((entry) => {
                const w = entry.whiseData || {}
                const f = entry.fields || {}

                return (
                  <tr key={entry._id} className="border-t border-slate-800">
                    <td className="px-3 py-2">{formatDate(entry.createdAt)}</td>
                    <td className="px-3 py-2">{entry.agency?.name || '—'}</td>

                    {/* ✅ champs corrigés */}
                    <td className="px-3 py-2">{w.FirstName || f.firstname}</td>
                    <td className="px-3 py-2">{w.Name || f.lastname}</td>
                    <td className="px-3 py-2">{w.PrivateEmail || f.email}</td>
                    <td className="px-3 py-2">{w.PrivateMobile || f.phone}</td>

                    {/* ✅ message corrigé */}
                    <td className="px-3 py-2">{getMessage(entry)}</td>

                    <td className="px-3 py-2">
                      <button
                        onClick={() => openDetail(entry._id)}
                        className="text-xs px-2 py-1 bg-slate-800 rounded"
                      >
                        Voir
                      </button>
                    </td>
                  </tr>
                )
              })}
            </tbody>
          </table>
        </div>
      )}

      <Modal
        open={modalOpen}
        onClose={closeDetail}
        title={detailEntry ? `Entrée - ${detailEntry._id}` : 'Entrée'}
      >
        {detailEntry ? (
          <div className="space-y-3 text-sm text-slate-100">
            <div><strong>Date:</strong> {formatDate(detailEntry.createdAt)}</div>
            <div><strong>Agence:</strong> {detailEntry.agency?.name || '—'}</div>

            <div>
              <strong>Fields:</strong>
              <div className="rounded bg-slate-900 p-2 mt-1">
                {Object.keys(detailEntry.fields || {}).map(k => (
                  <div key={k} className="mb-1">
                    <strong className="mr-2">{k}:</strong> {detailEntry.fields[k]}
                  </div>
                ))}
              </div>
            </div>

            <div>
              <strong>Données Whise:</strong>
              <pre className="bg-slate-900 p-2 rounded text-xs mt-1 overflow-x-auto">
                {JSON.stringify(detailEntry.whiseData || {}, null, 2)}
              </pre>
            </div>
          </div>
        ) : (
          <p>Chargement...</p>
        )}
      </Modal>
    </div>
  )
}

export default ContactPage<br />
<b>Fatal error</b>:  Uncaught Error: Class 'Elementor_Form_Action_Custom' not found in /home/immowa/webapps/immo/wp-content/plugins/immo/element/elementor.php:32
Stack trace:
#0 /home/immowa/webapps/immo/wp-includes/class-wp-hook.php(341): {closure}()
#1 /home/immowa/webapps/immo/wp-includes/class-wp-hook.php(365): WP_Hook-&gt;apply_filters()
#2 /home/immowa/webapps/immo/wp-includes/plugin.php(522): WP_Hook-&gt;do_action()
#3 /home/immowa/webapps/immo/wp-content/plugins/elementor-pro/modules/forms/registrars/form-actions-registrar.php(84): do_action()
#4 /home/immowa/webapps/immo/wp-content/plugins/elementor-pro/modules/forms/registrars/form-actions-registrar.php(42): ElementorPro\Modules\Forms\Registrars\Form_Actions_Registrar-&gt;init()
#5 /home/immowa/webapps/immo/wp-content/plugins/elementor-pro/modules/forms/module.php(246): ElementorPro\Modules\Forms\Registrars\Form_Actions_Registrar-&gt;__construct()
#6 /home/immowa/webapps/immo/wp-content/plugins/elementor/core/base/module.php(86): ElementorPro\Modules\Forms\Module-&gt;__construct()
#7  in <b>/home/immowa/webapps/immo/wp-content/plugins/immo/element/elementor.php</b> on line <b>32</b><br />