import { useState } from 'react'
import { Link } from 'react-router-dom'
import { useGroups } from '../context/GroupsContext.jsx'

function formatDate(iso) {
  try {
    return new Intl.DateTimeFormat('fr-FR', {
      dateStyle: 'short',
      timeStyle: 'short',
    }).format(new Date(iso))
  } catch {
    return iso || '—'
  }
}

export default function GroupesPage() {
  const { groups, groupTotalEuros, createGroup } = useGroups()
  const [name, setName] = useState('')
  const [err, setErr] = useState(null)
  const [ok, setOk] = useState(null)

  const sorted = [...groups].sort((a, b) =>
    String(b.createdAt).localeCompare(String(a.createdAt)),
  )

  function handleCreate(e) {
    e.preventDefault()
    setErr(null)
    setOk(null)
    try {
      const g = createGroup(name)
      setName('')
      setOk(`Groupe « ${g.name} » créé.`)
    } catch (ex) {
      setErr(ex?.message || 'Impossible de créer le groupe.')
    }
  }

  return (
    <div className="groupes-page">
      <h2 className="page-title">Commandes groupées</h2>
      <p className="page-lead">
        Équivalent local de <code>POST /api/groups/:id/orders</code> : tu crées
        un groupe, puis chacun ajoute sa « ligne » (montant + message). Stocké
        dans <code>librairie-groups-v1</code>.
      </p>

      {err ? (
        <p className="form-error" role="alert">
          {err}
        </p>
      ) : null}
      {ok ? <p className="form-notice">{ok}</p> : null}

      <section className="order-panel">
        <h3 className="panel-title">Nouveau groupe</h3>
        <form className="promo-form" onSubmit={handleCreate}>
          <label>
            Nom du groupe (ex. promo rentrée)
            <input
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="Lecteurs du 8e étage"
            />
          </label>
          <button type="submit" className="btn primary">
            Créer le groupe
          </button>
        </form>
      </section>

      <section className="order-panel">
        <h3 className="panel-title">Tes groupes</h3>
        {sorted.length === 0 ? (
          <p className="empty-state">Aucun groupe encore.</p>
        ) : (
          <ul className="reviews-list">
            {sorted.map((g) => (
              <li key={g.id} className="reviews-item">
                <p className="reviews-meta">{formatDate(g.createdAt)}</p>
                <p className="reviews-text">
                  <Link to={`/groupes/${g.id}`}>{g.name}</Link>
                  {' · '}
                  Pool actuel ~{' '}
                  <strong>{groupTotalEuros(g.id).toFixed(2)} €</strong>
                </p>
              </li>
            ))}
          </ul>
        )}
      </section>
    </div>
  )
}