// Reusable components — map 1:1 to the spec's component list.
// <PlayButton />, <StatCard />, <ThemeBadge />, <StarRating />, <TogglePill />

const { useState, useEffect, useRef } = React;

// PlayButton — size="lg|sm", state controlled by parent (isPlaying)
function PlayButton({ size = "lg", isPlaying, onToggle }) {
  const dim = size === "lg" ? 80 : 48;
  return (
    <button
      className={`play-btn ${isPlaying ? "playing" : ""}`}
      style={{ width: dim, height: dim }}
      onClick={onToggle}
      aria-label={isPlaying ? "Pause" : "Play"}
    >
      {isPlaying ? <IconPause size={size === "lg" ? 32 : 20}/> : <IconPlay size={size === "lg" ? 32 : 20}/>}
    </button>
  );
}

// StatCard — label, value, optional trend
function StatCard({ label, value, unit, trend }) {
  return (
    <div className="stat-card">
      <div className="stat-value">
        {value}{unit && <span className="unit">{unit}</span>}
      </div>
      <div className="stat-label">{label}</div>
      {trend && (
        <div className={`trend ${trend}`}>
          {trend === "up" ? "↑" : trend === "down" ? "↓" : "→"} {trend === "up" ? "trending" : trend === "down" ? "cooling" : "steady"}
        </div>
      )}
    </div>
  );
}

// ThemeBadge — pill with gold border
function ThemeBadge({ theme }) {
  return (
    <span className="theme-badge">
      <span className="dot"/>
      {theme}
    </span>
  );
}

// StarRating — value 1-5, click to set
function StarRating({ value, onChange }) {
  return (
    <div className="stars" role="radiogroup" aria-label="Rating">
      {[1,2,3,4,5].map(n => (
        <button
          key={n}
          className={`star ${n <= value ? "on" : ""}`}
          onClick={() => onChange(n)}
          role="radio"
          aria-checked={n === value}
          aria-label={`${n} star${n>1?"s":""}`}
        >
          <IconStar filled={n <= value}/>
        </button>
      ))}
    </div>
  );
}

// TogglePill — binary choice between two options
function TogglePill({ options, value, onChange }) {
  return (
    <div className="toggle-pills" role="radiogroup">
      {options.map(opt => (
        <button
          key={opt}
          className={`toggle-pill ${value === opt ? "on" : ""}`}
          onClick={() => onChange(opt)}
          role="radio"
          aria-checked={value === opt}
        >{opt}</button>
      ))}
    </div>
  );
}

// TabBar — bottom navigation
function TabBar({ active, onChange }) {
  const tabs = [
    { id: "today",   label: "Today",   icon: IconHome },
    { id: "reflect", label: "Reflect", icon: IconReflect },
    { id: "journey", label: "Journey", icon: IconJourney },
  ];
  return (
    <nav className="tabbar" aria-label="Primary">
      {tabs.map(t => {
        const Ic = t.icon;
        return (
          <button
            key={t.id}
            className={`tab ${active === t.id ? "active" : ""}`}
            onClick={() => onChange(t.id)}
            aria-current={active === t.id ? "page" : undefined}
          >
            <Ic/>
            <span>{t.label}</span>
          </button>
        );
      })}
    </nav>
  );
}

Object.assign(window, { PlayButton, StatCard, ThemeBadge, StarRating, TogglePill, TabBar });