// Step 4 — Visit Assessment (Results)

function SafetyHero({ level, score }) {
  const cls = level.toLowerCase();
  const messages = {
    GO: 'Conditions are generally safe. Stay alert and monitor conditions throughout your visit.',
    CAUTION: 'Proceed with enhanced safety measures. Extra precautions are strongly recommended.',
    STOP: 'Conditions present significant risks. Consider postponing or improving your preparation.'
  };
  return (
    <div className={`rs-safety-hero rs-safety-hero--${cls}`} role="status">
      <p className="rs-safety-eyebrow">Safety assessment</p>
      <p className="rs-safety-level" aria-label={`Safety level: ${level}`}>{level}</p>
      <p className="rs-safety-score">Score: {score} / 100</p>
      <p className="rs-safety-message">{messages[level]}</p>
    </div>);

}

// Generic collapsible card used across the assessment screen
function CollapsibleCard({ title, titleAnchor, headerAnchor, count, countTone = 'primary', defaultOpen = false, children }) {
  const [open, setOpen] = React.useState(defaultOpen);
  return (
    <div className="usa-card">
      <button
        type="button"
        className="rs-collapsible-toggle"
        aria-expanded={open}
        onClick={() => setOpen((o) => !o)}
        data-comment-anchor={headerAnchor}>

        <h3 className="usa-card__header-title" data-comment-anchor={titleAnchor}>
          {title}
          {count != null && <span className={`rs-count-badge rs-count-badge--${countTone}`}>{count}</span>}
        </h3>
        <span className={`rs-collapsible-arrow ${open ? 'rs-collapsible-arrow--open' : ''}`} aria-hidden="true">⌄</span>
      </button>
      {open && <div className="usa-card__body">{children}</div>}
    </div>);

}

function ScoreBreakdown({ breakdown, score }) {
  const totalDed = breakdown.reduce((s, b) => s + b.deduction, 0);

  return (
    <CollapsibleCard title="Score breakdown" defaultOpen={false}>
      <div>
        <p className="usa-hint" style={{ marginBottom: 'var(--sp-2)' }}>
          Each factor below may reduce your score from the 100-point baseline.
        </p>
        <table className="rs-score-table" aria-label="Score breakdown by safety factor">
          <thead className="sr-only">
            <tr><th>Factor</th><th>Impact</th><th>Deduction</th></tr>
          </thead>
          <tbody>
            {breakdown.map((row, i) => {
              const hit = row.deduction > 0;
              const pct = hit ? Math.round(row.deduction / row.max * 100) : 0;
              return (
                <tr key={i} className="rs-score-row">
                  <td className="rs-score-label">
                    {row.label}
                    {row.liveData && row.deduction === 0 &&
                    <span style={{ marginLeft: 6, fontSize: 'var(--fs-2)', color: 'var(--theme-color-success-darker)', background: 'var(--theme-color-success-lighter)', padding: '1px 6px', borderRadius: 'var(--radius-pill)', fontWeight: 'var(--fw-bold)' }}>Live</span>
                    }
                    {row.liveData && row.deduction > 0 && row.note &&
                    <span style={{ display: 'block', fontSize: 'var(--fs-2)', color: 'var(--theme-color-error)', marginTop: 2 }}>{row.note}</span>
                    }
                    {!row.liveData && row.label === 'Active water alerts' &&
                    <span style={{ marginLeft: 6, fontSize: 'var(--fs-2)', color: 'var(--fg3)', background: 'var(--bg3)', padding: '1px 6px', borderRadius: 'var(--radius-pill)' }}>No live data</span>
                    }
                  </td>
                  <td className="rs-score-bar-cell">
                    <div className="rs-score-bar-bg" aria-hidden="true">
                      <div
                        className={`rs-score-bar-fill ${hit ? 'rs-score-bar-fill--hit' : 'rs-score-bar-fill--none'}`}
                        style={{ width: hit ? `${pct}%` : '100%',
                          background: hit ? undefined : 'var(--theme-color-success)' }}>
                      </div>
                    </div>
                  </td>
                  <td className={`rs-score-deduction ${hit ? 'rs-score-deduction--hit' : 'rs-score-deduction--none'}`}>
                    {hit ? `−${row.deduction}` : '✓'}
                  </td>
                </tr>);

            })}
          </tbody>
          <tfoot>
            <tr className="rs-score-row rs-score-total-row">
              <td className="rs-score-total-label">Final score</td>
              <td></td>
              <td className="rs-score-total-value">{score} / 100</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </CollapsibleCard>);

}

function RiskFactors({ reasons }) {
  if (!reasons.length) return null;
  return (
    <CollapsibleCard title="Risk factors identified" count={reasons.length} countTone="risk" defaultOpen={true}>
      <div>
        {reasons.map((r, i) =>
        <div key={i} className="rs-risk-item">
            <div className="rs-risk-dot" aria-hidden="true"></div>
            <span>{r}</span>
          </div>
        )}
      </div>
    </CollapsibleCard>);

}

// Shared activity-recommendation row — used here (inline, ≤5 total) and on the
// "Improve your trip" screen (full list).
function ActivityRecItem({ rec }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'flex-start', gap: 'var(--sp-105)',
      padding: 'var(--sp-105) var(--sp-2)', marginBottom: 'var(--sp-1)',
      background: rec.critical ? 'var(--theme-color-error-lighter)' : 'var(--bg2)',
      borderLeft: rec.critical ? '4px solid var(--theme-color-error)' : '4px solid var(--border-default)',
      borderRadius: '0 var(--radius-md) var(--radius-md) 0',
      fontSize: 'var(--fs-4)', lineHeight: 'var(--lh-4)', color: 'var(--fg1)'
    }}>
      {rec.critical ?
      <span style={{ color: 'var(--theme-color-error)', fontWeight: 'var(--fw-bold)', flexShrink: 0 }}>!</span> :
      <span style={{ color: 'var(--theme-color-primary)', flexShrink: 0 }}>→</span>
      }
      <span>{rec.text}</span>
    </div>);

}

// Merged Recommendations + activity-specific guidance.
// ≤5 total items: expandable inline. >5: capped, links out to "Improve your trip".
function RecommendationsSummary({ recs, activityRecs, activityLabel, onViewAll }) {
  const total = recs.length + activityRecs.length;
  const [open, setOpen] = React.useState(false);
  if (total === 0) return null;
  const overflow = total > 5;

  return (
    <div className="usa-card">
      <button
        type="button"
        className="rs-collapsible-toggle"
        aria-expanded={overflow ? undefined : open}
        onClick={overflow ? onViewAll : () => setOpen((o) => !o)}>

        <h3 className="usa-card__header-title">
          Recommendations
          <span className="rs-count-badge">{total}</span>
        </h3>
        {overflow ?
        <span className="rs-view-all-link">View all →</span> :

        <span className={`rs-collapsible-arrow ${open ? 'rs-collapsible-arrow--open' : ''}`} aria-hidden="true">⌄</span>
        }
      </button>
      {!overflow && open &&
      <div className="usa-card__body">
          {recs.length > 0 &&
        <div className="rs-rec-group">
              {activityRecs.length > 0 && <p className="rs-section-label" style={{ marginTop: 0 }}>Recommendations</p>}
              {recs.map((rec, i) => <div key={i} className="rs-rec-item">{rec}</div>)}
            </div>
        }
          {activityRecs.length > 0 &&
        <div className="rs-rec-group">
              {recs.length > 0 && <p className="rs-section-label">{activityLabel} guidance</p>}
              {activityRecs.map((rec, i) => <ActivityRecItem key={i} rec={rec} />)}
              <p style={{ fontSize: 'var(--fs-2)', color: 'var(--fg3)', marginTop: 'var(--sp-1)', marginBottom: 0 }}>
                Items marked <strong style={{ color: 'var(--theme-color-error)' }}>!</strong> are critical safety requirements for this activity.
              </p>
            </div>
        }
        </div>
      }
    </div>);

}

function ShareCard({ data, level, score }) {
  const [copied, setCopied] = React.useState(false);
  const message = generateShareMessage(data, level, score);

  function handleCopy() {
    navigator.clipboard.writeText(message).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2500);
    }).catch(() => {
      // Fallback for browsers without clipboard API
      const ta = document.createElement('textarea');
      ta.value = message;
      ta.style.position = 'fixed';
      ta.style.opacity = '0';
      document.body.appendChild(ta);
      ta.focus();
      ta.select();
      document.execCommand('copy');
      document.body.removeChild(ta);
      setCopied(true);
      setTimeout(() => setCopied(false), 2500);
    });
  }

  return (
    <div className="usa-card">
      <div className="usa-card__header">
        <h3 className="usa-card__header-title">Share your assessment</h3>
      </div>
      <div className="usa-card__body">
        <p className="usa-hint" style={{ marginBottom: 'var(--sp-105)' }}>
          Always tell someone your plans before entering the water.
          Copy this summary to send via text or messaging app.
        </p>
        <div className="rs-share-preview" aria-label="Assessment summary message">{message}</div>
        <button className="usa-button usa-button--outline" onClick={handleCopy} aria-live="polite">
          {copied ? '✓ Copied!' : 'Copy to clipboard'}
        </button>
        {copied && <p className="rs-copy-confirm" aria-live="polite">✓ Copied to clipboard</p>}
      </div>
    </div>);

}

function VisitSummary({ data }) {
  const pfdLabel = { none: 'None', type1: 'Type I — Offshore', type2: 'Type II — Near-shore', type3: 'Type III — Flotation aid' };
  const thermalLabel = { none: 'None', wetsuit: 'Wetsuit', drysuit: 'Drysuit' };
  const footwearLabel = { none: 'Barefoot', 'water-shoes': 'Water shoes', boots: 'Waterproof boots' };
  const swimLabel = { 1: 'Basic survival', 2: 'Recreational', 3: 'Intermediate', 4: 'Advanced' };

  return (
    <CollapsibleCard title="Visit summary" headerAnchor="5ba9673eee-div-170-7" defaultOpen={false}>
      <table className="rs-summary-table" aria-label="Visit details summary">
        <tbody>
          <tr><td>River</td><td>{data.river || '—'}</td></tr>
          <tr><td>Activity</td><td>{data.activity ? getActivityLabel(data.activity) : '—'}</td></tr>
          <tr><td>Water temp</td><td>{data.waterTemp}°F</td></tr>
          <tr><td>Air temp</td><td>{data.airTemp}°F (typical)</td></tr>
          <tr><td>Swimming level</td><td>{swimLabel[data.swimmingLevel] || '—'}</td></tr>
          <tr><td>PFD</td><td>{pfdLabel[data.equipment.lifejacket] || '—'}</td></tr>
          <tr><td>Thermal</td><td>{thermalLabel[data.equipment.thermalProtection] || '—'}</td></tr>
          <tr><td>Footwear</td><td>{footwearLabel[data.equipment.footwear] || '—'}</td></tr>
          <tr><td>Emergency items</td><td>{data.equipment.emergency.length > 0 ? data.equipment.emergency.length + ' selected' : 'None'}</td></tr>
          <tr><td>Health risks</td><td>{data.healthRisks.length > 0 ? data.healthRisks.length + ' identified' : 'None'}</td></tr>
        </tbody>
      </table>
    </CollapsibleCard>);

}

function StepResults({ data, conditions, onImprove }) {
  // Never white-screen on a scoring failure — show an inline error card
  // instead. Never show a fabricated or partial score.
  let safety = null;
  try {
    safety = calculateSafety(data, conditions);
  } catch (err) {
    console.error('[RiverSafe] calculateSafety failed:', err);
    try {
      sessionStorage.setItem('rs_last_error', JSON.stringify({ error: err.toString(), componentStack: 'calculateSafety' }));
    } catch (e) {}
  }

  const recs = getRecommendations(data);
  const activityRecs = data.activity ? getActivityRecs(data.activity) : [];
  const activityLabel = data.activity ? getActivityLabel(data.activity) : '';

  if (!safety) {
    return (
      <div>
        <h2 className="rs-step-title">Visit assessment</h2>
        <div className="usa-card" role="alert">
          <div className="usa-card__body" style={{ textAlign: 'center', padding: 'var(--sp-4)' }}>
            <p style={{ fontSize: 'var(--fs-4)', color: 'var(--fg1)', margin: 0 }}>
              We couldn't calculate your assessment. Refresh conditions and try again.
            </p>
          </div>
        </div>
      </div>);
  }

  const { score, level, breakdown, reasons } = safety;

  return (
    <div>
      <h2 className="rs-step-title">Visit assessment</h2>
      <p className="rs-step-desc">Your personalized safety assessment based on today's conditions and preparation.</p>

      <SafetyHero level={level} score={score} />
      <p style={{ fontSize: 'var(--fs-3)', lineHeight: 'var(--lh-4)', color: 'var(--fg3)', margin: '0 0 var(--sp-3)' }}>
        This assessment is an informational guide, not a safety guarantee. Conditions change rapidly — always use your own judgment and check posted advisories on site.
      </p>
      <ShareCard data={data} level={level} score={score} />

      <button
        type="button"
        className="usa-button usa-button--outline usa-button--full rs-improve-cta"
        onClick={onImprove}>

        Improve your trip →
      </button>

      <RiskFactors reasons={reasons} />
      <RecommendationsSummary recs={recs} activityRecs={activityRecs} activityLabel={activityLabel} onViewAll={onImprove} />
      <VisitSummary data={data} />
      <ScoreBreakdown breakdown={breakdown} score={score} />
    </div>);

}

Object.assign(window, { StepResults, ActivityRecItem });