/* eslint-disable */
/* ============================================================
   thumbnails.jsx — preview imagery for each card
   ============================================================
   Each section has its own thumbnail style:

     AppThumb   — fake iPhone screenshots, drawn in CSS/SVG
                  (one per `thumbKind` value in data.jsx).
     PrintThumb — line-art SVG glyphs for 3D-print pieces.
     EssayThumb — typographic preview (kicker + title + faux body lines).

   IMAGE OVERRIDE
   --------------
   Every thumb component also accepts an optional `image` prop.
   When set, the SVG/CSS placeholder is replaced wholesale with
   a real `<img>` filling the thumb area.  The card and overlay
   pull this from `item.image` in data.jsx — see that file's
   schema header for path conventions and recommended sizes.

   Why this fallback model: it lets the prototype keep its tidy
   CSS-drawn placeholders today, and lets you swap in real
   screenshots / photos one by one without touching the data
   structure or the components.  Just add `image: 'images/foo.png'`
   to the entry you want to upgrade.
   ============================================================ */

/* ------------------------------------------------------------
   ThumbImage
   ------------------------------------------------------------
   Tiny shared component.  Renders an <img> that fills the thumb
   area (object-fit: cover via the .thumb-img class in index.html).
   Centralised so all three thumb kinds use identical sizing /
   accessibility behaviour.
*/
const ThumbImage = ({ src, alt }) => (
  <img
    src={src}
    alt={alt || ''}     // empty alt is fine for decorative thumbs
    className="thumb-img"
    loading="lazy"      // browser defers off-screen thumbs until needed
    draggable={false}   // images shouldn't intercept the wheel's drag
  />
);

/* ============================================================
   AppThumb — fake iPhone screenshot
   ============================================================
   Props:
     kind  : string  one of 'app-task15' | 'app-cipher' |
                     'app-northbound' | 'app-lattice' | 'app-kiln'.
                     Picks the placeholder layout below.
     image : string  optional override; when set the placeholder
                     is skipped entirely and a real image is shown.
*/
const AppThumb = ({ kind, image }) => {
  // Image override — early return.  If you want the placeholder
  // to show alongside an image, you'd compose them here instead.
  if (image) return <ThumbImage src={image} alt="" />;

  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>
    );
  }
  // Unknown kind — render nothing rather than throw.
  return null;
};

/* ============================================================
   PrintThumb — line-art glyph
   ============================================================
   Props:
     glyph : string  one of 'caddy' | 'bracket' | 'coil' |
                     'pivot' | 'mosaic' | 'bell'.
     image : string  optional override (recommended 1:1 photo).
*/
const PrintThumb = ({ glyph, image }) => {
  if (image) return <ThumbImage src={image} alt="" />;

  // Per-glyph colour pair (currently all the same — left as a
  // hook in case you want a coloured-frame variant later).
  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>
  );
};

/* ============================================================
   EssayThumb — typographic preview
   ============================================================
   Props:
     essay : object  the full essay item — used to draw the
                     date kicker and title in the placeholder.
     image : string  optional override (recommended 16:10 hero).
   The faux body lines are pure decoration; tweak them in the
   .pe-line CSS rules if you want a different look.
*/
const EssayThumb = ({ essay, image }) => {
  if (image) return <ThumbImage src={image} alt={essay.name} />;

  return (
    <div className="ph-essay">
      <div className="pe-kicker">{essay.date}</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>
  );
};

/* Expose to the page (no module system; loaded as <script type="text/babel">). */
window.AppThumb   = AppThumb;
window.PrintThumb = PrintThumb;
window.EssayThumb = EssayThumb;