// Düello gameplay screens — 4 states shown side-by-side on phones.
// Keeps the dark multiplayer aesthetic from the lobby.

const { useState: useSD, useEffect: useED } = React;

// ── Status chip + timer ──
function LiveHeader({ opName, opColor, secs, round = 2, total = 6 }) {
  return (
    <div style={{ padding: '10px 14px 0', color: '#fff' }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        background: 'rgba(255,255,255,0.06)', borderRadius: 12,
        padding: '10px 12px', border: '1px solid rgba(255,255,255,0.08)',
      }}>
        <div style={{
          width: 32, height: 32, borderRadius: 999,
          background: opColor, color: '#fff',
          display: 'grid', placeItems: 'center',
          fontSize: 13, fontWeight: 800,
        }}>{opName[0]}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 700 }}>{opName}</div>
          <div style={{
            fontSize: 10, color: '#6B9CF5', fontWeight: 700,
            letterSpacing: 0.4, textTransform: 'uppercase',
            display: 'flex', alignItems: 'center', gap: 4,
          }}>
            <span style={{
              width: 5, height: 5, borderRadius: 999, background: '#3a9e5c',
            }} />
            Yazıyor…
          </div>
        </div>
        <div style={{
          padding: '5px 10px', borderRadius: 999,
          background: secs < 10 ? '#E85A6D' : 'rgba(255,255,255,0.1)',
          fontSize: 14, fontWeight: 900,
          fontFamily: 'ui-monospace, monospace',
          fontVariantNumeric: 'tabular-nums',
        }}>0:{String(secs).padStart(2,'0')}</div>
      </div>
      <div style={{
        display: 'flex', justifyContent: 'space-between', padding: '8px 4px',
        fontSize: 10, color: 'rgba(255,255,255,0.5)', fontWeight: 700,
        letterSpacing: 0.8, textTransform: 'uppercase',
      }}>
        <span>Tur {round} / {total}</span>
        <span>5 harf · Türkçe</span>
      </div>
    </div>
  );
}

// Mini opponent board (blurred/cover letters) + your board
function Board({ rows, states, mine = true, size = 42, gap = 5 }) {
  const colors = {
    c: { bg: '#3a9e5c', bd: '#3a9e5c', fg: '#fff' },
    p: { bg: '#c79a1b', bd: '#c79a1b', fg: '#fff' },
    a: { bg: '#555c6e', bd: '#555c6e', fg: '#fff' },
    e: { bg: 'transparent', bd: 'rgba(255,255,255,0.15)', fg: '#fff' },
    f: { bg: 'rgba(255,255,255,0.06)', bd: 'rgba(255,255,255,0.45)', fg: '#fff' },
  };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap, alignItems: 'center' }}>
      {rows.map((r, i) => (
        <div key={i} style={{ display: 'flex', gap }}>
          {r.map((l, j) => {
            const s = states[i][j];
            const c = colors[s];
            return (
              <div key={j} style={{
                width: size, height: size, borderRadius: 6,
                background: c.bg, border: `1.5px solid ${c.bd}`, color: c.fg,
                display: 'grid', placeItems: 'center',
                fontWeight: 900, fontSize: size * 0.48, textTransform: 'uppercase',
                filter: mine ? 'none' : (s === 'e' || s === 'f' ? 'none' : 'none'),
              }}>{mine ? l : (s !== 'e' && s !== 'f' ? '' : '')}</div>
            );
          })}
        </div>
      ))}
    </div>
  );
}

// Keyboard row
function DKey({ label, w, accent, disabled, state }) {
  const stateColor = {
    c: '#3a9e5c', p: '#c79a1b', a: '#3a3d48',
  };
  const bg = state ? stateColor[state]
    : accent ? '#3a9e5c'
    : 'rgba(255,255,255,0.1)';
  return (
    <button style={{
      width: w || 26, height: 44, borderRadius: 5,
      background: bg, color: '#fff', border: 'none',
      fontWeight: 800, fontSize: accent ? 10 : 14, letterSpacing: 0.4,
      textTransform: 'uppercase', fontFamily: 'inherit', cursor: 'pointer',
      flex: w ? 'none' : 1,
      opacity: disabled ? 0.3 : 1,
    }}>{label}</button>
  );
}

function Keyboard({ letterStates = {} }) {
  const rows = ['ertyuıopğü','asdfghjklşi','zcvbnmöç'];
  return (
    <div style={{
      padding: '8px 4px 30px', display: 'flex', flexDirection: 'column', gap: 5,
    }}>
      {rows.map((row, i) => (
        <div key={i} style={{ display: 'flex', gap: 3, justifyContent: 'center' }}>
          {i === 2 && <DKey w={40} label="GİR" accent />}
          {row.split('').map(ch => (
            <DKey key={ch} label={ch} state={letterStates[ch]} />
          ))}
          {i === 2 && <DKey w={40} label="⌫" />}
        </div>
      ))}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// STATE 1 — Matched / ready (3-2-1 countdown)
// ═══════════════════════════════════════════════════════════════
window.DuelloMatched = function DuelloMatched({ setRoute }) {
  return (
    <div style={{
      minHeight: '100%', padding: 0,
      background: 'radial-gradient(circle at 50% 30%, rgba(232,90,109,0.25), transparent 55%), #0c0d12',
      color: '#fff', display: 'flex', flexDirection: 'column',
    }}>
      <TopBar dark onBack={() => setRoute({ name: 'duello' })}
        trailing={<div style={{ width: 36 }}/>} />
      <div style={{
        flex: 1, display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center', padding: 24,
      }}>
        <div style={{
          fontSize: 11, letterSpacing: 2, textTransform: 'uppercase',
          fontWeight: 800, opacity: 0.6, marginBottom: 16,
        }}>Eşleşme bulundu</div>

        <div style={{
          display: 'flex', alignItems: 'center', gap: 22, marginBottom: 26,
        }}>
          <div style={{ textAlign: 'center' }}>
            <div style={{
              width: 72, height: 72, borderRadius: 999,
              background: '#6B9CF5', color: '#fff',
              display: 'grid', placeItems: 'center',
              fontSize: 28, fontWeight: 800, margin: '0 auto',
              boxShadow: '0 0 0 4px rgba(107,156,245,0.25)',
            }}>A</div>
            <div style={{ fontWeight: 700, fontSize: 14, marginTop: 8 }}>Ayşe</div>
            <div style={{ fontSize: 11, opacity: 0.55 }}>Seri 12</div>
          </div>

          <div style={{
            fontFamily: 'Fraunces, Georgia, serif',
            fontSize: 40, fontWeight: 700, letterSpacing: -1.5,
            opacity: 0.35,
          }}>vs</div>

          <div style={{ textAlign: 'center' }}>
            <div style={{
              width: 72, height: 72, borderRadius: 999,
              background: '#E85A6D', color: '#fff',
              display: 'grid', placeItems: 'center',
              fontSize: 28, fontWeight: 800, margin: '0 auto',
              boxShadow: '0 0 0 4px rgba(232,90,109,0.25)',
            }}>M</div>
            <div style={{ fontWeight: 700, fontSize: 14, marginTop: 8 }}>Mehmet</div>
            <div style={{ fontSize: 11, opacity: 0.55 }}>Seri 8</div>
          </div>
        </div>

        <button onClick={() => setRoute({ name: 'duello-live' })} style={{
          background: 'transparent', border: 'none', cursor: 'pointer',
          padding: 0, display: 'flex', flexDirection: 'column', alignItems: 'center',
          fontFamily: 'inherit',
        }}>
          <div style={{
            fontFamily: 'Fraunces, Georgia, serif',
            fontSize: 96, fontWeight: 700, letterSpacing: -5, lineHeight: 1,
            color: '#E85A6D',
          }}>3</div>
          <div style={{
            fontSize: 12, letterSpacing: 1.5, textTransform: 'uppercase',
            fontWeight: 800, color: 'rgba(255,255,255,0.5)', marginTop: 4,
          }}>Başlamak üzere · dokunup başla</div>
        </button>

        <div style={{
          marginTop: 28, padding: 12, borderRadius: 10,
          background: 'rgba(255,255,255,0.04)',
          fontSize: 11, opacity: 0.65, maxWidth: 280, textAlign: 'center',
        }}>
          5 harfli kelime · 6 deneme · 60 saniye tur · Aynı anda başlarsınız
        </div>
      </div>
    </div>
  );
};

// ═══════════════════════════════════════════════════════════════
// STATE 2 — Live gameplay
// ═══════════════════════════════════════════════════════════════
window.DuelloLive = function DuelloLive({ setRoute }) {
  const myRows = [
    ['k','a','l','e','m'],
    ['s','i','l','i','m'],
    ['','','','',''],
    ['','','','',''],
    ['','','','',''],
    ['','','','',''],
  ];
  const myStates = [
    ['a','c','a','a','p'],
    ['a','a','a','a','c'],
    ['f','f','f','f','f'],
    ['e','e','e','e','e'],
    ['e','e','e','e','e'],
    ['e','e','e','e','e'],
  ];
  // Opponent — we see positions but not letters
  const opStates = [
    ['a','a','c','p','a'],
    ['a','c','c','p','a'],
    ['a','a','c','p','c'],
    ['f','f','f','f','f'],
    ['e','e','e','e','e'],
    ['e','e','e','e','e'],
  ];
  return (
    <div style={{
      minHeight: '100%', background: '#0c0d12', color: '#fff',
      display: 'flex', flexDirection: 'column',
    }}>
      <TopBar dark onBack={() => setRoute({ name: 'duello' })}
        trailing={
          <button onClick={() => setRoute({ name: 'duello-result' })} style={{
            width: 36, height: 36, borderRadius: 999,
            background: 'rgba(255,255,255,0.1)', border: 'none',
            color: '#fff', fontSize: 18, cursor: 'pointer',
          }}>⚑</button>
        } />
      <LiveHeader opName="Mehmet" opColor="#E85A6D" secs={23} round={2} total={6} />

      {/* Split view — my board + opponent mini */}
      <div style={{
        flex: 1, padding: '14px 12px',
        display: 'flex', flexDirection: 'column', gap: 14,
      }}>
        {/* Opponent mini board — compact, no letters */}
        <div style={{
          background: 'rgba(255,255,255,0.04)', borderRadius: 14,
          padding: '10px 14px',
          display: 'flex', alignItems: 'center', gap: 12,
          border: '1px solid rgba(255,255,255,0.06)',
        }}>
          <div>
            <div style={{
              fontSize: 9, letterSpacing: 1, textTransform: 'uppercase',
              fontWeight: 800, opacity: 0.55,
            }}>Rakip</div>
            <div style={{
              fontFamily: 'Fraunces, Georgia, serif',
              fontSize: 22, fontWeight: 700, letterSpacing: -0.3,
              display: 'flex', alignItems: 'center', gap: 6,
            }}>
              3<span style={{ fontSize: 11, opacity: 0.5, fontWeight: 500 }}>tahmin</span>
            </div>
          </div>
          <div style={{ flex: 1, display: 'flex', justifyContent: 'flex-end' }}>
            <Board rows={opStates.map(r => r.map(_ => ''))} states={opStates}
              mine={false} size={18} gap={2} />
          </div>
        </div>

        {/* My board */}
        <div style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
          <Board rows={myRows} states={myStates} size={44} gap={5} />
        </div>
      </div>

      <Keyboard letterStates={{
        a: 'a', l: 'a', s: 'a', i: 'a',
        e: 'p', m: 'c',
      }} />
    </div>
  );
};

// ═══════════════════════════════════════════════════════════════
// STATE 3 — Result (won)
// ═══════════════════════════════════════════════════════════════
window.DuelloResult = function DuelloResult({ setRoute }) {
  return (
    <div style={{
      minHeight: '100%',
      background: 'radial-gradient(circle at 50% 25%, rgba(58,158,92,0.35), transparent 60%), #0c0d12',
      color: '#fff', display: 'flex', flexDirection: 'column',
    }}>
      <TopBar dark onBack={() => setRoute({ name: 'duello' })}
        trailing={<div style={{ width: 36 }}/>} />

      <div style={{
        flex: 1, padding: '8px 16px 16px',
        display: 'flex', flexDirection: 'column',
      }}>
        <div style={{ textAlign: 'center', marginBottom: 16 }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '4px 12px', borderRadius: 999,
            background: 'rgba(58,158,92,0.2)', color: '#6eed9a',
            fontSize: 10, fontWeight: 800, letterSpacing: 1.5,
            textTransform: 'uppercase',
          }}>
            <span>★</span> Galibiyet
          </div>
          <div style={{
            fontFamily: 'Fraunces, Georgia, serif',
            fontSize: 52, fontWeight: 700, letterSpacing: -2,
            lineHeight: 1, marginTop: 10,
          }}>Kazandın!</div>
          <div style={{ fontSize: 13, opacity: 0.7, marginTop: 6 }}>
            Mehmet'i <strong style={{ color: '#fff' }}>18 saniye</strong> önce bitirdin
          </div>
        </div>

        {/* Word reveal */}
        <div style={{
          background: 'rgba(255,255,255,0.04)', borderRadius: 16,
          padding: 16, textAlign: 'center', marginBottom: 14,
          border: '1px solid rgba(255,255,255,0.08)',
        }}>
          <div style={{
            fontSize: 10, letterSpacing: 1.3, textTransform: 'uppercase',
            opacity: 0.55, fontWeight: 700, marginBottom: 10,
          }}>Gizli Kelime</div>
          <div style={{ display: 'inline-flex', gap: 5 }}>
            {['k','i','t','a','p'].map((l, i) => (
              <div key={i} style={{
                width: 40, height: 40, borderRadius: 6,
                background: '#3a9e5c', color: '#fff',
                display: 'grid', placeItems: 'center',
                fontWeight: 900, fontSize: 20, textTransform: 'uppercase',
              }}>{l}</div>
            ))}
          </div>
        </div>

        {/* Stats comparison */}
        <div style={{
          background: 'rgba(255,255,255,0.04)', borderRadius: 16,
          padding: '14px 16px', marginBottom: 14,
          border: '1px solid rgba(255,255,255,0.08)',
        }}>
          <StatRow label="Tahmin" mine="4" theirs="5" won />
          <StatRow label="Süre" mine="2:14" theirs="2:32" won />
          <StatRow label="İlk yeşil" mine="1. tur" theirs="2. tur" won />
        </div>

        {/* Streak gain */}
        <div style={{
          display: 'flex', gap: 10, marginBottom: 14,
        }}>
          <div style={{
            flex: 1, background: 'rgba(232,90,109,0.12)',
            border: '1px solid rgba(232,90,109,0.3)',
            borderRadius: 14, padding: '12px 14px',
          }}>
            <div style={{
              fontSize: 10, color: '#ff9aa6', letterSpacing: 1,
              textTransform: 'uppercase', fontWeight: 700,
            }}>Galibiyet Serisi</div>
            <div style={{
              fontFamily: 'Fraunces, Georgia, serif', fontSize: 26,
              fontWeight: 700, marginTop: 2,
            }}>+1 <span style={{ fontSize: 12, opacity: 0.6 }}>= 4</span></div>
          </div>
          <div style={{
            flex: 1, background: 'rgba(255,255,255,0.04)',
            border: '1px solid rgba(255,255,255,0.08)',
            borderRadius: 14, padding: '12px 14px',
          }}>
            <div style={{
              fontSize: 10, opacity: 0.55, letterSpacing: 1,
              textTransform: 'uppercase', fontWeight: 700,
            }}>Puan</div>
            <div style={{
              fontFamily: 'Fraunces, Georgia, serif', fontSize: 26,
              fontWeight: 700, marginTop: 2,
            }}>+42</div>
          </div>
        </div>

        {/* CTAs */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <button onClick={() => setRoute({ name: 'duello-matched' })} style={{
            padding: 14, borderRadius: 12, background: '#E85A6D',
            color: '#fff', border: 'none', fontWeight: 800, fontSize: 14,
            fontFamily: 'inherit', cursor: 'pointer',
          }}>Rövanş iste</button>
          <button onClick={() => setRoute({ name: 'duello' })} style={{
            padding: 12, borderRadius: 12,
            background: 'rgba(255,255,255,0.08)', color: '#fff',
            border: 'none', fontWeight: 700, fontSize: 13,
            fontFamily: 'inherit', cursor: 'pointer',
          }}>Yeni rakip bul</button>
          <button style={{
            padding: 10, borderRadius: 12, background: 'transparent',
            color: 'rgba(255,255,255,0.6)', border: 'none',
            fontWeight: 600, fontSize: 12, fontFamily: 'inherit', cursor: 'pointer',
          }}>Paylaş</button>
        </div>
      </div>
    </div>
  );
};

function StatRow({ label, mine, theirs, won }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '1fr auto 1fr',
      alignItems: 'center', padding: '6px 0', gap: 12,
    }}>
      <div style={{
        textAlign: 'right', fontFamily: 'Fraunces, Georgia, serif',
        fontSize: 18, fontWeight: 700, color: won ? '#6eed9a' : '#fff',
      }}>{mine}</div>
      <div style={{
        fontSize: 10, letterSpacing: 1, textTransform: 'uppercase',
        color: 'rgba(255,255,255,0.45)', fontWeight: 800,
      }}>{label}</div>
      <div style={{
        fontFamily: 'Fraunces, Georgia, serif',
        fontSize: 18, fontWeight: 700, opacity: 0.5,
      }}>{theirs}</div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// STATE 4 — Emote / reaction during gameplay (alt/bonus concept)
// ═══════════════════════════════════════════════════════════════
window.DuelloEmote = function DuelloEmote({ setRoute }) {
  const myRows = [
    ['k','a','l','e','m'],
    ['s','i','l','i','m'],
    ['b','i','l','i','m'],
    ['','','','',''],
    ['','','','',''],
    ['','','','',''],
  ];
  const myStates = [
    ['a','c','a','a','p'],
    ['a','a','a','a','c'],
    ['p','a','a','c','c'],
    ['f','f','f','f','f'],
    ['e','e','e','e','e'],
    ['e','e','e','e','e'],
  ];
  const opStates = [
    ['a','a','c','p','a'],
    ['a','c','c','p','a'],
    ['a','a','c','p','c'],
    ['a','c','c','c','c'],
    ['f','f','f','f','f'],
    ['e','e','e','e','e'],
  ];

  return (
    <div style={{
      minHeight: '100%', background: '#0c0d12', color: '#fff',
      display: 'flex', flexDirection: 'column', position: 'relative',
    }}>
      <TopBar dark onBack={() => setRoute({ name: 'duello' })} />
      <LiveHeader opName="Mehmet" opColor="#E85A6D" secs={8} round={4} total={6} />

      <div style={{
        flex: 1, padding: '14px 12px',
        display: 'flex', flexDirection: 'column', gap: 14,
      }}>
        <div style={{
          background: 'rgba(255,255,255,0.04)', borderRadius: 14,
          padding: '10px 14px',
          display: 'flex', alignItems: 'center', gap: 12,
          border: '1px solid rgba(232,90,109,0.35)',
          boxShadow: '0 0 0 3px rgba(232,90,109,0.08)',
        }}>
          <div>
            <div style={{
              fontSize: 9, letterSpacing: 1, textTransform: 'uppercase',
              fontWeight: 800, color: '#ff9aa6',
            }}>Rakip · yaklaştı!</div>
            <div style={{
              fontFamily: 'Fraunces, Georgia, serif',
              fontSize: 22, fontWeight: 700, letterSpacing: -0.3,
            }}>4<span style={{ fontSize: 11, opacity: 0.5, fontWeight: 500, marginLeft: 4 }}>tahmin</span></div>
          </div>
          <div style={{ flex: 1, display: 'flex', justifyContent: 'flex-end' }}>
            <Board rows={opStates.map(r => r.map(_ => ''))} states={opStates}
              mine={false} size={18} gap={2} />
          </div>
        </div>

        <div style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
          <Board rows={myRows} states={myStates} size={44} gap={5} />
        </div>
      </div>

      {/* Emote floating overlay */}
      <div style={{
        position: 'absolute', right: 14, top: 240,
        background: '#fff', color: '#E85A6D',
        borderRadius: 14, padding: '10px 14px',
        fontFamily: 'Fraunces, Georgia, serif',
        fontSize: 14, fontWeight: 700,
        display: 'flex', alignItems: 'center', gap: 8,
        boxShadow: '0 8px 24px rgba(0,0,0,0.4)',
        animation: 'kelpulse 1.4s ease-out',
      }}>
        <div style={{
          width: 24, height: 24, borderRadius: 999,
          background: '#E85A6D', color: '#fff',
          display: 'grid', placeItems: 'center',
          fontSize: 11, fontWeight: 800,
        }}>M</div>
        "Yakında!" 🔥
      </div>

      {/* Emote tray */}
      <div style={{
        padding: '8px 14px',
        display: 'flex', gap: 6, justifyContent: 'center',
        background: 'rgba(0,0,0,0.3)', borderTop: '1px solid rgba(255,255,255,0.06)',
      }}>
        {['👏','🔥','😅','😱','🎯','🤝'].map(e => (
          <button key={e} style={{
            width: 42, height: 42, borderRadius: 999,
            background: 'rgba(255,255,255,0.08)',
            border: 'none', fontSize: 18, cursor: 'pointer',
          }}>{e}</button>
        ))}
      </div>

      <Keyboard letterStates={{
        a: 'a', s: 'a', e: 'p', m: 'c', l: 'c', i: 'c', b: 'p',
      }} />
    </div>
  );
};