// HR drill-down: user sessions (US-23)

const HrUserSessions = ({setRoute, user}) => {
  const u = user || HR_USERS[0];
  const sessions = HR_USER_SESSIONS[u.id] || HR_USER_SESSIONS["u1"];
  const [openSession, setOpenSession] = React.useState(sessions[0]?.id);

  // Summary
  const avgScore = Math.round(sessions.filter(s=>s.score).reduce((a,s)=>a+s.score,0) / sessions.filter(s=>s.score).length);
  const firstScore = sessions[sessions.length-1]?.score;
  const lastScore  = sessions[0]?.score;
  const trendDelta = firstScore && lastScore ? lastScore - firstScore : 0;

  const statusChip =
    u.status==="done"   ? <span className="chip ok" style={{fontSize:11}}><Icon name="check" size={10}/> Ukończone</span> :
    u.status==="overdue"? <span className="chip bad" style={{fontSize:11}}>Przeterminowane</span> :
    <span className="chip" style={{fontSize:11}}>Aktywne</span>;

  return (
    <div className="screen wide slide-up">
      <div className="breadcrumb">
        <a onClick={()=>setRoute("hr-programs")}>Programy</a>
        <span className="sep">/</span>
        <a onClick={()=>setRoute("hr-dashboard")}>Liderzy AI Q2</a>
        <span className="sep">/</span>
        <span className="cur">{u.name}</span>
      </div>

      {/* User header */}
      <div className="card" style={{marginBottom:24}}>
        <div className="card-body" style={{padding:"24px 28px",display:"flex",gap:20,alignItems:"center"}}>
          <div className="avatar" style={{width:64,height:64,fontSize:22,flexShrink:0}}>
            {u.name.split(" ").map(s=>s[0]).slice(0,2).join("")}
          </div>
          <div style={{flex:1}}>
            <div style={{fontFamily:"var(--serif)",fontSize:28,letterSpacing:"-.01em",marginBottom:6}}>{u.name}</div>
            <div className="muted" style={{fontSize:13,display:"flex",gap:12,flexWrap:"wrap",alignItems:"center"}}>
              <span>{u.team}</span>
              <span>·</span>
              <span>{u.email || `${u.name.toLowerCase().replace(/ /g,".").replace(/[ąćęłńóśźż]/g,m=>({ą:"a",ć:"c",ę:"e",ł:"l",ń:"n",ó:"o",ś:"s",ź:"z",ż:"z"})[m])}@firma.pl`}</span>
              <span>·</span>
              <span style={{fontFamily:"var(--mono)",fontSize:11}}>id:{1000+(u.id?parseInt(u.id.slice(1)):1)}</span>
            </div>
          </div>
          {statusChip}
        </div>
      </div>

      {/* Summary metrics */}
      <div className="grid-4" style={{marginBottom:24}}>
        <div className="metric">
          <div className="label">Sesji</div>
          <div className="num">{sessions.length}</div>
          <div className="delta">w tym programie</div>
        </div>
        <div className="metric">
          <div className="label">Średni wynik</div>
          <div className="num" style={{color:avgScore>=70?"var(--ok)":"var(--warn)"}}>{avgScore}%</div>
          <div className="delta">{avgScore>=70?"spełnia próg":"poniżej progu 70%"}</div>
        </div>
        <div className="metric">
          <div className="label">Trend</div>
          <div className="num" style={{color:trendDelta>0?"var(--ok)":trendDelta<0?"var(--bad)":"var(--fg-3)"}}>
            {trendDelta>0?"+":""}{trendDelta}
          </div>
          <div className="delta">od pierwszej do ostatniej sesji</div>
        </div>
        <div className="metric">
          <div className="label">Ostatnia aktywność</div>
          <div className="num" style={{fontSize:22}}>{sessions[0]?.date.split(" ").slice(0,2).join(" ")}</div>
          <div className="delta">{sessions[0]?.time}</div>
        </div>
      </div>

      {/* Policy notice */}
      <div style={{padding:"14px 18px",background:"var(--bg-2)",border:"1px dashed var(--line-2)",borderRadius:10,marginBottom:24,fontSize:12,color:"var(--fg-3)",lineHeight:1.6,display:"flex",gap:12,alignItems:"flex-start"}}>
        <Icon name="info" size={14} style={{flexShrink:0,marginTop:2}}/>
        <div>
          <strong style={{color:"var(--fg-2)",fontWeight:500}}>Polityka MVP:</strong> treść rozmowy (transkrypt) i kontekst osobisty uczestnika nie są widoczne dla HR.
          Masz ocenę per kryterium, komentarz uczestnika do oceny, i metadane sesji. Każde otwarcie szczegółów jest logowane.
        </div>
      </div>

      {/* Sessions list */}
      <div className="eyebrow" style={{marginBottom:14}}>Historia sesji</div>
      <div className="stack-12">
        {sessions.map(s => (
          <SessionCard
            key={s.id}
            session={s}
            open={openSession===s.id}
            onToggle={()=>setOpenSession(openSession===s.id ? null : s.id)}
          />
        ))}
      </div>
    </div>
  );
};

const SessionCard = ({session: s, open, onToggle}) => {
  const scoreColor = s.score >= 80 ? "var(--ok)" : s.score >= 60 ? "var(--warn)" : "var(--bad)";

  return (
    <div className={`card ${open?"open":""}`} style={{overflow:"hidden"}}>
      <div className="card-body" style={{padding:"18px 22px",cursor:"pointer",display:"flex",alignItems:"center",gap:20}} onClick={onToggle}>
        <div style={{flex:1,minWidth:0}}>
          <div style={{display:"flex",gap:8,alignItems:"center",marginBottom:6,flexWrap:"wrap"}}>
            {s.source==="program"
              ? <span className="chip accent" style={{fontSize:10,letterSpacing:".06em"}}>Z PROGRAMU</span>
              : <span className="chip" style={{fontSize:10,letterSpacing:".06em",color:"var(--fg-3)"}}>SELF-BROWSE</span>}
            <span className="muted" style={{fontSize:11,fontFamily:"var(--mono)",letterSpacing:".04em"}}>{s.date} · {s.time}</span>
            <span className="muted" style={{fontSize:11,fontFamily:"var(--mono)",letterSpacing:".04em"}}>· {s.duration}</span>
            {s.meetsCriteria
              ? <span style={{fontSize:10,fontFamily:"var(--mono)",letterSpacing:".06em",color:"var(--ok)"}}>✓ SPEŁNIA KRYTERIUM</span>
              : <span style={{fontSize:10,fontFamily:"var(--mono)",letterSpacing:".06em",color:"var(--fg-4)"}}>✕ NIE SPEŁNIA</span>}
          </div>
          <div style={{fontFamily:"var(--serif)",fontSize:19,letterSpacing:"-.005em",marginBottom:4}}>{s.scenario}</div>
          <div className="muted" style={{fontSize:12}}>Umiejętność: {s.skill}</div>
        </div>

        <div style={{textAlign:"right",minWidth:100}}>
          <div style={{fontFamily:"var(--serif)",fontSize:32,color:scoreColor,lineHeight:1}}>{s.score}%</div>
          <div className="muted" style={{fontSize:10,fontFamily:"var(--mono)",letterSpacing:".04em",textTransform:"uppercase",marginTop:2}}>
            {s.endType==="goal-achieved"?"cel osiągnięty":
             s.endType==="goal-partial"?"cel częściowy":
             s.endType==="time-out"?"koniec czasu":
             s.endType==="escalation"?"eskalacja":"zakończone"}
          </div>
        </div>

        <Icon name="chevron-down" size={16} style={{transform:open?"rotate(180deg)":"none",transition:".2s"}}/>
      </div>

      {open && (
        <div className="fade-in" style={{padding:"4px 28px 24px",borderTop:"1px solid var(--line)"}}>
          {/* Rubric per criterion */}
          <div className="eyebrow" style={{marginTop:20,marginBottom:12}}>Ocena per kryterium</div>
          <div className="stack-8">
            {s.rubric.map((r,i) => (
              <RubricRow key={i} r={r}/>
            ))}
          </div>

          {/* User comment */}
          {s.userComment && (
            <div style={{marginTop:20,paddingTop:16,borderTop:"1px solid var(--line)"}}>
              <div className="eyebrow" style={{marginBottom:10}}>Komentarz uczestnika do oceny</div>
              <div style={{padding:"14px 16px",background:"var(--bg-2)",border:"1px solid var(--line)",borderRadius:10,fontSize:14,lineHeight:1.5,fontFamily:"var(--serif)",color:"var(--fg-2)",fontStyle:"italic"}}>
                „{s.userComment}”
              </div>
            </div>
          )}

          <div style={{marginTop:16,fontSize:12,color:"var(--fg-4)",lineHeight:1.5,paddingTop:14,borderTop:"1px dashed var(--line)"}}>
            Treść rozmowy jest zapisana, ale w MVP nie udostępniamy jej HR. Masz ocenę i komentarz uczestnika.
          </div>
        </div>
      )}
    </div>
  );
};

const RubricRow = ({r}) => {
  const color = r.status==="pass" ? "var(--ok)" : r.status==="partial" ? "var(--warn)" : "var(--bad)";
  const sym = r.status==="pass" ? "✓" : r.status==="partial" ? "~" : "✗";
  return (
    <div style={{display:"flex",gap:14,padding:"12px 14px",border:"1px solid var(--line)",borderRadius:10,alignItems:"flex-start"}}>
      <div style={{width:24,height:24,borderRadius:"50%",background:`color-mix(in oklch, ${color} 16%, transparent)`,color:color,display:"grid",placeItems:"center",flexShrink:0,fontFamily:"var(--mono)",fontSize:13,fontWeight:600,marginTop:2}}>{sym}</div>
      <div style={{flex:1}}>
        <div style={{fontSize:14,fontWeight:500,marginBottom:3}}>{r.title}</div>
        <div className="muted" style={{fontSize:12,lineHeight:1.5}}>{r.note}</div>
      </div>
    </div>
  );
};

Object.assign(window, { HrUserSessions });