// SkyCard.jsx — a single object card in the main grid.
// Appearance depends on whether it's been "seen" yet.

function SkyGlyph({ cat, seen, size = 58 }) {
  // Tiny symbolic glyph per category — plain SVG, placeholder-style, no illustration.
  const stroke = seen ? 'var(--amber)' : 'var(--ink-300)';
  const fill = seen ? 'var(--amber)' : 'transparent';
  const s = size;
  const c = s / 2;

  if (cat === 'Moon') {
    return (
      <svg width={s} height={s} viewBox={`0 0 ${s} ${s}`}>
        <circle cx={c} cy={c} r={s * 0.32} fill="none" stroke={stroke} strokeWidth="1.25" />
        <path d={`M ${c + s * 0.08} ${c - s * 0.3} A ${s * 0.3} ${s * 0.3} 0 1 1 ${c + s * 0.08} ${c + s * 0.3} A ${s * 0.2} ${s * 0.3} 0 1 0 ${c + s * 0.08} ${c - s * 0.3} Z`} fill={seen ? 'var(--amber)' : 'var(--ink-300)'} opacity={seen ? 0.9 : 0.5} />
      </svg>
    );
  }
  if (cat === 'Planet') {
    return (
      <svg width={s} height={s} viewBox={`0 0 ${s} ${s}`}>
        <circle cx={c} cy={c} r={s * 0.22} fill={fill} stroke={stroke} strokeWidth="1.25" />
        <ellipse cx={c} cy={c} rx={s * 0.38} ry={s * 0.1} fill="none" stroke={stroke} strokeWidth="1.25" transform={`rotate(-18 ${c} ${c})`} />
      </svg>
    );
  }
  if (cat === 'Star') {
    return (
      <svg width={s} height={s} viewBox={`0 0 ${s} ${s}`}>
        <g stroke={stroke} strokeWidth="1.25" fill={fill}>
          <circle cx={c} cy={c} r={s * 0.08} />
          <line x1={c} y1={c - s * 0.35} x2={c} y2={c + s * 0.35} />
          <line x1={c - s * 0.35} y1={c} x2={c + s * 0.35} y2={c} />
          <line x1={c - s * 0.22} y1={c - s * 0.22} x2={c + s * 0.22} y2={c + s * 0.22} opacity="0.6" />
          <line x1={c - s * 0.22} y1={c + s * 0.22} x2={c + s * 0.22} y2={c - s * 0.22} opacity="0.6" />
        </g>
      </svg>
    );
  }
  if (cat === 'Constellation') {
    // simple dot-line glyph
    const pts = [[0.25, 0.3], [0.45, 0.45], [0.5, 0.7], [0.75, 0.55], [0.65, 0.3]];
    return (
      <svg width={s} height={s} viewBox={`0 0 ${s} ${s}`}>
        <polyline points={pts.map(([x, y]) => `${x * s},${y * s}`).join(' ')} fill="none" stroke={stroke} strokeWidth="1" opacity="0.6" />
        {pts.map(([x, y], i) => <circle key={i} cx={x * s} cy={y * s} r={seen ? 2.2 : 1.8} fill={seen ? 'var(--amber)' : 'var(--ink-100)'} />)}
      </svg>
    );
  }
  if (cat === 'Nebula') {
    return (
      <svg width={s} height={s} viewBox={`0 0 ${s} ${s}`}>
        <circle cx={c} cy={c} r={s * 0.3} fill="none" stroke={stroke} strokeWidth="1" strokeDasharray="2 3" />
        <circle cx={c} cy={c} r={s * 0.18} fill={fill} stroke={stroke} strokeWidth="1" opacity="0.8" />
        <circle cx={c - s * 0.05} cy={c + s * 0.03} r="1.4" fill={seen ? 'var(--ink-900)' : 'var(--ink-100)'} />
      </svg>
    );
  }
  if (cat === 'Cluster') {
    const dots = [[0.5, 0.3], [0.35, 0.45], [0.65, 0.5], [0.45, 0.6], [0.6, 0.65], [0.55, 0.42], [0.4, 0.55]];
    return (
      <svg width={s} height={s} viewBox={`0 0 ${s} ${s}`}>
        {dots.map(([x, y], i) => <circle key={i} cx={x * s} cy={y * s} r={1.6 + (i % 3) * 0.4} fill={seen ? 'var(--amber)' : 'var(--ink-100)'} />)}
      </svg>
    );
  }
  if (cat === 'Galaxy') {
    return (
      <svg width={s} height={s} viewBox={`0 0 ${s} ${s}`}>
        <g transform={`translate(${c} ${c}) rotate(25)`} stroke={stroke} strokeWidth="1" fill="none">
          <ellipse cx="0" cy="0" rx={s * 0.32} ry={s * 0.09} opacity="0.4" strokeDasharray="2 2" />
          <ellipse cx="0" cy="0" rx={s * 0.22} ry={s * 0.06} opacity="0.7" />
          <circle cx="0" cy="0" r="2" fill={seen ? 'var(--amber)' : 'var(--ink-100)'} />
        </g>
      </svg>
    );
  }
  return <svg width={s} height={s} />;
}

function DifficultyDots({ level }) {
  return (
    <div style={{ display: 'flex', gap: 3 }}>
      {[1, 2, 3, 4, 5].map(i => (
        <div key={i} style={{
          width: 5, height: 5, borderRadius: '50%',
          background: i <= level ? 'var(--ink-100)' : 'var(--ink-600)'
        }} />
      ))}
    </div>
  );
}

// Stylised constellation paths scaled to a 100x60 viewBox over the card thumb.
const CONSTELLATION_PATHS = {
  'orion': {
    line: 'M 22 18 L 36 26 L 48 30 L 60 26 L 74 18 M 48 30 L 45 42 M 48 30 L 52 42',
    dots: [[22,18],[36,26],[48,30],[60,26],[74,18],[45,42],[52,42]],
  },
  'ursa-major': {
    line: 'M 14 32 L 28 28 L 42 30 L 54 26 L 66 30 L 78 34 L 86 26',
    dots: [[14,32],[28,28],[42,30],[54,26],[66,30],[78,34],[86,26]],
  },
  'cassiopeia': {
    line: 'M 16 38 L 32 22 L 50 36 L 68 22 L 84 38',
    dots: [[16,38],[32,22],[50,36],[68,22],[84,38]],
  },
};

function SkyCard({ obj, log, onClick, index = 0 }) {
  const seen = !!log;
  const [imgOk, setImgOk] = React.useState(!!obj.img);
  const constellation = CONSTELLATION_PATHS[obj.id];
  const seenDate = log?.date;

  return (
    <button
      className="sky-card"
      data-seen={seen}
      data-has-img={imgOk}
      data-cat={obj.cat}
      onClick={onClick}
      style={{ '--i': index }}
    >
      <div className="sky-card__thumb">
        {imgOk ? (
          <img
            className="sky-card__img"
            src={obj.img}
            alt=""
            onError={() => setImgOk(false)}
          />
        ) : (
          <SkyGlyph cat={obj.cat} seen={seen} size={72} />
        )}
        {constellation && (
          <svg className="sky-card__constellation" viewBox="0 0 100 60" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
            <path className="sky-card__constellation-line" d={constellation.line} />
            {constellation.dots.map(([x, y], i) => (
              <circle key={i} cx={x} cy={y} r="1.1" className="sky-card__constellation-dot" />
            ))}
          </svg>
        )}
      </div>
      <div className="sky-card__body">
        <div className="sky-card__cat">{obj.cat}</div>
        <div className="sky-card__name">{obj.name}</div>
        <div className="sky-card__meta">
          <DifficultyDots level={obj.difficulty} />
          <span>
            {obj.mag != null ? `MAG ${obj.mag > 0 ? '+' : ''}${obj.mag}` : '—'}
          </span>
        </div>
      </div>
      {seen && (
        <>
          <div className="sky-card__badge">
            <svg width="10" height="10" viewBox="0 0 10 10"><path d="M1.5 5.2l2.2 2.2L8.5 2.5" stroke="var(--ink-900)" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
            <span>SEEN</span>
          </div>
          {seenDate && (
            <div className="sky-card__seen-bar">
              <span>LOGGED</span>
              <span>{seenDate.replace(/-/g, '·')}</span>
            </div>
          )}
        </>
      )}
    </button>
  );
}

Object.assign(window, { SkyCard, SkyGlyph, DifficultyDots });