// Shared components for Forever app

// ─── Icons (line-drawn, thin stroke, memoir-feeling) ───────────────────
const Icon = {
  mic: (s = 18, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0 0 14 0"/><path d="M12 18v3"/>
    </svg>
  ),
  play: (s = 18, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill={c}><path d="M7 4l13 8-13 8z"/></svg>
  ),
  pause: (s = 18, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill={c}><rect x="6" y="4" width="4" height="16" rx="0.5"/><rect x="14" y="4" width="4" height="16" rx="0.5"/></svg>
  ),
  arrow: (s = 16, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14m-6-6 6 6-6 6"/></svg>
  ),
  back: (s = 18, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M19 12H5m6-6-6 6 6 6"/></svg>
  ),
  more: (s = 18, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill={c}><circle cx="5" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="19" cy="12" r="1.5"/></svg>
  ),
  share: (s = 18, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3v13"/><path d="M8 7l4-4 4 4"/><path d="M5 14v5a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-5"/>
    </svg>
  ),
  photo: (s = 18, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="11" r="2"/><path d="m3 17 5-4 4 3 4-5 5 5"/>
    </svg>
  ),
  upload: (s = 18, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M17 8l-5-5-5 5"/><path d="M12 3v13"/>
    </svg>
  ),
  check: (s = 18, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
  ),
  plus: (s = 18, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.5" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>
  ),
  flame: (s = 18, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill={c}><path d="M12 2s4 4 4 8a4 4 0 1 1-8 0c0-1 .5-2 1-2-1 1-3 4-3 7a6 6 0 0 0 12 0c0-6-6-13-6-13z"/></svg>
  ),
  sparkle: (s = 18, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill={c}><path d="M12 2l1.8 5.4L19 9l-5.2 1.6L12 16l-1.8-5.4L5 9l5.2-1.6z"/><path d="M19 16l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z"/></svg>
  ),
  return_: (s = 14, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M9 14l-5-5 5-5"/><path d="M4 9h11a5 5 0 0 1 5 5v6"/></svg>
  ),
  bookOpen: (s = 18, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M2 4h7a3 3 0 0 1 3 3v13a2 2 0 0 0-2-2H2z"/><path d="M22 4h-7a3 3 0 0 0-3 3v13a2 2 0 0 1 2-2h8z"/>
    </svg>
  ),
  settings: (s = 18, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-1.8-.3 1.6 1.6 0 0 0-1 1.5V21a2 2 0 0 1-4 0v-.1a1.6 1.6 0 0 0-1-1.5 1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0 .3-1.8 1.6 1.6 0 0 0-1.5-1H3a2 2 0 0 1 0-4h.1a1.6 1.6 0 0 0 1.5-1 1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 1.8.3h0a1.6 1.6 0 0 0 1-1.5V3a2 2 0 0 1 4 0v.1a1.6 1.6 0 0 0 1 1.5 1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8v0a1.6 1.6 0 0 0 1.5 1H21a2 2 0 0 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z"/>
    </svg>
  ),
  callback: (s = 14, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M9 14l-5-5 5-5"/><path d="M20 19v-6a4 4 0 0 0-4-4H4"/></svg>
  ),
  invite: (s = 18, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M19 8v6M22 11h-6"/>
    </svg>
  ),
  waveform: (s = 16, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill={c}><rect x="2" y="10" width="2" height="4" rx="1"/><rect x="6" y="7" width="2" height="10" rx="1"/><rect x="10" y="4" width="2" height="16" rx="1"/><rect x="14" y="8" width="2" height="8" rx="1"/><rect x="18" y="11" width="2" height="2" rx="1"/></svg>
  ),
};

// ─── Avatar (initials) ─────────────────────────────────────────────────
function Avatar({ name = '', tone = 'gold', size = 38, border = true }) {
  const initials = name.split(/\s+/).map(s => s[0]).filter(Boolean).slice(0, 2).join('').toUpperCase();
  const gradients = {
    gold: 'linear-gradient(140deg, #d4b86a 0%, #a8843a 100%)',
    rose: 'linear-gradient(140deg, #d4998c 0%, #a05a4c 100%)',
    sage: 'linear-gradient(140deg, #95ad92 0%, #5a7358 100%)',
    sky:  'linear-gradient(140deg, #8fb0c4 0%, #4a6b80 100%)',
    wood: 'linear-gradient(140deg, #a08770 0%, #5c4333 100%)',
  };
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: gradients[tone] || gradients.gold,
      border: border ? '2px solid var(--cream)' : 'none',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: 'rgba(255,255,255,0.95)',
      fontFamily: 'var(--font-serif)',
      fontWeight: 600, fontSize: size * 0.38, letterSpacing: 0.3,
      boxShadow: '0 2px 6px rgba(30,22,15,0.18)',
      flexShrink: 0,
    }}>{initials}</div>
  );
}

// ─── Avatar pair (interlinked, for top bar) ────────────────────────────
function AvatarPair({ self = 'You', subject = 'Dad', subjectTone = 'wood', onClick, onDark = false }) {
  const ringColor = onDark ? 'var(--ink)' : 'var(--cream)';
  return (
    <div onClick={onClick} style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', position: 'relative' }}>
      <Avatar name={self} tone="rose" size={34} border={true} />
      <div style={{
        width: 8, height: 8, borderRadius: '50%', background: 'var(--gold)',
        border: `2px solid ${ringColor}`, margin: '0 -4px', zIndex: 2,
      }}/>
      <div style={{ marginLeft: -6 }}>
        <Avatar name={subject} tone={subjectTone} size={34} border={true} />
      </div>
    </div>
  );
}

// ─── Logo (roman serif italic, ornament-flanked) ───────────────────────
function ForeverLogo({ tone = 'light' }) {
  const c = tone === 'light' ? 'var(--ink)' : 'var(--cream)';
  const accent = tone === 'light' ? 'var(--gold)' : 'var(--gold-soft)';
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <span style={{
        fontFamily: 'var(--font-serif)', fontWeight: 500, fontStyle: 'italic',
        fontSize: 26, letterSpacing: -0.4, color: c, lineHeight: 1,
      }}>Forever</span>
      <svg width="6" height="6" viewBox="0 0 6 6" style={{ marginTop: 4 }}>
        <circle cx="3" cy="3" r="1.5" fill={accent}/>
      </svg>
    </div>
  );
}

// ─── Book spine (chapter on the shelf) ─────────────────────────────────
function BookSpine({ title, height = 110, tone = 'wood', stories = 0, onClick, metaphor = 'shelf' }) {
  const palettes = {
    wood: ['#8b6f54', '#6b5340'],
    rose: ['#c47d6d', '#a05a4c'],
    sage: ['#8a9f87', '#5a7358'],
    sky:  ['#7a9aae', '#4a6b80'],
    sand: ['#b0956e', '#8b7352'],
    deep: ['#6b5340', '#3d2e1e'],
    cream:['#d8c4a8', '#a89072'],
  };
  const [a, b] = palettes[tone] || palettes.wood;

  if (metaphor === 'cards') {
    return (
      <div onClick={onClick} className="chapter-card" style={{
        background: `linear-gradient(155deg, ${a}, ${b})`,
        color: 'rgba(255,255,255,0.95)',
      }}>
        <div className="chapter-card-stories">{stories}</div>
        <div className="chapter-card-title">{title}</div>
      </div>
    );
  }

  return (
    <div onClick={onClick} className="book-spine" style={{
      height, background: `linear-gradient(180deg, ${a} 0%, ${b} 100%)`,
    }}>
      <span className="spine-text">{title}</span>
      <div className="spine-bands"/>
    </div>
  );
}

// ─── Output book (the memoir, fatter than a spine) ─────────────────────
function OutputBook({ title, subtitle, height = 130, onClick, metaphor = 'shelf' }) {
  if (metaphor === 'cards') {
    return (
      <div onClick={onClick} className="memoir-card">
        <div className="memoir-card-label">Memoir</div>
        <div className="memoir-card-title">{title}</div>
        <div className="memoir-card-sub">{subtitle}</div>
        <div className="memoir-card-arrow">{Icon.arrow(14, 'currentColor')}</div>
      </div>
    );
  }
  return (
    <div onClick={onClick} className="book-output" style={{ height }}>
      <div className="book-output-label">Memoir</div>
      <div className="book-output-title">{title}</div>
      <div className="book-output-sub">{subtitle}</div>
    </div>
  );
}

// ─── Ghost book (voice avatar, in-progress) ────────────────────────────
function GhostBook({ height = 120, onClick, metaphor = 'shelf' }) {
  if (metaphor === 'cards') {
    return (
      <div onClick={onClick} className="ghost-card">
        <div className="ghost-card-icon">{Icon.waveform(20, 'var(--gold)')}</div>
        <div className="ghost-card-title">Voice avatar</div>
        <div className="ghost-card-sub">3 more sessions</div>
      </div>
    );
  }
  return (
    <div onClick={onClick} className="book-ghost" style={{ height }}>
      <div className="ghost-icon">{Icon.waveform(18, 'var(--gold)')}</div>
      <div className="ghost-text">Voice<br/>avatar</div>
      <div className="ghost-progress"><div className="ghost-progress-fill" style={{ width: '62%' }}/></div>
    </div>
  );
}

// ─── Wooden plank (physical shelf) ─────────────────────────────────────
function ShelfPlank() {
  return <div className="shelf-plank"/>;
}

// ─── Streak indicator (rhythm) ─────────────────────────────────────────
function StreakDots({ days = [1,1,1,0,1,1,0], today = 5 }) {
  const labels = ['M','T','W','T','F','S','S'];
  return (
    <div className="streak-dots">
      {days.map((d, i) => (
        <div key={i} className={`streak-dot ${d ? 'on' : ''} ${i === today ? 'today' : ''}`}>
          <span>{labels[i]}</span>
        </div>
      ))}
    </div>
  );
}

// ─── Prompt item (italic serif quote w/ icon) ──────────────────────────
function PromptItem({ kind = 'callback', type, text }) {
  return (
    <div className="prompt-item">
      <div className={`prompt-icon ${kind}`}>
        {kind === 'callback' ? Icon.callback(13, 'currentColor') : Icon.sparkle(13, 'currentColor')}
      </div>
      <div style={{ flex: 1 }}>
        <span className="prompt-type">{type}</span>
        <div className="prompt-text">"{text}"</div>
      </div>
    </div>
  );
}

Object.assign(window, {
  Icon, Avatar, AvatarPair, ForeverLogo,
  BookSpine, OutputBook, GhostBook, ShelfPlank,
  StreakDots, PromptItem,
});