// TreeJourney.jsx — 2.5D path visualization from frozen graph + buildPathNarrative
// Toggle: localStorage.td_tree_3d (stub) · command-center CC_STATE feature flag td_tree_2d
const { useState, useEffect, useMemo } = React;

function TreeJourney({ graph, history, mode, slug, source }) {
  const [enabled, setEnabled] = useState(true);
  const threeD = typeof localStorage !== 'undefined' && localStorage.getItem('td_tree_3d') === '1';

  useEffect(() => {
    try {
      const off = localStorage.getItem('td_tree_2d') === '0';
      setEnabled(!off);
    } catch (_) { /* ignore */ }
  }, []);

  const steps = useMemo(() => {
    const h = Array.isArray(history) ? history : [];
    const nodes = graph?.nodes || {};
    return h.map((entry, i) => {
      const node = nodes[entry.id] || {};
      return {
        id: entry.id,
        label: (node.prompt || entry.id).slice(0, 48),
        depth: i,
        answer: entry.answer,
      };
    });
  }, [graph, history]);

  const narrative = useMemo(() => {
    if (!window.ConditionNarrative?.buildPathNarrative || !graph) return '';
    const full = window.ConditionNarrative.buildPathNarrative(graph, history || [], null);
    const paras = full?.paragraphs || (Array.isArray(full) ? full : []);
    return Array.isArray(paras) ? paras.join(' ') : String(full?.snippet || full || '');
  }, [graph, history]);

  if (!enabled || !steps.length) return null;

  return (
    <section
      aria-label="Your triage journey"
      style={{
        margin: '0 0 var(--s-4)',
        padding: 'var(--s-3)',
        borderRadius: 12,
        border: '1px solid var(--ink-5)',
        background: 'var(--bone)',
        perspective: threeD ? 800 : 'none',
      }}
    >
      <p className="t-meta" style={{ margin: '0 0 8px', fontSize: 11, letterSpacing: '.08em', textTransform: 'uppercase' }}>
        Your path · information only{source === 'frozen' || source === 'frozen_static' ? ' · verified guide' : ''}
      </p>
      <div
        style={{
          display: 'flex',
          flexWrap: 'wrap',
          gap: 8,
          alignItems: 'center',
          transform: threeD ? 'rotateX(8deg)' : 'none',
          transformStyle: threeD ? 'preserve-3d' : 'flat',
        }}
      >
        {steps.map((s, i) => (
          <React.Fragment key={s.id + i}>
            <div
              style={{
                padding: '8px 12px',
                borderRadius: 10,
                border: '2px solid var(--seal)',
                background: '#fff',
                fontSize: 12,
                maxWidth: 140,
                boxShadow: `0 ${4 + s.depth * 2}px ${8 + s.depth * 3}px rgba(0,0,0,${0.06 + s.depth * 0.02})`,
                transform: threeD ? `translateZ(${s.depth * 12}px)` : `translateY(${-s.depth * 2}px)`,
              }}
            >
              {s.label}
            </div>
            {i < steps.length - 1 ? (
              <span style={{ color: 'var(--ink-3)', fontSize: 16 }} aria-hidden="true">→</span>
            ) : null}
          </React.Fragment>
        ))}
      </div>
      {threeD ? (
        <p className="t-meta" style={{ margin: '8px 0 0', fontSize: 11, color: 'var(--ink-3)' }}>
          Three.js full journey — disabled until frozen models ship (td_tree_3d stub).
        </p>
      ) : null}
      {narrative ? (
        <p style={{ margin: '10px 0 0', fontSize: 13, lineHeight: 1.5, color: 'var(--ink-2)' }}>
          {narrative.slice(0, 280)}{narrative.length > 280 ? '…' : ''}
        </p>
      ) : null}
    </section>
  );
}

window.TreeJourney = TreeJourney;