// FeedbackModal — Patron'un sorun/öneri bildirim formu
// Sidebar'da ampul ikonuna tıklayınca açılır.
// React Portal ile body'ye render edilir → sidebar parent transform'larından bağımsız.
// Tasarım dili: Liquid Glass · KW kırmızı %5 accent · Spring physics · Welcome ile uyumlu.

const SAMET_EMAIL = 'samet@unity-labs.ai';

const FeedbackModal = ({ onClose }) => {
  const [category, setCategory] = React.useState('genel');
  const [body, setBody] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [sent, setSent] = React.useState(false);
  const [error, setError] = React.useState('');
  const taRef = React.useRef(null);

  React.useEffect(() => {
    setTimeout(() => taRef.current?.focus(), 120);
    const onKey = (e) => {
      if (e.key === 'Escape') onClose?.();
      if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) handleSend();
    };
    window.addEventListener('keydown', onKey);
    // Body scroll lock
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = prevOverflow;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const handleSend = async () => {
    if (busy) return;
    const text = body.trim();
    if (text.length < 3) {
      setError('Lütfen birkaç cümle yazın.');
      return;
    }
    setError('');
    setBusy(true);
    try {
      const r = await fetch('/api/feedback', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('kw_token') || ''}`,
        },
        body: JSON.stringify({ body: text, category }),
      });
      if (!r.ok) {
        const j = await r.json().catch(() => ({}));
        throw new Error(j.error || `HTTP ${r.status}`);
      }
      setSent(true);
      // mailto: client'ı tetikle (Patron isterse Send'e basar)
      try {
        const subjectMap = {
          sorun: 'Neşet Birlik Asistan — Sorun bildirimi',
          oneri: 'Neşet Birlik Asistan — Öneri / geliştirme isteği',
          genel: 'Neşet Birlik Asistan — Geri bildirim',
        };
        const subject = encodeURIComponent(subjectMap[category] || subjectMap.genel);
        const ts = new Date().toLocaleString('tr-TR');
        const emailBody = encodeURIComponent(
          `Tarih: ${ts}\nKategori: ${category}\n\n${text}\n\n---\nNeşet Birlik\nBirlik Executive Assistant`
        );
        window.open(`mailto:${SAMET_EMAIL}?subject=${subject}&body=${emailBody}`, '_blank');
      } catch {}
      setTimeout(() => onClose?.(), 1800);
    } catch (err) {
      setError(err.message || 'Gönderilemedi. Lütfen tekrar deneyin.');
    } finally {
      setBusy(false);
    }
  };

  const categories = [
    { id: 'sorun', label: 'Sorun', emoji: '⚠️', desc: 'Çalışmayan / hatalı bir şey' },
    { id: 'oneri', label: 'Öneri', emoji: '💡', desc: 'Geliştirme veya yeni özellik' },
    { id: 'genel', label: 'Genel', emoji: '✦', desc: 'Diğer geri bildirim' },
  ];

  const modalContent = (
    <div className="fb-overlay" onClick={onClose}>
      <div className="fb-aurora" aria-hidden="true"></div>
      <div className="fb-modal" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" aria-labelledby="fb-title">
        <button className="fb-close" onClick={onClose} aria-label="Kapat">
          <Icon name="x" size={16} />
        </button>

        {sent ? (
          <div className="fb-success">
            <div className="fb-success-glyph" aria-hidden="true">
              <span className="fb-success-ring"></span>
              <span className="fb-success-tick">✓</span>
            </div>
            <h2 className="fb-success-h">Geri bildiriminiz iletildi</h2>
            <p className="fb-success-sub">
              Email uygulamanız da açılmış olmalı. İsterseniz oradan da gönderebilirsiniz — her iki kanal da Samet'e ulaşır.
            </p>
          </div>
        ) : (
          <>
            <header className="fb-head">
              <div className="fb-head-glyph" aria-hidden="true">
                <span className="fb-head-glyph-ring"></span>
                <span className="fb-head-glyph-core">💡</span>
              </div>
              <div className="fb-head-text">
                <div className="fb-eyebrow">Geri Bildirim</div>
                <h2 id="fb-title" className="fb-h1">Düşüncenizi doğrudan iletin</h2>
                <p className="fb-sub">
                  Yaşadığınız bir sorunu, fark ettiğiniz bir eksikliği veya geliştirme önerinizi yazın. Mesajınız sistemin geliştirme ekibine ulaşır.
                </p>
              </div>
            </header>

            <div className="fb-section-label">Kategori</div>
            <div className="fb-cat-grid">
              {categories.map((c) => (
                <button
                  key={c.id}
                  className={`fb-cat ${category === c.id ? 'active' : ''}`}
                  onClick={() => setCategory(c.id)}
                  type="button"
                >
                  <span className="fb-cat-emoji" aria-hidden="true">{c.emoji}</span>
                  <span className="fb-cat-label">{c.label}</span>
                  <span className="fb-cat-desc">{c.desc}</span>
                </button>
              ))}
            </div>

            <div className="fb-section-label">Mesajınız</div>
            <div className="fb-textarea-wrap">
              <textarea
                ref={taRef}
                className="fb-textarea"
                placeholder="Örn. Tutorial 5. adımda spotlight kayboldu. / Daily Brief'in 06:00 yerine 07:00'da gelmesini istiyorum. / Çözüm sohbetinde CFO cevap vermedi…"
                value={body}
                onChange={(e) => { setBody(e.target.value); setError(''); }}
                rows={6}
                maxLength={4000}
              />
              <div className="fb-counter">{body.length} / 4000</div>
            </div>

            {error && (
              <div className="fb-error">
                <Icon name="x" size={14} />
                <span>{error}</span>
              </div>
            )}

            <footer className="fb-foot">
              <span className="fb-hint">
                <kbd>⌘</kbd> + <kbd>Enter</kbd> ile gönder
              </span>
              <div className="fb-actions">
                <button className="fb-btn fb-btn-ghost" onClick={onClose} disabled={busy} type="button">
                  Vazgeç
                </button>
                <button
                  className="fb-btn fb-btn-primary"
                  onClick={handleSend}
                  disabled={busy || body.trim().length < 3}
                  type="button"
                >
                  <span className="fb-btn-glow" aria-hidden="true"></span>
                  <span className="fb-btn-label">{busy ? 'Gönderiliyor…' : 'Gönder'}</span>
                  {!busy && <span className="fb-btn-arrow" aria-hidden="true">→</span>}
                </button>
              </div>
            </footer>
          </>
        )}
      </div>
    </div>
  );

  // Portal ile body'ye render — sidebar parent transform/contain'lerinden bağımsız
  return ReactDOM.createPortal(modalContent, document.body);
};

window.FeedbackModal = FeedbackModal;