/* eslint-disable */
/* Placeholder thumbnails — neutral, restrained, screenshot-shaped */

const AppThumb = ({ kind }) => {
  if (kind === 'app-task15') {
    return (
      <div className="ph-app">
        <div className="ph-status"><span>9:41</span><span>•••</span></div>
        <h4>Today</h4>
        <div className="ph-row"><span className="pdot" style={{background: 'var(--accent)'}} />Plan day<span className="ptime">2×15</span></div>
        <div className="ph-row"><span className="pdot" style={{background: 'var(--ink-faint)'}} />Print tests<span className="ptime">4×15</span></div>
        <div className="ph-row"><span className="pdot" style={{background: 'var(--rm-red)'}} />Draft essay<span className="ptime">3×15</span></div>
        <div className="ph-row"><span className="pdot" style={{background: 'var(--rm-gold)'}} />Reply notes<span className="ptime">1×15</span></div>
      </div>
    );
  }
  if (kind === 'app-cipher') {
    return (
      <div className="ph-app">
        <div className="ph-status"><span>09:12</span><span>🔒</span></div>
        <h4>Decision · 047</h4>
        <div style={{fontSize: '9.5px', lineHeight: 1.5, color: 'var(--ink-soft)', fontFamily: 'var(--font-serif-it)', fontStyle: 'italic', marginTop: 4}}>
          Should we hire the second engineer now, or wait until July?
        </div>
        <div className="ph-row" style={{marginTop: 4}}><span className="pdot" style={{background: 'var(--accent)'}} />Lean: wait<span className="ptime">★</span></div>
        <div className="ph-row"><span className="pdot" style={{background: 'var(--ink-faint)'}} />Revisit: 14d</div>
      </div>
    );
  }
  if (kind === 'app-northbound') {
    return (
      <div className="ph-app" style={{background: 'var(--ink)', borderColor: 'var(--ink)'}}>
        <div className="ph-status" style={{color: 'rgba(244,241,234,0.4)'}}><span>06:18</span><span style={{color: 'var(--accent)'}}>● TRACK</span></div>
        <h4 style={{color: 'var(--paper)'}}>Bearing 014°</h4>
        <div style={{flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative'}}>
          <svg viewBox="0 0 100 100" style={{width: '70%', height: '70%'}}>
            <circle cx="50" cy="50" r="42" fill="none" stroke="rgba(244,241,234,0.18)" strokeWidth="1" />
            <circle cx="50" cy="50" r="32" fill="none" stroke="rgba(244,241,234,0.18)" strokeWidth="1" />
            <line x1="50" y1="10" x2="50" y2="90" stroke="rgba(244,241,234,0.18)" strokeWidth="1" />
            <line x1="10" y1="50" x2="90" y2="50" stroke="rgba(244,241,234,0.18)" strokeWidth="1" />
            <g transform="rotate(14 50 50)">
              <line x1="50" y1="50" x2="50" y2="14" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" />
              <polygon points="50,12 46,22 54,22" fill="var(--accent)" />
            </g>
            <circle cx="50" cy="50" r="3" fill="var(--paper)" />
          </svg>
        </div>
        <div className="ph-row" style={{background: 'rgba(244,241,234,0.06)', color: 'var(--paper)'}}>Drift<span className="ptime" style={{color: 'rgba(244,241,234,0.5)'}}>+12m E</span></div>
      </div>
    );
  }
  if (kind === 'app-lattice') {
    return (
      <div className="ph-app" style={{aspectRatio: '4/3', width: '85%', borderRadius: '12px'}}>
        <div className="ph-status"><span>Lattice</span><span>3 sources</span></div>
        <div style={{flex: 1, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gridTemplateRows: 'repeat(3, 1fr)', gap: 4, marginTop: 4}}>
          {Array.from({length: 12}, (_, i) => (
            <div key={i} style={{
              background: i === 1 || i === 6 ? 'var(--accent-soft)' : 'var(--paper-2)',
              border: '1px solid var(--rule)',
              borderRadius: 3,
            }} />
          ))}
        </div>
      </div>
    );
  }
  if (kind === 'app-kiln') {
    return (
      <div className="ph-app" style={{aspectRatio: '4/3', width: '85%', borderRadius: '8px', padding: '14px 16px'}}>
        <div className="ph-status"><span>Untitled.md</span><span>1,402 words</span></div>
        <div style={{fontFamily: 'var(--font-serif-it)', fontStyle: 'italic', fontSize: 12, lineHeight: 1.5, color: 'var(--ink)', marginTop: 6}}>
          The trick is to start before you know what to say.
        </div>
        <div style={{display: 'flex', flexDirection: 'column', gap: 4, marginTop: 8}}>
          <div style={{height: 4, background: 'var(--paper-2)', borderRadius: 999}} />
          <div style={{height: 4, background: 'var(--paper-2)', borderRadius: 999}} />
          <div style={{height: 4, background: 'var(--paper-2)', borderRadius: 999, width: '60%'}} />
          <div style={{height: 4, background: 'var(--paper-2)', borderRadius: 999, marginTop: 6}} />
          <div style={{height: 4, background: 'var(--paper-2)', borderRadius: 999, width: '80%'}} />
        </div>
      </div>
    );
  }
  return null;
};

const PrintThumb = ({ glyph }) => {
  const colors = {
    caddy:   { stroke: 'var(--ink)',  bg: 'var(--paper-2)' },
    bracket: { stroke: 'var(--ink)',  bg: 'var(--paper-2)' },
    coil:    { stroke: 'var(--ink)',  bg: 'var(--paper-2)' },
    pivot:   { stroke: 'var(--ink)',  bg: 'var(--paper-2)' },
    mosaic:  { stroke: 'var(--ink)',  bg: 'var(--paper-2)' },
    bell:    { stroke: 'var(--ink)',  bg: 'var(--paper-2)' },
  };
  const c = colors[glyph] || colors.caddy;
  return (
    <div className="ph-print" style={{width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: c.bg}}>
      <svg viewBox="0 0 100 100" style={{width: '60%', height: '60%'}}>
        {glyph === 'caddy' && (
          <g fill="none" stroke={c.stroke} strokeWidth="1.5" strokeLinejoin="round">
            <rect x="20" y="35" width="60" height="45" rx="3" />
            <line x1="40" y1="35" x2="40" y2="80" />
            <line x1="60" y1="35" x2="60" y2="80" />
            <path d="M20 35 L20 28 L80 28 L80 35" />
            <circle cx="50" cy="22" r="3" />
          </g>
        )}
        {glyph === 'bracket' && (
          <g fill="none" stroke={c.stroke} strokeWidth="1.5">
            <path d="M22 22 L22 78 L70 78 L70 60" />
            <path d="M22 60 L70 60" />
            <circle cx="65" cy="35" r="2" />
            <circle cx="65" cy="48" r="2" />
            <path d="M22 22 L40 22 L40 40 L22 40 Z" />
          </g>
        )}
        {glyph === 'coil' && (
          <g fill="none" stroke={c.stroke} strokeWidth="1.5">
            <circle cx="50" cy="50" r="28" />
            <circle cx="50" cy="50" r="10" />
            <line x1="22" y1="50" x2="78" y2="50" />
            <line x1="50" y1="22" x2="50" y2="78" />
          </g>
        )}
        {glyph === 'pivot' && (
          <g fill="none" stroke={c.stroke} strokeWidth="1.5" strokeLinejoin="round">
            <rect x="25" y="60" width="50" height="20" rx="2" />
            <circle cx="50" cy="50" r="8" />
            <rect x="42" y="20" width="16" height="30" rx="2" />
          </g>
        )}
        {glyph === 'mosaic' && (
          <g fill="none" stroke={c.stroke} strokeWidth="1.2">
            {[[35,30],[55,30],[75,30],[25,45],[45,45],[65,45],[35,60],[55,60],[75,60],[25,75],[45,75],[65,75]].map(([x,y], i) => (
              <polygon key={i} points={`${x},${y-7} ${x+6},${y-3.5} ${x+6},${y+3.5} ${x},${y+7} ${x-6},${y+3.5} ${x-6},${y-3.5}`} />
            ))}
          </g>
        )}
        {glyph === 'bell' && (
          <g fill="none" stroke={c.stroke} strokeWidth="1.5" strokeLinejoin="round">
            <path d="M30 70 Q30 30 50 28 Q70 30 70 70 Z" />
            <line x1="30" y1="70" x2="70" y2="70" />
            <circle cx="50" cy="78" r="3" />
            <circle cx="50" cy="22" r="2" />
          </g>
        )}
      </svg>
    </div>
  );
};

const EssayThumb = ({ essay }) => (
  <div className="ph-essay">
    <div className="pe-kicker">{essay.kicker.split(' · ')[0]}</div>
    <div className="pe-h">{essay.name}</div>
    <div className="pe-line" />
    <div className="pe-line" />
    <div className="pe-line short" />
    <div style={{flex: 1}} />
    <div className="pe-line" />
    <div className="pe-line short" />
  </div>
);

window.AppThumb = AppThumb;
window.PrintThumb = PrintThumb;
window.EssayThumb = EssayThumb;