// Results — adaptowany per typ zakończenia
// Typy: 1 goal-achieved · 2 goal-missed · 3 user-initiated · 4 hard-cap
// Framing (tytuł, opis, kolor akcentu, ikona) zmienia się; rubryka per-kryterium zostaje.

const END_TYPES = {
  "goal-achieved": {
    eyebrow: "Rozmowa zakończona",
    titleParts: ["To się udało—", "domknęliście scenę"],
    body: "Rozmowa doszła naturalnie do końca — cel scenariusza został zrealizowany. Poniżej ocena tego jak ci poszło.",
    accent: "var(--ok)",
    accentBg: "rgba(52,211,153,.14)",
    icon: "check",
  },
  "goal-missed": {
    eyebrow: "Rozmowa zakończona",
    titleParts: ["Nie dopięliście—", "i to też jest materiał do pracy"],
    body: "Postać wyszła ze sceny bez domknięcia — cel pozostał nieosiągnięty. To częsta sytuacja. Ocena pokazuje gdzie zabrakło i co ugryźć następnym razem.",
    accent: "var(--warn)",
    accentBg: "rgba(245,158,11,.14)",
    icon: "alert",
  },
  "user-initiated": {
    eyebrow: "Zakończyłeś sesję",
    titleParts: ["Przerwałaś rozmowę—", "oto co udało się ocenić"],
    body: "Zatrzymałaś sesję wcześniej. Kryteria poniżej są ocenione na podstawie tego, co się zdarzyło. Możesz wrócić i spróbować do końca.",
    accent: "var(--fg-2)",
    accentBg: "rgba(255,255,255,.06)",
    icon: "pause",
  },
  "hard-cap": {
    eyebrow: "Rozmowa przerwana",
    titleParts: ["Rozmowa nie zmierzała—", "do rozwiązania"],
    body: "Scena ciągnęła się bez naturalnego domknięcia — zatrzymaliśmy ją dla ciebie. Zobacz co można było zrobić inaczej, żeby doprowadzić do decyzji.",
    accent: "var(--accent-3)",
    accentBg: "rgba(167,139,250,.14)",
    icon: "clock",
  },
};

const Results = ({setRoute, scenario, endType: initialType}) => {
  const s = scenario || SCENARIO;
  const [comment, setComment] = React.useState("");
  const [commentKind, setCommentKind] = React.useState(null); // "agree" | "dispute"
  const [submitted, setSubmitted] = React.useState(false);
  const [endType, setEndType] = React.useState(initialType || "goal-achieved");
  const [variantOpen, setVariantOpen] = React.useState(false);
  const cfg = END_TYPES[endType];

  // Oceny też się różnią — krótsza i niższa dla missed/hard-cap, okrojona dla user-initiated
  const resultsByType = {
    "goal-achieved": [
      { id:"r1", title:"Nazwać zachowanie konkretnie", status:"ok", score:92, fb:"Otworzyłaś rozmowę od faktów — bez generalizacji." },
      { id:"r2", title:"Oddzielić zachowanie od osoby", status:"ok", score:85, fb:"Mówiłaś o zachowaniu, nie o charakterze Marka." },
      { id:"r3", title:"Posłuchać kontekstu", status:"mid", score:68, fb:"Po „córka jest chora” warto było zatrzymać się i dopytać o wsparcie, zanim przeszłaś do rozwiązań." },
      { id:"r4", title:"Uzgodnić konkretną zmianę", status:"ok", score:82, fb:"Ustaliliście termin i zakres. Brakuje umowy jak się weryfikujecie w przyszłym tygodniu." },
      { id:"r5", title:"Zamknąć na wspierającej nucie", status:"ok", score:76, fb:"Zamknięcie było spokojne. Można było jeszcze przypomnieć Markowi jego wkład w zespół." },
    ],
    "goal-missed": [
      { id:"r1", title:"Nazwać zachowanie konkretnie", status:"mid", score:58, fb:"Zacząłeś od uogólnienia („zawsze się spóźniasz”) — Marek od razu poszedł w defensywę." },
      { id:"r2", title:"Oddzielić zachowanie od osoby", status:"bad", score:32, fb:"„Nie umiesz zarządzać czasem” — to uderzenie w osobę, nie zachowanie. Marek tu zamknął się na resztę." },
      { id:"r3", title:"Posłuchać kontekstu", status:"bad", score:28, fb:"Marek dwa razy dał sygnał że coś się dzieje prywatnie. Przeszedłeś dalej, nie zauważając." },
      { id:"r4", title:"Uzgodnić konkretną zmianę", status:"bad", score:0, fb:"Do tego nie doszło — Marek wyszedł zanim ustaliliście cokolwiek." },
      { id:"r5", title:"Zamknąć na wspierającej nucie", status:"bad", score:0, fb:"Brak zamknięcia. Marek wyszedł we frustracji." },
    ],
    "user-initiated": [
      { id:"r1", title:"Nazwać zachowanie konkretnie", status:"ok", score:78, fb:"Otworzyłaś rozmowę konkretnie, bez owijania w bawełnę." },
      { id:"r2", title:"Oddzielić zachowanie od osoby", status:"mid", score:64, fb:"Jedno zdanie ześlizgnęło się w stronę etykiety, ale złapałaś to i wróciłaś do faktów." },
      { id:"r3", title:"Posłuchać kontekstu", status:"na", score:null, fb:"Zakończyłaś sesję zanim kontekst wypłynął. Nie ma podstawy do oceny." },
      { id:"r4", title:"Uzgodnić konkretną zmianę", status:"na", score:null, fb:"Nie doszło do tego etapu." },
      { id:"r5", title:"Zamknąć na wspierającej nucie", status:"na", score:null, fb:"Nie doszło do tego etapu." },
    ],
    "hard-cap": [
      { id:"r1", title:"Nazwać zachowanie konkretnie", status:"ok", score:74, fb:"Otwarcie było OK. Pierwsze 3 tury prowadziły temat." },
      { id:"r2", title:"Oddzielić zachowanie od osoby", status:"ok", score:70, fb:"Przez większość rozmowy trzymałaś się zachowań." },
      { id:"r3", title:"Posłuchać kontekstu", status:"mid", score:58, fb:"Słuchałaś, ale zbyt długo — rozmowa utknęła w eksploracji bez przejścia do decyzji." },
      { id:"r4", title:"Uzgodnić konkretną zmianę", status:"bad", score:22, fb:"Nie doszliście do konkretu. Pięć razy krążyliście wokół tego samego — czas na decyzję." },
      { id:"r5", title:"Zamknąć na wspierającej nucie", status:"bad", score:18, fb:"Scena nie dostała zamknięcia. Czas kończyć nawet jeśli jest niewygodnie." },
    ],
  };
  const results = resultsByType[endType];
  const scored = results.filter(r => r.score !== null);
  const total = scored.length ? Math.round(scored.reduce((a,b)=>a+b.score,0)/scored.length) : 0;

  // Czas/długość rozmowy — różne per typ
  const metaByType = {
    "goal-achieved": { turns: 11, time: "8 min 42 s" },
    "goal-missed":   { turns: 6,  time: "3 min 18 s" },
    "user-initiated":{ turns: 4,  time: "2 min 05 s" },
    "hard-cap":      { turns: 20, time: "14 min 03 s" },
  };
  const meta = metaByType[endType];

  const nextActions = {
    "goal-achieved": [
      <>Świetne otwarcie — powtórz ten wzorzec w trudniejszym wariancie.</>,
      <>Na zamknięciu można dopisać umowę follow-upu: <em style={{fontFamily:"var(--serif)"}}>„sprawdźmy się w piątek”</em>.</>,
    ],
    "goal-missed": [
      <>Zacznij od faktu, nie od uogólnienia — <em style={{fontFamily:"var(--serif)"}}>„w ostatnich dwóch sprintach PR przychodzi po deadline”</em>.</>,
      <>Kiedy postać daje sygnał że coś się dzieje — zatrzymaj rozmowę i dopytaj. Nie jedź dalej z agendą.</>,
      <>Rozważ wariant z mniejszym stresem — ten ma poziom <em>trudny</em>, spróbuj <em>średniego</em>.</>,
    ],
    "user-initiated": [
      <>Wróć do scenariusza i dojedź go do końca — bez tego ocena pozostaje częściowa.</>,
      <>Jeśli coś cię zatrzymało — zapisz notkę w komentarzu, wróci przy następnej sesji.</>,
    ],
    "hard-cap": [
      <>Rozmowa potrzebuje <em>decyzyjnego momentu</em>. Po 8–10 turach zadaj pytanie zamykające: <em style={{fontFamily:"var(--serif)"}}>„co robimy od poniedziałku?”</em></>,
      <>Jeśli druga strona kręci — postaw warunek brzegowy, nie krąż dalej.</>,
    ],
  };

  return (
    <div className="screen narrow slide-up" style={{maxWidth:820}}>
      {/* HERO — adaptowany per typ */}
      <div style={{marginBottom:56}}>
        <div style={{display:"flex",alignItems:"center",gap:12,marginBottom:24}}>
          <div style={{width:36,height:36,borderRadius:"50%",display:"grid",placeItems:"center",background:cfg.accentBg,color:cfg.accent,fontFamily:"var(--mono)",fontSize:11,letterSpacing:".06em"}}>
            {endType==="goal-achieved" && <Icon name="check" size={16}/>}
            {endType==="goal-missed" && <span style={{fontSize:18,lineHeight:1}}>✕</span>}
            {endType==="user-initiated" && <Icon name="pause" size={14}/>}
            {endType==="hard-cap" && <Icon name="clock" size={14}/>}
          </div>
          <div className="eyebrow" style={{color:cfg.accent,margin:0}}>{cfg.eyebrow}</div>
        </div>

        <h1 style={{fontFamily:"var(--serif)",fontSize:48,lineHeight:1.15,letterSpacing:"-.02em",fontWeight:400,margin:"0 0 36px",paddingBottom:"0.15em",maxWidth:720}}>
          {cfg.titleParts[0]} <em style={{color:cfg.accent,fontStyle:"italic"}}>{cfg.titleParts[1]}</em>.
        </h1>

        <div style={{fontSize:16,lineHeight:1.65,color:"var(--fg-2)",maxWidth:640,marginBottom:32}}>
          {cfg.body}
        </div>

        {/* Meta + score ring inline */}
        <div style={{display:"grid",gridTemplateColumns:"auto 1fr",gap:40,alignItems:"center",padding:"24px 0",borderTop:"1px solid var(--line)",borderBottom:"1px solid var(--line)"}}>
          <ScoreRing value={total} />
          <div>
            <div className="eyebrow" style={{marginBottom:8}}>{s.title}</div>
            <div style={{display:"flex",gap:20,fontSize:13,color:"var(--fg-3)",fontFamily:"var(--mono)",letterSpacing:".04em"}}>
              <span>{meta.turns} tur</span>
              <span>·</span>
              <span>{meta.time}</span>
              <span>·</span>
              <span>{scored.length}/{results.length} kryteriów ocenionych</span>
            </div>
          </div>
        </div>
      </div>

      {/* OCENA PER KRYTERIUM */}
      <div style={{marginBottom:48}}>
        <div className="eyebrow" style={{marginBottom:20}}>Ocena kryteriów</div>
        <div className="stack-16">
          {results.map(r => (
            <div key={r.id} style={{padding:"18px 0",borderTop:"1px solid var(--line)"}}>
              <div className="flex between" style={{alignItems:"baseline",marginBottom:8}}>
                <div style={{display:"flex",alignItems:"center",gap:14}}>
                  <div className={`rubric-icon ${r.status==="ok"?"ok":r.status==="mid"?"mid":r.status==="bad"?"bad":""}`} style={{width:24,height:24,opacity:r.status==="na"?.35:1}}>
                    {r.status==="ok"?"✓":r.status==="mid"?"~":r.status==="bad"?"✗":"–"}
                  </div>
                  <div style={{fontSize:16,fontWeight:500,color:r.status==="na"?"var(--fg-3)":"var(--fg)"}}>{r.title}</div>
                </div>
                <div className="muted" style={{fontFamily:"var(--mono)",fontSize:13}}>
                  {r.score !== null ? `${r.score}%` : "—"}
                </div>
              </div>
              <div style={{fontSize:15,lineHeight:1.6,color:"var(--fg-2)",paddingLeft:38,fontStyle:r.status==="na"?"italic":"normal",opacity:r.status==="na"?.75:1}}>{r.fb}</div>
            </div>
          ))}
        </div>
      </div>

      {/* CO POPRAWIĆ */}
      <div style={{padding:"28px 0",borderTop:"1px solid var(--line)",borderBottom:"1px solid var(--line)",marginBottom:40}}>
        <div style={{fontFamily:"var(--serif)",fontSize:22,lineHeight:1.3,marginBottom:16,letterSpacing:"-.01em"}}>
          {endType==="user-initiated" ? "Kiedy wrócisz" : "Co poprawić następnym razem"}
        </div>
        <ul style={{margin:0,padding:"0 0 0 20px",lineHeight:1.7,color:"var(--fg-2)",fontSize:15,display:"flex",flexDirection:"column",gap:6}}>
          {nextActions[endType].map((a,i) => <li key={i}>{a}</li>)}
        </ul>
      </div>

      {/* US-14 — komentarz usera */}
      {!submitted ? (
        <div style={{marginBottom:40,padding:"24px 26px",background:"var(--bg-2)",border:"1px solid var(--line)",borderRadius:14}}>
          <div style={{fontFamily:"var(--serif)",fontSize:18,letterSpacing:"-.005em",marginBottom:6}}>Zgadzasz się z oceną?</div>
          <div className="muted" style={{fontSize:13,marginBottom:16}}>Twój komentarz trafia do HR razem z wynikiem. Używamy go, żeby poprawić rubrykę.</div>

          <div style={{display:"flex",gap:8,marginBottom:commentKind?16:0}}>
            <button
              className={`pill ${commentKind==="agree"?"on":""}`}
              onClick={()=>setCommentKind("agree")}>
              <Icon name="check" size={12}/> Zgadzam się
            </button>
            <button
              className={`pill ${commentKind==="dispute"?"on":""}`}
              onClick={()=>setCommentKind("dispute")}>
              <Icon name="quote" size={12}/> Mam uwagę
            </button>
          </div>

          {commentKind && (
            <div style={{marginTop:16,animation:"fadeIn .2s"}}>
              <textarea className="textarea"
                placeholder={commentKind==="agree" ? "Coś chcesz dodać? (opcjonalnie)" : "Które kryterium i dlaczego uważasz że ocena nie jest właściwa?"}
                maxLength={500} value={comment} onChange={e=>setComment(e.target.value)} autoFocus/>
              <div className="flex between" style={{marginTop:10,alignItems:"center"}}>
                <div className="field-help">{comment.length}/500</div>
                <button className="btn primary sm" onClick={()=>setSubmitted(true)} disabled={commentKind==="dispute" && !comment.trim()}>
                  Wyślij
                </button>
              </div>
            </div>
          )}
        </div>
      ) : (
        <div style={{marginBottom:40,padding:"18px 22px",background:"var(--bg-2)",border:"1px solid var(--line)",borderRadius:12,display:"flex",alignItems:"center",gap:12,fontSize:14,color:"var(--fg-2)"}}>
          <Icon name="check" size={16}/> Dzięki. {commentKind==="dispute"?"HR dostanie Twój komentarz razem z wynikiem.":"Zanotowaliśmy."}
        </div>
      )}

      {/* CTA — adaptowane per typ */}
      <div style={{display:"flex",gap:12,flexWrap:"wrap"}}>
        {endType==="user-initiated" ? (
          <button className="btn primary lg" onClick={()=>setRoute("session")}>
            <Icon name="play" size={14}/> Wróć i dokończ
          </button>
        ) : (
          <button className="btn primary lg" onClick={()=>setVariantOpen(true)}>
            <Icon name="sparkle" size={14}/> Spróbuj w wariancie
          </button>
        )}
        <button className="btn ghost" onClick={()=>setRoute("rpg-library")}>Wróć do biblioteki</button>
        <button className="btn link" onClick={()=>setRoute("my-skills")} style={{marginLeft:"auto"}}>
          Moje umiejętności <Icon name="arrow-right" size={13}/>
        </button>
      </div>

      <VariantModal
        open={variantOpen}
        skillName={s.category}
        onCancel={()=>setVariantOpen(false)}
        onReady={()=>{ setVariantOpen(false); setRoute("briefing"); }}
      />

      {/* B4 — DEV/PREVIEW: przełącznik typu zakończenia. Dla produktu — usunąć.
          Przydaje się HR i designerom do przejrzenia wszystkich wariantów ekranu. */}
      <div style={{marginTop:64,padding:"20px 22px",borderTop:"1px dashed var(--line-2)",display:"flex",alignItems:"center",gap:14,flexWrap:"wrap",color:"var(--fg-4)"}}>
        <span className="eyebrow" style={{margin:0,fontSize:9}}>Podgląd: typ zakończenia</span>
        {Object.keys(END_TYPES).map(t => (
          <button key={t}
            className={`pill ${endType===t?"on":""}`}
            style={{fontSize:11}}
            onClick={()=>{setEndType(t); setCommentKind(null); setComment(""); setSubmitted(false); window.scrollTo({top:0,behavior:"smooth"});}}>
            {t==="goal-achieved" && "1 · cel osiągnięty"}
            {t==="goal-missed" && "2 · cel chybiony"}
            {t==="user-initiated" && "3 · przerwane"}
            {t==="hard-cap" && "4 · hard-cap"}
          </button>
        ))}
      </div>
    </div>
  );
};

Object.assign(window, { Results });
