/* game-dart.jsx — Dart with interactive SVG dartboard. */
const { useState: useDart, useEffect: useDartFX, useRef: useDartRef } = React;

/* ============================================================
   Dartboard constants
   ============================================================ */
const CX = 200, CY = 200;
const R = { bs: 7, bull: 17, triIn: 105, triOut: 118, dblIn: 170, dblOut: 185 };
const NUMS = [20,1,18,4,13,6,10,15,2,17,3,19,7,16,8,11,14,9,12,5];
const SEG = (2*Math.PI)/20, HALF = SEG/2;

function toXY(r, a) { return [CX + r*Math.sin(a), CY - r*Math.cos(a)]; }
function arcPath(r1, r2, a1, a2) {
  const [x1,y1]=toXY(r1,a1),[x2,y2]=toXY(r1,a2),[x3,y3]=toXY(r2,a2),[x4,y4]=toXY(r2,a1);
  const lg = (a2-a1)>Math.PI?1:0;
  return `M${x1.toFixed(1)} ${y1.toFixed(1)} A${r1} ${r1} 0 ${lg} 1 ${x2.toFixed(1)} ${y2.toFixed(1)} L${x3.toFixed(1)} ${y3.toFixed(1)} A${r2} ${r2} 0 ${lg} 0 ${x4.toFixed(1)} ${y4.toFixed(1)}Z`;
}

/* Pre-build all segment paths at load time */
const SEGS = [];
NUMS.forEach((num, i) => {
  const ev = i%2===0;
  const [a1, a2] = [-HALF + i*SEG, HALF + i*SEG];
  const sc  = ev ? '#f0e0b8' : '#1a1a1a';
  const dc  = ev ? '#1a7c3e' : '#c41c1c';
  SEGS.push({ id:`is${i}`, path: arcPath(R.bull,  R.triIn,  a1,a2), fill:sc, score: num,    num, ring:'single' });
  SEGS.push({ id:`tr${i}`, path: arcPath(R.triIn, R.triOut, a1,a2), fill:dc, score: num*3,  num, ring:'triple' });
  SEGS.push({ id:`os${i}`, path: arcPath(R.triOut,R.dblIn,  a1,a2), fill:sc, score: num,    num, ring:'outer'  });
  SEGS.push({ id:`db${i}`, path: arcPath(R.dblIn, R.dblOut, a1,a2), fill:dc, score: num*2,  num, ring:'double' });
});

function dartScore(svgX, svgY) {
  const dx=svgX-CX, dy=svgY-CY, r=Math.sqrt(dx*dx+dy*dy);
  if (r>R.dblOut) return 0;
  if (r<=R.bs)   return 50;
  if (r<=R.bull) return 25;
  let a=Math.atan2(dx,-dy); if(a<0) a+=2*Math.PI;
  a+=HALF; // offset so seg 0 spans [-HALF,+HALF]
  const idx=Math.floor(a/SEG)%20;
  const num=NUMS[idx];
  if (r>=R.dblIn && r<=R.dblOut) return num*2;
  if (r>=R.triIn && r<=R.triOut) return num*3;
  return num;
}

/* ============================================================
   Dartboard SVG
   ============================================================ */
function Dartboard({ darts, onThrow, disabled, size=380 }) {
  const svgRef = useDartRef(null);

  function handleClick(e) {
    if (disabled || darts.length>=3) return;
    const svg = svgRef.current;
    const rect = svg.getBoundingClientRect();
    const scaleX = 400/rect.width, scaleY = 400/rect.height;
    const svgX = (e.clientX - rect.left)*scaleX;
    const svgY = (e.clientY - rect.top)*scaleY;
    const score = dartScore(svgX, svgY);
    onThrow(svgX, svgY, score);
  }

  const dartColors = ['#ffdd00','#ff8800','#ff2200'];

  return (
    <svg ref={svgRef} viewBox="-22 -22 444 444"
      style={{ width:"100%", maxWidth: size, cursor: disabled ? "not-allowed" : "crosshair", display:"block", margin:"0 auto", touchAction:"none" }}
      onClick={handleClick}>
      {/* Outer border */}
      <circle cx={CX} cy={CY} r={R.dblOut+10} fill="#0a0a0a" />
      <circle cx={CX} cy={CY} r={R.dblOut+1}  fill="#1a1208" />
      {/* All segments */}
      {SEGS.map(s => <path key={s.id} d={s.path} fill={s.fill} stroke="#111" strokeWidth="0.6" />)}
      {/* Bull area */}
      <circle cx={CX} cy={CY} r={R.bull} fill="#1a7c3e" stroke="#111" strokeWidth="0.8" />
      <circle cx={CX} cy={CY} r={R.bs}   fill="#c41c1c" stroke="#111" strokeWidth="0.8" />
      {/* Wire lines (segment boundaries) */}
      {NUMS.map((_,i) => {
        const a = -HALF + i*SEG;
        const [x,y]=toXY(R.dblOut,a);
        return <line key={i} x1={CX} y1={CY} x2={x} y2={y} stroke="#b8960a" strokeWidth="1" opacity="0.5" />;
      })}
      {/* Ring wire circles */}
      {[R.triIn,R.triOut,R.dblIn,R.dblOut].map((r,i)=>(
        <circle key={i} cx={CX} cy={CY} r={r} fill="none" stroke="#b8960a" strokeWidth="1.2" opacity="0.7" />
      ))}
      <circle cx={CX} cy={CY} r={R.bull} fill="none" stroke="#b8960a" strokeWidth="1.2" opacity="0.7" />
      <circle cx={CX} cy={CY} r={R.bs}   fill="none" stroke="#b8960a" strokeWidth="1"   opacity="0.7" />
      {/* Number labels — dark-backed for visibility */}
      {NUMS.map((num,i) => {
        const a = i*SEG;
        const [x,y]=toXY(R.dblOut+17,a);
        return (
          <g key={i}>
            <circle cx={x} cy={y} r={num>=10?14:11} fill="#0d0d0d" />
            <text x={x} y={y} textAnchor="middle" dominantBaseline="middle"
              fill="#ffffff" fontSize="13" fontWeight="700" fontFamily="'Space Grotesk',sans-serif"
              style={{ userSelect:"none" }}>{num}</text>
          </g>
        );
      })}
      {/* Dart markers */}
      {darts.map((d, i) => (
        <g key={i}>
          <circle cx={d.svgX} cy={d.svgY} r={6} fill={dartColors[i]} stroke="#fff" strokeWidth="1.5" opacity="0.95" />
          {d.score > 0 && (
            <text x={d.svgX} y={d.svgY-10} textAnchor="middle" fill="#fff" fontSize="11" fontWeight="bold"
              style={{ textShadow:"0 1px 3px #000" }}>{d.score}</text>
          )}
        </g>
      ))}
    </svg>
  );
}

/* ============================================================
   DartGame
   ============================================================ */
function DartGame({ sess, account, nav, onChange, lang, setLang }) {
  const [turnDarts, setTurnDarts] = useDart([]); // [{svgX,svgY,score}]
  const [showRules, setShowRules] = useDart(false);
  const [toast, setToast] = useDart("");
  const [showResults, setShowResults] = useDart(sess.status==="finished");
  useDartFX(()=>{ if(!toast)return; const tm=setTimeout(()=>setToast(""),2200); return()=>clearTimeout(tm); },[toast]);
  useDartFX(()=>{ if(sess.status==="finished")setShowResults(true); },[sess.status]);

  const n = sess.players.length;
  const cp = sess.currentPlayer;
  const scores = sess.scores || Array(n).fill(sess.startScore);
  const finished = sess.status==="finished";
  const turnScore = turnDarts.reduce((s,d)=>s+d.score, 0);
  const remaining = scores[cp] - turnScore;
  const bust = remaining < 0;

  function patch(updater) {
    const next = JSON.parse(JSON.stringify(sess));
    updater(next);
    onChange(next);
  }

  function throwDart(svgX, svgY, score) {
    if (turnDarts.length>=3 || finished) return;
    const newDarts = [...turnDarts, {svgX, svgY, score}];
    const ns = scores[cp] - newDarts.reduce((s,d)=>s+d.score,0);
    if (ns < 0) {
      setToast(t("dart.bust"));
      // Bust — commit 0 and advance
      commitTurn([], true);
      return;
    }
    setTurnDarts(newDarts);
  }

  function undoLastDart() {
    setTurnDarts(d=>d.slice(0,-1));
  }

  function commitTurn(darts=turnDarts, isBust=false) {
    const thrown = darts.reduce((s,d)=>s+d.score,0);
    patch(s=>{
      if (!s.history) s.history = Array(n).fill(null).map(()=>[]);
      s.history[cp].push(thrown);
      s.scores[cp] = isBust ? s.scores[cp] : s.scores[cp] - thrown;
      if (s.scores[cp]===0) {
        s.status="finished"; s.winner=cp;
      } else {
        s.currentPlayer=(cp+1)%n;
        s.turns=(s.turns||0)+1;
      }
    });
    setTurnDarts([]);
  }

  return (
    <div className="app">
      <AppHeader account={account} nav={nav} onSignOut={()=>{}} crumb={t("game.dart.name")} lang={lang} setLang={setLang} />
      <main className="wrap" style={{flex:1, paddingBottom:80}}>
        <div className="game-top">
          <button className="btn ghost sm" onClick={()=>nav("#/")} style={{paddingLeft:6}}><Icon name="back" size={16}/>{t("nav.dashboard")}</button>
          <span className="round-pill">{sess.startScore}</span>
          {finished && <span className="tag live">🏆 {sess.players[sess.winner].name}</span>}
          <span style={{flex:1}}></span>
          <button className="btn sm" onClick={()=>setShowRules(true)}><Icon name="book" size={15}/>{t("game.rules")}</button>
        </div>

        {/* Scoreboard row */}
        <div style={{display:"flex", gap:10, marginBottom:18, flexWrap:"wrap"}}>
          {sess.players.map((p,i)=>{
            const isCur = i===cp && !finished;
            return (
              <div key={i} className={"card"+(isCur?" tfb-active":"")}
                style={{flex:1, minWidth:110, padding:"14px 12px", textAlign:"center"}}>
                <div style={{display:"flex",alignItems:"center",justifyContent:"center",gap:7,marginBottom:8}}>
                  <Avatar name={p.name} idx={i} size="sm"/>
                  <span style={{fontWeight:700,fontSize:14}}>{p.name}</span>
                  {isCur && <span className="turn-dot"></span>}
                </div>
                <div style={{fontFamily:"var(--font-display)",fontWeight:700,fontSize:38,letterSpacing:"-0.04em",color:isCur?"var(--accent)":"var(--ink)"}}>
                  {i===cp && isCur && turnDarts.length>0 ? remaining : scores[i]}
                </div>
                <div className="muted" style={{fontSize:11.5,marginTop:2}}>
                  {((sess.history||[])[i]||[]).slice(-3).join(" · ")||"—"}
                </div>
              </div>
            );
          })}
        </div>

        {/* Dartboard */}
        {!finished && (
          <div>
            <div style={{marginBottom:10, display:"flex", alignItems:"center", gap:10, flexWrap:"wrap"}}>
              <span style={{fontWeight:600,fontSize:15}}>{sess.players[cp].name}</span>
              <div style={{display:"flex",gap:8}}>
                {[0,1,2].map(i=>(
                  <div key={i} style={{width:38,height:38,borderRadius:"var(--r)",border:"1.5px solid var(--line)",
                    background:turnDarts[i]?"var(--accent-50)":"var(--surface-2)",
                    display:"flex",alignItems:"center",justifyContent:"center",
                    fontFamily:"var(--font-display)",fontWeight:700,fontSize:15,
                    color:turnDarts[i]?"var(--accent)":"var(--faint)"}}>
                    {turnDarts[i]?.score??i+1}
                  </div>
                ))}
              </div>
              {turnScore>0 && <span className="round-pill">Σ {turnScore}{bust?" — "+t("dart.bust"):""}</span>}
            </div>

            <Dartboard darts={turnDarts} onThrow={throwDart} disabled={finished||turnDarts.length>=3} />

            <div style={{display:"flex",gap:10,marginTop:14,flexWrap:"wrap"}}>
              <button className="btn ghost" disabled={turnDarts.length===0} onClick={undoLastDart}>
                <Icon name="back" size={16}/> Undo
              </button>
              <button className="btn" onClick={()=>setTurnDarts([])} disabled={turnDarts.length===0}>
                Reset
              </button>
              <button className="btn primary lg" style={{flex:1}} disabled={turnDarts.length===0}
                onClick={()=>commitTurn()}>
                {t("game.next")}<Icon name="arrow"/>
              </button>
            </div>
          </div>
        )}

        {finished && (
          <div className="card" style={{padding:24,textAlign:"center",marginTop:8}}>
            <div style={{color:"var(--gold)"}}><Icon name="crown" size={32}/></div>
            <h3 style={{marginTop:8}}>{t("dart.gamewin",{name:sess.players[sess.winner].name})}</h3>
            <button className="btn primary" style={{marginTop:16}} onClick={()=>nav("#/new/dart")}>{t("res.newgame")}</button>
          </div>
        )}
      </main>
      {showRules && <GameRulesModal gameId="dart" lang={lang} onClose={()=>setShowRules(false)} />}
      <Toast msg={toast}/>
    </div>
  );
}

Object.assign(window, { DartGame, Dartboard, dartScore });