/* Admin shared building blocks: logo, icons, mock data, tiny charts.
   Registered on window so every design + app.jsx can use them.
   No-build React (UMD + Babel). Brand colors ONLY via theme.css vars. */

function LogoMark({ size = 34, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none">
      <circle cx="24" cy="24" r="22" stroke={color} strokeWidth="1.6" />
      <path d="M24 9 L34 33 L24 27 L14 33 Z" stroke={color} strokeWidth="1.6" strokeLinejoin="round" fill="none" />
      <circle cx="24" cy="24" r="2.4" fill={color} />
    </svg>
  );
}

/* icon factory — stroke icons inherit currentColor so they re-skin by theme */
const svg = (paths, vb = 24) => (p) => (
  <svg width={(p && p.s) || 20} height={(p && p.s) || 20} viewBox={"0 0 " + vb + " " + vb} fill="none"
       stroke="currentColor" strokeWidth={(p && p.w) || 1.7} strokeLinecap="round" strokeLinejoin="round">
    {paths}
  </svg>
);

const AdI = {
  dash:     svg(<React.Fragment><rect x="3" y="3" width="7" height="9" rx="1.2"/><rect x="14" y="3" width="7" height="5" rx="1.2"/><rect x="14" y="11" width="7" height="10" rx="1.2"/><rect x="3" y="15" width="7" height="6" rx="1.2"/></React.Fragment>),
  clients:  svg(<React.Fragment><circle cx="9" cy="8" r="3.2"/><path d="M3.5 20c0-3.3 2.5-5.5 5.5-5.5s5.5 2.2 5.5 5.5"/><path d="M16 5.2a3.2 3.2 0 0 1 0 6M18.5 20c0-2.6-1-4.5-2.7-5.3"/></React.Fragment>),
  inquiry:  svg(<React.Fragment><path d="M21 11.5a8.4 8.4 0 0 1-11.9 7.6L3 21l1.9-6.1A8.4 8.4 0 1 1 21 11.5z"/></React.Fragment>),
  news:     svg(<React.Fragment><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 9h10M7 13h10M7 17h6"/></React.Fragment>),
  docs:     svg(<React.Fragment><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5M9 13h6M9 17h6"/></React.Fragment>),
  calendar: svg(<React.Fragment><rect x="3" y="4.5" width="18" height="16" rx="2"/><path d="M3 9h18M8 2.5v4M16 2.5v4"/></React.Fragment>),
  chart:    svg(<React.Fragment><path d="M4 20V4M4 20h16"/><path d="M8 16l3.5-4 3 2.5L20 8"/></React.Fragment>),
  settings: svg(<React.Fragment><circle cx="12" cy="12" r="3.2"/><path d="M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5 5l2.1 2.1M16.9 16.9 19 19M19 5l-2.1 2.1M7.1 16.9 5 19"/></React.Fragment>),
  search:   svg(<React.Fragment><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></React.Fragment>),
  bell:     svg(<React.Fragment><path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></React.Fragment>),
  logout:   svg(<React.Fragment><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="M16 17l5-5-5-5M21 12H9"/></React.Fragment>),
  plus:     svg(<React.Fragment><path d="M12 5v14M5 12h14"/></React.Fragment>),
  chevR:    svg(<React.Fragment><path d="M9 6l6 6-6 6"/></React.Fragment>),
  chevD:    svg(<React.Fragment><path d="M6 9l6 6 6-6"/></React.Fragment>),
  menu:     svg(<React.Fragment><path d="M3 6h18M3 12h18M3 18h18"/></React.Fragment>),
  filter:   svg(<React.Fragment><path d="M3 5h18l-7 8v6l-4-2v-4z"/></React.Fragment>),
  more:     svg(<React.Fragment><circle cx="5" cy="12" r="1.4"/><circle cx="12" cy="12" r="1.4"/><circle cx="19" cy="12" r="1.4"/></React.Fragment>),
  check:    svg(<React.Fragment><path d="M4 12l5 5L20 6"/></React.Fragment>),
  up:       svg(<React.Fragment><path d="M12 19V5M5 12l7-7 7 7"/></React.Fragment>),
  down:     svg(<React.Fragment><path d="M12 5v14M19 12l-7 7-7-7"/></React.Fragment>),
  phone:    svg(<React.Fragment><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8.1 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.8 2.1z"/></React.Fragment>),
  mail:     svg(<React.Fragment><rect x="2.5" y="4.5" width="19" height="15" rx="1.6"/><path d="M3 6l9 6 9-6"/></React.Fragment>),
};

/* ---- mock data — Japanese tax / accounting office (コンパス会計社) ---- */
const MOCK = {
  user: { name: "山田 太郎", role: "管理者", initials: "山" },
  kpis: [
    { key: "clients", label: "顧問先",          value: "128",    delta: "+4",    up: true,  hint: "今月 +4 件" },
    { key: "inquiry", label: "今月の問い合わせ", value: "36",     delta: "+12%",  up: true,  hint: "先月比" },
    { key: "tasks",   label: "未対応タスク",     value: "12",     delta: "-3",    up: false, hint: "期限内 9 件" },
    { key: "revenue", label: "月次売上",         value: "¥4.82M", delta: "+8.3%", up: true,  hint: "対目標 102%" },
  ],
  revenue: [3.6, 3.9, 3.7, 4.2, 4.0, 4.4, 4.1, 4.6, 4.3, 4.7, 4.5, 4.82],
  clients: [
    { name: "株式会社アクティブサプライ", kana: "ｱｸﾃｨﾌﾞｻﾌﾟﾗｲ", type: "法人", plan: "月次顧問", status: "契約中", since: "2021.04", owner: "佐藤" },
    { name: "ネットランナーズ合同会社",   kana: "ﾈｯﾄﾗﾝﾅｰｽﾞ",   type: "法人", plan: "記帳代行", status: "契約中", since: "2023.09", owner: "鈴木" },
    { name: "田中 花子",                 kana: "ﾀﾅｶ ﾊﾅｺ",     type: "個人", plan: "確定申告", status: "契約中", since: "2020.01", owner: "高橋" },
    { name: "株式会社コンパス商事",       kana: "ｺﾝﾊﾟｽｼｮｳｼﾞ",  type: "法人", plan: "月次顧問", status: "審査中", since: "2026.06", owner: "佐藤" },
    { name: "みらいクリニック",           kana: "ﾐﾗｲ",         type: "法人", plan: "給与計算", status: "契約中", since: "2022.11", owner: "伊藤" },
    { name: "山本 一郎",                 kana: "ﾔﾏﾓﾄ ｲﾁﾛｳ",   type: "個人", plan: "相続相談", status: "休止",   since: "2019.07", owner: "高橋" },
  ],
  inquiries: [
    { date: "07/03", name: "小林 誠",   subject: "法人設立のご相談", channel: "フォーム", status: "未対応" },
    { date: "07/03", name: "渡辺 商店", subject: "顧問料のお見積り", channel: "電話",     status: "対応中" },
    { date: "07/02", name: "加藤 学",   subject: "確定申告について", channel: "LINE",     status: "未対応" },
    { date: "07/01", name: "中村 工業", subject: "給与計算の委託",   channel: "メール",   status: "完了" },
    { date: "06/30", name: "松本 花",   subject: "創業融資の相談",   channel: "フォーム", status: "完了" },
  ],
  news: [
    { date: "2026.07.01", title: "夏季休業のお知らせ",           category: "お知らせ", status: "公開" },
    { date: "2026.06.20", title: "インボイス制度 個別相談会",     category: "セミナー", status: "公開" },
    { date: "2026.06.10", title: "電子帳簿保存法への対応について", category: "コラム",   status: "下書き" },
    { date: "2026.05.28", title: "新スタッフ紹介",               category: "お知らせ", status: "公開" },
  ],
  tasks: [
    { title: "アクティブサプライ 月次試算表", due: "07/05", owner: "佐藤", pri: "高" },
    { title: "田中様 確定申告 最終確認",       due: "07/06", owner: "高橋", pri: "中" },
    { title: "コンパス商事 契約書ドラフト",    due: "07/08", owner: "鈴木", pri: "高" },
    { title: "給与計算 6月分 締め",           due: "07/10", owner: "伊藤", pri: "低" },
  ],
  activity: [
    { who: "佐藤", act: "アクティブサプライの月次資料をアップロード", when: "10分前" },
    { who: "鈴木", act: "新規問い合わせに返信",                     when: "38分前" },
    { who: "高橋", act: "田中様の申告書を承認",                     when: "1時間前" },
    { who: "伊藤", act: "お知らせ「夏季休業」を公開",               when: "3時間前" },
  ],
  nav: [
    { key: "dash",     label: "ダッシュボード", icon: "dash",     active: true },
    { key: "clients",  label: "顧問先管理",     icon: "clients" },
    { key: "inquiry",  label: "問い合わせ",     icon: "inquiry",  badge: 3 },
    { key: "news",     label: "お知らせ管理",   icon: "news" },
    { key: "docs",     label: "書類管理",       icon: "docs" },
    { key: "calendar", label: "スケジュール",   icon: "calendar" },
    { key: "chart",    label: "レポート",       icon: "chart" },
    { key: "settings", label: "設定",           icon: "settings" },
  ],
};

/* mini bar chart — bars use var(--accent) unless a color is passed */
function Bars({ data = [], h = 44, color }) {
  const max = Math.max.apply(null, data.concat([1]));
  return (
    <div className="mini-bars" style={{ height: h }}>
      {data.map((v, i) => (
        <span key={i} className="mini-bar"
          style={{ height: Math.max(6, (v / max) * 100) + "%", background: color || "var(--accent)" }} />
      ))}
    </div>
  );
}
/* sparkline */
function Spark({ data = [], w = 120, h = 36, color }) {
  const max = Math.max.apply(null, data), min = Math.min.apply(null, data);
  const rng = (max - min) || 1;
  const pts = data.map((v, i) => ((i / (data.length - 1)) * w) + "," + (h - ((v - min) / rng) * (h - 4) - 2)).join(" ");
  return (
    <svg className="spark" width={w} height={h} viewBox={"0 0 " + w + " " + h} preserveAspectRatio="none">
      <polyline points={pts} fill="none" stroke={color || "var(--accent)"} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}
/* donut ring with % label */
function Donut({ value = 70, size = 88, stroke = 9, color }) {
  const r = (size - stroke) / 2, c = 2 * Math.PI * r, half = size / 2;
  return (
    <svg width={size} height={size} viewBox={"0 0 " + size + " " + size} className="donut">
      <circle cx={half} cy={half} r={r} fill="none" stroke="var(--line)" strokeWidth={stroke} />
      <circle cx={half} cy={half} r={r} fill="none" stroke={color || "var(--brand)"} strokeWidth={stroke}
        strokeDasharray={(c * value / 100) + " " + c} strokeLinecap="round"
        transform={"rotate(-90 " + half + " " + half + ")"} />
      <text x="50%" y="53%" textAnchor="middle" dominantBaseline="middle" className="donut-t">{value + "%"}</text>
    </svg>
  );
}
function Avatar({ name = "", initials, color = "var(--brand)", size = 34 }) {
  const t = initials || (name ? name.trim().charAt(0) : "?");
  return <span className="avatar" style={{ background: color, width: size, height: size, fontSize: size * 0.42 }}>{t}</span>;
}

Object.assign(window, { LogoMark, AdI, MOCK, Bars, Spark, Donut, Avatar });