// FeasibilityBlockerModal — V1.9 Pre-Submit Query-Breiten-Check-UI.
//
// Triggered wenn der Backend-Feasibility-Check (services/scraper/src/tools/
// feasibilityCheck.ts via POST /api/scraper/feasibility-check) severity
// "warning" oder "blocked" zurückgibt. Janik-Vision: bevor Credits verbrannt
// werden bei einer strukturell zu breiten Query ("IT-Dienstleister Deutschland"
// → Coach + Personalberater + Freelancer) muss der User kurz nachdenken.
//
// Props:
//   blocker:  { profileId, leadQuery, result: { severity, reason, suggestions[] } } | null
//   onClose:  () → void  — User klickt "Anpassen" oder den Backdrop
//   onBypass: () → void  — User klickt "Trotzdem starten"
//
// Severity-Stylings:
//   - "warning" (gelb): Hinweis, beide Buttons gleichstark präsentiert
//   - "blocked" (rot):  visueller Warnhinweis, "Anpassen" als primary-Button,
//                       "Trotzdem starten" als sekundär/klein

function FeasibilityBlockerModal({ blocker, onClose, onBypass }) {
  if (!blocker || !blocker.result) return null;
  const { result } = blocker;
  const severity = result.severity === 'blocked' ? 'blocked' : 'warning';
  const suggestions = Array.isArray(result.suggestions) ? result.suggestions : [];

  const tone = severity === 'blocked'
    ? {
        accent: 'bg-red-50 border-red-200',
        iconBg: 'bg-red-100',
        iconColor: 'text-red-700',
        headline: 'Die Query ist zu breit',
        subline: 'Cortex würde damit hauptsächlich Portale, Verbände oder Beratungen finden — keine echten Einzelfirmen.',
      }
    : {
        accent: 'bg-amber-50 border-amber-200',
        iconBg: 'bg-amber-100',
        iconColor: 'text-amber-700',
        headline: 'Query wirkt etwas breit',
        subline: 'Das Ergebnis wird wahrscheinlich etwas gemischt. Eine kleine Schärfung macht die Leads deutlich präziser.',
      };

  const ctaPrimaryLabel = severity === 'blocked' ? 'Query anpassen' : 'Zurück & schärfen';
  const ctaSecondaryLabel = 'Trotzdem starten';

  return (
    <div
      className="fixed inset-0 z-[100] flex items-center justify-center p-4 fade-in"
      style={{ background: 'rgba(11, 15, 25, 0.72)', backdropFilter: 'blur(8px)' }}
      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
    >
      <div className="bg-white rounded-2xl w-full max-w-[520px] overflow-hidden fade-in-scale">
        <div className={`px-6 py-5 border-b border-line ${tone.accent}`}>
          <div className="flex items-start gap-3">
            <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${tone.iconBg}`}>
              <Icon.Warn size={18} className={tone.iconColor}/>
            </div>
            <div className="min-w-0 flex-1">
              <div className="text-[17px] font-semibold text-ink leading-tight">{tone.headline}</div>
              <div className="text-[13px] text-ink-muted mt-1 leading-relaxed">{tone.subline}</div>
            </div>
          </div>
        </div>

        <div className="px-6 py-5">
          {result.reason && (
            <div className="text-[13.5px] text-ink leading-relaxed mb-4">
              {result.reason}
            </div>
          )}

          {suggestions.length > 0 && (
            <div>
              <div className="text-[11px] uppercase tracking-[0.08em] text-ink-soft font-medium mb-2">
                Konkretere Formulierungen
              </div>
              <ul className="space-y-1.5">
                {suggestions.map((s, idx) => (
                  <li
                    key={idx}
                    className="flex items-start gap-2 text-[13px] text-ink bg-surface rounded-md px-3 py-2"
                  >
                    <span className="text-ink-soft mt-0.5 flex-shrink-0">▸</span>
                    <span className="leading-relaxed">{s}</span>
                  </li>
                ))}
              </ul>
              <div className="text-[11.5px] text-ink-soft mt-3 leading-snug">
                Kopiere einen der Vorschläge zurück ins Feld oder formuliere selbst — das erhöht die Trefferquote messbar.
              </div>
            </div>
          )}
        </div>

        <div className="px-6 py-4 border-t border-line bg-surface/50 flex items-center justify-end gap-2">
          <button
            type="button"
            onClick={onBypass}
            className="text-[12.5px] text-ink-soft hover:text-ink transition-colors px-3 py-2"
            title="Die Query durchläuft Cortex trotzdem — auf eigene Verantwortung"
          >
            {ctaSecondaryLabel}
          </button>
          <button
            type="button"
            onClick={onClose}
            className="inline-flex items-center gap-1.5 px-4 py-2 rounded-md bg-[#3465E3] text-white text-[13px] font-medium hover:bg-[#2851C4] transition-colors"
          >
            {ctaPrimaryLabel}
          </button>
        </div>
      </div>
    </div>
  );
}

// Expose global so app.jsx (no bundler, Babel-in-browser) can reference.
window.FeasibilityBlockerModal = FeasibilityBlockerModal;