/* =========================================================
   共通UI  (members/ui.jsx)
   ========================================================= */

/* ---- アイコン（line icons） ---- */
const ICONS = {
  dashboard:"M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z",
  list:"M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01",
  file:"M14 3v5h5M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-5z",
  users:"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm14 10v-2a4 4 0 0 0-3-3.87M16 3.13A4 4 0 0 1 16 11",
  chart:"M3 3v18h18M7 15l4-4 3 3 5-6",
  award:"M12 15a6 6 0 1 0 0-12 6 6 0 0 0 0 12zM8.2 13.9 7 22l5-3 5 3-1.2-8.1",
  calc:"M9 7h6M9 11h.01M12 11h.01M15 11h.01M9 15h.01M12 15h.01M15 15h.01M5 3h14a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z",
  calendar:"M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z",
  bell:"M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0",
  settings:"M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-2.81 1.17V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15H4.5a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 6 9.4l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 11 4.6h.09A2 2 0 0 1 13 2.5v.09A1.65 1.65 0 0 0 15 4.6l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9h.1a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z",
  search:"M21 21l-4.3-4.3M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z",
  menu:"M3 12h18M3 6h18M3 18h18",
  check:"M20 6 9 17l-5-5",
  alert:"M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z",
  arrow:"M5 12h14M13 6l6 6-6 6",
  clock:"M12 7v5l3 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z",
  building:"M6 9H4a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h2M18 9h2a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1h-2M9 21V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16M9 9h6M9 13h6",
  up:"M7 17 17 7M7 7h10v10",
  down:"M7 7l10 10M17 7v10H7",
  filter:"M22 3H2l8 9.46V19l4 2v-8.54L22 3z",
  pin:"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0zM12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",
  chat:"M21 11.5a8.38 8.38 0 0 1-8.5 8.5 8.5 8.5 0 0 1-3.8-.9L3 21l1.9-5.7A8.38 8.38 0 0 1 4 11.5 8.5 8.5 0 0 1 12.5 3 8.38 8.38 0 0 1 21 11.5z",
  logout:"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9",
  doc:"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM14 2v6h6M16 13H8M16 17H8M10 9H8",
  target:"M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12zM12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4z",
  yen:"M12 4l-5 8h10l-5-8zM12 12v8M8 15h8M8 18h8",
  trend:"M3 17l6-6 4 4 8-8M21 7v6h-6",
  megaphone:"M21 5v14l-12-4H5a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h4l12-4zM9 15v4a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1",
  spark:"M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8z",
  wrench:"M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.5-.5-.5-2.5z",
  info:"M12 16v-4M12 8h.01M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z",
  gift:"M20 12v9H4v-9M2 7h20v5H2zM12 22V7M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z",
  bug:"M8 2l1.5 2.5M16 2l-1.5 2.5M12 8a4 4 0 0 0-4 4v3a4 4 0 0 0 8 0v-3a4 4 0 0 0-4-4zM5 10H3M5 15H2M5 20l2.5-2M19 10h2M19 15h3M19 20l-2.5-2M12 8v12",
  send:"M22 2 11 13M22 2l-7 20-4-9-9-4z",
};
function Icon({ name, className, style }){
  const d = ICONS[name] || ICONS.file;
  return (
    <svg className={className} style={style} viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" width="1em" height="1em">
      {d.split("M").filter(Boolean).map((seg,i)=><path key={i} d={"M"+seg}/>)}
    </svg>
  );
}

/* ---- ナビ定義 ---- */
const NAV = [
  { grp:"メイン", items:[
    { id:"dashboard", label:"ダッシュボード", icon:"dashboard" },
    { id:"cases", label:"入札できる公告", icon:"list", badge:3 },
    { id:"calendar", label:"入札カレンダー", icon:"calendar" },
  ]},
  { grp:"分析", items:[
    { id:"competitors", label:"競合分析", icon:"users" },
    { id:"market", label:"落札相場・結果", icon:"chart" },
    { id:"simulator", label:"価格戦略シミュレーター", icon:"calc" },
    { id:"score", label:"御社の通信簿（経審）", icon:"award" },
  ]},
  { grp:"その他", items:[
    { id:"news", label:"お知らせ", icon:"megaphone", badge:2 },
    { id:"feedback", label:"フィードバック", icon:"chat" },
    { id:"settings", label:"通知・配信設定", icon:"settings" },
  ]},
];

function Sidebar({ page, go }){
  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="mark">入</div>
        <div>
          <div className="name">入札<span className="plus">ウォッチ</span></div>
          <div className="sub">壱岐・長崎 ｜ 御社専用ページ</div>
        </div>
      </div>
      <nav className="nav">
        {NAV.map(g=>(
          <div key={g.grp}>
            <div className="grp">{g.grp}</div>
            {g.items.map(it=>(
              <a key={it.id} className={page===it.id?"active":""} onClick={()=>go(it.id)}>
                <Icon name={it.icon} className="ico"/>
                <span>{it.label}</span>
                {it.badge && <span className="badge-n">{it.badge}</span>}
              </a>
            ))}
          </div>
        ))}
      </nav>
      <div className="side-foot">
        <div className="plan">
          <div className="t">{DATA.plan.trial}</div>
          <div className="p">{DATA.plan.price}・{DATA.plan.note}</div>
        </div>
        <a className="flex ac gap-s small mut" style={{padding:"12px 4px 2px",cursor:"pointer"}} onClick={()=>go("login")}>
          <Icon name="logout" style={{width:16,height:16}}/>ログアウト
        </a>
      </div>
    </aside>
  );
}

function Topbar({ crumb, onMenu, go }){
  return (
    <div className="topbar">
      <button className="menu-btn" onClick={onMenu}><Icon name="menu"/></button>
      <div className="crumb">{crumb}</div>
      <div className="search">
        <Icon name="search" className="ico"/>
        <input placeholder="公告・発注機関・工種で検索" />
      </div>
      <button className="icon-btn" title="お知らせ" onClick={()=>go("news")}><Icon name="bell"/><span className="dot"></span></button>
      <div className="avatar">
        <div className="pic">{DATA.company.initial}</div>
        <div className="who"><b>{DATA.company.short} 様</b><span>{DATA.company.area}</span></div>
      </div>
    </div>
  );
}

/* ---- プリミティブ ---- */
function PageHead({ ey, title, desc, children }){
  return (
    <div className="phead">
      <div>
        {ey && <div className="ey">{ey}</div>}
        <div className="ttl">{title}</div>
        {desc && <div className="desc mt-s">{desc}</div>}
      </div>
      {children && <div className="right">{children}</div>}
    </div>
  );
}
function Card({ icon, title, sub, more, onMore, children, className="", style }){
  return (
    <div className={"card pad "+className} style={style}>
      {(title||icon) && <div className="card-h">
        {icon && <div className="ci"><Icon name={icon}/></div>}
        <div>{title && <div className="ct">{title}</div>}{sub && <div className="cs">{sub}</div>}</div>
        {more && <a className="more" onClick={onMore}>{more}<Icon name="arrow" style={{width:13,height:13}}/></a>}
      </div>}
      {children}
    </div>
  );
}
function Tile({ tone="blue", icon, label, value, unit, meta, spark }){
  return (
    <div className={"tile "+tone}>
      <div className="lab"><span className="ti"><Icon name={icon}/></span>{label}</div>
      <div className="big tnum">{value}{unit && <span className="u">{unit}</span>}</div>
      {meta && <div className="meta">{meta}</div>}
      {spark && <div className="trend">{spark}</div>}
    </div>
  );
}
function Badge({ tone="gray", children, pulse }){ return <span className={"badge "+tone}>{pulse&&<span className="pulse"></span>}{children}</span>; }
function Btn({ kind="ghost", sm, block, icon, iconR, onClick, children }){
  return <button className={`btn ${kind}${sm?" sm":""}${block?" block":""}`} onClick={onClick}>
    {icon&&<Icon name={icon}/>}{children}{iconR&&<Icon name={iconR}/>}</button>;
}
function Deadline({ days }){
  if(days<0) return <span className="deadline">締切終了</span>;
  if(days===0) return <span className="deadline urgent">本日締切</span>;
  const cls = days<=3?"urgent":days<=6?"soon":"";
  return <span className={"deadline "+cls}>あと{days}日</span>;
}

Object.assign(window, { Icon, Sidebar, Topbar, PageHead, Card, Tile, Badge, Btn, Deadline, NAV });