// ---- SaaS tool views: Domain WHOIS + Domain value (field + result only) ----
const { useState: _useState, useEffect: _useEffect } = React;

function _clean(v) { return (v || '').trim().toLowerCase().replace(/^https?:\/\//, '').replace(/^www\./, '').replace(/\/.*$/, '').replace(/\s+/g, ''); }
function _f$(n) { return '$' + n.toLocaleString('en-US'); }
function _title(w) { return w.charAt(0).toUpperCase() + w.slice(1); }

const _MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function _fmt(d) { return _MONTHS[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear(); }
function _fmtIso(iso) { if (!iso) return '—'; const d = new Date(iso); return isNaN(d.getTime()) ? '—' : _fmt(d); }
function _ageYears(iso) {
  if (!iso) return null;
  const d = new Date(iso); if (isNaN(d.getTime())) return null;
  const ms = Date.now() - d.getTime(); if (ms < 0) return null;
  return Math.floor(ms / (365.25 * 24 * 3600 * 1000));
}

function ToolHead({ title, sub }) {
  return <React.Fragment><h1 className="view-title">{title}</h1><p className="view-sub">{sub}</p></React.Fragment>;
}

function WhoisView({ initialDomain, autoRun, onConsumed }) {
  const [val, setVal] = _useState(initialDomain || 'google.com');
  const [w, setW] = _useState(null);
  const [err, setErr] = _useState('');
  const [busy, setBusy] = _useState(false);
  const run = () => {
    const raw = _clean(val);
    if (!raw || raw.indexOf('.') < 1) { setErr('Enter a domain like example.com'); setW(null); return; }
    setBusy(true); setErr(''); setW(null);
    fetch('/api/domains/whois', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ domain: raw }),
    })
      .then(r => r.ok
        ? r.json()
        : r.text().then(t => { let m; try { m = JSON.parse(t).message; } catch (e) {} return Promise.reject(new Error(m || 'Lookup failed')); }))
      .then(rec => setW(rec))
      .catch(e => setErr(e.message || 'Could not look up this domain right now.'))
      .finally(() => setBusy(false));
  };
  // Deep-link from the marketing WHOIS tool: auto-run once for the carried domain.
  _useEffect(() => {
    if (autoRun && initialDomain) { run(); if (onConsumed) onConsumed(); }
  }, []);
  const age = w && w.available !== true ? _ageYears(w.createdAt) : null;
  return (
    <div className="view view-wide">
      <ToolHead title="Domain WHOIS" sub="Look up the public registration record for any domain." />
      <div className="tool-card">
        <div className="tool-input-row">
          <span className="tool-proto">https://</span>
          <input className="tool-input" value={val} onChange={e => setVal(e.target.value)}
            onKeyDown={e => { if (e.key === 'Enter') run(); }} placeholder="example.com" spellCheck={false} />
          <button className="btn-primary" onClick={run} disabled={busy}>{busy ? 'Looking up…' : 'Look up'}</button>
        </div>
        {err ? <div className="tool-error">{err}</div> : null}
      </div>
      {w && w.available === true ? (
        <div className="tool-report">
          <div className="tr-head">
            <div><div className="tr-domain">{w.domain}</div><div className="tr-sub">Public WHOIS record</div></div>
            <span className="tr-badge tr-avail">Available</span>
          </div>
          <div className="tr-empty">This domain isn’t registered, so there’s no public WHOIS record yet — it may be available to register.</div>
        </div>
      ) : null}
      {w && w.available !== true ? (
        <div className="tool-report">
          <div className="tr-head">
            <div><div className="tr-domain">{w.domain}</div><div className="tr-sub">Public WHOIS record</div></div>
            <span className="tr-badge tr-reg">Registered</span>
          </div>
          <div className="tr-grid">
            <div className="tr-stat"><div className="tr-k">Domain age</div><div className="tr-v">{age != null ? (age + ' year' + (age === 1 ? '' : 's')) : '—'}</div></div>
            <div className="tr-stat"><div className="tr-k">Created</div><div className="tr-v">{_fmtIso(w.createdAt)}</div></div>
            <div className="tr-stat"><div className="tr-k">Expires</div><div className="tr-v">{_fmtIso(w.expiresAt)}</div></div>
            <div className="tr-stat"><div className="tr-k">Updated</div><div className="tr-v">{_fmtIso(w.updatedAt)}</div></div>
          </div>
          <div className="tr-rows">
            <div className="tr-row"><span className="tr-rk">Registrar</span><span className="tr-rv">{w.registrar || <span className="tr-muted">Not disclosed</span>}</span></div>
            <div className="tr-row"><span className="tr-rk">Registrant</span><span className="tr-rv">{w.registrant ? w.registrant : <span className="tr-muted">{w.registrantRedacted ? 'Redacted for privacy' : 'Not disclosed'}</span>}</span></div>
            <div className="tr-row"><span className="tr-rk">Name servers</span><span className="tr-rv">{w.nameservers && w.nameservers.length ? w.nameservers.map(n => <code key={n}>{n}</code>) : <span className="tr-muted">Not disclosed</span>}</span></div>
            <div className="tr-row"><span className="tr-rk">DNSSEC</span><span className="tr-rv">{w.dnssec == null ? <span className="tr-muted">Unknown</span> : (w.dnssec ? <span className="tr-ok">● Signed</span> : <span className="tr-off">○ Unsigned</span>)}</span></div>
            <div className="tr-row"><span className="tr-rk">Domain lock</span><span className="tr-rv">{w.locked == null ? <span className="tr-muted">Unknown</span> : (w.locked ? <span className="tr-ok">● Locked</span> : <span className="tr-off">○ Unlocked</span>)}</span></div>
            <div className="tr-row"><span className="tr-rk">Status codes</span><span className="tr-rv">{w.statuses && w.statuses.length ? w.statuses.map(s => <span className="tr-tag" key={s}>{s}</span>) : <span className="tr-muted">Not disclosed</span>}</span></div>
          </div>
        </div>
      ) : null}
    </div>
  );
}

function DomainValueView({ valueCost = 100, canAfford = true, onReserve, onRefund, onCharged, onFindNames, onBuy, initialDomain, autoRun, onConsumed }) {
  const [val, setVal] = _useState(initialDomain || 'nestwise.com');
  const [d, setD] = _useState(null);
  const [busy, setBusy] = _useState(false);
  const [err, setErr] = _useState(null);
  // Real registry availability for the evaluated domain (separate from the
  // valuation API, which carries no availability signal). 'checking' while
  // in flight; available is true / false / null (null = inconclusive lookup).
  const [avail, setAvail] = _useState({ status: 'idle', available: null });
  // Authoritative availability check (RDAP/WHOIS) for the evaluated domain. Only
  // a determinate `true` unlocks "Buy now"; taken or inconclusive falls back to
  // the neutral "Find available names" CTA — we never claim availability.
  const checkAvail = (full) => {
    setAvail({ status: 'checking', available: null });
    fetch('/api/domains/check', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ domain: full }),
    })
      .then(async (resp) => {
        const data = await resp.json().catch(() => ({}));
        const a = (data && typeof data.available === 'boolean') ? data.available : null;
        setAvail({ status: 'done', available: a });
      })
      .catch(() => setAvail({ status: 'done', available: null }));
  };
  // Build the domain object the shared buy panel expects (name score + estimated
  // value + registrar price comparison). Price comes from the local TLD table so
  // the registrar offers render real figures.
  const buyDomain = () => {
    const ext = d.ext;
    const t = (window.TLDS || []).find(x => x.ext === ext);
    return {
      id: d.label + ext,
      name: d.label,
      ext,
      display: _title(d.label) + ext,
      available: true,
      price: t ? t.price : 12.99,
      currency: 'USD',
    };
  };
  // Hard re-entrancy guard: `busy` state updates asynchronously, so a rapid
  // double-trigger could reserve credits twice before the UI disables. This ref
  // flips synchronously and is the authority for "an evaluation is in flight".
  const inFlight = React.useRef(false);
  const run = () => {
    if (busy || inFlight.current) return;
    const raw = _clean(val);
    if (!raw || raw.indexOf('.') < 1) { setErr('Enter a full domain like example.com'); return; }
    // Cache-first: a domain already valued this session shows instantly and is
    // not charged again (we never bill twice for the same lookup).
    const cached = window.getValueCache && window.getValueCache(raw);
    if (cached) { setErr(null); setD(window.mapValuation(cached)); checkAvail(raw); return; }
    if (!canAfford) { setErr('Not enough credits for an evaluation.'); return; }
    // Reserve the credits up front; refund below if the evaluation fails.
    if (onReserve && !onReserve()) { setErr('Not enough credits for an evaluation.'); return; }
    inFlight.current = true;
    setBusy(true); setErr(null); setD(null); setAvail({ status: 'idle', available: null });
    fetch('/api/domains/value', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ domain: raw }),
    })
      .then(async (resp) => {
        const data = await resp.json().catch(() => ({}));
        if (!resp.ok || typeof data.mid !== 'number') {
          if (onRefund) onRefund(valueCost);
          setErr((data && data.message) ? data.message : 'Could not value this domain. Please try again.');
          setD(null); return;
        }
        if (window.setValueCache) window.setValueCache(raw, data);
        setD(window.mapValuation(data));
        if (onCharged) onCharged(raw);
        checkAvail(raw);
      })
      .catch(() => {
        if (onRefund) onRefund(valueCost);
        setErr('Could not reach the valuation service. Please try again.');
        setD(null);
      })
      .then(() => { inFlight.current = false; setBusy(false); });
  };
  // Deep-link from the marketing value tool: auto-run once for the carried domain.
  _useEffect(() => {
    if (autoRun && initialDomain) { run(); if (onConsumed) onConsumed(); }
  }, []);
  const fallback = d && (d.overall >= 78 ? 'A premium, highly brandable domain with strong resale demand.'
    : d.overall >= 65 ? 'A solid, brandable domain with real commercial value.'
      : d.overall >= 50 ? 'A usable domain — a few traits hold its value back.'
        : 'A weaker domain; length, spelling or extension limit its worth.');
  const verdict = d ? (d.positiveFactors.length ? d.positiveFactors.slice(0, 2).join('. ') + '.' : fallback) : '';
  return (
    <div className="view view-wide">
      <ToolHead title="Domain value" sub="Estimate what any domain is worth — real market data." />
      <div className="tool-card">
        <div className="tool-input-row">
          <span className="tool-proto">https://</span>
          <input className="tool-input" value={val} onChange={e => setVal(e.target.value)}
            onKeyDown={e => { if (e.key === 'Enter') run(); }} placeholder="example.com" spellCheck={false} />
          <button className="btn-primary" onClick={run} disabled={busy}>{busy ? 'Evaluating…' : 'Evaluate'}</button>
        </div>
        <div className="tool-cost"><span className="tool-cost-dot">◈</span> <b>{valueCost} credits</b> per evaluation</div>
        {err ? <div className="tool-err">{err}</div> : null}
      </div>
      {d ? (
        <div className="tool-report">
          <div className="tr-head">
            <div><div className="tr-domain">{_title(d.label)}<span className="domain-ext">{d.ext}</span></div><div className="tr-sub">Estimated value &amp; brand analysis</div></div>
            <div className="tr-badges">
              {avail.available === true ? <span className="tr-badge tr-avail">Available</span>
                : avail.available === false ? <span className="tr-badge tr-taken">Registered</span>
                : avail.status === 'checking' ? <span className="tr-badge tr-checking">Checking…</span> : null}
              {d.confidenceLabel ? <span className="tr-badge tr-conf">{d.confidenceLabel} confidence</span> : null}
            </div>
          </div>
          <div className="ev-value">
            <div><div className="tr-k">Estimated value</div><div className="ev-fig">{_f$(d.val)} <span>{d.currency}</span></div><div className="ev-range">Fair range {_f$(d.low)} – {_f$(d.high)}</div></div>
            {d.grade ? <div className={'ev-grade ev-grade-' + d.grade.replace('+', 'p')}><div className="ev-grade-l">{d.grade}</div><div className="ev-grade-n">{d.overall}/100</div></div> : null}
          </div>
          <p className="ev-verdict">{verdict}</p>
          {d.negativeFactors.length ? <p className="ev-verdict ev-verdict-warn">Watch-outs: {d.negativeFactors.slice(0, 2).join('. ')}.</p> : null}
          {d.metrics.length ? (
            <React.Fragment>
              <div className="ev-metrics-head"><span>Checks run</span><span className="ev-credits-tot">{valueCost} credits used</span></div>
              <div className="ev-metrics">
                {d.metrics.map(m => {
                  const cls = m[1] >= 75 ? 'hi' : m[1] >= 50 ? 'mid' : 'lo';
                  return (
                    <div className="ev-metric" key={m[0]}>
                      <div className="ev-metric-top"><span className="ev-metric-name">{m[0]}<span className="ev-metric-cr">{m[2]} cr</span></span><span className="ev-metric-v">{m[1]}</span></div>
                      <div className="ev-track"><i className={'ev-fill-' + cls} style={{ width: m[1] + '%' }}></i></div>
                    </div>
                  );
                })}
              </div>
            </React.Fragment>
          ) : null}
          <div className="ev-cta">
            {avail.available === true ? (
              <React.Fragment>
                <div><div className="ev-cta-t">{_title(d.label)}{d.ext} is available</div><div className="ev-cta-s">Grab it now — see the full name review and compare live registrar prices.</div></div>
                {onBuy ? <button className="btn-primary" onClick={() => onBuy(buyDomain())}>Buy now</button> : null}
              </React.Fragment>
            ) : (
              <React.Fragment>
                <div><div className="ev-cta-t">Looking to buy a name this strong?</div><div className="ev-cta-s">{avail.available === false ? _title(d.label) + d.ext + ' is already registered. Generate available alternatives instead.' : 'Head to Names to generate available domains with live registrar prices.'}</div></div>
                {onFindNames ? <button className="btn-primary" onClick={onFindNames}>{avail.status === 'checking' ? 'Checking…' : 'Find available names'}</button> : null}
              </React.Fragment>
            )}
          </div>
          <p className="ev-note">Algorithmic intrinsic-value estimate — based on length, extension, brandability and market comparables. Excludes website traffic, revenue and brand equity. A guide for research and negotiation, not an offer.</p>
        </div>
      ) : null}
    </div>
  );
}

Object.assign(window, { WhoisView, DomainValueView });