// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// pages/Inscrire.tsx — « Inscrire mon atelier » : auto-inscription des
// artisans/fabricants québécois. Le dépôt part en quarantaine de validation
// (statut pending) — rien n'est publié sans validation manuelle.
import { useEffect, useState } from 'react'
import {
  fetchFacets,
  setPageMeta,
  submitInscription,
  type InscriptionPayload,
} from '../api'

const FIELD: React.CSSProperties = { display: 'grid', gap: 4 }

export default function Inscrire() {
  const [cats, setCats] = useState<{ key: string; label: string }[]>([])
  const [form, setForm] = useState<InscriptionPayload>({
    name: '',
    metier: '',
    description: '',
    address: '',
    website: '',
    email: '',
    phone: '',
    entreprise_url: '',
  })
  const [socials, setSocials] = useState('')
  const [photos, setPhotos] = useState('')
  const [sending, setSending] = useState(false)
  const [done, setDone] = useState<string | null>(null)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    setPageMeta(
      'Inscrire mon atelier — Fabri-Ka',
      'Artisans et fabricants québécois : inscrivez votre atelier sur ' +
        'Fabri-Ka. Chaque fiche est validée manuellement avant publication.'
    )
    fetchFacets()
      .then((f) => setCats(f.all_categories ?? []))
      .catch(() => {})
  }, [])

  function set<K extends keyof InscriptionPayload>(
    key: K,
    value: InscriptionPayload[K]
  ) {
    setForm((f) => ({ ...f, [key]: value }))
  }

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault()
    setError(null)
    setSending(true)
    try {
      const clean = (s: string) =>
        s
          .split(/[\n,]/)
          .map((x) => x.trim())
          .filter(Boolean)
      const res = await submitInscription({
        ...form,
        socials: clean(socials),
        photos: clean(photos),
      })
      setDone(
        res.message ??
          'Merci ! Votre atelier est en attente de validation avant publication.'
      )
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Erreur inattendue')
    } finally {
      setSending(false)
    }
  }

  if (done) {
    return (
      <div className="page inscrire-page">
        <span className="kicker">Inscrire mon atelier</span>
        <h1>Demande reçue !</h1>
        <p className="contact-lede">{done}</p>
        <p className="contact-note">
          Notre équipe vérifie chaque atelier (fabrication québécoise,
          coordonnées, site) avant de publier la fiche. Vous serez joint aux
          coordonnées fournies si un détail manque.
        </p>
      </div>
    )
  }

  return (
    <div className="page inscrire-page">
      <span className="kicker">Artisans &amp; fabricants québécois</span>
      <h1>Inscrire mon atelier</h1>
      <p className="contact-lede">
        Vous fabriquez au Québec ? Inscrivez votre atelier : après une{' '}
        <b>validation manuelle</b> (fabrication québécoise et coordonnées
        vérifiables), votre fiche apparaîtra dans le répertoire — et si votre
        boutique en ligne expose un catalogue public, vos produits seront
        ajoutés automatiquement.
      </p>

      <form
        className="inscrire-form"
        onSubmit={onSubmit}
        style={{ display: 'grid', gap: 16, maxWidth: 640 }}
      >
        <label style={FIELD}>
          <b>Nom de l&rsquo;atelier / entreprise *</b>
          <input
            required
            minLength={2}
            maxLength={120}
            value={form.name}
            onChange={(e) => set('name', e.target.value)}
            placeholder="Ex. : Atelier Boréal"
          />
        </label>
        <label style={FIELD}>
          <b>Métier / spécialité *</b>
          <select
            required
            value={form.metier}
            onChange={(e) => set('metier', e.target.value)}
          >
            <option value="">Choisir…</option>
            {cats.map((c) => (
              <option key={c.key} value={c.key}>
                {c.label}
              </option>
            ))}
          </select>
        </label>
        <label style={FIELD}>
          <b>Description *</b>
          <textarea
            required
            minLength={20}
            maxLength={4000}
            rows={5}
            value={form.description}
            onChange={(e) => set('description', e.target.value)}
            placeholder="Ce que vous fabriquez, où, comment… (min. 20 caractères)"
          />
        </label>
        <label style={FIELD}>
          <b>Adresse de l&rsquo;atelier</b>
          <input
            maxLength={300}
            value={form.address}
            onChange={(e) => set('address', e.target.value)}
            placeholder="123 rue Principale, Ville (Québec) G0X 0X0"
          />
        </label>
        <label style={FIELD}>
          <b>Site web / boutique en ligne</b>
          <input
            type="url"
            maxLength={200}
            value={form.website}
            onChange={(e) => set('website', e.target.value)}
            placeholder="https://…"
          />
        </label>
        <div
          style={{
            display: 'grid',
            gap: 16,
            gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
          }}
        >
          <label style={FIELD}>
            <b>Courriel *</b>
            <input
              type="email"
              maxLength={200}
              value={form.email}
              onChange={(e) => set('email', e.target.value)}
              placeholder="vous@atelier.ca"
            />
          </label>
          <label style={FIELD}>
            <b>Téléphone</b>
            <input
              type="tel"
              maxLength={40}
              value={form.phone}
              onChange={(e) => set('phone', e.target.value)}
              placeholder="418 555-0199"
            />
          </label>
        </div>
        <label style={FIELD}>
          <b>Réseaux sociaux</b>
          <textarea
            rows={2}
            value={socials}
            onChange={(e) => setSocials(e.target.value)}
            placeholder={'https://instagram.com/…\nhttps://facebook.com/…'}
          />
          <small>Une URL par ligne (Instagram, Facebook, TikTok…)</small>
        </label>
        <label style={FIELD}>
          <b>Photos (liens)</b>
          <textarea
            rows={2}
            value={photos}
            onChange={(e) => setPhotos(e.target.value)}
            placeholder="https://…/photo-atelier.jpg"
          />
          <small>
            Liens vers des photos de l&rsquo;atelier ou des produits (une URL
            par ligne)
          </small>
        </label>
        {/* honeypot anti-robot : invisible, doit rester vide */}
        <label
          aria-hidden="true"
          style={{ position: 'absolute', left: '-9999px', height: 0, overflow: 'hidden' }}
          tabIndex={-1}
        >
          Ne pas remplir
          <input
            type="text"
            autoComplete="off"
            tabIndex={-1}
            value={form.entreprise_url}
            onChange={(e) => set('entreprise_url', e.target.value)}
          />
        </label>
        {error && (
          <p role="alert" style={{ color: 'var(--danger, #b3261e)' }}>
            {error}
          </p>
        )}
        <button type="submit" className="btn-primary" disabled={sending}>
          {sending ? 'Envoi…' : 'Soumettre mon atelier'}
        </button>
        <p className="contact-note">
          En soumettant, vous confirmez que les produits sont fabriqués (ou
          conçus) au Québec. Un courriel ou un téléphone est requis pour la
          vérification. Aucune fiche n&rsquo;est publiée sans validation
          manuelle.
        </p>
      </form>
    </div>
  )
}