// End User screens — simplified

const Home = ({setRoute, setActiveScenario}) => {
  return (
    <div className="screen narrow slide-up" style={{paddingTop:80}}>
      <div className="eyebrow" style={{marginBottom:18}}>Witaj z powrotem, Julia</div>
      <h1 className="display" style={{marginBottom:56,maxWidth:800}}>Czas coś <em>przećwiczyć</em>.</h1>

      {/* One clear next action */}
      <div className="card" style={{display:"grid",gridTemplateColumns:"1fr 280px",overflow:"hidden",borderRadius:22}}>
        <div style={{padding:"40px 44px",display:"flex",flexDirection:"column",gap:24,justifyContent:"space-between"}}>
          <div>
            <div className="chip accent" style={{marginBottom:18}}>Przypisane przez HR · termin 28 kwi</div>
            <div style={{fontFamily:"var(--serif)",fontSize:40,lineHeight:1.1,letterSpacing:"-.02em",marginBottom:14}}>
              Spóźnienia Marka — <em style={{fontStyle:"italic",color:"var(--accent-3)"}}>rozmowa korygująca</em>
            </div>
            <div className="fg2" style={{fontSize:15,lineHeight:1.6,maxWidth:420}}>
              Ćwiczysz trudny feedback korygujący. ~9 minut rozmowy z AI.
            </div>
          </div>
          <div>
            <button className="btn primary lg" onClick={()=>{ setActiveScenario(SCENARIO); setRoute("briefing"); }}>
              <Icon name="play" size={14}/> Rozpocznij sesję
            </button>
          </div>
        </div>
        <div style={{position:"relative"}}>
          <div className="mesh" style={{position:"absolute",inset:0}}/>
          <div style={{position:"absolute",inset:0,display:"grid",placeItems:"center"}}>
            <div style={{fontFamily:"var(--serif)",fontSize:140,color:"rgba(255,255,255,.18)",letterSpacing:"-.06em"}}>MK</div>
          </div>
        </div>
      </div>

      {/* Secondary quiet row */}
      <div style={{marginTop:72,display:"flex",justifyContent:"space-between",alignItems:"baseline",marginBottom:20}}>
        <h2 style={{fontFamily:"var(--serif)",fontSize:26,letterSpacing:"-.01em",fontWeight:400,margin:0}}>Kontynuuj</h2>
        <button className="btn link" onClick={()=>setRoute("rpg-library")}>Biblioteka →</button>
      </div>
      <div className="grid-3">
        {["s-change-opor","s-feedback-rozwoj","s-delegacja"].map((id,i)=> {
          const s = SKILLS.find(x=>x.id===id);
          const prog = USER_PROGRESS[id];
          return (
            <div key={id} className="card hover" onClick={()=>{ setActiveScenario(getScenarioForSkill(id, s.name)); setRoute("briefing"); }} style={{cursor:"pointer"}}>
              <div className="card-body" style={{padding:"22px 22px 20px"}}>
                <div style={{fontFamily:"var(--serif)",fontSize:20,lineHeight:1.25,marginBottom:10,minHeight:48}}>{s.name}</div>
                <div className="flex between" style={{fontSize:12,color:"var(--fg-3)"}}>
                  <span>{s.time}</span>
                  <span>{prog.attempts===0 ? "Nowa" : `ostatnio ${prog.lastScore}%`}</span>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

const Library = ({setRoute, setActiveScenario}) => {
  const [cat, setCat] = React.useState("all");
  const [q, setQ] = React.useState("");
  const [toast, setToast] = React.useState(null);
  const hues=["default","teal","amber","default","teal","amber","default","teal","amber","default"];

  React.useEffect(() => {
    if (!toast) return;
    const t = setTimeout(()=>setToast(null), 3200);
    return ()=>clearTimeout(t);
  }, [toast]);

  const filtered = SKILLS.filter(s => {
    if (cat!=="all" && s.cat!==cat) return false;
    if (q && !s.name.toLowerCase().includes(q.toLowerCase())) return false;
    return true;
  });

  return (
    <div className="screen slide-up">
      <div style={{maxWidth:720,marginBottom:36}}>
        <h1 className="page-title">Ćwicz <em>umiejętności</em></h1>
        <div className="subtitle">Każdy scenariusz to rozmowa z AI w konkretnej sytuacji. Powtórz w wariancie — dostaniesz inną postać i kontekst.</div>
      </div>

      <div className="flex between" style={{marginBottom:28,gap:16,flexWrap:"wrap"}}>
        <div className="flex gap-8" style={{flexWrap:"wrap"}}>
          <button className={`pill ${cat==="all"?"on":""}`} onClick={()=>setCat("all")}>Wszystkie</button>
          {CATEGORIES.map(c=> <button key={c.id} className={`pill ${cat===c.id?"on":""}`} onClick={()=>setCat(c.id)}>{c.label}</button>)}
        </div>
        <div className="search-box" style={{maxWidth:260}}>
          <Icon name="search" size={14}/>
          <input placeholder="Szukaj" value={q} onChange={e=>setQ(e.target.value)}/>
        </div>
      </div>

      <div className="grid-3">
        {filtered.map((s,i) => {
          const p = USER_PROGRESS[s.id];
          const unavailable = s.unavailable;
          const statusChip = unavailable ? <span style={{fontFamily:"var(--mono)",fontSize:11,letterSpacing:".04em",color:"var(--warn)"}}>NIEDOSTĘPNY</span> :
            p.assigned ? <span className="chip accent" style={{fontSize:10}}>HR</span> :
            p.status==="done" ? <span style={{color:"var(--ok)",fontFamily:"var(--mono)",fontSize:11,letterSpacing:".04em"}}>UKOŃCZONE</span> :
            p.attempts>0 ? <span style={{fontFamily:"var(--mono)",fontSize:11,letterSpacing:".04em",color:"var(--fg-2)"}}>{p.attempts}× · ostatnio {p.lastScore}%</span> :
            <span style={{fontFamily:"var(--mono)",fontSize:11,letterSpacing:".04em",color:"var(--fg-3)"}}>NOWY</span>;
          return (
            <div key={s.id} className={`card hover ${unavailable?"disabled":""}`}
              onClick={()=>{
                if (unavailable){
                  setToast({title:"Scenariusz chwilowo niedostępny", body:"Ten scenariusz przechodzi aktualizację. Wróć za kilka dni lub spróbuj innego scenariusza z tej kategorii."});
                  return;
                }
                setActiveScenario(getScenarioForSkill(s.id, s.name)); setRoute("briefing");
              }}
              style={{cursor:unavailable?"not-allowed":"pointer",animation:`slideUp .4s both`,animationDelay:`${i*0.03}s`,opacity:unavailable?.55:1}}>
              <div style={{position:"relative"}}>
                <ScenarioThumb title={s.name} level={null} hue={hues[i%hues.length]} eyebrow={null}/>
                {unavailable && (
                  <div style={{position:"absolute",inset:0,background:"rgba(10,10,16,.62)",backdropFilter:"blur(3px)",display:"grid",placeItems:"center",borderRadius:"inherit"}}>
                    <div style={{display:"flex",alignItems:"center",gap:8,padding:"8px 14px",background:"var(--bg)",border:"1px solid var(--warn)",borderRadius:100,fontSize:11,fontFamily:"var(--mono)",letterSpacing:".06em",color:"var(--warn)",textTransform:"uppercase"}}>
                      <Icon name="clock" size={12}/> Chwilowo niedostępny
                    </div>
                  </div>
                )}
              </div>
              <div className="card-body" style={{padding:"18px 22px"}}>
                <div className="flex between" style={{fontSize:12,color:"var(--fg-3)",alignItems:"center"}}>
                  <span>{s.time} · {s.level}</span>
                  {statusChip}
                </div>
              </div>
            </div>
          );
        })}
      </div>

      {/* Toast */}
      {toast && (
        <div className="toast" role="status">
          <div style={{display:"flex",gap:12,alignItems:"flex-start"}}>
            <div style={{width:24,height:24,borderRadius:"50%",background:"rgba(245,158,11,.18)",color:"var(--warn)",display:"grid",placeItems:"center",flexShrink:0,marginTop:2}}>
              <Icon name="clock" size={13}/>
            </div>
            <div style={{flex:1}}>
              <div style={{fontSize:14,fontWeight:500,marginBottom:4}}>{toast.title}</div>
              <div style={{fontSize:13,color:"var(--fg-3)",lineHeight:1.5}}>{toast.body}</div>
            </div>
            <button className="btn link" style={{fontSize:18,color:"var(--fg-4)",padding:0,lineHeight:1}} onClick={()=>setToast(null)}>×</button>
          </div>
        </div>
      )}
    </div>
  );
};

const Briefing = ({setRoute, scenario}) => {
  const [context, setContext] = React.useState("");
  const [showContext, setShowContext] = React.useState(false);
  const s = scenario || SCENARIO;
  return (
    <div className="screen narrow slide-up" style={{paddingTop:24,maxWidth:820}}>
      <button className="btn link" onClick={()=>setRoute("rpg-library")} style={{marginBottom:24}}>
        <Icon name="arrow-left" size={14}/> Wróć
      </button>

      <h1 style={{fontFamily:"var(--serif)",fontSize:44,lineHeight:1.1,letterSpacing:"-.02em",fontWeight:400,margin:"0 0 32px",maxWidth:640}}>
        {s.title.split("—")[0]}—<em style={{color:"var(--accent-3)",fontStyle:"italic"}}>{s.title.split("—")[1]||"rozmowa"}</em>
      </h1>

      <div style={{display:"flex",gap:40,marginBottom:40,color:"var(--fg-3)",fontSize:14}}>
        <span><Icon name="clock" size={13}/> {s.time}</span>
        <span>·</span>
        <span>{s.level}</span>
      </div>

      <div className="stack-24" style={{fontSize:18,lineHeight:1.6,fontFamily:"var(--serif)",color:"var(--fg)",marginBottom:40,maxWidth:640}}>
        <p style={{margin:0}}>{s.situation}</p>
        <p style={{margin:0,color:"var(--fg-2)"}}><strong style={{color:"var(--fg)",fontWeight:400}}>Twój cel:</strong> {s.goal}</p>
      </div>

      {/* Optional personal context — collapsed by default */}
      {!showContext ? (
        <button className="btn link" style={{marginBottom:40,color:"var(--fg-3)"}} onClick={()=>setShowContext(true)}>
          + Dodaj kontekst osobisty (opcjonalnie)
        </button>
      ) : (
        <div style={{marginBottom:40,maxWidth:640}}>
          <textarea className="textarea" placeholder="Opisz swoją sytuację — AI dopasuje detal scenki. Możesz pominąć."
            maxLength={500} value={context} onChange={e=>setContext(e.target.value)} autoFocus/>
          <div className="field-help" style={{marginTop:6}}>{context.length}/500</div>
        </div>
      )}

      <div style={{display:"flex",gap:12,alignItems:"center",marginBottom:40}}>
        <button className="btn primary lg" onClick={()=>setRoute("session")}>
          Rozpocznij sesję <Icon name="arrow-right" size={14}/>
        </button>
        {USER_PROGRESS[s.skillId]?.assigned && (
          <span className="muted" style={{fontSize:13}}>HR · termin {USER_PROGRESS[s.skillId].deadline} · próg 70%</span>
        )}
      </div>

      <div className="muted" style={{fontSize:12,lineHeight:1.6,maxWidth:640,paddingTop:24,borderTop:"1px solid var(--line)"}}>
        Rozmowa jest zapisywana. Wyniki widzi HR Twojej organizacji. Nie podawaj realnych imion — użyj fikcyjnych.
      </div>
    </div>
  );
};

const MyTasks = ({setRoute, setActiveScenario}) => {
  const tasks = [
    {id:"t1", skill:"s-feedback-trudny", program:"Liderzy AI Q2", hr:"Marta Wierzbicka", deadline:"28 kwi", days:7,  mode:"required",  status:"in-progress"},
    {id:"t2", skill:"s-struktura",       program:"Liderzy AI Q2", hr:"Marta Wierzbicka", deadline:"5 maj",  days:14, mode:"required",  status:"new"},
    {id:"t3", skill:"s-change-opor",     program:"Liderzy AI Q2", hr:"Marta Wierzbicka", deadline:"28 kwi", days:7,  mode:"required",  status:"in-progress"},
    {id:"t4", skill:"s-change-kom",      program:"Onboarding PM", hr:"Piotr Nowak",      deadline:"12 kwi", days:-2, mode:"required",  status:"overdue"},
    {id:"t5", skill:"s-feedback-rozwoj", program:"Rozwój 1:1",    hr:"Marta Wierzbicka", deadline:null,     days:null, mode:"suggested", status:"done"},
    {id:"t6", skill:"s-delegacja",       program:"Rozwój 1:1",    hr:"Marta Wierzbicka", deadline:null,     days:null, mode:"suggested", status:"new"},
  ];

  const [filter, setFilter] = React.useState("all");
  const filtered = tasks.filter(t => {
    if (filter==="all") return true;
    if (filter==="required") return t.mode==="required";
    if (filter==="suggested") return t.mode==="suggested";
    if (filter==="overdue") return t.status==="overdue";
    if (filter==="done") return t.status==="done";
    return true;
  });

  const counts = {
    all: tasks.length,
    required: tasks.filter(t=>t.mode==="required").length,
    suggested: tasks.filter(t=>t.mode==="suggested").length,
    overdue: tasks.filter(t=>t.status==="overdue").length,
    done: tasks.filter(t=>t.status==="done").length,
  };

  const filters = [
    {id:"all",       label:"Wszystkie"},
    {id:"required",  label:"Obowiązkowe"},
    {id:"suggested", label:"Sugerowane"},
    {id:"overdue",   label:"Przeterminowane"},
    {id:"done",      label:"Ukończone"},
  ];

  return (
    <div className="screen narrow slide-up">
      <h1 className="page-title" style={{marginBottom:12}}>Moje <em>zadania</em></h1>
      <div className="subtitle" style={{marginBottom:32}}>Przypisane przez HR. Obowiązkowe liczą się do compliance, sugerowane są dobrowolne.</div>

      <div style={{display:"flex",gap:8,flexWrap:"wrap",marginBottom:28}}>
        {filters.map(f => (
          <button key={f.id}
            className={`pill ${filter===f.id?"on":""}`}
            onClick={()=>setFilter(f.id)}>
            {f.label}
            <span style={{marginLeft:8,opacity:.5,fontFamily:"var(--mono)",fontSize:11}}>{counts[f.id]}</span>
          </button>
        ))}
      </div>

      {filtered.length===0 ? (
        <div style={{padding:"60px 24px",textAlign:"center",color:"var(--fg-3)"}}>
          <div style={{fontFamily:"var(--serif)",fontSize:22,marginBottom:6,color:"var(--fg-2)"}}>Nic tutaj nie ma.</div>
          <div style={{fontSize:14}}>Brak zadań spełniających filtr „{filters.find(f=>f.id===filter).label}”.</div>
        </div>
      ) : (
      <div className="stack-12">
        {filtered.map((t,i) => {
          const s = SKILLS.find(x=>x.id===t.skill);
          const p = USER_PROGRESS[t.skill];
          const isOverdue = t.status==="overdue";
          const isDone    = t.status==="done";
          return (
            <div key={t.id}
              className="card hover"
              onClick={()=>{ setActiveScenario(getScenarioForSkill(t.skill, s.name)); setRoute("briefing"); }}
              style={{cursor:"pointer",opacity:isDone?.7:1,position:"relative",overflow:"hidden"}}>
              {/* Mode accent stripe on the left */}
              <div style={{position:"absolute",left:0,top:0,bottom:0,width:3,background: t.mode==="required" ? (isOverdue?"var(--bad)":"var(--accent-2)") : "var(--line-2)"}}/>
              <div className="card-body" style={{display:"flex",alignItems:"center",gap:20,padding:"20px 26px 20px 28px"}}>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{display:"flex",gap:8,alignItems:"center",marginBottom:6,flexWrap:"wrap"}}>
                    <span className="chip" style={{
                      background: t.mode==="required" ? "var(--accent-soft)" : "transparent",
                      color: t.mode==="required" ? "var(--accent-3)" : "var(--fg-3)",
                      borderColor: t.mode==="required" ? "var(--accent-soft)" : "var(--line-2)",
                      fontSize:10,letterSpacing:".06em"}}>
                      {t.mode==="required" ? "OBOWIĄZKOWE" : "SUGEROWANE"}
                    </span>
                    {isOverdue && <span className="chip" style={{background:"rgba(239,68,68,.12)",color:"var(--bad)",borderColor:"rgba(239,68,68,.3)",fontSize:10,letterSpacing:".06em"}}>PRZETERMINOWANE</span>}
                    {isDone    && <span className="chip" style={{background:"rgba(52,211,153,.12)",color:"var(--ok)",borderColor:"rgba(52,211,153,.3)",fontSize:10,letterSpacing:".06em"}}>UKOŃCZONE</span>}
                  </div>
                  <div style={{fontFamily:"var(--serif)",fontSize:22,letterSpacing:"-.01em",marginBottom:6,textDecoration:isDone?"none":"none"}}>{s.name}</div>
                  <div className="muted" style={{fontSize:13,display:"flex",gap:10,alignItems:"center",flexWrap:"wrap"}}>
                    <span>{t.program}</span>
                    <span>·</span>
                    <span>od {t.hr}</span>
                    {t.mode==="required" && (<><span>·</span><span style={{color:"var(--fg-2)"}}>próg 70%</span></>)}
                  </div>
                </div>

                <div style={{textAlign:"right",minWidth:120}}>
                  {t.deadline ? (
                    <>
                      <div style={{fontSize:14,color:isOverdue?"var(--bad)":"var(--fg)",fontWeight:isOverdue?500:400}}>{t.deadline}</div>
                      <div className="muted" style={{fontSize:12,marginTop:2,color:isOverdue?"var(--bad)":"var(--fg-3)"}}>
                        {t.days < 0 ? `${Math.abs(t.days)} dni po terminie` : t.days === 0 ? "dziś" : `za ${t.days} dni`}
                      </div>
                    </>
                  ) : (
                    <div className="muted" style={{fontSize:13}}>bez terminu</div>
                  )}
                </div>

                <div style={{minWidth:70,textAlign:"right"}}>
                  {p.lastScore
                    ? <span style={{fontFamily:"var(--serif)",fontSize:24,color:p.lastScore>=70?"var(--ok)":"var(--warn)"}}>{p.lastScore}%</span>
                    : <span className="muted" style={{fontSize:13,fontFamily:"var(--mono)",letterSpacing:".04em",textTransform:"uppercase"}}>—</span>}
                </div>

                <Icon name="arrow-right" size={16}/>
              </div>
            </div>
          );
        })}
      </div>
      )}
    </div>
  );
};

Object.assign(window, { Home, Library, Briefing, MyTasks });