// Kaptein dashboard — to faner: RAPPORTER (full wizard) + MINE INNSENDINGER (status-historikk)
const CaptainDashboard = ({ tweaks }) => {
  const [myTeam, setMyTeam] = useState(null);
  const [tournaments, setTournaments] = useState([]);
  useEffect(() => {
    // Hent innlogget brukers lag — sjekker BÅDE team_registrations (kaptein-flow)
    // OG tournament_teams (switcharoo-flow der spillere parres tilfeldig)
    if (typeof window.db !== "undefined") {
      window.db.auth.getSession().then(async ({ data: { session } }) => {
        if (!session?.user) return;
        const meta = session.user.user_metadata || {};
        const name = meta.full_name || meta.name || session.user.email || "";
        const discordIdentity = (session.user.identities || []).find(i => i.provider === "discord");
        const discordId = discordIdentity?.id || meta.provider_id || null;

        // 1. Sjekk switcharoo først: er brukeren i et tournament_team via player_registrations?
        if (discordId) {
          const { data: pReg } = await window.db
            .from("player_registrations")
            .select("id, team_id, tournament_id, status")
            .eq("discord_id", discordId)
            .eq("status", "in_team")
            .order("created_at", { ascending: false })
            .limit(1)
            .maybeSingle();

          if (pReg?.team_id) {
            const { data: tt } = await window.db
              .from("tournament_teams")
              .select("*")
              .eq("id", pReg.team_id)
              .maybeSingle();
            if (tt) {
              setMyTeam({
                ...tt,
                name: tt.team_name,
                tag: tt.team_tag,
                isSwitcharoo: true,
              });
              return;
            }
          }
        }

        // 2. Fall back til team_registrations (kaptein-flow)
        const { data } = await window.db.from("team_registrations")
          .select("*").eq("status", "approved")
          .ilike("captain", `%${name}%`).limit(1);
        if (data?.[0]) setMyTeam(data[0]);
      });
    }
    WZN_Store.getTournaments().then(data => setTournaments((data||[]).filter(t => t.status === "open" || t.status === "live")));
  }, []);
  const defaultRoster = [
    { id: "p0", displayName: "Spiller 1", activisionId: "—" },
    { id: "p1", displayName: "Spiller 2", activisionId: "—" },
    { id: "p2", displayName: "Spiller 3", activisionId: "—" },
  ];
  const team = myTeam ? {
    ...myTeam,
    roster: Array.isArray(myTeam.roster) && myTeam.roster.length > 0 ? myTeam.roster : defaultRoster,
  } : { id: "unknown", name: "Mitt lag", tag: "—", captain: "—", roster: defaultRoster };

  const accent = tweaks.accent;
  const [tab, setTab] = useState("rapporter");
  const [step, setStep] = useState(1);
  const [selectedTournamentId, setSelectedTournamentId] = useState("");
  const [game, setGame] = useState(1);
  const [placement, setPlacement] = useState(3);
  const [dropOver, setDropOver] = useState(null);
  const [hasScore, setHasScore] = useState(false);
  const [hasPlace, setHasPlace] = useState(false);
  const [scoreUrl, setScoreUrl] = useState(null);
  const [placeUrl, setPlaceUrl] = useState(null);
  const [scorePath, setScorePath] = useState(null);
  const [placePath, setPlacePath] = useState(null);
  const [uploadingScore, setUploadingScore] = useState(false);
  const [uploadingPlace, setUploadingPlace] = useState(false);
  const submissionIdRef = useRef("wzn-" + Date.now());
  const [aiStatus, setAiStatus] = useState("idle");

  const uploadFile = async (file, kind) => {
    const setUploading = kind === "scoreboard" ? setUploadingScore : setUploadingPlace;
    const setUrl = kind === "scoreboard" ? setScoreUrl : setPlaceUrl;
    const setPath = kind === "scoreboard" ? setScorePath : setPlacePath;
    const setHas = kind === "scoreboard" ? setHasScore : setHasPlace;

    setUploading(true);
    setHas(true); // viser preview umiddelbart
    const { url, path, error } = await WZN_Store.uploadScorecard(file, {
      submissionId: submissionIdRef.current,
      kind,
    });
    setUploading(false);
    if (error) {
      alert(`Upload feilet (${kind}): ${error}\n\nSjekk at "scorecards"-bucket eksisterer i Supabase Storage.`);
      setHas(false);
      return;
    }
    setUrl(url);
    setPath(path);
  };
  const [killsByPlayer, setKillsByPlayer] = useState({});
  const [deathsByPlayer, setDeathsByPlayer] = useState({});
  useEffect(() => {
    const roster = team.roster || defaultRoster;
    setKillsByPlayer(roster.reduce((a,p) => ({...a, [p.id||p.activisionId]: 0}), {}));
    setDeathsByPlayer(roster.reduce((a,p) => ({...a, [p.id||p.activisionId]: 0}), {}));
  }, [myTeam]);
  const [aiExtraction, setAiExtraction] = useState(null);
  const [submitted, setSubmitted] = useState(false);

  // Trigger AI scan når scoreboard-screenshot er lastet opp
  useEffect(() => {
    if (!scoreUrl || aiStatus !== "idle") return;
    setAiStatus("scanning");

    const rosterNames = (team.roster || []).map(p => p.displayName || p.activisionId || "").filter(Boolean);

    fetch("/api/extract-score", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ imageUrl: scoreUrl, roster: rosterNames }),
    })
      .then(r => r.json())
      .then(data => {
        if (data.error) {
          console.warn("AI-ekstraksjon feil:", data.error);
          setAiStatus("error");
          return;
        }
        const extracted = data.players || [];
        setAiExtraction({
          players: extracted,
          totals: {
            kills: data.totalKills || extracted.reduce((a, p) => a + (p.kills || 0), 0),
            damage: extracted.reduce((a, p) => a + (p.damage || 0), 0),
          },
          rawDetected: `${extracted.length} spillere funnet`,
        });
        // Auto-fyll kills/deaths basert på roster-matching (navn-match, case-insensitiv)
        const roster = team.roster || [];
        roster.forEach((rp, i) => {
          const rpName = (rp.displayName || rp.activisionId || "").toLowerCase();
          const match = extracted.find(ep =>
            ep.name && (ep.name.toLowerCase().includes(rpName) || rpName.includes(ep.name.toLowerCase()))
          ) || extracted[i];
          if (!match) return;
          if (match.kills != null) setKillsByPlayer(prev => ({ ...prev, [rp.id || rp.activisionId]: match.kills }));
          if (match.deaths != null) setDeathsByPlayer(prev => ({ ...prev, [rp.id || rp.activisionId]: match.deaths }));
        });
        setAiStatus("done");
      })
      .catch(err => {
        console.warn("AI-ekstraksjon nettverksfeil:", err);
        setAiStatus("error");
      });
  }, [scoreUrl]);

  // Trigger placement extraction
  useEffect(() => {
    if (hasPlace) {
      setTimeout(() => setPlacement(3), 700);
    }
  }, [hasPlace]);

  const totalKills = Object.values(killsByPlayer).reduce((a,b) => a+b, 0);
  const totalDeaths = Object.values(deathsByPlayer).reduce((a,b) => a+b, 0);
  const multiplier = placement === 1 ? 2 : placement <= 5 ? 1.8 : placement <= 10 ? 1.6 : placement <= 20 ? 1.4 : placement <= 35 ? 1.2 : 1;
  const totalPoints = Math.round(totalKills * multiplier);

  const canProceedFromUpload = hasScore && hasPlace && aiStatus === "done";

  return (
    <div className="captain">
      <SectionHeader
        code="01"
        title="KAPTEIN-DASHBOARD"
        subtitle={`${team.name.toUpperCase()} · ${tab === "rapporter" ? "RAPPORTER RESULTAT" : "INNSENDINGER · HISTORIKK"}`}
        accent={accent}
        right={tab === "rapporter" ? (
          <div className="step-trail">
            {[1,2,3,4].map(n => (
              <span key={n} className={`step-dot ${step >= n ? "done" : ""}`}
                    style={step >= n ? {background: accent, borderColor: accent} : null}>
                {n}
              </span>
            ))}
          </div>
        ) : null}
      />

      <div className="captain-tabs">
        <button
          className={`captain-tab ${tab === "rapporter" ? "active" : ""}`}
          onClick={() => setTab("rapporter")}
          style={tab === "rapporter" ? {borderColor: accent, color: accent} : {}}
        >
          <span className="captain-tab-code">01</span>
          <span className="captain-tab-label">RAPPORTER</span>
          <span className="captain-tab-desc">Full 4-stegs flow</span>
        </button>
        <button
          className={`captain-tab ${tab === "innsendinger" ? "active" : ""}`}
          onClick={() => setTab("innsendinger")}
          style={tab === "innsendinger" ? {borderColor: accent, color: accent} : {}}
        >
          <span className="captain-tab-code">02</span>
          <span className="captain-tab-label">MINE INNSENDINGER</span>
          <span className="captain-tab-desc">Status · historikk</span>
        </button>
      </div>

      {tab === "innsendinger" && <MySubmissionsView accent={accent} />}
      {tab === "rapporter" && (<>


      {submitted ? (
        <div className="submit-success">
          <div className="ss-stamp" style={{borderColor: tweaks.accent, color: tweaks.accent}}>
            ✓ SENDT INN
          </div>
          <h2>Rapport mottatt · ID #SUB-{Math.floor(Math.random()*9000)+1000}</h2>
          <p>Admin har fått notifikasjon og vil verifisere screenshot og statistikk innen 30 minutter.
             Du får varsel når Ligapoengene er publisert.</p>
          <div className="ss-summary">
            <div><span>TURNERING</span><b>{tournaments.find(t => t.id === selectedTournamentId)?.name || selectedTournamentId || "—"}</b></div>
            <div><span>GAME</span><b>#{game}</b></div>
            <div><span>PLACEMENT</span><b>#{placement}</b></div>
            <div><span>TOTAL KILLS</span><b>{totalKills}</b></div>
            <div><span>ESTIMERT lp</span><b style={{color: tweaks.accent}}>+{totalPoints}</b></div>
            <div><span>STATUS</span><b>VENTER ADMIN</b></div>
          </div>
          <div className="ss-actions">
            <button className="cta cta-ghost" onClick={() => {
              setStep(1); setSubmitted(false);
              setHasScore(false); setHasPlace(false);
              setScoreUrl(null); setPlaceUrl(null);
              setScorePath(null); setPlacePath(null);
              setUploadingScore(false); setUploadingPlace(false);
              setAiStatus("idle"); setAiExtraction(null);
            }}>
              ← RAPPORTER NESTE GAME
            </button>
          </div>
        </div>
      ) : (
        <div className="captain-grid">
          <div className="captain-main">
            {/* STEP 1 */}
            <div className={`step-panel ${step >= 1 ? "active" : ""}`}>
              <div className="step-head">
                <span className="step-num" style={{borderColor: tweaks.accent, color: tweaks.accent}}>01</span>
                <h3>VELG TURNERING + GAME</h3>
              </div>
              <div className="step-body">
                <div className="form-grid">
                  <label className="field">
                    <span className="field-label">TURNERING</span>
                    <select value={selectedTournamentId} onChange={e => setSelectedTournamentId(e.target.value)}
                      style={{background:"var(--bg-1)", border:"1px solid var(--line)", color:"var(--text)", padding:".4rem .6rem", fontFamily:"var(--font-mono)", width:"100%"}}>
                      <option value="">— Velg turnering —</option>
                      {tournaments.map(t => (
                        <option key={t.id} value={t.id}>{t.name} ({t.status})</option>
                      ))}
                      {tournaments.length === 0 && <option disabled>Ingen aktive turneringer</option>}
                    </select>
                  </label>
                  <label className="field">
                    <span className="field-label">GAME NUMMER</span>
                    <div className="game-pick">
                      {[1,2,3,4,5].map(n => (
                        <button
                          key={n}
                          className={`gp-btn ${game === n ? "active" : ""}`}
                          onClick={() => setGame(n)}
                          style={game === n ? {borderColor: tweaks.accent, color: tweaks.accent} : null}
                        >{n}</button>
                      ))}
                    </div>
                  </label>
                </div>
                {step === 1 && (
                  <button className="step-next" style={{background: tweaks.accent}} onClick={() => setStep(2)}>
                    NESTE: LAST OPP SCREENSHOT ▶
                  </button>
                )}
              </div>
            </div>

            {/* STEP 2 — dual dropzones + AI extraction */}
            <div className={`step-panel ${step >= 2 ? "active" : ""} ${step < 2 ? "locked" : ""}`}>
              <div className="step-head">
                <span className="step-num" style={{borderColor: step >= 2 ? tweaks.accent : "#333", color: step >= 2 ? tweaks.accent : "#666"}}>02</span>
                <h3>LAST OPP SCREENSHOTS · AI EKSTRAKSJON</h3>
              </div>
              {step >= 2 && (
                <div className="step-body">
                  <div className="dual-drop">
                    <DropZone
                      label="SCOREBOARD"
                      hint="Squad-stats m/ navn, kills, deaths"
                      has={hasScore}
                      over={dropOver === "score"}
                      onOver={() => setDropOver("score")}
                      onLeave={() => setDropOver(null)}
                      onFile={(f) => { setDropOver(null); uploadFile(f, "scoreboard"); }}
                      accent={tweaks.accent}
                      uploading={uploadingScore}
                      uploadedUrl={scoreUrl}
                    />
                    <DropZone
                      label="PLACEMENT"
                      hint="Endscreen m/ plassering"
                      has={hasPlace}
                      over={dropOver === "placement"}
                      onOver={() => setDropOver("placement")}
                      onLeave={() => setDropOver(null)}
                      onFile={(f) => { setDropOver(null); uploadFile(f, "placement"); }}
                      accent={tweaks.accent}
                      uploading={uploadingPlace}
                      uploadedUrl={placeUrl}
                    />
                  </div>

                  {hasScore && (
                    <div className="ai-panel" style={{borderColor: tweaks.accent}}>
                      <div className="ai-head">
                        <span className="ai-badge" style={{background: tweaks.accent}}>AI</span>
                        <span className="ai-title">
                          {aiStatus === "scanning" ? "ANALYSERER SCREENSHOT…" : "EKSTRAKSJON FULLFØRT"}
                        </span>
                        {aiStatus === "scanning" && <span className="spinner" style={{borderTopColor: tweaks.accent}} />}
                        {aiStatus === "done" && <span className="ai-conf" style={{color: tweaks.accent}}>✓ 96% SIKKERHET</span>}
                      </div>
                      {aiStatus === "done" && aiExtraction && (
                        <div className="ai-grid">
                          <div className="ai-extracted">
                            <div className="ai-eye">DETEKTERT FRA SCOREBOARD</div>
                            <table className="ai-table">
                              <thead><tr><th>NAVN</th><th>K</th><th>D</th><th>DMG</th><th>KONF.</th></tr></thead>
                              <tbody>
                                {aiExtraction.players.map((p,i) => (
                                  <tr key={i}>
                                    <td><b>{p.name}</b></td>
                                    <td className="num">{p.kills}</td>
                                    <td className="num">{p.deaths}</td>
                                    <td className="num">{p.damage}</td>
                                    <td><span className="conf-pill" style={{borderColor: tweaks.accent, color: tweaks.accent}}>{Math.round(p.confidence*100)}%</span></td>
                                  </tr>
                                ))}
                                <tr className="ai-total">
                                  <td><b>SQUAD</b></td>
                                  <td className="num"><b>{aiExtraction.totals.kills}</b></td>
                                  <td className="num"><b>{aiExtraction.totals.deaths}</b></td>
                                  <td className="num"><b>{aiExtraction.totals.damage}</b></td>
                                  <td></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                          <div className="ai-mapping">
                            <div className="ai-eye">AUTO-MAPPING TIL ROSTER</div>
                            {team.roster.map((m,i) => (
                              <div key={m.id} className="ai-map-row">
                                <span className="ai-detected">{aiExtraction.players[i]?.name}</span>
                                <span className="ai-arrow" style={{color: tweaks.accent}}>→</span>
                                <span className="ai-actual">{m.displayName}</span>
                              </div>
                            ))}
                            <div className="ai-foot">Stats er pre-utfylt i steg 03. Du kan overstyre manuelt om noe er feil.</div>
                          </div>
                        </div>
                      )}
                    </div>
                  )}

                  {step === 2 && (
                    <button
                      className="step-next"
                      disabled={!canProceedFromUpload}
                      style={{background: canProceedFromUpload ? tweaks.accent : "#333"}}
                      onClick={() => setStep(3)}
                    >
                      NESTE: BEKREFT STATS ▶
                    </button>
                  )}
                </div>
              )}
            </div>

            {/* STEP 3 — stats */}
            <div className={`step-panel ${step >= 3 ? "active" : ""} ${step < 3 ? "locked" : ""}`}>
              <div className="step-head">
                <span className="step-num" style={{borderColor: step >= 3 ? tweaks.accent : "#333", color: step >= 3 ? tweaks.accent : "#666"}}>03</span>
                <h3>STATISTIKK · LAG + SPILLERE</h3>
              </div>
              {step >= 3 && (
                <div className="step-body">
                  <div className="placement-pick">
                    <div className="pp-label">LAGETS PLACEMENT</div>
                    <input
                      type="range"
                      min="1"
                      max="50"
                      value={placement}
                      onChange={e => setPlacement(parseInt(e.target.value))}
                      style={{"--accent": tweaks.accent}}
                    />
                    <div className="pp-readout">
                      <div className="pp-num" style={{color: tweaks.accent}}>#{placement}</div>
                      <div className="pp-mult">× {multiplier} multiplier</div>
                    </div>
                  </div>

                  <div className="player-kills">
                    {team.roster.map((m, idx) => (
                      <div key={m.id} className="pk-row">
                        <div className="pk-id">
                          <div className="pk-avatar" style={{borderColor: tweaks.accent, color: tweaks.accent}}>{m.displayName.slice(0,2).toUpperCase()}</div>
                          <div>
                            <div className="pk-name">
                              {m.displayName}
                              {aiStatus === "done" && (
                                <span className="ai-prefilled-tag" style={{background: tweaks.accent}}>AI</span>
                              )}
                            </div>
                            <div className="pk-aid">{m.activisionId}</div>
                          </div>
                        </div>
                        <div className="pk-control">
                          <span className="pk-lab">KILLS</span>
                          <div className="pk-stepper">
                            <button onClick={() => setKillsByPlayer(s => ({...s, [m.id]: Math.max(0, (s[m.id]||0)-1)}))}>−</button>
                            <input
                              type="number"
                              value={killsByPlayer[m.id] || 0}
                              onChange={e => setKillsByPlayer(s => ({...s, [m.id]: parseInt(e.target.value)||0}))}
                            />
                            <button onClick={() => setKillsByPlayer(s => ({...s, [m.id]: (s[m.id]||0)+1}))}>+</button>
                          </div>
                        </div>
                        <div className="pk-control">
                          <span className="pk-lab">DEATHS</span>
                          <div className="pk-stepper">
                            <button onClick={() => setDeathsByPlayer(s => ({...s, [m.id]: Math.max(0, (s[m.id]||0)-1)}))}>−</button>
                            <input
                              type="number"
                              value={deathsByPlayer[m.id] || 0}
                              onChange={e => setDeathsByPlayer(s => ({...s, [m.id]: parseInt(e.target.value)||0}))}
                            />
                            <button onClick={() => setDeathsByPlayer(s => ({...s, [m.id]: (s[m.id]||0)+1}))}>+</button>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>

                  {step === 3 && (
                    <button className="step-next" style={{background: tweaks.accent}} onClick={() => setStep(4)}>
                      NESTE: BEKREFT ▶
                    </button>
                  )}
                </div>
              )}
            </div>

            {/* STEP 4 — confirm */}
            <div className={`step-panel ${step >= 4 ? "active" : ""} ${step < 4 ? "locked" : ""}`}>
              <div className="step-head">
                <span className="step-num" style={{borderColor: step >= 4 ? tweaks.accent : "#333", color: step >= 4 ? tweaks.accent : "#666"}}>04</span>
                <h3>BEKREFT INNSENDELSE</h3>
              </div>
              {step >= 4 && (
                <div className="step-body">
                  <p className="confirm-lede">Innsendelser kan ikke endres etter at admin har verifisert. Sjekk at alt stemmer:</p>
                  <ul className="confirm-checklist">
                    <li><span className="ck" style={{color: tweaks.accent}}>✓</span> Screenshot viser hele lobby-leaderboarden</li>
                    <li><span className="ck" style={{color: tweaks.accent}}>✓</span> Kills per spiller matcher screenshot</li>
                    <li><span className="ck" style={{color: tweaks.accent}}>✓</span> Placement-tall er korrekt</li>
                    <li><span className="ck" style={{color: tweaks.accent}}>✓</span> Game-nummer stemmer med kveldens orden</li>
                  </ul>
                  <label className="checkbox confirm-cb">
                    <input type="checkbox" defaultChecked />
                    <span>Jeg bekrefter at all data er korrekt rapportert</span>
                  </label>
                  <button className="step-next solid" style={{background: tweaks.accent}} onClick={() => {
                    window.WZN_Store.addSubmission({
                      id: submissionIdRef.current,
                      submittedAt: new Date().toISOString(),
                      submittedBy: team.name,
                      submittedByTag: team.tag,
                      teamId: team.id,
                      captain: team.captain || team.name || "—",
                      tournament: tournaments.find(t => t.id === selectedTournamentId)?.name || selectedTournamentId || "WZN Liga",
                      tournament_id: selectedTournamentId || null,
                      type: "liga",
                      game,
                      placement,
                      players: team.roster.slice(0, 3).map(p => ({
                        name: p.displayName || p.activisionId || "—",
                        kills: killsByPlayer[p.id || p.activisionId] || 0,
                        deaths: deathsByPlayer[p.id || p.activisionId] || 0,
                      })),
                      screenshotLabel: `Scoreboard — Game ${game}`,
                      screenshots: {
                        scoreboard: scoreUrl || null,
                        placement: placeUrl || null,
                      },
                      screenshot_paths: {
                        scoreboard: scorePath || null,
                        placement: placePath || null,
                      },
                      aiExtraction: aiExtraction ? { ...aiExtraction, status: "done", confidence: 0.96, flags: [] } : null,
                      flagged: false,
                    });
                    // Reset submissionId for neste rapport
                    submissionIdRef.current = "wzn-" + Date.now();
                    setSubmitted(true);
                  }}>
                    ▶ SEND TIL ADMIN-VERIFISERING
                  </button>
                </div>
              )}
            </div>
          </div>

          {/* Sidebar summary */}
          <div className="captain-side">
            <div className="cs-card">
              <div className="cs-eyebrow">RAPPORT-PREVIEW</div>
              <div className="cs-row"><span>TURNERING</span><b>{tournament}</b></div>
              <div className="cs-row"><span>GAME</span><b>#{game}</b></div>
              <div className="cs-row"><span>PLACEMENT</span><b style={{color: tweaks.accent}}>#{placement}</b></div>
              <div className="cs-row"><span>TOTAL KILLS</span><b>{totalKills}</b></div>
              <div className="cs-row"><span>MULTIPLIER</span><b>× {multiplier}</b></div>
              <div className="cs-divider" />
              <div className="cs-total">
                <span>ESTIMERT lp</span>
                <span className="cs-points" style={{color: tweaks.accent}}>+{totalPoints}</span>
              </div>
              <div className="cs-foot">Endelig sum bekreftes av admin etter verifisering</div>
            </div>

            <div className="cs-card scoring">
              <div className="cs-eyebrow">lp POENG-SYSTEM</div>
              <div className="scoring-row"><span>1ST</span><span style={{color: tweaks.accent}}>× 2.0</span></div>
              <div className="scoring-row"><span>2-5</span><span>× 1.8</span></div>
              <div className="scoring-row"><span>6-10</span><span>× 1.6</span></div>
              <div className="scoring-row"><span>11-20</span><span>× 1.4</span></div>
              <div className="scoring-row"><span>21-35</span><span>× 1.2</span></div>
              <div className="scoring-row"><span>36-50</span><span>× 1.0</span></div>
              <div className="cs-foot">+ 1 poeng per kill, før multiplier</div>
            </div>
          </div>
        </div>
      )}
      </>)}
    </div>
  );
};

// ============ MINE INNSENDINGER ============
const MySubmissionsView = ({ accent }) => {
  const [submissions, setSubmissions] = useState([]);
  useEffect(() => {
    if (typeof window.db !== "undefined") {
      window.db.auth.getSession().then(({ data: { session } }) => {
        if (!session?.user) return;
        const name = session.user.user_metadata?.full_name || session.user.user_metadata?.name || session.user.email || "";
        // Hent alle innsendinger fra lag der bruker er kaptein
        window.db.from("team_registrations").select("id").eq("status", "approved")
          .ilike("captain", `%${name}%`).limit(1)
          .then(({ data }) => {
            const teamId = data?.[0]?.id;
            if (teamId) WZN_Store.getMyHistory(teamId).then(h => {
              const norm = (h || []).map(s => ({
                ...s,
                submittedAt:  s.submitted_at   || s.submittedAt   || "",
                flagReason:   s.flag_reason     || s.flagReason    || null,
                pointsAwarded:s.points          !== undefined ? s.points : s.pointsAwarded,
              }));
              setSubmissions(norm);
            });
          });
      });
    }
  }, []);
  const [filter, setFilter] = useState("alle");
  const [disputeTarget, setDisputeTarget] = useState(null);

  const filtered = filter === "alle" ? submissions : submissions.filter(s => s.status === filter);

  const stats = {
    total: submissions.length,
    verified: submissions.filter(s => s.status === "verified").length,
    pending: submissions.filter(s => s.status === "pending").length,
    flagged: submissions.filter(s => s.status === "flagged").length,
    disputed: submissions.filter(s => s.status === "disputed").length,
  };

  const totalPoints = submissions
    .filter(s => s.status === "verified")
    .reduce((acc, s) => acc + (s.pointsAwarded || 0), 0);

  return (
    <div className="mysubs">
      {/* STATS BAR */}
      <div className="mysubs-statsbar">
        <div className="mysubs-stat">
          <div className="mysubs-stat-k">TOTAL INNSENDINGER</div>
          <div className="mysubs-stat-v">{stats.total}</div>
        </div>
        <div className="mysubs-stat">
          <div className="mysubs-stat-k">VERIFISERT</div>
          <div className="mysubs-stat-v" style={{color: "#65a30d"}}>{stats.verified}</div>
        </div>
        <div className="mysubs-stat">
          <div className="mysubs-stat-k">VENTER</div>
          <div className="mysubs-stat-v" style={{color: "#d97706"}}>{stats.pending}</div>
        </div>
        <div className="mysubs-stat">
          <div className="mysubs-stat-k">FLAGGET</div>
          <div className="mysubs-stat-v" style={{color: "#ef4444"}}>{stats.flagged + stats.disputed}</div>
        </div>
        <div className="mysubs-stat">
          <div className="mysubs-stat-k">SUM LP</div>
          <div className="mysubs-stat-v" style={{color: accent}}>+{totalPoints}</div>
        </div>
      </div>

      {/* FILTER PILLS */}
      <div className="mysubs-filters">
        {[
          { id: "alle", label: "ALLE" },
          { id: "verified", label: "VERIFISERT" },
          { id: "pending", label: "VENTER" },
          { id: "flagged", label: "FLAGGET" },
          { id: "disputed", label: "DISPUTT" },
        ].map(f => (
          <button
            key={f.id}
            className={`mysubs-filter ${filter === f.id ? "active" : ""}`}
            onClick={() => setFilter(f.id)}
            style={filter === f.id ? {borderColor: accent, color: accent} : {}}
          >{f.label}</button>
        ))}
        <span className="mysubs-count">{filtered.length} av {submissions.length}</span>
      </div>

      {/* SUBMISSIONS LIST */}
      <div className="mysubs-list">
        {filtered.map(sub => (
          <div key={sub.id} className={`mysubs-card status-${sub.status}`}>
            <div className="mysubs-card-head">
              <span className="mysubs-id">{sub.id}</span>
              <span className={`mysubs-status mysubs-status-${sub.status}`}>
                {sub.status === "verified" && "✓ VERIFISERT"}
                {sub.status === "pending" && "● VENTER"}
                {sub.status === "flagged" && "⚠ FLAGGET"}
                {sub.status === "disputed" && "⚠ DISPUTT"}
                {sub.status === "rejected" && "✕ AVVIST"}
              </span>
              <span className="mysubs-time">
                {new Date(sub.submittedAt).toLocaleString("no-NO", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" })}
              </span>
            </div>
            <div className="mysubs-card-main">
              <div className="mysubs-tournament">
                <div className="mysubs-tag" style={{borderColor: accent, color: accent}}>
                  {sub.type === "2v2" ? "2V2" : sub.type === "killrace" ? "KR" : "LIGA"}
                </div>
                <div>
                  <div className="mysubs-tname">{sub.tournament}</div>
                  <div className="mysubs-game">GAME {sub.game}</div>
                </div>
              </div>
              <div className="mysubs-stats">
                {sub.placement && (
                  <div className="mysubs-statcell">
                    <span className="mysubs-statcell-k">PLASS</span>
                    <span className="mysubs-statcell-v">#{sub.placement}</span>
                  </div>
                )}
                <div className="mysubs-statcell">
                  <span className="mysubs-statcell-k">KILLS</span>
                  <span className="mysubs-statcell-v">{sub.kills}</span>
                </div>
                <div className="mysubs-statcell">
                  <span className="mysubs-statcell-k">DEATHS</span>
                  <span className="mysubs-statcell-v">{sub.deaths}</span>
                </div>
                <div className="mysubs-statcell">
                  <span className="mysubs-statcell-k">AI CONF</span>
                  <span className="mysubs-statcell-v" style={{color: sub.aiConfidence > 0.9 ? "#65a30d" : sub.aiConfidence > 0.75 ? "#d97706" : "#ef4444"}}>
                    {Math.round(sub.aiConfidence * 100)}%
                  </span>
                </div>
                {sub.pointsAwarded !== null && sub.pointsAwarded !== undefined && (
                  <div className="mysubs-statcell">
                    <span className="mysubs-statcell-k">lp</span>
                    <span className="mysubs-statcell-v" style={{color: accent}}>+{sub.pointsAwarded}</span>
                  </div>
                )}
              </div>
            </div>
            {sub.flagReason && sub.status !== "rejected" && (
              <div className="mysubs-flag-row">
                <span className="mysubs-flag-icon">⚠</span>
                <span className="mysubs-flag-text">{sub.flagReason}</span>
              </div>
            )}
            {sub.status === "rejected" && sub.flagReason && (
              <div className="mysubs-flag-row" style={{borderColor:"var(--bad)", color:"var(--bad)"}}>
                <span className="mysubs-flag-icon">✕</span>
                <span className="mysubs-flag-text"><b>Årsak:</b> {sub.flagReason}</span>
              </div>
            )}
            {sub.adminBy && (
              <div className="mysubs-admin-row">
                Verifisert av <strong>{sub.adminBy}</strong>
              </div>
            )}
            {/* Dispute-knapp — kun synlig for verified submissions innen protest-vinduet */}
            {sub.status === "verified" && sub.dispute_window_until && new Date() < new Date(sub.dispute_window_until) && (
              <div style={{ marginTop: 12 }}>
                <button
                  onClick={() => setDisputeTarget(sub)}
                  style={{
                    padding: "6px 16px",
                    background: "transparent",
                    border: "1px solid var(--line-2)",
                    color: "var(--text-dim)",
                    fontFamily: "var(--font-stencil)",
                    fontSize: 11, letterSpacing: "0.15em", cursor: "pointer",
                  }}
                >
                  ⚠ SEND PROTEST
                </button>
                <span style={{ marginLeft: 12, fontSize: 11, color: "var(--text-faint)" }}>
                  {Math.max(0, Math.ceil((new Date(sub.dispute_window_until) - Date.now()) / 60000))} min igjen
                </span>
              </div>
            )}
          </div>
        ))}
        {filtered.length === 0 && (
          <div className="mysubs-empty">Ingen innsendinger i denne kategorien.</div>
        )}
      </div>
      {disputeTarget && (
        <DisputeModal
          submission={disputeTarget}
          accent={accent}
          onClose={() => setDisputeTarget(null)}
          onSent={() => setDisputeTarget(null)}
        />
      )}
    </div>
  );
};

const DropZone = ({ label, hint, has, over, onOver, onLeave, onFile, accent, preview, uploading, uploadedUrl }) => {
  const inputRef = useRef(null);
  const [localPreview, setLocalPreview] = useState(null);

  const handleFile = (file) => {
    if (!file || !file.type?.startsWith("image/")) {
      alert("Vennligst velg en bilde-fil (PNG, JPG)");
      return;
    }
    if (file.size > 5 * 1024 * 1024) {
      alert("Filen er over 5 MB. Komprimer eller resize bildet.");
      return;
    }
    // Lokal preview umiddelbart
    const reader = new FileReader();
    reader.onload = (e) => setLocalPreview(e.target.result);
    reader.readAsDataURL(file);
    // Send fil oppover for Supabase-upload
    onFile && onFile(file);
  };

  return (
    <div
      className={`dropzone dz-half ${over ? "over" : ""} ${has ? "has-file" : ""}`}
      style={over ? {borderColor: accent} : null}
      onDragOver={(e) => { e.preventDefault(); onOver && onOver(); }}
      onDragLeave={onLeave}
      onDrop={(e) => {
        e.preventDefault();
        const f = e.dataTransfer.files?.[0];
        if (f) handleFile(f);
      }}
      onClick={() => inputRef.current?.click()}
    >
      <input
        ref={inputRef}
        type="file"
        accept="image/png,image/jpeg,image/webp"
        style={{display:"none"}}
        onChange={(e) => { const f = e.target.files?.[0]; if (f) handleFile(f); }}
      />
      {!has ? (
        <>
          <div className="dz-icon" style={{borderColor: accent}}>
            <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke={accent} strokeWidth="2">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
              <polyline points="17 8 12 3 7 8"/>
              <line x1="12" y1="3" x2="12" y2="15"/>
            </svg>
          </div>
          <div className="dz-title">{label}</div>
          <div className="dz-sub">{hint}</div>
          <div className="dz-tag" style={{borderColor: accent, color: accent}}>KLIKK ELLER DRA</div>
        </>
      ) : (
        <div className="dz-preview-real" style={{position:"relative", width:"100%", height:"100%"}}>
          <img
            src={localPreview || uploadedUrl}
            alt={label}
            style={{width:"100%", height:"100%", objectFit:"contain", display:"block"}}
          />
          {uploading && (
            <div style={{position:"absolute", inset:0, background:"rgba(0,0,0,.6)", display:"flex", alignItems:"center", justifyContent:"center", color:accent, fontFamily:"var(--font-mono)", fontSize:".75rem", letterSpacing:".15em"}}>
              ⏳ LASTER OPP…
            </div>
          )}
          {uploadedUrl && !uploading && (
            <div style={{position:"absolute", top:".5rem", right:".5rem", background:accent, color:"#000", padding:".15rem .4rem", fontFamily:"var(--font-mono)", fontSize:".65rem", fontWeight:700}}>✓ LASTET OPP</div>
          )}
        </div>
      )}
    </div>
  );
};

const PlacementMock = ({ accent, placement }) => (
  <div className="pl-mock">
    <div className="pl-mock-victory">PLACEMENT</div>
    <div className="pl-mock-num" style={{color: accent}}>#{placement}</div>
    <div className="pl-mock-of">OF 50 SQUADS</div>
    <div className="pl-mock-line" style={{background: accent}}/>
  </div>
);

const WarzoneScreenshotMock = ({ accent, placement, large }) => (
  <div className={`wz-mock ${large ? "wz-mock-large" : ""}`}>
    <div className="wz-mock-head">
      <span style={{color: accent}}>● MATCH ENDED</span>
      <span>LOBBY LEADERBOARD · BR TRIOS</span>
      <span>VERDANSK · 23:41</span>
    </div>
    <div className="wz-mock-rows">
      {Array.from({length: large ? 20 : 12}, (_, i) => {
        const pos = i + 1;
        const mine = pos === placement;
        return (
          <div key={i} className={`wz-row ${mine ? "mine" : ""}`} style={mine ? {borderLeftColor: accent} : null}>
            <span className="wz-pos">#{pos}</span>
            <span className="wz-team">{mine ? "[FRST] FROST BRIGADE" : `TEAM ${String.fromCharCode(65+i)}${i+1}`}</span>
            <span className="wz-k">{mine ? "25K" : `${Math.floor((Math.sin(i*4.2)+1)*10)+2}K`}</span>
            <span className="wz-d">{Math.floor((Math.cos(i*3.1)+1)*4)+1}D</span>
          </div>
        );
      })}
    </div>
    <div className="wz-mock-corners"><span/><span/><span/><span/></div>
  </div>
);

// ── DisputeModal + DisputeButton ──────────────────────────────────────────────
const DisputeModal = ({ submission, accent, onClose, onSent }) => {
  const [reason, setReason]     = React.useState("");
  const [evidence, setEvidence] = React.useState("");
  const [sending, setSending]   = React.useState(false);
  const [error, setError]       = React.useState(null);
  const [done, setDone]         = React.useState(false);

  const send = async () => {
    setError(null);
    if (reason.trim().length < 10) { setError("Begrunn protesten (minst 10 tegn)"); return; }
    setSending(true);
    const session = (await window.db?.auth.getSession())?.data?.session;
    const result  = await WZN_Store.submitDispute({
      submissionId:     submission.id,
      tournamentId:     submission.tournament_id,
      teamId:           submission.team_id,
      captainDiscordId: session?.user?.user_metadata?.provider_id,
      reason,
      evidenceUrl:      evidence || null,
    });
    setSending(false);
    if (result?.error) { setError(result.error); return; }
    setDone(true);
    onSent && onSent();
  };

  // Beregn tid igjen av dispute-vinduet
  const windowUntil = submission?.dispute_window_until
    ? new Date(submission.dispute_window_until)
    : null;
  const msLeft = windowUntil ? Math.max(0, windowUntil - Date.now()) : null;
  const minLeft = msLeft !== null ? Math.ceil(msLeft / 60000) : null;
  const windowOpen = msLeft === null || msLeft > 0;

  return (
    <div
      style={{
        position: "fixed", inset: 0, zIndex: 1000,
        background: "rgba(0,0,0,0.75)",
        display: "flex", alignItems: "center", justifyContent: "center",
      }}
      onClick={e => { if (e.target === e.currentTarget) onClose(); }}
    >
      <div style={{
        background: "var(--bg-1)", border: "1px solid var(--line)",
        width: "100%", maxWidth: 520, padding: 40,
      }}>
        <div style={{
          fontFamily: "var(--font-stencil)", fontSize: 24, marginBottom: 4, letterSpacing: "0.03em",
        }}>
          PROTEST · SCORE DISPUTE
        </div>
        <div style={{ fontSize: 13, color: "var(--text-dim)", marginBottom: 24 }}>
          Innsending: <code style={{ color: accent }}>{submission?.id?.slice(0, 12) || "—"}</code>
          {minLeft !== null && (
            <span style={{ marginLeft: 12, color: minLeft <= 2 ? "#ef4444" : "var(--text-dim)" }}>
              · {minLeft} min igjen av protest-vinduet
            </span>
          )}
        </div>

        {!windowOpen && (
          <div style={{
            padding: "14px 20px", background: "#ef444420", border: "1px solid #ef4444",
            color: "#ef4444", fontSize: 14, marginBottom: 20,
          }}>
            ✗ Protest-vinduet er stengt (10 min etter godkjenning er gått)
          </div>
        )}

        {done ? (
          <div style={{
            padding: "24px", background: `${accent}14`,
            border: `1px solid ${accent}`, textAlign: "center",
          }}>
            <div style={{ fontSize: 28, marginBottom: 8 }}>✓</div>
            <div style={{ fontFamily: "var(--font-stencil)", fontSize: 18, color: accent }}>
              PROTEST SENDT INN
            </div>
            <div style={{ fontSize: 14, color: "var(--text-dim)", marginTop: 8 }}>
              Admin vil vurdere protesten din. Du varsles via Discord.
            </div>
            <button
              style={{
                marginTop: 20, padding: "10px 24px",
                background: accent, border: "none", color: "#000",
                fontFamily: "var(--font-stencil)", fontSize: 14, cursor: "pointer",
              }}
              onClick={onClose}
            >LUKK</button>
          </div>
        ) : (
          <>
            <div style={{ marginBottom: 20 }}>
              <label style={{ display: "block", fontSize: 11, color: "var(--text-dim)", letterSpacing: "0.2em", marginBottom: 8 }}>
                ÅRSAK TIL PROTEST *
              </label>
              <textarea
                value={reason}
                onChange={e => setReason(e.target.value)}
                disabled={!windowOpen || sending}
                placeholder="Beskriv hva som er feil med score-innsendingen..."
                style={{
                  width: "100%", minHeight: 100, padding: "12px 14px",
                  background: "var(--bg-2)", border: "1px solid var(--line-2)",
                  color: "var(--text)", fontFamily: "var(--font-body)", fontSize: 14,
                  resize: "vertical", outline: "none", boxSizing: "border-box",
                }}
              />
            </div>
            <div style={{ marginBottom: 20 }}>
              <label style={{ display: "block", fontSize: 11, color: "var(--text-dim)", letterSpacing: "0.2em", marginBottom: 8 }}>
                BEVIS-URL (valgfri — screenshot, Twitch-klipp, etc.)
              </label>
              <input
                value={evidence}
                onChange={e => setEvidence(e.target.value)}
                disabled={!windowOpen || sending}
                placeholder="https://..."
                style={{
                  width: "100%", padding: "10px 14px",
                  background: "var(--bg-2)", border: "1px solid var(--line-2)",
                  color: "var(--text)", fontFamily: "var(--font-mono)", fontSize: 13,
                  outline: "none", boxSizing: "border-box",
                }}
              />
            </div>
            {error && (
              <div style={{ padding: "10px 14px", background: "#ef444420", color: "#ef4444", fontSize: 13, marginBottom: 16 }}>
                ✗ {error}
              </div>
            )}
            <div style={{ display: "flex", gap: 12 }}>
              <button
                onClick={send}
                disabled={!windowOpen || sending}
                style={{
                  flex: 1, padding: "14px 0",
                  background: windowOpen ? accent : "var(--bg-2)",
                  border: `1px solid ${windowOpen ? accent : "var(--line)"}`,
                  color: windowOpen ? "#000" : "var(--text-dim)",
                  fontFamily: "var(--font-stencil)", fontSize: 14, cursor: windowOpen ? "pointer" : "not-allowed",
                  letterSpacing: "0.1em",
                }}
              >
                {sending ? "SENDER…" : "SEND PROTEST"}
              </button>
              <button
                onClick={onClose}
                style={{
                  padding: "14px 20px",
                  background: "transparent", border: "1px solid var(--line)",
                  color: "var(--text-dim)", fontFamily: "var(--font-stencil)",
                  fontSize: 13, cursor: "pointer",
                }}
              >AVBRYT</button>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { CaptainDashboard, PlacementMock, WarzoneScreenshotMock, MySubmissionsView, DisputeModal });