const { useState, useCallback, useEffect } = React;

// Injected by the plugin via wp_add_inline_script — see koi_audit_enqueue_assets() in koi-audit-tool.php
const CONFIG = window.KoiAuditConfig || {};
const API = (CONFIG.apiBase || '/wp-json/koi-audit/v1').replace(/\/$/, '');

const LOADING_MESSAGES = [
  'Loading the page…',
  'Capturing a preview…',
  'Measuring paint timing…',
  'Checking layout stability…',
  'Running technical checks…',
  'Scanning search readiness…',
  'Compiling the report…',
];

function scoreColor(score) {
  if (score >= 90) return 'var(--green)';
  if (score >= 50) return 'var(--coral)';
  return 'var(--magenta)';
}

function verdictCopy(score) {
  if (score >= 90) return { title: 'Your site is fast.', body: 'This is not where you\u2019re losing leads. Worth checking conversion flow and AI visibility next.' };
  if (score >= 50) return { title: 'There\u2019s real money on the table.', body: 'Visitors are waiting longer than they should. Every extra second of load time is visitors who leave before they see your offer.' };
  return { title: 'This is actively costing you leads.', body: 'A site this slow loses a meaningful share of visitors before the page even finishes loading.' };
}

function CheckIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10" opacity="0.15" fill="currentColor" stroke="none" />
      <path d="M7 12.5l3 3 7-7" />
    </svg>
  );
}

function XIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10" opacity="0.15" fill="currentColor" stroke="none" />
      <path d="M8 8l8 8M16 8l-8 8" />
    </svg>
  );
}

function LockIcon() {
  return (
    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="5" y="11" width="14" height="9" rx="2" />
      <path d="M8 11V7a4 4 0 0 1 8 0v4" />
    </svg>
  );
}

function SparkleIcon() {
  return (
    <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="none">
      <path d="M12 2l1.8 6.2L20 10l-6.2 1.8L12 18l-1.8-6.2L4 10l6.2-1.8L12 2z" />
    </svg>
  );
}

function Gauge({ score }) {
  const r = 58;
  const c = 2 * Math.PI * r;
  const pct = Math.max(0, Math.min(100, score));
  const offset = c - (pct / 100) * c;
  const color = scoreColor(pct);
  return (
    <div className="gauge-wrap">
      <svg width="140" height="140" viewBox="0 0 140 140">
        <circle cx="70" cy="70" r={r} fill="none" stroke="var(--line)" strokeWidth="10" />
        <circle
          cx="70" cy="70" r={r} fill="none" stroke={color} strokeWidth="10"
          strokeDasharray={c} strokeDashoffset={offset} strokeLinecap="round"
          style={{ transition: 'stroke-dashoffset 1s ease, stroke 0.3s ease' }}
        />
      </svg>
      <div className="gauge-num">
        <div className="n" style={{ color }}>{Math.round(pct)}</div>
        <div className="label">/ 100</div>
      </div>
    </div>
  );
}

function Loader() {
  const [i, setI] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setI((v) => (v + 1) % LOADING_MESSAGES.length), 1700);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="loader">
      <div className="spinner">
        <svg viewBox="0 0 64 64">
          <circle cx="32" cy="32" r="26" />
        </svg>
      </div>
      <div className="loader-text">
        <div className="lt-title">Running the check</div>
        <div className="lt-msg">{LOADING_MESSAGES[i]}</div>
      </div>
    </div>
  );
}

function Metric({ label, value }) {
  return (
    <div className="metric">
      <div className="m-label">{label}</div>
      <div className="m-val">{value ?? '—'}</div>
    </div>
  );
}

function PreviewCard({ url, screenshot }) {
  if (!screenshot) return null;
  return (
    <div className="preview-card">
      <div className="preview-chrome">
        <div className="dot" /><div className="dot" /><div className="dot" />
        <div className="u">{url}</div>
      </div>
      <img src={screenshot} alt="Screenshot of the site as it loaded during the test" />
    </div>
  );
}

function AiReportCard({ aiReport }) {
  if (!aiReport) return null;
  return (
    <div className="ai-report-card">
      <div className="ai-report-badge"><SparkleIcon /> AI-generated</div>
      <h3 className="ai-report-headline">{aiReport.headline}</h3>
      <p className="ai-report-summary">{aiReport.summary}</p>
      <ol className="ai-action-list">
        {(aiReport.actionPlan || []).map((item, idx) => (
          <li className="ai-action-item" key={idx}>
            <span className="ai-action-num">{idx + 1}</span>
            <div>
              <div className="ai-a-title">{item.title}</div>
              <div className="ai-a-reason">{item.reason}</div>
            </div>
          </li>
        ))}
      </ol>
    </div>
  );
}

function CtaBanner() {
  if (!CONFIG.ctaUrl) return null;
  return (
    <div className="cta-banner">
      <div className="cta-text">Want this fixed instead of just flagged?</div>
      <a className="cta-button" href={CONFIG.ctaUrl}>{CONFIG.ctaLabel || 'Book a call'}</a>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Full report — used both for the visitor's emailed link (?r=TOKEN) and the
// admin preview (CONFIG.previewToken). Everything here already passed through
// /submit, so no email gate — this view is about proving the token and rendering.
// ---------------------------------------------------------------------------
function FullReport({ token, preview }) {
  const [status, setStatus] = useState('loading');
  const [errorMsg, setErrorMsg] = useState('');
  const [data, setData] = useState(null);
  const [aiReport, setAiReport] = useState(null);

  useEffect(() => {
    const params = new URLSearchParams({ token });
    if (preview) params.set('preview', '1');
    const headers = preview && CONFIG.nonce ? { 'X-WP-Nonce': CONFIG.nonce } : {};

    fetch(`${API}/report?${params.toString()}`, { headers })
      .then(async (res) => {
        const json = await res.json().catch(() => null);
        if (!res.ok || !json?.success) throw new Error(json?.message || 'This report could not be loaded.');
        setData(json.data);
        setAiReport(json.aiReport || null);
        setStatus('ready');
      })
      .catch((err) => {
        setErrorMsg(err.message || 'This report could not be loaded.');
        setStatus('error');
      });
  }, [token, preview]);

  if (status === 'loading') return <Loader />;
  if (status === 'error') return <div className="status err">{errorMsg}</div>;

  const verdict = verdictCopy(data.score);

  return (
    <div className="wrap">
      <div className="gauge-block">
        <Gauge score={data.score} />
        <div className="verdict">
          <h2>{verdict.title}</h2>
          <p>{verdict.body}</p>
        </div>
      </div>

      <PreviewCard url={data.finalUrl} screenshot={data.screenshot} />

      <AiReportCard aiReport={aiReport} />

      <div className="section-title">Core metrics</div>
      <div className="metrics">
        <Metric label="Largest Contentful Paint" value={data.lcp} />
        <Metric label="Cumulative Layout Shift" value={data.cls} />
        <Metric label="Total Blocking Time" value={data.tbt} />
        <Metric label="Speed Index" value={data.si} />
      </div>

      {data.checks.length > 0 && (
        <React.Fragment>
          <div className="section-title">Technical checks</div>
          <div className="checks-grid">
            {data.checks.map((c, idx) => (
              <div key={idx} className={`check-row ${c.pass ? 'pass' : 'fail'}`}>
                <span className="mark">{c.pass ? <CheckIcon /> : <XIcon />}</span>
                {c.label}
              </div>
            ))}
          </div>
        </React.Fragment>
      )}

      {data.topIssues.length > 0 && (
        <React.Fragment>
          <div className="section-title">Top issues found</div>
          {data.topIssues.map((issue, idx) => (
            <div className="issue-card" key={idx}>
              <div className="i-num">{String(idx + 1).padStart(2, '0')}</div>
              <div>
                <div className="i-title">{issue.title}</div>
                <div className="i-desc">{issue.description}</div>
                {issue.savingsMs != null && (
                  <div className="i-savings">~{issue.savingsMs}ms of load time at stake</div>
                )}
              </div>
            </div>
          ))}
        </React.Fragment>
      )}

      <div className="section-title">AI &amp; search visibility</div>
      <div className="ai-grid">
        <div className="ai-card">
          <div className="ai-label">Crawlability &amp; readiness</div>
          <div className="ai-score" style={{ color: scoreColor(data.seoScore ?? 0) }}>
            {data.seoScore != null ? Math.round(data.seoScore) : '—'}
          </div>
          <div className="ai-desc">How easily search engines and AI crawlers can read, index, and quote this page — based on real crawlability and metadata signals.</div>
        </div>
        <div className="ai-card ai-locked">
          <div className="lock-badge"><LockIcon /> Full Website Audit</div>
          <div className="ai-desc">Live test of whether ChatGPT and Perplexity actually mention this business in real answers — included in the full Website Audit.</div>
        </div>
      </div>

      {!preview && <CtaBanner />}

      <div className="note">
        Scored on <code>{data.strategy}</code> via Google PageSpeed Insights (Lighthouse).
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Scan flow — the URL check, the partial report, and the email capture that
// unlocks the rest via the emailed link. Nothing here calls Anthropic or
// Google directly; both live behind /check and /submit on this same plugin.
// ---------------------------------------------------------------------------
function ScanApp() {
  const [url, setUrl] = useState('');
  const [strategy, setStrategy] = useState('mobile');
  const [status, setStatus] = useState('');
  const [isError, setIsError] = useState(false);
  const [loading, setLoading] = useState(false);
  const [checkId, setCheckId] = useState(null);
  const [partial, setPartial] = useState(null);

  const [firstName, setFirstName] = useState('');
  const [email, setEmail] = useState('');
  const [consent, setConsent] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState('');
  const [sent, setSent] = useState(false);

  const runCheck = useCallback(async (e) => {
    e.preventDefault();
    if (!url.trim()) return;
    let target = url.trim();
    if (!/^https?:\/\//i.test(target)) target = 'https://' + target;

    setLoading(true);
    setIsError(false);
    setStatus('');
    setPartial(null);
    setCheckId(null);
    setSent(false);
    setSubmitError('');

    try {
      const params = new URLSearchParams({ url: target, strategy });
      const res = await fetch(`${API}/check?${params.toString()}`);
      const json = await res.json().catch(() => null);
      if (!res.ok || !json?.partial) {
        throw new Error(json?.error || `Request failed (${res.status})`);
      }
      setCheckId(json.checkId);
      setPartial(json.partial);
    } catch (err) {
      setIsError(true);
      setStatus(err.message || 'Something went wrong.');
    } finally {
      setLoading(false);
    }
  }, [url, strategy]);

  const submitEmail = useCallback(async (e) => {
    e.preventDefault();
    if (!email.trim() || !checkId) return;
    if (CONFIG.consentRequired && !consent) {
      setSubmitError('Please tick the box to receive your report.');
      return;
    }

    setSubmitting(true);
    setSubmitError('');
    try {
      const res = await fetch(`${API}/submit`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          checkId,
          email: email.trim(),
          firstName: firstName.trim(),
          consent,
          website_hp: '', // honeypot — left blank by real visitors
        }),
      });
      const json = await res.json().catch(() => ({}));
      if (!res.ok || !json.success) {
        throw new Error(json.message || `Request failed (${res.status})`);
      }
      setSent(true);
    } catch (err) {
      setSubmitError(err.message || 'Something went wrong.');
    } finally {
      setSubmitting(false);
    }
  }, [email, firstName, consent, checkId]);

  const verdict = partial ? verdictCopy(partial.score) : null;

  return (
    <div className="wrap">
      <form onSubmit={runCheck}>
        <input
          type="text"
          placeholder="yourbusiness.com"
          value={url}
          onChange={(e) => setUrl(e.target.value)}
          disabled={loading}
          className="field-url"
        />
        <button className="run" type="submit" disabled={loading}>
          {loading ? 'Checking…' : 'Check my score'}
        </button>
      </form>

      <div className="row-controls">
        <div className="strategy-toggle">
          <button
            type="button"
            className={strategy === 'mobile' ? 'active' : ''}
            onClick={() => setStrategy('mobile')}
          >Mobile</button>
          <button
            type="button"
            className={strategy === 'desktop' ? 'active' : ''}
            onClick={() => setStrategy('desktop')}
          >Desktop</button>
        </div>
      </div>

      {status && <div className={`status ${isError ? 'err' : ''}`}>{status}</div>}

      {loading && <Loader />}

      {partial && (
        <div className="result">
          <div className="gauge-block">
            <Gauge score={partial.score} />
            <div className="verdict">
              <h2>{verdict.title}</h2>
              <p>{verdict.body}</p>
            </div>
          </div>

          <PreviewCard url={partial.finalUrl} screenshot={partial.screenshot} />

          <div className="section-title">Core metrics</div>
          <div className="metrics">
            <Metric label="Largest Contentful Paint" value={partial.lcp} />
            <Metric label="Cumulative Layout Shift" value={partial.cls} />
            <Metric label="Total Blocking Time" value={partial.tbt} />
            <Metric label="Speed Index" value={partial.si} />
          </div>

          <div className="section-title">Technical checks</div>
          <div className="checks-summary">
            {partial.checksPassed} of {partial.checksTotal} checks passed
          </div>

          {partial.firstIssue && (
            <React.Fragment>
              <div className="section-title">Top issue found</div>
              <div className="issue-card">
                <div className="i-num">01</div>
                <div>
                  <div className="i-title">{partial.firstIssue.title}</div>
                  <div className="i-desc">{partial.firstIssue.description}</div>
                  {partial.firstIssue.savingsMs != null && (
                    <div className="i-savings">~{partial.firstIssue.savingsMs}ms of load time at stake</div>
                  )}
                </div>
              </div>
              {partial.moreIssues > 0 && (
                <div className="more-issues">+{partial.moreIssues} more in your full report</div>
              )}
            </React.Fragment>
          )}

          {!sent ? (
            <div className="email-capture">
              <div className="section-title">Get your full report</div>
              <p className="ec-sub">The itemized checklist, every issue with estimated savings, and a prioritized action plan — emailed to you now.</p>
              <form onSubmit={submitEmail} className="ec-form">
                <div className="ec-form-fields">
                  <input
                    type="text"
                    placeholder="First name"
                    value={firstName}
                    onChange={(e) => setFirstName(e.target.value)}
                    disabled={submitting}
                  />
                  <input
                    type="email"
                    required
                    placeholder="you@business.com"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    disabled={submitting}
                  />
                </div>
                <label className="ec-consent">
                  <input
                    type="checkbox"
                    checked={consent}
                    onChange={(e) => setConsent(e.target.checked)}
                    required={!!CONFIG.consentRequired}
                  />
                  {CONFIG.consentText || 'I agree to receive email updates and promotions.'}
                </label>
                {submitError && <div className="status err">{submitError}</div>}
                <button className="run" type="submit" disabled={submitting}>
                  {submitting ? 'Sending…' : 'Email me my full report'}
                </button>
              </form>
            </div>
          ) : (
            <div className="sent-confirm">
              <div className="sent-title">Check your inbox</div>
              <p>We{'\u2019'}ve sent your full report to {email}. It usually arrives within a minute or two.</p>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

function App() {
  const params = new URLSearchParams(window.location.search);
  const token = params.get('r') || CONFIG.previewToken || null;
  if (token) return <FullReport token={token} preview={!!CONFIG.previewToken} />;
  return <ScanApp />;
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);