// InstantDevis — Page publique signature client (/signature/:token)

function _idSignatureWorkersBase() {
  const fromIntegration = (typeof AF_INTEGRATION !== 'undefined' && AF_INTEGRATION && AF_INTEGRATION.workersBase)
    ? String(AF_INTEGRATION.workersBase).trim()
    : '';
  if (fromIntegration) return fromIntegration.replace(/\/$/, '');
  return 'https://instantdevis-agents.sciencezvousyt.workers.dev';
}

function _idExtractSignatureTokenFromPath() {
  try {
    const p = String(window.location.pathname || '');
    const m = p.match(/^\/signature\/([^/]+)$/);
    return m ? decodeURIComponent(m[1]) : '';
  } catch (e) {
    return '';
  }
}

function _idShortHash(h) {
  const s = String(h || '').trim();
  if (!s) return '—';
  return s.slice(0, 12);
}

function SignaturePage() {
  const token = React.useMemo(() => _idExtractSignatureTokenFromPath(), []);
  const workersBase = React.useMemo(() => _idSignatureWorkersBase(), []);
  const [uiState, setUiState] = React.useState('loading'); // loading|loaded|invalid|expired|unavailable|already_signed|network_error|signing|signed_success|error
  const [publicData, setPublicData] = React.useState(null);
  const [errMsg, setErrMsg] = React.useState('');
  const [form, setForm] = React.useState({
    signerName: '',
    signerEmail: '',
    signatureText: '',
    accepted: false,
  });
  const signingRef = React.useRef(false);

  const canSubmit = !!(
    form.signerName.trim()
    && form.signatureText.trim()
    && form.accepted
    && uiState !== 'signing'
  );

  React.useEffect(() => {
    let cancelled = false;
    if (!token) {
      setUiState('invalid');
      setErrMsg('Ce lien de signature est invalide.');
      return undefined;
    }
    (async () => {
      setUiState('loading');
      setErrMsg('');
      try {
        const r = await fetch(`${workersBase}/v1/signature/${encodeURIComponent(token)}`);
        let body = null;
        try { body = await r.json(); } catch (e) { body = null; }
        if (cancelled) return;
        if (r.ok) {
          const d = body || {};
          setPublicData(d);
          setForm((prev) => {
            const fallbackName = String(d.clientName || '').trim();
            const nm = prev.signerName || fallbackName;
            return {
              ...prev,
              signerName: nm,
              signatureText: prev.signatureText || nm,
            };
          });
          setUiState('loaded');
          return;
        }
        if (r.status === 404) { setUiState('invalid'); setErrMsg('Ce lien de signature est invalide.'); return; }
        if (r.status === 410) { setUiState('expired'); setErrMsg('Ce lien de signature a expiré. Contactez l’artisan pour recevoir un nouveau lien.'); return; }
        if (r.status === 409) { setUiState('already_signed'); setErrMsg('Ce devis a déjà été signé.'); return; }
        if (r.status === 503) { setUiState('unavailable'); setErrMsg('Le service de signature est temporairement indisponible.'); return; }
        setUiState('error');
        setErrMsg('Impossible de finaliser la signature. Réessayez dans quelques instants.');
      } catch (e) {
        if (cancelled) return;
        setUiState('network_error');
        setErrMsg('Impossible de contacter le service de signature. Vérifiez votre connexion.');
      }
    })();
    return () => { cancelled = true; };
  }, [token, workersBase]);

  const submitSignature = async () => {
    if (!canSubmit || signingRef.current) return;
    signingRef.current = true;
    setUiState('signing');
    setErrMsg('');
    try {
      const payload = {
        signerName: form.signerName.trim(),
        signerEmail: form.signerEmail.trim() || undefined,
        signatureText: form.signatureText.trim(),
        accepted: true,
      };
      const r = await fetch(`${workersBase}/v1/signature/${encodeURIComponent(token)}/sign`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      let body = null;
      try { body = await r.json(); } catch (e) { body = null; }
      if (r.ok) {
        setPublicData((prev) => ({ ...(prev || {}), ...(body || {}) }));
        setUiState('signed_success');
        return;
      }
      if (r.status === 404) { setUiState('invalid'); setErrMsg('Ce lien de signature est invalide.'); return; }
      if (r.status === 410) { setUiState('expired'); setErrMsg('Ce lien de signature a expiré. Contactez l’artisan pour recevoir un nouveau lien.'); return; }
      if (r.status === 409) { setUiState('already_signed'); setErrMsg('Ce devis a déjà été signé.'); return; }
      if (r.status === 503) { setUiState('unavailable'); setErrMsg('Le service de signature est temporairement indisponible.'); return; }
      setUiState('error');
      setErrMsg('Impossible de finaliser la signature. Réessayez dans quelques instants.');
    } catch (e) {
      setUiState('network_error');
      setErrMsg('Impossible de contacter le service de signature. Vérifiez votre connexion.');
    } finally {
      signingRef.current = false;
    }
  };

  const pageBg = {
    minHeight: '100dvh',
    width: '100%',
    background: '#F1EFEB',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    padding: '16px',
  };
  const card = {
    width: '100%',
    maxWidth: 560,
    background: '#fff',
    border: '1px solid rgba(21,32,43,0.12)',
    borderRadius: 12,
    boxShadow: '0 8px 24px rgba(21,32,43,0.1)',
    padding: '18px 16px',
    display: 'flex',
    flexDirection: 'column',
    gap: 12,
  };
  const muted = { fontSize: 12, color: '#5A6772', lineHeight: 1.45 };

  const renderError = (title) => (
    <div style={pageBg}>
      <div style={card}>
        <div style={{ fontSize: 22, fontWeight: 800, color: '#0B3D5C' }}>InstantDevis</div>
        <div style={{ fontSize: 20, fontWeight: 800, color: '#15202B' }}>{title}</div>
        <div style={muted}>{errMsg || 'Impossible de finaliser la signature. Réessayez dans quelques instants.'}</div>
      </div>
    </div>
  );

  if (uiState === 'loading') {
    return (
      <div style={pageBg}>
        <div style={card}>
          <div style={{ fontSize: 22, fontWeight: 800, color: '#0B3D5C' }}>InstantDevis</div>
          <div style={{ fontSize: 18, fontWeight: 700, color: '#15202B' }}>Chargement du devis…</div>
          <div style={muted}>Merci de patienter quelques instants.</div>
        </div>
      </div>
    );
  }
  if (uiState === 'invalid') return renderError('Lien invalide');
  if (uiState === 'expired') return renderError('Lien expiré');
  if (uiState === 'unavailable') return renderError('Service indisponible');
  if (uiState === 'already_signed') return renderError('Devis déjà signé');
  if (uiState === 'network_error') return renderError('Erreur réseau');
  if (uiState === 'error') return renderError('Signature impossible');

  if (uiState === 'signed_success') {
    return (
      <div style={pageBg}>
        <div style={card}>
          <div style={{ fontSize: 22, fontWeight: 800, color: '#0B3D5C' }}>InstantDevis</div>
          <div style={{ fontSize: 22, fontWeight: 800, color: '#0F766E' }}>Devis signé avec succès</div>
          <div style={muted}>Votre acceptation a bien été enregistrée. L’artisan a été informé.</div>
          <div style={{ ...muted, background: 'rgba(11,61,92,0.06)', border: '1px solid rgba(11,61,92,0.15)', borderRadius: 8, padding: '10px' }}>
            {publicData && publicData.signedAt ? <div><strong>Signé le :</strong> {String(publicData.signedAt)}</div> : null}
            <div><strong>Réf. intégrité :</strong> {_idShortHash(publicData && publicData.quoteHash)}</div>
          </div>
        </div>
      </div>
    );
  }

  const d = publicData || {};
  const summaryLines = (d.summary && Array.isArray(d.summary.lines)) ? d.summary.lines : [];
  return (
    <div style={pageBg}>
      <div style={card}>
        <div style={{ fontSize: 22, fontWeight: 800, color: '#0B3D5C' }}>InstantDevis</div>
        <div style={{ fontSize: 22, fontWeight: 800, color: '#15202B' }}>Votre devis est prêt à être signé</div>
        <div style={muted}>
          <div><strong>Artisan :</strong> {d.artisanName || '—'}</div>
          <div><strong>Client :</strong> {d.clientName || '—'}</div>
          <div><strong>Devis :</strong> {d.quoteNumber || d.quoteId || '—'}</div>
          <div><strong>Montant TTC :</strong> {d.totalTTC != null ? `${d.totalTTC} ${d.currency || 'EUR'}` : '—'}</div>
          <div><strong>Statut :</strong> {d.status || '—'}</div>
          <div><strong>Expiration :</strong> {d.expiresAt || '—'}</div>
          <div><strong>Réf. intégrité :</strong> {_idShortHash(d.quoteHash)}</div>
        </div>

        {summaryLines.length > 0 && (
          <div style={{ border: '1px solid rgba(21,32,43,0.12)', borderRadius: 8, padding: '10px', background: '#F8F9FA' }}>
            <div style={{ fontSize: 12, fontWeight: 800, color: '#15202B', marginBottom: 6 }}>Résumé des prestations</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {summaryLines.slice(0, 8).map((l, i) => (
                <div key={i} style={{ fontSize: 12, color: '#34424D', lineHeight: 1.35 }}>
                  {l.label || 'Ligne'} · {l.qty || '—'} {l.unit || ''} · {l.pu || '—'} HT · TVA {l.tva || '—'}%
                </div>
              ))}
            </div>
          </div>
        )}

        <div style={{ ...muted, color: '#15202B', fontWeight: 600 }}>
          En signant ce devis, vous confirmez accepter les prestations, les conditions et le montant indiqués.
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <input
            placeholder="Nom du signataire"
            value={form.signerName}
            onChange={(e) => {
              const v = e.target.value;
              setForm((f) => ({ ...f, signerName: v, signatureText: f.signatureText || v }));
            }}
            style={{ width: '100%', height: 46, borderRadius: 8, border: '1px solid rgba(21,32,43,0.2)', padding: '0 12px', fontSize: 14 }}
          />
          <input
            placeholder="Email du signataire (optionnel)"
            value={form.signerEmail}
            onChange={(e) => setForm((f) => ({ ...f, signerEmail: e.target.value }))}
            style={{ width: '100%', height: 46, borderRadius: 8, border: '1px solid rgba(21,32,43,0.2)', padding: '0 12px', fontSize: 14 }}
          />
          <input
            placeholder="Signature texte"
            value={form.signatureText}
            onChange={(e) => setForm((f) => ({ ...f, signatureText: e.target.value }))}
            style={{ width: '100%', height: 46, borderRadius: 8, border: '1px solid rgba(21,32,43,0.2)', padding: '0 12px', fontSize: 14 }}
          />
          <label style={{ display: 'flex', alignItems: 'flex-start', gap: 8, fontSize: 13, color: '#34424D', lineHeight: 1.35 }}>
            <input
              type="checkbox"
              checked={form.accepted}
              onChange={(e) => setForm((f) => ({ ...f, accepted: !!e.target.checked }))}
              style={{ marginTop: 2 }}
            />
            J’ai lu et j’accepte ce devis.
          </label>
          {errMsg ? <div style={{ fontSize: 12, color: '#B91C1C', lineHeight: 1.35 }}>{errMsg}</div> : null}
          <button
            type="button"
            onClick={submitSignature}
            disabled={!canSubmit}
            style={{
              width: '100%',
              height: 50,
              borderRadius: 10,
              border: 'none',
              background: canSubmit ? 'linear-gradient(135deg,#0B3D5C 0%,#155F8E 100%)' : '#CBD5E1',
              color: '#fff',
              fontSize: 16,
              fontWeight: 800,
              cursor: canSubmit ? 'pointer' : 'not-allowed',
            }}
          >
            {uiState === 'signing' ? 'Signature en cours…' : 'Signer le devis'}
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SignaturePage });