/* WP Site Beam — Volatility / Point-in-Time Disclaimer
   Reusable notice used on Proposals, Scans, Care Plan surfaces, File Map, Estimator.
   Variants: full (with full legal text), compact (one-line badge), proposal (formal PDF-style).
*/

const VOLATILITY_SHORT = 'Point-in-time snapshot — third-party changes (plugins, themes, cache, CDN, WordPress core, user edits) can break or regress scanned items at any time. Continuous monitoring required for ongoing compliance.';

const VOLATILITY_FULL = `ADA/accessibility compliance, file availability, redirects, SEO metadata, page performance, and other site data reflect the state of the site at the time of this scan. Any change to plugins, WordPress core, themes, caching layers, CDN, media library, or content — whether made by a user, agency, automatic update, or third-party integration — can break, alter, or regress these items, sometimes within hours of scanning. WPSiteBeam reports a point-in-time snapshot. Ongoing compliance requires continuous monitoring (included in active Care Plans). Regressions introduced by third-party changes outside WPSiteBeam's direct control are not WPSiteBeam's liability unless covered by an active monitoring or remediation agreement.`;

const VOLATILITY_PROPOSAL = `This proposal and its underlying scan reflect the site's state at the time of audit. WordPress sites are dynamic: plugin updates, theme changes, cache/CDN configuration, media uploads, content edits, and automatic security patches can all alter or invalidate findings in this document — sometimes within hours. Deliverables are priced and scoped against the scan date; discovery of additional issues introduced after the scan may require scope revision. Ongoing compliance (ADA, SEO, performance, security) requires continuous monitoring and is covered separately under our Care Plans. Regressions caused by third-party changes outside active monitoring are not WPSiteBeam's liability.`;

function VolatilityNotice({ variant = 'full', scope = 'scan', style = {}, scanDate = null }) {
  // scope lets us tune wording: 'scan' | 'ada' | 'proposal' | 'carePlan' | 'fileMap' | 'estimator'
  const scopeLabels = {
    scan: 'Scan snapshot',
    ada: 'ADA snapshot',
    proposal: 'Point-in-time proposal',
    carePlan: 'Care Plan volatility',
    fileMap: 'File snapshot',
    estimator: 'Estimate volatility',
  };
  const label = scopeLabels[scope] || scopeLabels.scan;

  // Inline / compact: minimal one-liner with info icon + tooltip
  if (variant === 'compact' || variant === 'inline') {
    return (
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        fontSize: '.68rem', color: 'var(--muted)',
        fontFamily: 'var(--font-mono)', letterSpacing: '.02em',
        padding: '3px 8px', borderRadius: 4,
        background: 'var(--surface-2)', border: '1px solid var(--border)',
        ...style,
      }} title={VOLATILITY_FULL}>
        <Icon name="info" size={11}/>
        <span>{label.toUpperCase()} — third-party changes can regress findings.</span>
      </div>
    );
  }

  // Proposal: formal prose paragraph for embedded proposal documents
  if (variant === 'proposal') {
    return (
      <div style={{
        padding: '14px 18px',
        background: 'var(--surface-2)',
        border: '1px solid var(--border)',
        borderLeft: '3px solid var(--warn)',
        borderRadius: 4,
        fontSize: '.78rem',
        lineHeight: 1.6,
        color: 'var(--text-2)',
        ...style,
      }}>
        <div style={{ fontSize: '.7rem', fontWeight: 700, letterSpacing: '.06em', color: 'var(--warn)', fontFamily:'var(--font-mono)', marginBottom: 6 }}>
          POINT-IN-TIME DISCLOSURE
        </div>
        <div>{VOLATILITY_PROPOSAL}</div>
        {scanDate && (
          <div style={{ marginTop: 8, fontSize: '.72rem', color: 'var(--dim)', fontFamily:'var(--font-mono)' }}>
            Scan date of record: {scanDate}
          </div>
        )}
      </div>
    );
  }

  // Full: boxed notice with icon + short + expandable full text
  return (
    <VolatilityExpandable scope={scope} label={label} style={style} scanDate={scanDate}/>
  );
}

function VolatilityExpandable({ scope, label, style, scanDate }) {
  const { useState } = React;
  const [open, setOpen] = useState(false);
  return (
    <div style={{
      padding: '10px 12px',
      background: 'var(--surface-2)',
      border: '1px solid var(--border)',
      borderLeft: '3px solid var(--warn)',
      borderRadius: 4,
      fontSize: '.74rem',
      lineHeight: 1.5,
      color: 'var(--text-2)',
      display: 'flex',
      gap: 10,
      alignItems: 'flex-start',
      ...style,
    }}>
      <div style={{ color:'var(--warn)', flexShrink: 0, marginTop: 2 }}>
        <Icon name="warn" size={14}/>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize:'.68rem', fontWeight:700, letterSpacing:'.06em', color:'var(--warn)', fontFamily:'var(--font-mono)', marginBottom: 3 }}>
          {label.toUpperCase()}{scanDate ? ` · ${scanDate}` : ''}
        </div>
        <div>
          {open ? VOLATILITY_FULL : VOLATILITY_SHORT}
        </div>
        <button
          onClick={() => setOpen(o => !o)}
          style={{
            marginTop: 6, background: 'transparent', border: 'none',
            color: 'var(--beam)', fontSize: '.72rem',
            cursor: 'pointer', padding: 0, fontFamily: 'inherit',
          }}
          aria-expanded={open}
        >
          {open ? '↑ Show less' : '↓ Read full disclosure'}
        </button>
      </div>
    </div>
  );
}

window.VolatilityNotice = VolatilityNotice;
window.VOLATILITY_SHORT = VOLATILITY_SHORT;
window.VOLATILITY_FULL = VOLATILITY_FULL;
window.VOLATILITY_PROPOSAL = VOLATILITY_PROPOSAL;