/* === PHYSL 210 dashboards — shared icons + section data === */
/* Simple geometric icons only (lines, circles, triangles, rects). */

const Stroke = ({ children, c }) => (
  <svg width="26" height="26" viewBox="0 0 24 24" fill="none"
    stroke={c} strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
    {children}
  </svg>
);

const Icons = {
  // Lessons — play
  lessons: (c) => <Stroke c={c}><circle cx="12" cy="12" r="9" /><path d="M10 8.5l5 3.5-5 3.5z" fill={c} stroke="none" /></Stroke>,
  // Notes — document lines
  notes: (c) => <Stroke c={c}><rect x="5" y="3" width="14" height="18" rx="3" /><path d="M9 8h6M9 12h6M9 16h3" /></Stroke>,
  // Practice — check in circle
  practice: (c) => <Stroke c={c}><circle cx="12" cy="12" r="9" /><path d="M8.5 12.2l2.3 2.3 4.7-4.9" /></Stroke>,
  // Simulated Exam — clock
  exam: (c) => <Stroke c={c}><circle cx="12" cy="12" r="9" /><path d="M12 7.5V12l3 2" /></Stroke>,
  // Flashcards — stacked cards
  cards: (c) => <Stroke c={c}><rect x="3.5" y="7" width="13" height="11" rx="3" /><path d="M8 7V6a3 3 0 013-3h6a3 3 0 013 3v8a3 3 0 01-3 3h-1" /></Stroke>,
  // Schedule — calendar
  schedule: (c) => <Stroke c={c}><rect x="3.5" y="5" width="17" height="16" rx="3" /><path d="M3.5 9.5h17M8 3v4M16 3v4" /></Stroke>,
  // Progress — ascending bars
  progress: (c) => <Stroke c={c}><path d="M3 21h18M6.5 21v-6M11.5 21V9M16.5 21v-9" /></Stroke>,
};

// section meta: key, label, tagline, count, palette vars
const SECTIONS = [
  { key:'lessons',  label:'Lessons',        tag:'Lecture videos & slides',  meta:'12 modules',    bg:'var(--p-peach)',  ink:'var(--p-peach-i)'  },
  { key:'notes',    label:'Notes',          tag:'Study notes & objectives', meta:'12 modules',    bg:'var(--p-butter)', ink:'var(--p-butter-i)' },
  { key:'practice', label:'Practice',       tag:'Question bank by topic',   meta:'640 questions', bg:'var(--p-mint)',   ink:'var(--p-mint-i)'   },
  { key:'exam',     label:'Simulated Exam', tag:'Timed mock exams',         meta:'4 papers',      bg:'var(--p-sky)',    ink:'var(--p-sky-i)'    },
  { key:'cards',    label:'Flashcards',     tag:'Quick recall decks',       meta:'18 decks',      bg:'var(--p-lilac)',  ink:'var(--p-lilac-i)'  },
  { key:'progress', label:'Progress',       tag:'Mastery & study streaks',  meta:'Live stats',    bg:'var(--coral-tint)', ink:'var(--coral-deep)' },
];

const STUDENT = 'Aliya';
const WEEK_TOPIC = 'Autonomic Nervous System';

// Anatomical heart mark — recolored from the uploaded silhouette
const HeartMark = ({ size = 18 }) => (
  <img className="heart-mark" src="assets/heart-coral.png" alt="" aria-hidden="true"
    style={{ height: size, width: 'auto' }} />
);

// Streak mark — a little ECG/heartbeat pulse (on-token, follows accent + dark mode).
// Reads as "keep the rhythm going" and ties to the heart brand without an emoji.
const StreakMark = ({ size = 18, color = 'var(--coral)' }) => (
  <svg className="streak-mark" width={size} height={size} viewBox="0 0 24 24" fill="none"
    stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M1.5 13H6l2.4-7 3.6 12 2.4-8 1.4 3H22.5" />
  </svg>
);

// Per-module glyphs — simple, cute, on-theme line icons (one per module id).
// Drawn in the house geometric style; rendered in the module's ink color.
const MODULE_ICONS = {
  // cell — membrane + nucleus + organelles
  cell:  (c) => <><circle cx="12" cy="12" r="8.3"/><circle cx="10.4" cy="10.8" r="2.5" fill={c} stroke="none"/><circle cx="15.3" cy="14.7" r="1.1" fill={c} stroke="none"/><circle cx="15.1" cy="9" r="0.9" fill={c} stroke="none"/></>,
  // blood — droplet
  blood: (c) => <path d="M12 3.6C12 3.6 6 10.2 6 14.6a6 6 0 0 0 12 0C18 10.2 12 3.6 12 3.6Z"/>,
  // nerve/muscle/synapse — neuron (soma, dendrites, axon + terminal)
  nms:   (c) => <><circle cx="7.4" cy="12" r="3"/><path d="M5.1 9.7 3.6 8.2M5.1 14.3 3.6 15.8M9 9.6l1.3-1.2"/><path d="M10.3 12.3H18"/><path d="M18 12.3l-2.2-1.6M18 12.3l-2.2 1.6"/></>,
  // CNS — brain
  cns:   (c) => <><ellipse cx="12" cy="12" rx="6.4" ry="6"/><path d="M12 6.2v11.6"/><path d="M9.2 8.7q1.4.9 0 2.4M9.2 13q1.4.9 0 2.3M14.8 8.7q-1.4.9 0 2.4M14.8 13q-1.4.9 0 2.3"/></>,
  // autonomic — ganglion with radiating fibers
  ans:   (c) => <><circle cx="12" cy="12" r="2.9"/><path d="M12 9.1V4.3M12 14.9v4.8M9.1 12H4.3M14.9 12h4.8M9.95 9.95 6.7 6.7M14.05 14.05 17.3 17.3M14.05 9.95 17.3 6.7M9.95 14.05 6.7 17.3"/></>,
  // special senses — eye
  ss:    (c) => <><path d="M2.6 12S6 6.6 12 6.6 21.4 12 21.4 12 18 17.4 12 17.4 2.6 12 2.6 12Z"/><circle cx="12" cy="12" r="2.5" fill={c} stroke="none"/></>,
  // cardiovascular — heart + pulse
  cardio:(c) => <><path d="M12 18.8S4.7 14.3 4.7 9.5C4.7 7 6.5 5.3 8.7 5.3c1.4 0 2.7.8 3.3 2 .6-1.2 1.9-2 3.3-2 2.2 0 4 1.7 4 4.2 0 4.8-7.3 9.3-7.3 9.3Z"/><path d="M6.3 11.1H9l1.3-2.3L12 13.4l1.1-2h3.5"/></>,
  // GI — stomach
  gi:    (c) => <path d="M10 4.6v2.6c0 1.4-3 1.8-3 5.6 0 3.2 2.3 5.6 5.4 5.6 2.2 0 3.6-1.4 3.6-3.2 0-1.6-1.1-2.6-2.6-2.6"/>,
  // respiratory — lungs + trachea
  resp:  (c) => <><path d="M12 4.4v6.4"/><path d="M12 8.6c-1 0-1.5 1-2.7 1.9-1.2.9-2 2.1-2 4.4 0 1.9.5 3.6 2.2 3.6 1.6 0 2.5-1.3 2.5-3.3z"/><path d="M12 8.6c1 0 1.5 1 2.7 1.9 1.2.9 2 2.1 2 4.4 0 1.9-.5 3.6-2.2 3.6-1.6 0-2.5-1.3-2.5-3.3z"/></>,
  // renal — kidney bean
  renal: (c) => <path d="M14.2 4.8c-3.6 0-6.2 3.1-6.2 7.2s2.6 7.2 6.2 7.2c1.7 0 2.8-1.2 2.1-2.7-.6-1.3-1.9-1.6-1.3-3.4.6-1.7 2-1.4 2-4.1 0-2-1.2-4.2-2.8-4.2Z"/>,
  // endocrine — thyroid butterfly
  endo:  (c) => <path d="M12 9.4c-1.4-3.1-7-3.2-7 .8 0 3.6 5.2 4.7 7 1.8 1.8 2.9 7 1.8 7-1.8 0-4-5.6-3.9-7-.8Z"/>,
  // reproductive — DNA helix
  repro: (c) => <><path d="M8.5 4.5c0 4 7 4 7 7.5s-7 3.5-7 7.5"/><path d="M15.5 4.5c0 4-7 4-7 7.5s7 3.5 7 7.5"/><path d="M9.5 7.3h5M9.5 16.7h5M10.1 10.3h3.8M10.1 13.7h3.8"/></>,
};

// Renders a module's glyph (falls back to its initial if no icon is mapped).
function ModuleGlyph({ m, size = 24, color = 'currentColor' }) {
  const draw = m && MODULE_ICONS[m.id];
  if (!draw) return <span style={{ fontFamily: 'Quicksand', fontWeight: 700, fontSize: Math.round(size * 0.82) }}>{m ? m.short[0] : '?'}</span>;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
      strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ display: 'block' }}>
      {draw(color)}
    </svg>
  );
}

Object.assign(window, { Icons, SECTIONS, STUDENT, WEEK_TOPIC, HeartMark, StreakMark, MODULE_ICONS, ModuleGlyph });
