/* 共用元件 — components.jsx */

/* ---------- 圖示（簡潔線性 icon） ---------- */
function Icon({ name, size = 18, stroke = 2 }) {
  const common = {
    width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round",
    strokeLinejoin: "round"
  };
  const paths = {
    chart: <><path d="M3 3v18h18" /><rect x="7" y="11" width="3" height="6" /><rect x="12" y="7" width="3" height="10" /><rect x="17" y="13" width="3" height="4" /></>,
    user: <><circle cx="12" cy="8" r="4" /><path d="M4 21c0-4 4-6 8-6s8 2 8 6" /></>,
    pencil: <><path d="M12 20h9" /><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z" /></>,
    upload: <><path d="M12 16V4" /><path d="m7 9 5-5 5 5" /><path d="M5 20h14" /></>,
    spark: <><path d="M12 3v4" /><path d="M12 17v4" /><path d="M3 12h4" /><path d="M17 12h4" /><path d="m6 6 2.5 2.5" /><path d="m15.5 15.5 2.5 2.5" /><path d="m18 6-2.5 2.5" /><path d="m8.5 15.5-2.5 2.5" /></>,
    users: <><circle cx="9" cy="8" r="3.2" /><path d="M3 20c0-3.3 2.7-5 6-5s6 1.7 6 5" /><path d="M16 5.2A3 3 0 0 1 16 11" /><path d="M18 20c0-2.5-1-4-2.5-4.6" /></>,
    plus: <><path d="M12 5v14" /><path d="M5 12h14" /></>,
    trash: <><path d="M3 6h18" /><path d="M8 6V4h8v2" /><path d="M6 6l1 14h10l1-14" /></>,
    check: <path d="m20 6-11 11-5-5" />,
    chevron: <path d="m9 6 6 6-6 6" />,
    logout: <><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /><path d="m16 17 5-5-5-5" /><path d="M21 12H9" /></>,
    search: <><circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" /></>,
    file: <><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9Z" /><path d="M14 3v6h6" /></>,
    sheet: <><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M3 9h18" /><path d="M3 15h18" /><path d="M9 3v18" /></>,
    calendar: <><rect x="3" y="4" width="18" height="18" rx="2" /><path d="M3 9h18" /><path d="M8 2v4" /><path d="M16 2v4" /></>,
    arrowUp: <><path d="M12 19V5" /><path d="m5 12 7-7 7 7" /></>,
    arrowDown: <><path d="M12 5v14" /><path d="m5 12 7 7 7-7" /></>,
    info: <><circle cx="12" cy="12" r="9" /><path d="M12 16v-4" /><path d="M12 8h.01" /></>,
    lock: <><rect x="4" y="11" width="16" height="9" rx="2" /><path d="M8 11V7a4 4 0 0 1 8 0v4" /></>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3 7 9 6 9-6" /></>,
    award: <><circle cx="12" cy="9" r="5" /><path d="m9 13-1 8 4-2 4 2-1-8" /></>
  };
  return <svg {...common} style={{ flexShrink: 0 }}>{paths[name] || null}</svg>;
}

/* ---------- 卡片 ---------- */
function Card({ children, style, pad = true, className }) {
  return (
    <div className={"card" + (className ? " " + className : "")}
      style={{ padding: pad ? "var(--card-pad)" : 0, ...style }}>
      {children}
    </div>
  );
}

/* ---------- 統計卡 ---------- */
function StatCard({ icon, label, value, suffix, tone, hint }) {
  return (
    <Card className="stat-card">
      <div className="stat-top">
        <span className="stat-label">{label}</span>
        {icon && <span className={"stat-icon" + (tone ? " tone-" + tone : "")}><Icon name={icon} size={16} /></span>}
      </div>
      <div className="stat-value">
        {value}{suffix && <span className="stat-suffix">{suffix}</span>}
      </div>
      {hint && <div className="stat-hint">{hint}</div>}
    </Card>
  );
}

/* ---------- 評量類型徽章 ---------- */
const TYPE_COLORS = {
  "作業": "type-a", "小考": "type-b", "課堂表現": "type-c", "分組活動": "type-d"
};
function TypeBadge({ type }) {
  return <span className={"type-badge " + (TYPE_COLORS[type] || "type-x")}>{type}</span>;
}

/* ---------- 成績色塊（紅黃綠） ---------- */
function ScoreChip({ score, size = "md" }) {
  const lvl = window.APPDATA.gradeLevel(score);
  return (
    <span className={"score-chip lvl-" + lvl.key + " sz-" + size}>
      {score}
    </span>
  );
}

/* ---------- 風險燈號 ---------- */
function RiskLight({ level, size = 14 }) {
  return <span className={"risk-dot risk-" + level} style={{ width: size, height: size }} />;
}

/* ---------- 按鈕 ---------- */
function Button({ children, onClick, variant = "primary", icon, size, disabled, type, full }) {
  return (
    <button type={type || "button"} onClick={onClick} disabled={disabled}
      className={"btn btn-" + variant + (size ? " btn-" + size : "") + (full ? " btn-full" : "")}>
      {icon && <Icon name={icon} size={size === "sm" ? 15 : 17} />}
      {children}
    </button>
  );
}

/* ---------- 區段標題 ---------- */
function SectionTitle({ icon, children, right }) {
  return (
    <div className="section-title">
      <div className="section-title-l">
        {icon && <Icon name={icon} size={18} />}
        <span>{children}</span>
      </div>
      {right && <div className="section-title-r">{right}</div>}
    </div>
  );
}

/* ---------- 篩選 chip ---------- */
function FilterChip({ active, onClick, children }) {
  return (
    <button className={"filter-chip" + (active ? " active" : "")} onClick={onClick}>
      {children}
    </button>
  );
}

/* ---------- 頭像 ---------- */
function Avatar({ name, size = 36 }) {
  const ch = (name || "?").slice(0, 1);
  return (
    <span className="avatar" style={{ width: size, height: size, fontSize: size * 0.42 }}>
      {ch}
    </span>
  );
}

/* ---------- 小型長條分佈圖 ---------- */
function DistBar({ buckets }) {
  const max = Math.max(1, ...buckets.map(b => b.count));
  return (
    <div className="dist">
      {buckets.map((b, i) => (
        <div className="dist-col" key={i}>
          <div className="dist-track">
            <div className={"dist-fill lvl-" + b.key}
              style={{ height: (b.count / max * 100) + "%" }}>
              <span className="dist-num">{b.count}</span>
            </div>
          </div>
          <div className="dist-label">{b.label}</div>
        </div>
      ))}
    </div>
  );
}

/* ---------- 折線（學期趨勢，簡易 SVG） ---------- */
function TrendLine({ points, height = 90 }) {
  if (!points.length) return null;
  const w = 100, h = 100, pad = 8;
  const xs = points.map((_, i) => pad + (i / Math.max(1, points.length - 1)) * (w - pad * 2));
  const ys = points.map(p => h - pad - (p / 100) * (h - pad * 2));
  const d = xs.map((x, i) => (i === 0 ? "M" : "L") + x.toFixed(1) + " " + ys[i].toFixed(1)).join(" ");
  const area = d + " L" + xs[xs.length - 1].toFixed(1) + " " + (h - pad) + " L" + xs[0].toFixed(1) + " " + (h - pad) + " Z";
  return (
    <svg className="trend" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{ height }}>
      <line x1={pad} y1={h - pad - (60 / 100) * (h - pad * 2)} x2={w - pad}
        y2={h - pad - (60 / 100) * (h - pad * 2)} className="trend-baseline" />
      <path d={area} className="trend-area" />
      <path d={d} className="trend-stroke" />
      {xs.map((x, i) => (
        <circle key={i} cx={x} cy={ys[i]} r="1.6" className="trend-dot" />
      ))}
    </svg>
  );
}

Object.assign(window, {
  Icon, Card, StatCard, TypeBadge, ScoreChip, RiskLight, Button,
  SectionTitle, FilterChip, Avatar, DistBar, TrendLine, TYPE_COLORS
});