/**
 * results.jsx — Step 4 (Results) and its tier-layout variants.
 *
 * Membership pricing model (per Molly Maid pricing matrix):
 *
 *   Molly Maid On Demand — pay-per-clean, no commitment, our 44-pt clean
 *   Rose                 — biweekly member, 12-mo commitment
 *   Rose Gold            — weekly member, 12-mo commitment   ← Most Popular
 *   Pink Diamond         — weekly + premium services + seasonal deep cleans
 *
 * Per-clean price ordering: Rose < Rose Gold < On Demand < Pink Diamond.
 * The membership offer (1st clean at regular price, 12-month commitment)
 * applies to all three member tiers.
 *
 * Three layout variants, toggleable from the Tweaks panel:
 *
 *   • Cards    — four vertical cards, side-by-side at desktop, 2×2 at tablet.
 *   • Compare  — feature comparison table; tiers as columns, what's included
 *                as rows (including text-value rows for frequency, commitment).
 *   • Stack    — horizontal rows, one per tier. Most compact.
 *
 * Other tweaks read:
 *   • priceDisplay  — single number ($185) vs. range ($165–$205)
 *   • showPopular   — highlight the recommended tier
 *   • showScore     — show/hide the navy cleanliness-score block
 */

// What each tier delivers — bullets shown on cards & stack rows. The
// "offer" string is the membership lock-up (12-mo + first-clean offer);
// shows beneath the price on member tiers, blank on Regular.
const TIER_DETAILS = {
  'regular': {
    eyebrow: 'Pay Per Clean',
    frequency: 'Flexible',
    popular: false,
    offer: null,
    bullets: [
      'Our 44-point clean every visit',
      'Book one-time, weekly, or biweekly',
      'No contract — pay per clean',
      'Same trusted team when possible',
    ],
    ctaLabel: 'Book On Demand',
  },
  'rose': {
    eyebrow: 'Member · Biweekly',
    frequency: 'Every other week',
    popular: false,
    offer: 'First clean at On Demand price · 12-month commitment',
    bullets: [
      'Every-other-week cleans at member pricing',
      'Preferential scheduling on member-only dates',
      'Better value than On Demand for steady upkeep',
      'First clean billed at the On Demand rate',
    ],
    ctaLabel: 'Join Rose',
  },
  'rose-gold': {
    eyebrow: 'Member · Weekly',
    frequency: 'Weekly',
    popular: true,
    offer: 'First clean at On Demand price · 12-month commitment',
    bullets: [
      'Weekly cleans at member pricing',
      'Preferential scheduling on member-only dates',
      'The sweet spot — most popular member tier',
      'First clean billed at the On Demand rate',
    ],
    ctaLabel: 'Join Rose Gold',
  },
  'pink-diamond': {
    eyebrow: 'Member · Premium',
    frequency: 'Weekly + premium',
    popular: false,
    offer: 'First clean at On Demand price · 12-month commitment',
    bullets: [
      'Weekly cleans at premium member tier',
      '3 Extra Detail services included every clean',
      '1 Molly Premium service included every clean',
      '2 seasonal deep cleans per year (up to 3 hr)',
      'Preferential scheduling on member-only dates',
    ],
    ctaLabel: 'Join Pink Diamond',
  },
};

const TIER_ORDER = ['regular', 'rose', 'rose-gold', 'pink-diamond'];

// Compare table rows. Each `values` map carries either a string (rendered
// as plain text), `true` (rendered as a check pill), or `null`/missing
// (rendered as a dash).
const COMPARE_ROWS = [
  {
    label: 'Cleaning cadence',
    values: { 'regular': 'Flexible', 'rose': 'Biweekly', 'rose-gold': 'Weekly', 'pink-diamond': 'Weekly' },
  },
  {
    label: 'Membership commitment',
    values: { 'regular': '—', 'rose': '12 months', 'rose-gold': '12 months', 'pink-diamond': '12 months' },
  },
  {
    label: 'First clean billed at On Demand price',
    values: { 'regular': '—', 'rose': true, 'rose-gold': true, 'pink-diamond': true },
  },
  {
    label: 'Member-only seasonal scheduling',
    values: { 'regular': '—', 'rose': true, 'rose-gold': true, 'pink-diamond': true },
  },
  {
    label: 'Extra Detail services per clean',
    values: { 'regular': '—', 'rose': '—', 'rose-gold': '—', 'pink-diamond': '3 included' },
  },
  {
    label: 'Molly Premium service per clean',
    values: { 'regular': '—', 'rose': '—', 'rose-gold': '—', 'pink-diamond': '1 included' },
  },
  {
    label: 'Seasonal deep cleans per year',
    values: { 'regular': '—', 'rose': '—', 'rose-gold': '—', 'pink-diamond': '2 included · up to 3 hr' },
  },
];

function formatTierPrice(price) {
  return window.MollyUtils.formatPrice(price);
}

// ── Layout: Cards (4-up) ──────────────────────────────────────────────────

function TierCards({ services, tweaks, onChoose }) {
  return (
    <div className="service-list service-list--4col">
      {services.map((svc) => {
        const meta = TIER_DETAILS[svc.tier] || {};
        const popular = tweaks.showPopular && meta.popular;
        return (
          <article
            key={svc.tier}
            className={'service-card' + (popular ? ' service-card--popular' : '')}
            data-tier={svc.tier}
          >
            {popular && <span className="service-card__tag">Most Popular</span>}
            <p className="service-card__eyebrow">{meta.eyebrow}</p>
            <h3 className="service-card__name">{svc.name}</h3>
            <p className="service-card__price">
              {formatTierPrice(svc.price)}
              <small> / clean</small>
            </p>
            <p className="service-card__desc">{svc.description}</p>

            {meta.offer && (
              <p className="service-card__offer">
                <ShieldIcon size={13} /> <span>{meta.offer}</span>
              </p>
            )}

            {meta.bullets && (
              <ul className="service-card__bullets">
                {meta.bullets.map((b, i) => (
                  <li key={i}>
                    <CheckIcon size={15} /> <span>{b}</span>
                  </li>
                ))}
              </ul>
            )}

            <div className="service-card__cta">
              <button
                className={popular ? 'btn-primary' : 'btn-secondary'}
                onClick={() => onChoose && onChoose(svc)}
              >
                {meta.ctaLabel || `Choose ${svc.name}`}
              </button>
            </div>
          </article>
        );
      })}
    </div>
  );
}

// ── Layout: Compare (feature matrix) ──────────────────────────────────────

function renderCompareCell(value) {
  if (value === true) {
    return <span className="tier-compare__check"><CheckIcon size={14} color="#fff" /></span>;
  }
  if (!value || value === '—') {
    return <span className="tier-compare__dash" aria-hidden="true">—</span>;
  }
  return <span className="tier-compare__text">{value}</span>;
}

function TierCompare({ services, tweaks, onChoose }) {
  const tiers = services.map((s) => s.tier);
  const priceByTier = Object.fromEntries(services.map((s) => [s.tier, s.price]));
  const nameByTier  = Object.fromEntries(services.map((s) => [s.tier, s.name]));
  const svcByTier   = Object.fromEntries(services.map((s) => [s.tier, s]));

  return (
    <div className="tier-compare">
      <div className="tier-compare__inner">
        <table className="tier-compare__table">
          <colgroup>
            <col className="tier-compare__col-feature" />
            {tiers.map((t) => {
              const meta = TIER_DETAILS[t] || {};
              const popular = tweaks.showPopular && meta.popular;
              return <col key={t} className={popular ? 'tier-compare__col is-popular' : 'tier-compare__col'} />;
            })}
          </colgroup>

          <thead>
            <tr>
              <th scope="col" className="tier-compare__feature-head">
                <span className="tier-compare__feature-eyebrow">Compare Membership</span>
                <span className="tier-compare__feature-sub">
                  Every clean follows our 44-point checklist. Members get preferred
                  scheduling and lower per-clean pricing in exchange for a 12-month commitment.
                </span>
              </th>
              {tiers.map((t) => {
                const meta = TIER_DETAILS[t] || {};
                const popular = tweaks.showPopular && meta.popular;
                return (
                  <th key={t} scope="col" className={'tier-compare__tier-head' + (popular ? ' is-popular' : '')}>
                    {popular && <span className="tier-compare__pop-flag">Most Popular</span>}
                    <span className="tier-compare__tier-eyebrow">{meta.eyebrow}</span>
                    <span className="tier-compare__tier-name">{nameByTier[t]}</span>
                    <span className="tier-compare__tier-price">
                      {formatTierPrice(priceByTier[t])}
                      <small> / clean</small>
                    </span>
                  </th>
                );
              })}
            </tr>
          </thead>

          <tbody>
            {COMPARE_ROWS.map((row, i) => (
              <tr key={i}>
                <th scope="row" className="tier-compare__feature">{row.label}</th>
                {tiers.map((t) => {
                  const meta = TIER_DETAILS[t] || {};
                  const popular = tweaks.showPopular && meta.popular;
                  return (
                    <td key={t} className={'tier-compare__cell' + (popular ? ' is-popular' : '')}>
                      {renderCompareCell(row.values[t])}
                    </td>
                  );
                })}
              </tr>
            ))}
          </tbody>

          <tfoot>
            <tr>
              <td className="tier-compare__cta-empty" />
              {tiers.map((t) => {
                const meta = TIER_DETAILS[t] || {};
                const popular = tweaks.showPopular && meta.popular;
                return (
                  <td key={t} className={'tier-compare__cta-cell' + (popular ? ' is-popular' : '')}>
                    <button
                      className={popular ? 'btn-primary' : 'btn-secondary'}
                      onClick={() => onChoose && onChoose(svcByTier[t])}
                    >
                      {meta.ctaLabel || `Choose ${nameByTier[t]}`}
                    </button>
                  </td>
                );
              })}
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  );
}

// ── Layout: Stack (horizontal rows) ───────────────────────────────────────

function TierStack({ services, tweaks, onChoose }) {
  return (
    <div className="tier-stack">
      {services.map((svc) => {
        const meta = TIER_DETAILS[svc.tier] || {};
        const popular = tweaks.showPopular && meta.popular;
        return (
          <article
            key={svc.tier}
            className={'tier-row' + (popular ? ' tier-row--popular' : '')}
            data-tier={svc.tier}
          >
            <div className="tier-row__head">
              {popular && <span className="tier-row__tag">Most Popular</span>}
              <p className="tier-row__eyebrow">{meta.eyebrow}</p>
              <h3 className="tier-row__name">{svc.name}</h3>
              <p className="tier-row__price">
                {formatTierPrice(svc.price)}
                <small> / clean</small>
              </p>
              {meta.offer && (
                <p className="tier-row__offer">{meta.offer}</p>
              )}
            </div>

            <div className="tier-row__body">
              <p className="tier-row__desc">{svc.description}</p>
              {meta.bullets && (
                <ul className="tier-row__bullets">
                  {meta.bullets.slice(0, 4).map((b, i) => (
                    <li key={i}>
                      <CheckIcon size={14} /> <span>{b}</span>
                    </li>
                  ))}
                </ul>
              )}
            </div>

            <div className="tier-row__cta">
              <button
                className={popular ? 'btn-primary' : 'btn-secondary'}
                onClick={() => onChoose && onChoose(svc)}
              >
                {meta.ctaLabel || `Choose ${svc.name}`}
              </button>
            </div>
          </article>
        );
      })}
    </div>
  );
}

// ── ResultsStep (wraps a chosen layout + summary + promise banner) ────────

function ResultsStep({ property, analysis, services, onReset, onChoose, tweaks }) {
  const layout = tweaks.tierLayout || 'cards';
  const tone = tweaks.tone || 'warm';

  const headline = tone === 'direct'
    ? 'Pick the Plan That Fits Your Home.'
    : 'Choose How You\'d Like to Be Cleaned.';
  const lede = tone === 'direct'
    ? 'Members commit to 12 months in exchange for lower per-clean pricing and preferred seasonal scheduling. Go On Demand if you\'d rather stay flexible.'
    : `Every plan below is priced for your home${
        analysis && !analysis._stub ? ', adjusted for the condition we noted in your photos' : ''
      }. Membership tiers unlock lower per-clean pricing and member-only seasonal scheduling — Molly Maid On Demand keeps things flexible.`;

  return (
    <div>
      <div style={{ marginBottom: 20 }}>
        <p className="section-eyebrow">Your Virtual Estimate</p>
        <h2 className="section-title">{headline}</h2>
        <p className="section-lede">{lede}</p>
      </div>

      <div className="results-head">
        <div>
          {property && (
            <div className="prop-summary">
              <span className="prop-chip">
                <MapPinIcon /> {property.address || 'Your Home'}
              </span>
              <span className="prop-chip">
                <HomeIcon /> {property.squareFootage.toLocaleString()} sq ft
              </span>
              <span className="prop-chip">
                <BedIcon /> {property.bedrooms} {property.bedrooms === 1 ? 'bed' : 'beds'}
              </span>
              <span className="prop-chip">
                <BathIcon /> {property.bathrooms} {property.bathrooms === 1 ? 'bath' : 'baths'}
              </span>
            </div>
          )}

          {analysis && analysis.findings && analysis.findings.length > 0 && (
            <>
              <h3 style={{
                margin: '20px 0 6px',
                color: 'var(--mly-navy)',
                fontSize: 14,
                fontWeight: 700,
                letterSpacing: 'var(--mly-ls-eyebrow)',
                textTransform: 'uppercase',
              }}>
                What Our Review Noted
              </h3>
              <ul className="findings-list">
                {analysis.findings.map((f, i) => <li key={i}>{f}</li>)}
              </ul>
            </>
          )}
        </div>

      </div>

      {/* Layout switch */}
      {layout === 'compare' && <TierCompare services={services} tweaks={tweaks} onChoose={onChoose} />}
      {layout === 'stack'   && <TierStack   services={services} tweaks={tweaks} onChoose={onChoose} />}
      {(layout === 'cards' || (layout !== 'compare' && layout !== 'stack')) && (
        <TierCards services={services} tweaks={tweaks} onChoose={onChoose} />
      )}

      <div className="promise-banner">
        <div className="promise-banner__icon">
          <ShieldIcon size={28} />
        </div>
        <div>
          <p className="promise-banner__title">Backed by the Neighborly Done Right Promise®</p>
          <p className="promise-banner__sub">
            If it's not done right, we'll make it right. Every clean — On Demand or member — is
            backed by our re-clean guarantee. No fine print, no extra charges.
          </p>
        </div>
        <button className="btn-secondary" onClick={onReset}>
          Start Over
        </button>
      </div>

      <div className="trust-strip">
        <div className="trust-item">
          <span className="trust-item__icon"><StarIcon size={18} /></span>
          <div>
            <p className="trust-item__title">1.5M+ customers served</p>
            <p className="trust-item__sub">Cleaning homes across the U.S. since 1984.</p>
          </div>
        </div>
        <div className="trust-item">
          <span className="trust-item__icon"><SparkleIcon size={20} /></span>
          <div>
            <p className="trust-item__title">44-point checklist</p>
            <p className="trust-item__sub">Every room, every visit — nothing skipped.</p>
          </div>
        </div>
        <div className="trust-item">
          <span className="trust-item__icon"><ClockIcon size={18} /></span>
          <div>
            <p className="trust-item__title">Bonded, insured, background-checked</p>
            <p className="trust-item__sub">Same trusted team every visit, when possible.</p>
          </div>
        </div>
      </div>

      <p style={{
        textAlign: 'center',
        color: 'var(--mly-ink-3)',
        fontSize: 'var(--mly-fs-caption)',
        margin: '36px auto 0',
        maxWidth: '56ch',
        lineHeight: 1.55,
      }}>
        Prices shown are virtual estimates and are not a final quote. Final
        pricing is confirmed in writing by your local Molly Maid before your
        first clean. Membership availability and terms vary by location.
      </p>
    </div>
  );
}