/**
 * Oveyo PWA — Page Partager un prix
 * - Photo de l'étiquette (upload + analyse IA Claude vision côté serveur)
 * - Saisie manuelle avec sélection produit, prix, quartier libre, ville libre
 * - Géolocalisation auto pré-remplit quartier/ville
 * - Marquer comme abusif
 * - Envoi avec fallback offline (queue IndexedDB via service worker)
 * V3.1 : champs libres simples (plus de cascade ville/quartier)
 */

const Lu3 = window.LucideReact || {};
const { Card: C3, IconBubble: IB3, Spinner: Sp3, useFlash: uF } = window.OveyoUI;
const { useCatalog: uCat3, useGeolocation: uGeo, api: api3, compressImage: cI } = window.OveyoState;

const ReportPage = ({ state, setState, setActiveTab, onLoginRequired }) => {
  const {
    Camera, Plus, Check, ChevronRight, ShieldCheck, MapPin, X, Loader2, Upload,
    AlertTriangle, Sparkles,
  } = Lu3;
  const flash = uF();
  const catalog = uCat3();
  const products = catalog?.products || [];
  const neighborhoods = catalog?.neighborhoods || [];
  // V3.5 — Bug #2 : on lit aussi `error` pour pouvoir afficher un flash
  const { position, error: geoError, detect: detectGeo, loading: geoLoading } = uGeo();

  const [step, setStep] = React.useState('start');
  const [productId, setProductId] = React.useState(null);
  const [price, setPrice] = React.useState('');
  const [shopName, setShopName] = React.useState('');
  const [available, setAvailable] = React.useState(1);
  const [isAbuse, setIsAbuse] = React.useState(false);
  // V4.1 — quantité observée (texte libre simple)
  // Ex : "1 kg", "500 g", "2 L", "12 kg" (bouteille gaz), "6 unités"
  // Pré-rempli automatiquement avec products.unit du produit choisi.
  const [quantityLabel, setQuantityLabel] = React.useState('');
  const [photoFile, setPhotoFile] = React.useState(null);
  const [photoPreview, setPhotoPreview] = React.useState(null);
  const [aiAnalyzing, setAiAnalyzing] = React.useState(false);
  const [aiSuggestion, setAiSuggestion] = React.useState(null);
  const [submitting, setSubmitting] = React.useState(false);

  // V3.1 — champs libres simples
  const [quartierInput, setQuartierInput] = React.useState('');
  const [villeInput, setVilleInput] = React.useState('Dakar');

  const photoInputRef = React.useRef(null);

  // Pré-remplir depuis le profil de l'utilisateur si disponible
  React.useEffect(() => {
    if (!quartierInput && state.user.neighborhood_slug && neighborhoods.length > 0) {
      const n = neighborhoods.find((x) => x.slug === state.user.neighborhood_slug);
      if (n) {
        setQuartierInput(n.name);
        if (n.city_name) setVilleInput(n.city_name);
      }
    }
  }, [state.user.neighborhood_slug, neighborhoods]);

  // Reverse-geocode quand position détectée
  React.useEffect(() => {
    if (!position) return;
    api3(`/api/pwa/geocode?lat=${position.lat}&lng=${position.lng}`)
      .then((d) => {
        if (d.neighborhood_name) setQuartierInput(d.neighborhood_name);
        if (d.city_name) setVilleInput(d.city_name);
      })
      .catch(() => {});
  }, [position]);

  // V3.5 — Bug #2 : afficher un flash visible si la géoloc échoue.
  React.useEffect(() => {
    if (geoError) flash.show('error', geoError);
  }, [geoError]);

  // V3.5 — Bug #8 : miroir de la position dans state.user.geolocation
  // pour que d'autres composants (ShopDetailSheet, etc.) puissent calculer
  // les distances sans avoir à re-déclencher useGeolocation.
  React.useEffect(() => {
    if (!position || typeof setState !== 'function') return;
    setState((s) => ({
      ...s,
      user: { ...s.user, geolocation: { lat: position.lat, lng: position.lng, ts: Date.now() } },
    }));
  }, [position]);

  const selectedProduct = products.find((p) => p.id === productId);

  // V4.1 — Pré-remplissage automatique de la quantité avec products.unit
  // dès qu'un produit est choisi. L'utilisateur peut écraser librement.
  React.useEffect(() => {
    if (!selectedProduct) return;
    if (selectedProduct.unit) {
      setQuantityLabel(selectedProduct.unit);
    }
  }, [selectedProduct?.id]);

  // Gestion photo
  const handlePhotoSelect = async (file) => {
    if (!file) return;
    const compressed = await cI(file, 1024, 0.85);
    setPhotoFile(compressed);
    setPhotoPreview(URL.createObjectURL(compressed));
    setAiAnalyzing(true);

    try {
      const fd = new FormData();
      fd.append('photo', compressed, 'etiquette.jpg');
      const r = await fetch('/api/pwa/photo/analyze', { method: 'POST', body: fd });
      const data = await r.json();
      if (data.suggestion) {
        setAiSuggestion(data.suggestion);
        if (data.suggestion.product_id) setProductId(data.suggestion.product_id);
        if (data.suggestion.price) setPrice(String(data.suggestion.price));
        flash.show('success', `IA détectée : ${data.suggestion.product_name || 'produit'} à ${data.suggestion.price || '?'} F`);
      } else {
        flash.show('info', "L'IA n'a pas pu lire l'étiquette, complète manuellement");
      }
      setStep('manual');
    } catch (e) {
      flash.show('error', "Erreur analyse photo, complète manuellement");
      setStep('manual');
    } finally {
      setAiAnalyzing(false);
    }
  };

  // Soumission
  const submit = async () => {
    // V4.0 — Login obligatoire pour partager un prix.
    // Le partage anonyme reste autorisé techniquement côté backend
    // (pour la queue offline V3.5) mais l'UX impose le login d'abord.
    if (!state.user.phone) {
      flash.show('info', 'Connecte-toi avec WhatsApp pour partager ton prix');
      if (typeof onLoginRequired === 'function') {
        onLoginRequired();
      }
      return;
    }
    if (!productId) { flash.show('error', 'Choisis un produit'); return; }
    if (!price || isNaN(parseInt(price))) { flash.show('error', 'Prix invalide'); return; }

    const quartier = (quartierInput || '').trim();
    const ville = (villeInput || '').trim();

    if (quartier.length < 2) {
      flash.show('error', 'Renseigne ton quartier');
      return;
    }
    if (ville.length < 2) {
      flash.show('error', 'Renseigne ta ville');
      return;
    }

    setSubmitting(true);

    const payload = {
      product_id: productId,
      price: parseInt(price, 10),
      available: available,
      is_abuse: isAbuse ? 1 : 0,
      shop_name: shopName.trim() || null,
      reported_by: state.user.phone || 'pwa-anonymous',
      neighborhood_name: quartier,
      city_name: ville,
      // V4.1 — quantité libre (texte court, ex : "2 L", "500 g")
      quantity_label: (quantityLabel || '').trim() || null,
    };

    try {
      if (photoFile && !aiSuggestion) {
        const fd = new FormData();
        fd.append('photo', photoFile, 'observation.jpg');
        const r = await fetch('/api/pwa/photo', { method: 'POST', body: fd });
        const data = await r.json();
        payload.photo_url = data.url;
      } else if (aiSuggestion?.photo_url) {
        payload.photo_url = aiSuggestion.photo_url;
      }

      const r = await fetch('/api/pwa/observation', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      const data = await r.json();

      if (r.status === 202 && data.queued) {
        flash.show('info', '📡 Hors ligne — sera envoyé au retour du réseau');
        setStep('success');
      } else if (r.ok) {
        let msg = '✅ Prix partagé, jërëjëf !';
        if (data.new_badges && data.new_badges.length > 0) {
          msg = `🏆 Nouveau badge : ${data.new_badges[0].name} !`;
        }
        flash.show('success', msg);
        setStep('success');
      } else {
        flash.show('error', data.detail || "Erreur lors de l'envoi");
        setSubmitting(false);
        return;
      }
    } catch (e) {
      flash.show('error', "Erreur lors de l'envoi");
    } finally {
      setSubmitting(false);
    }
  };

  const reset = () => {
    setStep('start');
    setProductId(null);
    setPrice('');
    setShopName('');
    setAvailable(1);
    setIsAbuse(false);
    setPhotoFile(null);
    setPhotoPreview(null);
    setAiSuggestion(null);
    setQuantityLabel('');  // V4.1
  };

  // V4.0 — Vue CONNEXION REQUISE pour partager un prix
  // Lecture libre + écriture connectée : on bloque l'accès au formulaire
  // dès l'entrée si l'utilisateur n'est pas connecté.
  if (!state.user.phone) {
    return (
      <div className="px-5 pt-12">
        <div
          className="rounded-2xl p-6 text-center"
          style={{ background: 'white', border: '1px solid #EAEEF4' }}
        >
          <div className="w-16 h-16 mx-auto rounded-2xl flex items-center justify-center mb-4" style={{ background: '#FEEEE3' }}>
            <ShieldCheck size={32} style={{ color: '#F4632B' }} strokeWidth={2} />
          </div>
          <h2 className="font-display font-bold text-xl text-ink mb-2">Connexion requise</h2>
          <p className="text-sm text-slate leading-relaxed mb-5">
            Pour partager un prix, tu dois te connecter avec ton numéro WhatsApp.
            <br />C'est rapide, gratuit, et ça permet à la communauté de te faire confiance.
          </p>
          <button
            onClick={() => typeof onLoginRequired === 'function' && onLoginRequired()}
            className="w-full py-3.5 rounded-2xl font-bold text-white text-sm"
            style={{ background: '#F4632B' }}
          >
            <span aria-hidden="true">📱</span> Me connecter avec WhatsApp
          </button>
          <button
            onClick={() => setActiveTab('home')}
            className="w-full py-3 mt-2 rounded-2xl font-semibold text-sm"
            style={{ background: '#F1F4F9', color: '#0F1F36' }}
          >
            Retour à l'accueil
          </button>
        </div>
        <div className="mt-6 px-2">
          <p className="text-[12px] text-slate leading-relaxed">
            <strong className="text-ink">Pourquoi se connecter ?</strong>
            <br />Pour signaler un prix qui sera utile à des milliers de Sénégalais. Ton numéro reste privé : on n'affiche qu'un pseudonyme que tu choisis (« Aïssa de Grand Yoff »).
          </p>
        </div>
      </div>
    );
  }

  // Vue SUCCÈS
  if (step === 'success') {
    return (
      <div className="px-5 pt-12 text-center">
        <div className="w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-4" style={{ background: '#E8F5E9' }}>
          <Check size={40} style={{ color: '#15803D' }} strokeWidth={2.5} />
        </div>
        <h2 className="font-display font-bold text-2xl text-ink mb-2">Merci !</h2>
        {/* V4.4 — message phase bêta dynamique
            Si BETA_PHASE=true côté backend (config.py), on affiche un message rassurant
            indiquant que l'équipe Oveyo vérifie. Sinon, message "vérifié par 2 voisins". */}
        <p className="text-slate text-sm leading-relaxed mb-6">
          {catalog?.beta_phase ? (
            <>
              Ton prix a été partagé.
              <span className="block mt-2 text-[12px] px-3 py-2 rounded-lg" style={{ background: '#FFF8F1', color: '#9A6F00', border: '1px solid #FFE0CC' }}>
                🌱 <strong>Phase de lancement.</strong> La vérification est renforcée par l'équipe Oveyo pour garantir la fiabilité totale des premières données.
              </span>
            </>
          ) : (
            <>Ton prix a été partagé. Il sera vérifié par 2 voisins avant publication officielle.</>
          )}
        </p>
        <button
          onClick={reset}
          className="w-full py-3.5 rounded-2xl font-bold text-white"
          style={{ background: '#F4632B' }}
        >
          Partager un autre prix
        </button>
        <button
          onClick={() => setActiveTab('home')}
          className="w-full py-3.5 mt-2 rounded-2xl font-semibold"
          style={{ background: '#F1F4F9', color: '#0F1F36' }}
        >
          Retour à l'accueil
        </button>
      </div>
    );
  }

  // Vue PRINCIPALE
  return (
    <div className="px-5 pt-6 space-y-5 pb-6">
      <div>
        <h2 className="font-display font-bold text-2xl text-ink">Partager un prix</h2>
        <p className="text-sm mt-1 text-slate">Aide ton quartier en 10 secondes</p>
      </div>

      {/* Bouton photo */}
      <button
        onClick={() => photoInputRef.current?.click()}
        disabled={aiAnalyzing}
        className="w-full aspect-[4/3] max-h-72 rounded-3xl flex flex-col items-center justify-center gap-3 relative overflow-hidden"
        style={{ background: 'linear-gradient(135deg, #102A43 0%, #1f3a5f 50%, #F4632B 130%)' }}
      >
        <div className="absolute inset-0 grain opacity-20" />
        {aiAnalyzing ? (
          <>
            <Loader2 size={48} className="text-white animate-spin" />
            <div className="font-display font-bold text-lg text-white">L'IA lit ton étiquette...</div>
            <div className="text-xs text-white/70">Quelques secondes</div>
          </>
        ) : photoPreview ? (
          <>
            <img src={photoPreview} alt="" className="absolute inset-0 w-full h-full object-cover opacity-50" />
            <div className="relative z-10">
              <Check size={40} className="text-white mx-auto" strokeWidth={2} />
              <div className="font-display font-bold text-base text-white mt-2">Photo prise</div>
              <div className="text-xs text-white/80">Touche pour reprendre</div>
            </div>
          </>
        ) : (
          <>
            <div className="w-20 h-20 rounded-full bg-white/15 backdrop-blur flex items-center justify-center">
              <Camera size={36} className="text-white" strokeWidth={1.8} />
            </div>
            <div className="text-center px-6 relative">
              <div className="font-display font-bold text-xl text-white">Photographier l'étiquette</div>
              <div className="text-xs text-white/80 mt-1.5 flex items-center justify-center gap-1">
                <Sparkles size={11} /> L'IA détecte automatiquement le prix
              </div>
            </div>
          </>
        )}
      </button>
      <input
        ref={photoInputRef}
        type="file"
        accept="image/*"
        capture="environment"
        className="hidden"
        onChange={(e) => handlePhotoSelect(e.target.files?.[0])}
      />

      {/* Suggestion IA */}
      {aiSuggestion && (
        <div className="rounded-2xl p-3 flex items-center gap-3 anim-slide" style={{ background: '#E8F5E9', border: '1px solid #15803D33' }}>
          <Sparkles size={18} style={{ color: '#15803D' }} />
          <div className="flex-1 text-sm text-success font-semibold">
            IA : {aiSuggestion.product_name || 'Produit'} {aiSuggestion.price && `à ${aiSuggestion.price} F`}
          </div>
        </div>
      )}

      <div className="flex items-center gap-3">
        <div className="flex-1 h-px bg-bg-3" />
        <span className="text-xs font-medium uppercase tracking-wider text-slate">ou complète</span>
        <div className="flex-1 h-px bg-bg-3" />
      </div>

      <C3 noBar>
        <div className="p-4 space-y-3">
          {/* Produit */}
          <div>
            <label className="text-[11px] font-bold uppercase tracking-wider text-slate">Produit</label>
            <div className="mt-1.5 grid grid-cols-3 gap-2">
              {products.map((p) => (
                <button
                  key={p.id}
                  type="button"
                  onClick={() => setProductId(p.id)}
                  className="rounded-xl p-3 text-center transition-all"
                  style={{
                    background: productId === p.id ? '#FEEEE3' : '#F1F4F9',
                    border: productId === p.id ? '2px solid #F4632B' : '2px solid transparent',
                  }}
                >
                  <div className="text-2xl">{p.icon}</div>
                  <div className="text-[10px] font-bold mt-1 text-ink">{p.name_fr.split(' ')[0]}</div>
                </button>
              ))}
            </div>
          </div>

          {/* Prix + état */}
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="text-[11px] font-bold uppercase tracking-wider text-slate">Prix (FCFA)</label>
              <input
                type="number"
                value={price}
                onChange={(e) => setPrice(e.target.value)}
                placeholder="600"
                className="mt-1.5 w-full p-3 rounded-xl font-display font-bold text-xl text-ink outline-none"
                style={{ background: '#F1F4F9' }}
                inputMode="numeric"
              />
            </div>
            <div>
              <label className="text-[11px] font-bold uppercase tracking-wider text-slate">État</label>
              <div className="mt-1.5 flex rounded-xl overflow-hidden" style={{ border: '1px solid #DDE3EC' }}>
                <button
                  type="button"
                  onClick={() => setAvailable(1)}
                  className="flex-1 py-3 text-xs font-bold flex items-center justify-center gap-1"
                  style={{
                    background: available === 1 ? '#E8F5E9' : 'white',
                    color: available === 1 ? '#15803D' : '#6B7891',
                  }}
                >
                  <Check size={12} strokeWidth={3} /> Dispo
                </button>
                <button
                  type="button"
                  onClick={() => setAvailable(0)}
                  className="flex-1 py-3 text-xs font-bold"
                  style={{
                    background: available === 0 ? '#FEEEE3' : 'white',
                    color: available === 0 ? '#F4632B' : '#6B7891',
                  }}
                >
                  × Rupture
                </button>
              </div>
            </div>
          </div>

          {/* V4.1 — Quantité observée (texte libre court)
              Pré-rempli depuis products.unit ; l'utilisateur peut préciser
              s'il s'agit d'un format différent (ex: "2 L" au lieu de "1 L"). */}
          <div>
            <label className="text-[11px] font-bold uppercase tracking-wider text-slate">
              Quantité
              <span className="text-slate font-normal normal-case ml-1">(facultatif)</span>
            </label>
            <input
              type="text"
              value={quantityLabel}
              onChange={(e) => setQuantityLabel(e.target.value)}
              placeholder={selectedProduct?.unit || 'Ex : 1 kg, 500 g, 2 L, 12 kg, 6 unités'}
              maxLength={30}
              className="mt-1.5 w-full p-3 rounded-xl text-sm outline-none"
              style={{ background: '#F1F4F9' }}
            />
            <div className="mt-1 text-[11px] text-slate">
              Précise si tu observes un format différent du standard (ex : huile en bidon de 2 L, sucre en sachet de 500 g).
            </div>
          </div>

          {/* Quartier — champ libre simple */}
          <div>
            <label className="text-[11px] font-bold uppercase tracking-wider text-slate">Quartier</label>
            <div className="mt-1.5 flex gap-2">
              <input
                type="text"
                value={quartierInput}
                onChange={(e) => setQuartierInput(e.target.value)}
                placeholder="Ex: Grand Yoff, Saly Plage..."
                maxLength={80}
                className="flex-1 p-3 rounded-xl text-sm outline-none"
                style={{ background: '#F1F4F9' }}
              />
              <button
                type="button"
                onClick={detectGeo}
                disabled={geoLoading}
                className="px-3 rounded-xl flex items-center gap-1 font-semibold text-xs disabled:opacity-60"
                style={{ background: '#FEEEE3', color: '#F4632B' }}
                aria-label="Détecter ma position"
              >
                {geoLoading ? <Loader2 size={14} className="animate-spin" /> : <MapPin size={14} />}
                GPS
              </button>
            </div>
          </div>

          {/* Ville — champ libre simple */}
          <div>
            <label className="text-[11px] font-bold uppercase tracking-wider text-slate">Ville</label>
            <input
              type="text"
              value={villeInput}
              onChange={(e) => setVilleInput(e.target.value)}
              placeholder="Ex: Dakar, Mbour, Thiès..."
              maxLength={80}
              className="mt-1.5 w-full p-3 rounded-xl text-sm outline-none"
              style={{ background: '#F1F4F9' }}
            />
          </div>

          {/* Boutique */}
          <div>
            <label className="text-[11px] font-bold uppercase tracking-wider text-slate">Boutique (facultatif)</label>
            <input
              type="text"
              value={shopName}
              onChange={(e) => setShopName(e.target.value)}
              placeholder="Ex: Boutique Modou"
              className="mt-1.5 w-full p-3 rounded-xl text-sm outline-none"
              style={{ background: '#F1F4F9' }}
            />
          </div>

          {/* Abus */}
          <button
            type="button"
            onClick={() => setIsAbuse(!isAbuse)}
            className="w-full p-3 rounded-xl flex items-center gap-3 text-left"
            style={{
              background: isAbuse ? '#FEEEE3' : '#F1F4F9',
              border: isAbuse ? '2px solid #F4632B' : '2px solid transparent',
            }}
          >
            <div
              className="w-5 h-5 rounded flex items-center justify-center flex-shrink-0"
              style={{ background: isAbuse ? '#F4632B' : 'white', border: '2px solid', borderColor: isAbuse ? '#F4632B' : '#DDE3EC' }}
            >
              {isAbuse && <Check size={12} className="text-white" strokeWidth={4} />}
            </div>
            <div className="flex-1">
              <strong className="text-orange text-sm">🚨 Signaler comme abusif</strong>
              <div className="text-[11px] text-slate">Si le prix dépasse largement le prix homologué</div>
            </div>
          </button>

          {/* Info verif — V4.4 message dynamique selon phase bêta */}
          <div
            className="text-[11px] flex items-start gap-1.5 p-2.5 rounded-xl text-slate"
            style={{ background: '#F1F4F9' }}
          >
            <ShieldCheck size={11} className="flex-shrink-0 mt-0.5" />
            {catalog?.beta_phase ? (
              <span>🌱 Phase de lancement : ton prix sera <strong>vérifié par l'équipe Oveyo</strong> avant publication, pour garantir la fiabilité.</span>
            ) : (
              <span>Ton prix sera <strong>vérifié par 2 autres voisins</strong> avant publication officielle.</span>
            )}
          </div>

          <button
            onClick={submit}
            disabled={submitting}
            className="w-full py-3.5 rounded-xl font-display font-bold text-white text-sm flex items-center justify-center gap-2 disabled:opacity-60"
            style={{ background: '#F4632B' }}
          >
            {submitting ? <Loader2 size={16} className="animate-spin" /> : <Plus size={16} strokeWidth={3} />}
            Partager le prix
          </button>
        </div>
        <div
          className="h-[3px] w-full"
          style={{ background: 'linear-gradient(90deg, #102A43 0%, #F4632B 50%, #FFA45B 100%)' }}
        />
      </C3>
    </div>
  );
};

window.OveyoPages = window.OveyoPages || {};
window.OveyoPages.ReportPage = ReportPage;