/* =========================================================
   ページ群 1  (members/pages_main.jsx)
   ダッシュボード / 案件一覧 / 案件詳細 / 競合分析
   ========================================================= */

/* ---- 入札価格モデル（pct = 基準額に対する%。例 0.8 = +0.8%） ---- */
const smooth=(x,a,b)=>Math.max(0,Math.min(1,(x-a)/(b-a)));
function bidModel(pct){
  const valid = smooth(pct,-0.3,0.9);                 // 最低制限を上回る確率
  const winGiven = 1 - 0.85*smooth(pct,0.6,2.4);      // 有効札のうち最安で勝てる確率
  const win = Math.round(valid*winGiven*100);
  const disq = Math.round((1-valid)*100);
  let verdict, tone;
  if(pct < -0.1){ verdict="失格リスク大"; tone="red"; }
  else if(pct>=0.6 && pct<=1.0){ verdict="推奨レンジ"; tone="green"; }
  else if(pct>1.7){ verdict="取りこぼし（高すぎ）"; tone="orange"; }
  else if(pct<0.6){ verdict="やや弱い"; tone="orange"; }
  else { verdict="やや高め"; tone="blue"; }
  return { win:Math.max(0,win), disq, valid:Math.round(valid*100), verdict, tone };
}
const yen = man => (man*10000).toLocaleString();
window.bidModel = bidModel;

/* =================== ダッシュボード =================== */
function Dashboard({ go }){
  const c=DATA.company, r=DATA.record, m=DATA.market;
  const hist=DATA.myHistory||[];
  const years=((DATA.nendos&&DATA.nendos.length)?DATA.nendos:[...new Set(hist.map(h=>h.nendo).filter(Boolean))]).slice().sort((a,b)=>b-a);
  const yearsWithData=new Set(hist.map(h=>h.nendo));
  const [hYear,setHYear]=React.useState(years.find(y=>yearsWithData.has(y))||years[0]);
  const [hOrg,setHOrg]=React.useState("すべて");
  const byYear=hist.filter(h=>h.nendo===hYear);
  const hOrgs=["すべて",...Array.from(new Set(byYear.map(h=>h.org)))];
  const histRows=byYear.filter(h=>hOrg==="すべて"||h.org===hOrg);
  return (
    <div className="page">
      <PageHead ey="Dashboard" title={`${c.short} 様の入札ダッシュボード`}
        desc={`${new Date().toLocaleDateString("ja-JP",{year:"numeric",month:"long",day:"numeric"})} 時点 ｜ 毎朝7時に最新の公告と分析を更新しています`}>
        <Btn kind="primary" icon="chat">LINEで受け取る</Btn>
      </PageHead>

      {/* KPI */}
      <div className="grid cols-4 mb">
        <Tile tone="blue" icon="list" label="入札できる公告" value={DATA.todayCases.length} unit="件"
          meta="最短の申請締切：あと3日" />
        <Tile tone="orange" icon="users" label={`${c.rank.cat} 同ランク`} value={c.rank.pos} unit={`位 / ${c.rank.of}社`}
          meta="完成工事高ベース・実質4社の主戦場" />
        {(()=>{ const ry=(r.byNendo&&r.byNendo[r.nendo])||{entries:r.entries,wins:r.wins,disq:r.disq};
          const prev=r.byNendo&&r.byNendo[r.nendo-1];
          return <Tile tone={ry.wins>0?"green":"orange"} icon="award" label={`${r.nendo||""}年度 市工事の落札`} value={ry.wins} unit="件"
            meta={prev?`応札${ry.entries}件中・前年度${prev.wins}件→今年度${ry.wins}件`:`応札${ry.entries}件中の落札`} />;
        })()}
        <Tile tone="green" icon="target" label="推奨の入れ方" value={`+${m.recommend[0]}〜${m.recommend[1]}`} unit="%"
          meta="基準額に対して。年3〜6件の落札見込み" />
      </div>

      <div className="grid cols-3">
        {/* 今日の案件 */}
        <Card className="span-2" icon="list" title="本日の該当案件" sub="御社の等級で参加可能" more="すべて見る" onMore={()=>go("cases")}>
          {DATA.todayCases.map(cs=>(
            <div className="row-item clickable" key={cs.id} style={{cursor:"pointer"}} onClick={()=>go("case",cs.id)}>
              <div className="ri-ic"><Icon name="file"/></div>
              <div className="ri-main">
                <div className="ri-t">{cs.title}</div>
                <div className="ri-s">{cs.cat}{cs.grade}　｜　{cs.scale}　｜　{cs.org}</div>
              </div>
              <div className="ri-r">
                <Deadline days={cs.days}/>
                <div className="small mut">締切</div>
              </div>
              <Icon name="arrow" style={{color:"#9aa4b1",width:18,height:18}}/>
            </div>
          ))}
        </Card>

        {/* お知らせ */}
        <Card icon="bell" title="お知らせ">
          {DATA.notices.map((n,i)=>(
            <div className="row-item" key={i} style={{paddingTop:i?14:4}}>
              <div className="ri-ic" style={{background:n.kind==="remind"?"#fff3e3":"#eaf3fc",color:n.kind==="remind"?"#d96f08":"#1a6fd0"}}>
                <Icon name={n.kind==="remind"?"clock":n.kind==="weekly"?"chart":"bell"}/>
              </div>
              <div className="ri-main">
                <div className="ri-t" style={{fontSize:12.5,fontWeight:600,lineHeight:1.45}}>{n.t}</div>
                <div className="ri-s">{n.time}</div>
              </div>
            </div>
          ))}
        </Card>
      </div>

      {/* 過去の応札履歴 */}
      <Card className="mt" icon="list" title="過去の応札履歴" sub="御社が実際に入れた札と結果（年度で切替・新しい順）">
        <div className="fbar alt mb-s">
          <span className="fbar-lab">年度</span>
          {years.map(y=>(
            <button key={y} className={"chip"+(hYear===y?" on":"")} onClick={()=>{setHYear(y);setHOrg("すべて");}}>
              {y}年度<span className="cnt">{hist.filter(h=>h.nendo===y).length}</span>
            </button>
          ))}
        </div>
        <div className="fbar mb">
          <span className="fbar-lab">発注者</span>
          {hOrgs.map(o=>(
            <button key={o} className={"chip"+(hOrg===o?" on":"")} onClick={()=>setHOrg(o)}>
              {o}<span className="cnt">{o==="すべて"?byYear.length:byYear.filter(h=>h.org===o).length}</span>
            </button>
          ))}
        </div>
        <div className="tbl-wrap" style={{height:420,overflowY:"auto"}}>
          <table className="tbl zebra">
            <colgroup>
              <col style={{width:96}}/><col style={{width:74}}/><col style={{width:86}}/><col style={{width:300}}/>
              <col style={{width:120}}/><col style={{width:120}}/><col style={{width:118}}/><col style={{width:84}}/><col/>
            </colgroup>
            <thead><tr><th>開札日</th><th>発注者</th><th>工種</th><th>工事名</th><th className="num">御社の札</th><th className="num">落札額</th><th className="num">差額</th><th>結果</th><th></th></tr></thead>
            <tbody>
              {histRows.map((h,i)=>{
                const tone=h.result==="落札"?"green":h.result==="失格"?"red":h.result==="辞退"?"gray":"blue";
                const otone=h.orgType==="県"?"green":h.orgType==="市"?"blue":h.orgType==="町"?"orange":"gray";
                const near=h.result==="有効"&&h.diff!=null&&h.diff>0&&h.diff<=1000;
                return (
                  <tr key={i}>
                    <td className="small mut tnum">{h.date}</td>
                    <td><Badge tone={otone}>{h.org}</Badge></td>
                    <td className="small">{h.gyoshu}{h.est&&<span className="mut" style={{fontSize:10}}>（推定）</span>}</td>
                    <td><b>{h.title}</b></td>
                    <td className="num">{h.myAmount!=null?h.myAmount.toLocaleString():"—"}</td>
                    <td className="num mut">{h.winAmount!=null?h.winAmount.toLocaleString():"—"}</td>
                    <td className="num">
                      {h.diff==null ? <span className="mut">—</span>
                       : near ? <b style={{color:"var(--orange-deep)"}}>あと{h.diff.toLocaleString()}円</b>
                       : <span style={{color:h.diff>0?"var(--red)":"var(--sub)"}}>{h.diff>0?"+":""}{h.diff.toLocaleString()}</span>}
                    </td>
                    <td><Badge tone={tone}>{h.result}</Badge></td>
                    <td></td>
                  </tr>
                );
              })}
              {histRows.length===0 && <tr><td colSpan="9" className="center mut" style={{padding:30}}>該当する応札履歴がありません</td></tr>}
            </tbody>
          </table>
        </div>
        <div className="small mut mt-s">{hYear}年度{hOrg!=="すべて"?`・${hOrg}`:""} の応札 {histRows.length}件 ｜ 金額は円・差額は「御社の札−落札額」｜ オレンジは1,000円差の惜敗 ｜ 出典：壱岐市・長崎県 入札結果（公開情報）</div>
      </Card>

    </div>
  );
}

/* =================== 案件一覧 =================== */
function Cases({ go }){
  const [cat,setCat]=React.useState("すべて");
  const [region,setRegion]=React.useState("すべて");
  const [onlyOk,setOnlyOk]=React.useState(true);
  const cats=["すべて","土木一式","建築一式","舗装","水道施設"];
  const regions=["すべて","郷ノ浦","勝本","芦辺","石田"];
  const list=DATA.allCases.filter(c=>
    (cat==="すべて"||c.cat===cat) && (region==="すべて"||c.region===region) && (!onlyOk||c.status==="参加可能"));
  return (
    <div className="page">
      <PageHead ey="Projects" title="入札できる公告" desc="御社の等級・地区に合う公告だけを毎朝お届けしています">
        <Btn kind="ghost" icon="calendar" onClick={()=>go("calendar")}>カレンダー</Btn>
      </PageHead>

      <div className="grid cols-4 mb">
        <Tile tone="blue" icon="list" label="参加可能な公告" value={DATA.allCases.filter(c=>c.status==="参加可能").length} unit="件" meta="あなたの等級で入札できます"/>
        <Tile tone="orange" icon="clock" label="3日以内に締切" value={DATA.allCases.filter(c=>c.days<=3).length} unit="件" meta="申請を急いでください"/>
        <Tile tone="green" icon="file" label="本日の該当" value={DATA.allCases.length} unit="件" meta="今朝の巡回で判定した公告"/>
        <Tile tone="blue" icon="pin" label="対象エリア" value="4" unit="地区" meta="壱岐市全域＋県発注"/>
      </div>

      <Card style={{padding:"16px 18px"}}>
        <div className="flex ac wrap gap-s mb">
          <Icon name="filter" style={{color:"#9aa4b1",width:16,height:16}}/>
          {cats.map(x=><button key={x} className={"chip"+(cat===x?" on":"")} onClick={()=>setCat(x)}>{x}</button>)}
        </div>
        <div className="flex ac wrap gap-s">
          <Icon name="pin" style={{color:"#9aa4b1",width:16,height:16}}/>
          {regions.map(x=><button key={x} className={"chip"+(region===x?" on":"")} onClick={()=>setRegion(x)}>{x}</button>)}
          <label className="flex ac gap-s small" style={{marginLeft:"auto",cursor:"pointer"}}>
            <input type="checkbox" checked={onlyOk} onChange={e=>setOnlyOk(e.target.checked)}/> 参加可能のみ表示
          </label>
        </div>
      </Card>

      <div className="tbl-wrap mt">
        <table className="tbl">
          <thead><tr><th>工種/等級</th><th>工事名</th><th>発注機関</th><th>規模</th><th className="num">発注基準額(推定)</th><th>申請締切</th><th></th></tr></thead>
          <tbody>
            {list.map(cs=>(
              <tr key={cs.id} className="clickable" onClick={()=>go("case",cs.id)}>
                <td><Badge tone={cs.status==="参加可能"?"blue":"gray"}>{cs.cat}{cs.grade!=="—"?cs.grade:""}</Badge></td>
                <td><b>{cs.title}</b><div className="small mut">{cs.no}</div></td>
                <td className="small">{cs.org}<div className="mut">{cs.region}</div></td>
                <td className="small">{cs.scale}</td>
                <td className="num">{cs.base[0].toLocaleString()}〜{cs.base[1].toLocaleString()}万</td>
                <td><Deadline days={cs.days}/></td>
                <td><Icon name="arrow" style={{color:"#9aa4b1",width:18,height:18}}/></td>
              </tr>
            ))}
            {list.length===0 && <tr><td colSpan="7" className="center mut" style={{padding:30}}>条件に合う公告はありません</td></tr>}
          </tbody>
        </table>
      </div>
      <div className="small mut mt-s">※壱岐市は予定価格を事後公表のため、規模は同種・同規模の過去落札からの推定です。公告番号を明記し、ご自身で真偽を確認できます（出典：壱岐市入札情報）。</div>
    </div>
  );
}

/* =================== 案件詳細 =================== */
function CaseDetail({ id, go }){
  const cs=(DATA.allCases.find(c=>c.id===id))||DATA.todayCases[0];
  const mid=(cs.base[0]+cs.base[1])/2;
  const recLo=mid*1.006, recHi=mid*1.010;
  const model=bidModel(0.8);
  const likely=DATA.competitors.filter(x=>!x.me).slice(0,3);
  return (
    <div className="page">
      <div className="flex ac gap-s mb" style={{cursor:"pointer"}} onClick={()=>go("cases")}>
        <Icon name="arrow" style={{transform:"rotate(180deg)",color:"#1a6fd0"}}/><span className="b" style={{color:"#1a6fd0",fontSize:13}}>公告一覧へ戻る</span>
      </div>
      <PageHead ey="Project detail" title={cs.title}
        desc={`${cs.org}　｜　公告番号 ${cs.no}`}>
        <Badge tone="blue">{cs.cat}{cs.grade!=="—"?cs.grade:""}</Badge>
        <Badge tone="orange" pulse>申請締切 あと{cs.days}日</Badge>
      </PageHead>

      <div className="grid cols-3">
        <Card className="span-2" icon="file" title="公告の概要">
          <div className="grid cols-2" style={{gap:14}}>
            {[["発注機関",cs.org],["地区",cs.region],["工種・等級",`${cs.cat}${cs.grade!=="—"?cs.grade:""}`],["規模",cs.scale],
              ["発注基準額(推定)",`${cs.base[0].toLocaleString()}〜${cs.base[1].toLocaleString()}万円`],["申請締切",`あと${cs.days}日`]].map(([k,v])=>(
              <div key={k}><div className="small mut">{k}</div><div className="b mt-s" style={{fontSize:14}}>{v}</div></div>
            ))}
          </div>
          <div className="divider"></div>
          <div className="small mut">※壱岐市の最低制限価格はランダム係数（1.000〜1.010）で決まります。下回ると失格、上げすぎると他社に最安を奪われます。</div>
        </Card>

        <Card icon="target" title="この案件の落札確率" sub="推奨レンジで入れた場合">
          <div className="flex jc"><Gauge value={model.win} color="#1f9d6b" label={model.verdict} sub="基準額 +0.6〜1.0%"/></div>
        </Card>
      </div>

      <div className="grid cols-3 mt">
        <Card className="span-2" icon="yen" title="推奨入札額" sub="御社の戦績データから算出">
          <div className="flex wrap" style={{gap:22,alignItems:"flex-end"}}>
            <div>
              <div className="small mut">推奨入札額（基準+0.6〜1.0%）</div>
              <div className="b tnum" style={{fontSize:34,color:"#157a51",lineHeight:1.1,marginTop:4}}>{Math.round(recLo).toLocaleString()}〜{Math.round(recHi).toLocaleString()}<span style={{fontSize:16}}>万円</span></div>
              <div className="small mut mt-s">およそ {yen(Math.round(recLo))}〜{yen(Math.round(recHi))} 円</div>
            </div>
            <div style={{flex:1,minWidth:200}}>
              <div className="flex jb small"><span className="mut">従来の入れ方（{DATA.record.myAvg}%）</span><span className="b" style={{color:"#bd4321"}}>失格リスク {bidModel(DATA.record.myAvg).disq}%</span></div>
              <div className="bar-track mt-s"><div className="bar-fill" style={{width:bidModel(DATA.record.myAvg).disq+"%",background:"#e05a37"}}></div></div>
              <div className="flex jb small mt"><span className="mut">推奨レンジ（+0.8%）</span><span className="b" style={{color:"#157a51"}}>落札確率 {model.win}%</span></div>
              <div className="bar-track mt-s"><div className="bar-fill" style={{width:model.win+"%",background:"#1f9d6b"}}></div></div>
            </div>
          </div>
          <div className="mt"><Btn kind="primary" icon="calc" onClick={()=>go("simulator")}>シミュレーターで微調整する</Btn> <Btn kind="ghost" icon="calendar" onClick={()=>go("calendar")}>締切をカレンダーに</Btn></div>
        </Card>

        <Card icon="users" title="入札が予想される競合" sub="同ランク・近い価格帯">
          {likely.map(x=>(
            <div className="row-item" key={x.name}>
              <div className="ri-ic" style={{background:"#eaf3fc"}}><Icon name="building"/></div>
              <div className="ri-main"><div className="ri-t" style={{fontSize:13}}>{x.name}</div><div className="ri-s">{x.note}</div></div>
              <div className="ri-r small"><b>経審 {x.kscore}</b><div className="mut">完工 {x.kanko.toLocaleString()}万</div></div>
            </div>
          ))}
          <div className="mt-s"><Btn kind="ghost" sm block iconR="arrow" onClick={()=>go("competitors")}>競合分析を見る</Btn></div>
        </Card>
      </div>
    </div>
  );
}

/* =================== 競合分析 =================== */
function Competitors({ go }){
  const comp=DATA.competitors;
  const me=comp.find(c=>c.me), top=comp[0];
  const norm=(v,mn,mx)=>Math.max(0.08,Math.min(1,(v-mn)/(mx-mn)));
  const axes=["完工高","経常利益","経審点","営業年数","安定性"];
  const radarVal=(c)=>[
    norm(c.kanko,3500,8500), norm(c.profit,-200,1100), norm(c.kscore,640,750),
    norm(c.years,15,35), c.profit<0?0.15:norm(c.profit,-200,1100)*.8+.2,
  ];
  return (
    <div className="page">
      <PageHead ey="Competition" title="競合分析" desc={`${me.rank.cat||"建築一式B級"} 同ランク${comp.length}社。御社は完工高ベースで${me.rank}位相当の実力です`}>
      </PageHead>

      <div className="grid cols-3 mb">
        <Tile tone="orange" icon="award" label="同ランク内の順位" value="3" unit={`位 / ${comp.length}社`} meta="完成工事高ベース"/>
        <Tile tone="blue" icon="trend" label="2位との完工高差" value="983" unit="万" meta="1〜2件の受注で逆転できる射程"/>
        <Tile tone="green" icon="check" label="御社の建築完工高" value="5,106" unit="万" meta="実は2位相当の規模（元請100%）"/>
      </div>

      <div className="grid cols-3 mb">
        <Card className="span-2" icon="chart" title="建築完工高（元請）の比較" sub="同ランク5社・万円">
          <BarsH unit="万" max={9000} height={210}
            items={comp.map(c=>({label:c.name.replace("（御社）",""), value:c.kanko, me:c.me}))}/>
        </Card>
        <Card icon="award" title="総合力の比較" sub="御社 vs 最有力（クラコウ）">
          <Radar axes={axes} series={[
            {values:radarVal(top), color:"#1a6fd0", me:false},
            {values:radarVal(me), color:"#f5871f", me:true},
          ]}/>
          <div className="legend center" style={{justifyContent:"center"}}>
            <span><i style={{background:"#f5871f"}}></i>御社</span>
            <span><i style={{background:"#1a6fd0"}}></i>クラコウ</span>
          </div>
        </Card>
      </div>

      <Card icon="users" title="同ランク5社の比較" sub="経営事項審査・公表データより">
        <div className="tbl-wrap">
          <table className="tbl">
            <thead><tr><th>順位</th><th>会社</th><th className="num">建築完工高(元請)</th><th className="num">経常利益</th><th className="num">経審点</th><th>ひとこと</th></tr></thead>
            <tbody>
              {comp.map(c=>(
                <tr key={c.rank} className={c.me?"me":""}>
                  <td className="rankn">{c.rank}</td>
                  <td><b>{c.name}</b></td>
                  <td className="num">{c.kanko.toLocaleString()}万</td>
                  <td className={"num "+(c.profit<0?"neg":"pos")}>{c.profit<0?"▲"+Math.abs(c.profit):"+"+c.profit}万</td>
                  <td className="num">{c.kscore}</td>
                  <td className="small">{c.note}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="alert fix mt" style={{borderRadius:14}}>
          <div className="ai"><Icon name="check"/></div>
          <div><div className="at">あと一歩で順位は動きます</div>
          <div className="ab">御社の建築完工高は5社中3位ですが、2位との差はわずか。<b>1〜2件の受注で順位が動く位置</b>にいます。値付けを直して受注を積めば、実力どおり2位が見えてきます。</div></div>
        </div>
      </Card>
    </div>
  );
}

Object.assign(window, { Dashboard, Cases, CaseDetail, Competitors });