// SCORE SUBMIT — popup modal for live matchday score reporting
// 3-step wizard: 1. Upload screenshots  2. AI extraction + correct  3. Confirm + submit
// Liga/Killrace = 2 images (kills + placement)
// 2v2 tournament = 1 image (kills only)
// Role-gated: captain | mod | admin | superadmin

const ScoreSubmitModal = ({ open, context, onClose, accent }) => {
  // All hooks must be called unconditionally (Rules of Hooks)
  const [step, setStep] = useState(1);
  const [hasKills, setHasKills] = useState(false);
  const [hasPlacement, setHasPlacement] = useState(false);
  const [dragOver, setDragOver] = useState(null);
  const [aiStatus, setAiStatus] = useState("idle");
  const [aiData, setAiData] = useState(null);
  const [playerStats, setPlayerStats] = useState({});
  const [placement, setPlacement] = useState(null);
  const [submitting, setSubmitting] = useState(false);
  const [submitted, setSubmitted] = useState(false);

  const isLiga = context ? (context.type === "liga" || context.type === "killrace") : false;
  // Hent innlogget brukers team fra Supabase (fallback: tomt team)
  const [myTeam, setMyTeam] = useState(null);
  useEffect(() => {
    if (typeof window.db !== "undefined") {
      window.db.auth.getSession().then(({ data: { session } }) => {
        if (!session?.user) return;
        window.db.from("team_registrations")
          .select("*").eq("status", "approved")
          .ilike("captain", `%${session.user.user_metadata?.full_name || session.user.email || ""}%`)
          .limit(1).then(({ data }) => { if (data?.[0]) setMyTeam(data[0]); });
      });
    }
  }, [open]);
  const team = myTeam || { id: "unknown", name: "Mitt lag", tag: "—", roster: [] };
  const rosterSize = context?.type === "2v2" ? 2 : 3;
  const rawRoster = Array.isArray(team.roster) ? team.roster : [];
  const roster = rawRoster.length > 0 ? rawRoster.slice(0, rosterSize) :
    Array.from({length: rosterSize}, (_, i) => ({ id: `p${i}`, displayName: `Spiller ${i+1}`, activisionId: `—` }));

  // Sync playerStats when context changes (roster may differ by type)
  useEffect(() => {
    if (!open || !context) return;
    setPlayerStats(roster.reduce((acc, p) => ({ ...acc, [p.id]: { kills: 0, deaths: 0 } }), {}));
  }, [open, context?.type]);

  // Trigger AI extraction when both required uploads done
  useEffect(() => {
    if (!open || !context) return;
    const needsPlacement = isLiga;
    const ready = hasKills && (!needsPlacement || hasPlacement);
    if (ready && aiStatus === "idle") {
      setAiStatus("scanning");
      setTimeout(() => {
        const extracted = roster.map((p, i) => ({
          name: p.displayName,
          kills: [9, 7, 5, 4][i] || 3,
          deaths: [2, 3, 4, 5][i] || 4,
          damage: [2640, 2105, 1480, 1200][i] || 900,
          confidence: 0.94 + Math.random() * 0.05,
        }));
        const detectedPlacement = needsPlacement ? 3 : null;
        setAiData({
          status: "done",
          confidence: 0.96,
          players: extracted,
          placementDetected: detectedPlacement,
          placementConfidence: detectedPlacement ? 0.98 : null,
          flags: [],
        });
        const newStats = {};
        extracted.forEach((e, i) => {
          newStats[roster[i].id] = { kills: e.kills, deaths: e.deaths };
        });
        setPlayerStats(newStats);
        if (needsPlacement) setPlacement(detectedPlacement);
        setAiStatus("done");
      }, 1600);
    }
  }, [hasKills, hasPlacement, open]);

  if (!open || !context) return null;

  const totalKills = Object.values(playerStats).reduce((a, b) => a + b.kills, 0);
  const totalDeaths = Object.values(playerStats).reduce((a, b) => a + b.deaths, 0);
  const multiplier = !isLiga ? 1 :
    placement === 1 ? 2.0 :
    placement <= 5 ? 1.8 :
    placement <= 10 ? 1.6 :
    placement <= 20 ? 1.4 :
    placement <= 35 ? 1.2 : 1.0;
  const basePoints = isLiga && placement ? (
    placement === 1 ? 70 :
    placement <= 5 ? 50 :
    placement <= 10 ? 35 :
    placement <= 20 ? 20 :
    placement <= 35 ? 10 : 5
  ) : 0;
  const estimatedPoints = isLiga ? Math.round((basePoints + totalKills) * multiplier) : totalKills;

  const canProceedStep1 = isLiga ? (hasKills && hasPlacement && aiStatus === "done") : (hasKills && aiStatus === "done");
  const canSubmit = canProceedStep1 && (!isLiga || placement);

  const updatePlayer = (id, field, value) => {
    setPlayerStats(prev => ({
      ...prev,
      [id]: { ...prev[id], [field]: Math.max(0, parseInt(value) || 0) }
    }));
  };

  const handleSubmit = () => {
    setSubmitting(true);
    setTimeout(() => {
      const sub = {
        id: "wzn-" + Date.now(),
        submittedAt: new Date().toISOString(),
        submittedBy: team.name,
        submittedByTag: team.tag,
        teamId: team.id,
        captain: team.captain || "—",
        tournament: context.tournament,
        type: context.type,
        game: context.game || 1,
        placement: placement || null,
        players: roster.map(p => ({
          name: p.displayName,
          kills: playerStats[p.id]?.kills || 0,
          deaths: playerStats[p.id]?.deaths || 0,
        })),
        screenshotLabel: `Scoreboard — Game ${context.game || 1}`,
        screenshots: { scoreboard: "assets/sample-scoreboard.png" },
        aiExtraction: aiData ? { ...aiData, status: "done" } : null,
        flagged: (aiData?.flags?.length || 0) > 0,
        flagReason: aiData?.flags?.[0] || null,
      };
      window.WZN_Store.addSubmission(sub);
      setSubmitting(false);
      setSubmitted(true);
    }, 900);
  };

  const handleClose = () => {
    setStep(1); setHasKills(false); setHasPlacement(false);
    setAiStatus("idle"); setAiData(null); setPlacement(null);
    setSubmitted(false);
    onClose();
  };

  return (
    <div className="ss-overlay" onClick={handleClose}>
      <div className="ss-modal" onClick={e => e.stopPropagation()}>
        {/* HEADER */}
        <div className="ss-header" style={{borderBottomColor: accent}}>
          <div className="ss-header-left">
            <span className="ss-header-tag" style={{borderColor: accent, color: accent}}>
              {context.type === "2v2" ? "2V2 TURNERING" : context.type === "killrace" ? "KILLRACE" : "LIGA"}
            </span>
            <div className="ss-header-titles">
              <div className="ss-header-title">{context.tournament}</div>
              <div className="ss-header-sub">{context.gameLabel || `GAME ${context.game || 1}`}</div>
            </div>
          </div>
          <button className="ss-close" onClick={handleClose} aria-label="Lukk">✕</button>
        </div>

        {submitted ? (
          <div className="ss-success">
            <div className="ss-success-stamp" style={{borderColor: accent, color: accent}}>
              ✓ SENDT TIL VERIFISERING
            </div>
            <div className="ss-success-title">Rapport mottatt</div>
            <div className="ss-success-id">REF: WZN-{Math.floor(Math.random()*9000)+1000}</div>
            <p className="ss-success-text">
              Admin og AI behandler innleveringen din. Du får varsel når Ligapoengene er publisert. Estimert tid: 15–30 min.
            </p>
            <div className="ss-success-summary">
              <div><span>TOTAL KILLS</span><b>{totalKills}</b></div>
              {isLiga && <div><span>PLASSERING</span><b>#{placement}</b></div>}
              {isLiga && <div><span>EST. lp</span><b style={{color: accent}}>+{estimatedPoints}</b></div>}
              {!isLiga && <div><span>SCORE</span><b style={{color: accent}}>{totalKills} kills</b></div>}
            </div>
            <div className="ss-success-actions">
              <button className="ss-btn" onClick={handleClose}>LUKK</button>
              <button className="ss-btn primary" style={{borderColor: accent, color: accent}} onClick={() => {
                setStep(1); setHasKills(false); setHasPlacement(false);
                setAiStatus("idle"); setAiData(null); setPlacement(null);
                setSubmitted(false);
              }}>RAPPORTER NESTE GAME →</button>
            </div>
          </div>
        ) : (
          <>
            {/* STEP RAIL */}
            <div className="ss-steprail">
              {[
                { n: 1, label: "LAST OPP" },
                { n: 2, label: "AI-EKSTRAKSJON" },
                { n: 3, label: "BEKREFT" },
              ].map(s => (
                <div key={s.n} className={`ss-steprail-item ${step === s.n ? "active" : ""} ${step > s.n ? "done" : ""}`}>
                  <span className="ss-step-n" style={(step >= s.n) ? {borderColor: accent, color: step === s.n ? accent : "#9a958e"} : {}}>
                    {step > s.n ? "✓" : s.n}
                  </span>
                  <span className="ss-step-label">{s.label}</span>
                </div>
              ))}
            </div>

            {/* BODY — step content */}
            <div className="ss-body">
              {/* STEP 1: UPLOAD */}
              {step === 1 && (
                <div className="ss-step-content">
                  <div className="ss-step-intro">
                    <div className="ss-step-num" style={{color: accent}}>01</div>
                    <div>
                      <h3 className="ss-step-title">LAST OPP {isLiga ? "BEGGE SCREENSHOTS" : "KILLS-SCREENSHOT"}</h3>
                      <p className="ss-step-lead">
                        {isLiga
                          ? "Lobby-leaderboard (kills + deaths per spiller) + endscreen (plassering). AI ekstraherer tallene automatisk."
                          : "Lobby-leaderboard med kills og deaths. AI ekstraherer per-spiller tall automatisk."
                        }
                      </p>
                    </div>
                  </div>

                  <div className={`ss-dropzones ${isLiga ? "dual" : "single"}`}>
                    <SSDropZone
                      kind="kills"
                      label="KILLS-SCREENSHOT"
                      hint="Squad-stats m/ navn, kills, deaths, damage"
                      has={hasKills}
                      over={dragOver === "kills"}
                      onOver={() => setDragOver("kills")}
                      onLeave={() => setDragOver(null)}
                      onDrop={() => { setDragOver(null); setHasKills(true); }}
                      onClick={() => setHasKills(true)}
                      accent={accent}
                      preview="assets/sample-scoreboard.png"
                    />
                    {isLiga && (
                      <SSDropZone
                        kind="placement"
                        label="PLASSERING-SCREENSHOT"
                        hint="Endscreen m/ teamets plassering"
                        has={hasPlacement}
                        over={dragOver === "placement"}
                        onOver={() => setDragOver("placement")}
                        onLeave={() => setDragOver(null)}
                        onDrop={() => { setDragOver(null); setHasPlacement(true); }}
                        onClick={() => setHasPlacement(true)}
                        accent={accent}
                        preview="assets/sample-scoreboard.png"
                      />
                    )}
                  </div>

                  {/* AI scanning indicator */}
                  {aiStatus === "scanning" && (
                    <div className="ss-ai-scanning">
                      <div className="ss-ai-pulse" style={{background: accent}} />
                      <div className="ss-ai-text">
                        <div className="ss-ai-title">AI ANALYSERER BILDER...</div>
                        <div className="ss-ai-sub">wzn-clip-judge-v3.2 · vision OCR · ~2s</div>
                      </div>
                    </div>
                  )}

                  {aiStatus === "done" && (
                    <div className="ss-ai-done" style={{borderColor: accent}}>
                      <span className="ss-ai-check" style={{color: accent}}>✓</span>
                      <span className="ss-ai-done-text">
                        AI EKSTRAKSJON FULLFØRT · Confidence {Math.round((aiData?.confidence || 0) * 100)}%
                      </span>
                    </div>
                  )}
                </div>
              )}

              {/* STEP 2: AI EXTRACTION + CORRECT */}
              {step === 2 && aiData && (
                <div className="ss-step-content">
                  <div className="ss-step-intro">
                    <div className="ss-step-num" style={{color: accent}}>02</div>
                    <div>
                      <h3 className="ss-step-title">VERIFISER AI-TALL</h3>
                      <p className="ss-step-lead">
                        AI har ekstrahert tallene. Korriger hvis noe er feil — du har siste ord før innsending.
                      </p>
                    </div>
                  </div>

                  <table className="ss-players-table">
                    <thead>
                      <tr>
                        <th>SPILLER</th>
                        <th className="num">KILLS</th>
                        <th className="num">DEATHS</th>
                        <th className="num">K/D</th>
                        <th>AI-CONFIDENCE</th>
                      </tr>
                    </thead>
                    <tbody>
                      {roster.map((p, i) => {
                        const ai = aiData.players[i];
                        const stats = playerStats[p.id];
                        const kd = stats.deaths > 0 ? (stats.kills / stats.deaths).toFixed(2) : stats.kills.toFixed(2);
                        const conf = ai?.confidence || 0;
                        return (
                          <tr key={p.id}>
                            <td>
                              <div className="ss-player-name">{p.displayName}</div>
                              <div className="ss-player-aid">{p.activisionId}</div>
                            </td>
                            <td className="num">
                              <input
                                type="number" min="0"
                                value={stats.kills}
                                onChange={e => updatePlayer(p.id, "kills", e.target.value)}
                                className="ss-num-input"
                              />
                            </td>
                            <td className="num">
                              <input
                                type="number" min="0"
                                value={stats.deaths}
                                onChange={e => updatePlayer(p.id, "deaths", e.target.value)}
                                className="ss-num-input"
                              />
                            </td>
                            <td className="num kd-cell">{kd}</td>
                            <td>
                              <div className="ss-conf-bar">
                                <div className="ss-conf-fill" style={{width: `${conf*100}%`, background: conf > 0.9 ? "#65a30d" : conf > 0.75 ? "#d97706" : "#ef4444"}} />
                                <span className="ss-conf-num">{Math.round(conf*100)}%</span>
                              </div>
                            </td>
                          </tr>
                        );
                      })}
                    </tbody>
                    <tfoot>
                      <tr>
                        <td><strong>TOTALT</strong></td>
                        <td className="num"><strong style={{color: accent}}>{totalKills}</strong></td>
                        <td className="num"><strong>{totalDeaths}</strong></td>
                        <td className="num"><strong>{totalDeaths > 0 ? (totalKills/totalDeaths).toFixed(2) : totalKills.toFixed(2)}</strong></td>
                        <td></td>
                      </tr>
                    </tfoot>
                  </table>

                  {isLiga && (
                    <div className="ss-placement-row">
                      <div className="ss-placement-label">
                        <span className="ss-placement-k">PLASSERING (1-50)</span>
                        <span className="ss-placement-sub">
                          AI detekterte: #{aiData.placementDetected} · {Math.round((aiData.placementConfidence || 0)*100)}% confidence
                        </span>
                      </div>
                      <div className="ss-placement-input">
                        <button
                          onClick={() => setPlacement(p => Math.max(1, (p || 1) - 1))}
                          className="ss-placement-step"
                        >−</button>
                        <input
                          type="number" min="1" max="50"
                          value={placement || ""}
                          onChange={e => setPlacement(parseInt(e.target.value) || null)}
                          className="ss-placement-val"
                          style={{borderColor: accent, color: accent}}
                        />
                        <button
                          onClick={() => setPlacement(p => Math.min(50, (p || 1) + 1))}
                          className="ss-placement-step"
                        >+</button>
                      </div>
                    </div>
                  )}
                </div>
              )}

              {/* STEP 3: CONFIRM */}
              {step === 3 && (
                <div className="ss-step-content">
                  <div className="ss-step-intro">
                    <div className="ss-step-num" style={{color: accent}}>03</div>
                    <div>
                      <h3 className="ss-step-title">BEKREFT INNSENDING</h3>
                      <p className="ss-step-lead">
                        Sjekk over tallene. Ved innsending sendes rapporten til AI-verifisering + admin-review.
                      </p>
                    </div>
                  </div>

                  <div className="ss-summary-grid">
                    <div className="ss-summary-cell">
                      <div className="ss-summary-k">TURNERING</div>
                      <div className="ss-summary-v">{context.tournament}</div>
                    </div>
                    <div className="ss-summary-cell">
                      <div className="ss-summary-k">{context.type === "2v2" ? "KAMP" : "GAME"}</div>
                      <div className="ss-summary-v">{context.gameLabel || `Game ${context.game || 1}`}</div>
                    </div>
                    <div className="ss-summary-cell">
                      <div className="ss-summary-k">LAG</div>
                      <div className="ss-summary-v">{team.tag} · {team.name}</div>
                    </div>
                    <div className="ss-summary-cell highlight">
                      <div className="ss-summary-k">TOTAL KILLS</div>
                      <div className="ss-summary-v big" style={{color: accent}}>{totalKills}</div>
                    </div>
                    {isLiga && (
                      <>
                        <div className="ss-summary-cell">
                          <div className="ss-summary-k">PLASSERING</div>
                          <div className="ss-summary-v big">#{placement}</div>
                        </div>
                        <div className="ss-summary-cell">
                          <div className="ss-summary-k">EST. lp</div>
                          <div className="ss-summary-v big" style={{color: accent}}>+{estimatedPoints}p</div>
                        </div>
                      </>
                    )}
                  </div>

                  <table className="ss-players-table compact">
                    <thead>
                      <tr>
                        <th>SPILLER</th>
                        <th className="num">K</th>
                        <th className="num">D</th>
                        <th className="num">K/D</th>
                      </tr>
                    </thead>
                    <tbody>
                      {roster.map(p => {
                        const s = playerStats[p.id];
                        const kd = s.deaths > 0 ? (s.kills/s.deaths).toFixed(2) : s.kills.toFixed(2);
                        return (
                          <tr key={p.id}>
                            <td>{p.displayName}</td>
                            <td className="num">{s.kills}</td>
                            <td className="num">{s.deaths}</td>
                            <td className="num">{kd}</td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>

                  <div className="ss-disclaimer">
                    <span className="ss-disclaimer-icon">⚠</span>
                    <span>Falske tall = ban. AI flagger diskrepanser mellom screenshot og rapport automatisk. Admin har siste ord.</span>
                  </div>
                </div>
              )}
            </div>

            {/* FOOTER — actions */}
            <div className="ss-footer">
              <button
                className="ss-btn ghost"
                onClick={step === 1 ? handleClose : () => setStep(step - 1)}
              >
                {step === 1 ? "AVBRYT" : "← TILBAKE"}
              </button>
              <div className="ss-footer-progress">
                Steg {step} av 3
              </div>
              {step < 3 ? (
                <button
                  className="ss-btn primary"
                  disabled={step === 1 ? !canProceedStep1 : false}
                  onClick={() => setStep(step + 1)}
                  style={(step === 1 && !canProceedStep1) ? {} : {borderColor: accent, color: accent}}
                >
                  NESTE →
                </button>
              ) : (
                <button
                  className="ss-btn primary submit"
                  disabled={!canSubmit || submitting}
                  onClick={handleSubmit}
                  style={canSubmit ? {background: accent, color: "#000", borderColor: accent} : {}}
                >
                  {submitting ? "SENDER..." : "SEND INN ▶"}
                </button>
              )}
            </div>
          </>
        )}
      </div>
    </div>
  );
};

// Drop zone subcomponent
const SSDropZone = ({ kind, label, hint, has, over, onOver, onLeave, onDrop, onClick, accent, preview }) => (
  <div
    className={`ss-dropzone ${has ? "has" : ""} ${over ? "over" : ""}`}
    onClick={!has ? onClick : undefined}
    onDragOver={e => { e.preventDefault(); onOver(); }}
    onDragLeave={onLeave}
    onDrop={e => { e.preventDefault(); onDrop(); }}
    style={over ? {borderColor: accent} : (has ? {borderColor: accent} : {})}
  >
    {has ? (
      <div className="ss-dz-preview">
        <img src={preview} alt={label} onError={e => e.target.style.display="none"} />
        <div className="ss-dz-preview-overlay">
          <span className="ss-dz-preview-tag" style={{borderColor: accent, color: accent}}>✓ {label}</span>
        </div>
      </div>
    ) : (
      <div className="ss-dz-empty">
        <div className="ss-dz-icon" style={{color: over ? accent : "#5e5a55"}}>
          {kind === "kills" ? "⊞" : "◈"}
        </div>
        <div className="ss-dz-label">{label}</div>
        <div className="ss-dz-hint">{hint}</div>
        <div className="ss-dz-cta" style={over ? {color: accent, borderColor: accent} : {}}>
          DRA OG SLIPP · ELLER KLIKK
        </div>
      </div>
    )}
  </div>
);

window.ScoreSubmitModal = ScoreSubmitModal;