/* Card.jsx — denser grid layout:
   row 1 = name + gender/behavior cutout (top-right)
   rows 2-4 = friend names ↔ R/B/S level rows
   row 5 = origin pill (bottom-left) + AVI badge */
(function () {
  const LucideIcon = window.LucideIcon;
  const GenderSymbol = window.GenderSymbol;
  const { isIsolated, conflictsFor, friendStatuses, friendTier } = window.AppData;

  function FriendCell({ friend }) {
    if (!friend) return React.createElement('div', { className: 'fr-slot' });
    return React.createElement('div', { className: 'fr-slot' },
      React.createElement('div', { className: 'fr fr--' + friend.status, title: friend.name }, friend.name));
  }
  function LvlCell({ show, glyph, status, area }) {
    if (!show) return React.createElement('div', { className: 'lvl-slot', style: { gridArea: area } });
    return React.createElement('div', { className: 'lvl-slot', style: { gridArea: area } },
      React.createElement('span', { className: 'lr-g' }, glyph),
      React.createElement('span', { className: 'sw sw-' + status }));
  }
  function AviCell({ show, glyph, value }) {
    if (!show) return React.createElement('div', { className: 'lvl-slot', style: { gridArea: 'lvlA' } });
    return React.createElement('div', { className: 'lvl-slot', style: { gridArea: 'lvlA' } },
      React.createElement('span', { className: 'lr-g' }, glyph),
      React.createElement('span', { className: 'sw-avi' }, value || '—'));
  }

  function Cutout({ gender, behavior, showGender, showBehavior }) {
    const warn = showBehavior && (behavior === 'y' || behavior === 'r');
    const bg = warn ? behavior : null;
    const cls = ['cutout', bg ? 'cutout-' + bg : 'cutout-n'].join(' ');
    return React.createElement('div', { className: cls, style: { gridArea: 'cutout' } },
      showGender && gender ? React.createElement(GenderSymbol, {
        gender, size: 17, strokeWidth: 2.6,
        color: bg ? '#FFFFFF' : (gender === 'm' ? '#5C86C2' : '#C26FA0'),
      }) : null);
  }

  function Card({ student, settings, mates, selected, isGhost, hint, onPointerDown, cardRef }) {
    const f = settings.fields;
    const tier = friendTier(student, mates.all);
    const isolated = isIsolated(student, mates.all);
    const conflicts = conflictsFor(student, mates.all);
    const labels = settings.labels;
    const fr = friendStatuses(student, mates.all);
    const friends = [fr[0] || null, fr[1] || null, fr[2] || null];

    const cls = ['card'];
    if (settings.compactCards) cls.push('compact');
    if (selected) cls.push('selected');
    if (isolated) cls.push('isolated');
    if (conflicts.length) cls.push('conflict');
    if (student._justPlaced) cls.push('placed-in');
    if (hint && hint.type === 'mutual') cls.push('hl-mutual');
    else if (hint && hint.type === 'oneway') cls.push('hl-oneway');
    if (student.leersteun) cls.push('leersteun');

    const glyph = (s) => (s || '?').trim().charAt(0).toUpperCase();
    const showCutout = (f.gender && student.gender) || f.behavior;

    return React.createElement('div', {
      className: cls.join(' '),
      ref: cardRef,
      'data-card-id': student.id,
      onPointerDown: isGhost ? undefined : (e) => onPointerDown(e, student),
    },
      React.createElement('div', { className: 'stripe stripe-' + tier, title: tier === 'r' ? 'alleen' : tier === 'y' ? '1 vriendje samen' : tier === 'g' ? '2+ vriendjes samen' : '' }),
      conflicts.length ? React.createElement('div', { className: 'conflict-flag', title: 'botsing' },
        React.createElement(LucideIcon, { name: 'TriangleAlert', size: 12, strokeWidth: 2.6 })) : null,

      // row 1
      React.createElement('div', { className: 'c-name' + (student.iac ? ' iac-name' : ''), style: { gridArea: 'name' } }, student.name),
      showCutout ? React.createElement(Cutout, {
        gender: student.gender, behavior: student.behavior,
        showGender: f.gender, showBehavior: f.behavior,
      }) : React.createElement('div', { className: 'cutout-empty', style: { gridArea: 'cutout' } }),

      // rows 2-4: friend ↔ level pairs
      f.hearts ? React.createElement('div', { style: { gridArea: 'fr1' } },
        friends[0] ? React.createElement('div', { className: 'fr fr--' + friends[0].status, title: friends[0].name }, friends[0].name) : null) : React.createElement('div', { style: { gridArea: 'fr1' } }),
      React.createElement(LvlCell, { show: f.math, glyph: glyph(labels.math), status: student.math, area: 'lvlR' }),

      f.hearts ? React.createElement('div', { style: { gridArea: 'fr2' } },
        friends[1] ? React.createElement('div', { className: 'fr fr--' + friends[1].status, title: friends[1].name }, friends[1].name) : null) : React.createElement('div', { style: { gridArea: 'fr2' } }),
      React.createElement(LvlCell, { show: f.dutch, glyph: glyph(labels.dutch), status: student.dutch, area: 'lvlB' }),

      f.hearts ? React.createElement('div', { style: { gridArea: 'fr3' } },
        friends[2] ? React.createElement('div', { className: 'fr fr--' + friends[2].status, title: friends[2].name }, friends[2].name) : null) : React.createElement('div', { style: { gridArea: 'fr3' } }),
      React.createElement(LvlCell, { show: f.spelling, glyph: glyph(labels.spelling), status: student.spelling, area: 'lvlS' }),

      // row 5: origin + AVI
      React.createElement('div', { className: 'orig-slot', style: { gridArea: 'orig' } },
        f.origin && student.originClass ? React.createElement('span', { className: 'origin' }, student.originClass) : null),
      React.createElement(AviCell, { show: f.avi, glyph: glyph(labels.avi), value: student.avi })
    );
  }

  window.Card = Card;
})();