// HR Catalog (US-22) — what's available before creating a program

const HrCatalog = ({setRoute}) => {
  const [cat, setCat] = React.useState("all");
  const [level, setLevel] = React.useState("all");
  const [q, setQ] = React.useState("");
  const [expanded, setExpanded] = React.useState(null);

  // Group skills by category, show them as main cards
  const skills = SKILLS.filter(s => {
    if (cat !== "all" && s.cat !== cat) return false;
    if (level !== "all" && s.level !== level) return false;
    if (q && !s.name.toLowerCase().includes(q.toLowerCase())) return false;
    return true;
  });

  // Group by category for display
  const grouped = {};
  skills.forEach(s => {
    if (!grouped[s.cat]) grouped[s.cat] = [];
    grouped[s.cat].push(s);
  });

  const hues = { feedback:"default", "hard-talks":"teal", negotiation:"amber", leadership:"default", communication:"teal", change:"amber" };

  // Fake "N users active on this skill across the company"
  const activeUsers = {
    "s-feedback-trudny": 23, "s-feedback-rozwoj": 18,
    "s-change-opor": 15, "s-change-kom": 12, "s-paktowanie": 8,
    "s-delegacja": 14, "s-bezpieczenstwo": 9, "s-storytelling": 7,
    "s-asertywna-odmowa": 11, "s-nvc": 8, "s-soop": 4,
    "s-wplyw": 10, "s-cisza": 3, "s-struktura": 16,
    "s-negocjacja": 2, "s-wynagrodzenie": 5,
  };

  // How many programs each skill is part of
  const inPrograms = {
    "s-feedback-trudny": 3, "s-feedback-rozwoj": 2,
    "s-change-opor": 2, "s-change-kom": 2, "s-paktowanie": 0,
    "s-delegacja": 2, "s-bezpieczenstwo": 1, "s-storytelling": 1,
    "s-asertywna-odmowa": 2, "s-nvc": 1, "s-soop": 0,
    "s-wplyw": 1, "s-cisza": 0, "s-struktura": 3,
    "s-negocjacja": 1, "s-wynagrodzenie": 1,
  };

  // Mesh-monogram: 2-letter initials extracted from skill name
  const initialsFor = (name) => {
    const words = name.replace(/[„"',.:;()]/g,"").split(/\s+/).filter(Boolean);
    if (words.length === 0) return "··";
    if (words.length === 1) return words[0].slice(0,2).toUpperCase();
    return (words[0][0] + words[1][0]).toUpperCase();
  };

  return (
    <div className="screen wide slide-up">
      <div className="breadcrumb">
        <a onClick={()=>setRoute("hr-programs")}>Programy</a>
        <span className="sep">/</span>
        <span className="cur">Katalog</span>
      </div>

      <div style={{maxWidth:720,marginBottom:32}}>
        <h1 className="page-title" style={{marginBottom:12}}>Katalog <em>umiejętności</em></h1>
        <div className="subtitle">Przeglądaj co jest dostępne. Scenariusze z tego katalogu wybierasz tworząc program.</div>
      </div>

      {/* Filters */}
      <div className="flex between" style={{marginBottom:24,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="flex gap-12" style={{alignItems:"center"}}>
          <div className="filter-group">
            <span className="filter-label">Poziom</span>
            <select className="select-pill" value={level} onChange={e=>setLevel(e.target.value)}>
              <option value="all">Wszystkie</option>
              <option value="Łatwy">Łatwy</option>
              <option value="Średni">Średni</option>
              <option value="Trudny">Trudny</option>
            </select>
          </div>
          <div className="search-box" style={{maxWidth:220}}>
            <Icon name="search" size={14}/>
            <input placeholder="Szukaj umiejętności" value={q} onChange={e=>setQ(e.target.value)}/>
          </div>
        </div>
      </div>

      {/* Summary */}
      <div style={{display:"flex",gap:32,padding:"16px 20px",background:"var(--bg-2)",border:"1px solid var(--line)",borderRadius:12,marginBottom:24,fontSize:13}}>
        <div><span className="muted">Umiejętności:</span> <span style={{fontFamily:"var(--mono)",marginLeft:6}}>{skills.length}</span></div>
        <div><span className="muted">Scenariuszy łącznie:</span> <span style={{fontFamily:"var(--mono)",marginLeft:6}}>{skills.length * 3}</span></div>
        <div><span className="muted">Wariantów:</span> <span style={{fontFamily:"var(--mono)",marginLeft:6}}>{skills.length * 8}</span></div>
        <div style={{marginLeft:"auto",color:"var(--fg-3)",fontSize:12}}>
          <Icon name="info" size={12}/> Widoczne tylko scenariusze ze statusem <span style={{color:"var(--ok)",fontFamily:"var(--mono)"}}>approved</span>
        </div>
      </div>

      {/* Grouped list */}
      {Object.keys(grouped).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 nie znaleziono.</div>
          <div style={{fontSize:14}}>Spróbuj zmienić filtry.</div>
        </div>
      ) : (
        <div className="stack-24">
          {Object.entries(grouped).map(([catId, list]) => {
            const catName = CATEGORIES.find(c => c.id === catId)?.label || catId;
            return (
              <div key={catId}>
                <div style={{display:"flex",alignItems:"baseline",gap:12,marginBottom:14}}>
                  <h2 style={{fontFamily:"var(--serif)",fontSize:24,letterSpacing:"-.01em",margin:0}}>{catName}</h2>
                  <span className="muted" style={{fontSize:12,fontFamily:"var(--mono)",letterSpacing:".04em"}}>{list.length} umiejętności</span>
                </div>
                <div className="stack-12">
                  {list.map(s => (
                    <SkillRow key={s.id}
                      skill={s}
                      hue={hues[s.cat]}
                      expanded={expanded===s.id}
                      onToggle={()=>setExpanded(expanded===s.id ? null : s.id)}
                      activeUsers={activeUsers[s.id] || 0}
                      inPrograms={inPrograms[s.id] || 0}
                      initials={initialsFor(s.name)}
                    />
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      )}

      {/* Bottom CTA */}
      <div style={{marginTop:48,padding:"28px 32px",background:"var(--bg-2)",border:"1px solid var(--line)",borderRadius:14,display:"flex",justifyContent:"space-between",alignItems:"center",gap:24}}>
        <div>
          <div style={{fontFamily:"var(--serif)",fontSize:22,letterSpacing:"-.01em",marginBottom:4}}>Gotowy żeby stworzyć program?</div>
          <div className="muted" style={{fontSize:13}}>Wybierz umiejętności w kreatorze — nie musisz zapamiętywać.</div>
        </div>
        <button className="btn primary lg" onClick={()=>setRoute("hr-program-new")}>
          <Icon name="plus" size={14}/> Nowy program
        </button>
      </div>
    </div>
  );
};

const SkillRow = ({skill, hue, expanded, onToggle, activeUsers, inPrograms, initials}) => {
  const ep = EPISODES.find(e => e.id === skill.ep);
  const series = ep ? SERIES.find(s => s.id === ep.series) : null;
  const scenarioCount = 3; // mock
  const variantCount = 8; // mock
  const unavailable = skill.unavailable;

  return (
    <div className={`skill-row ${expanded?"expanded":""} ${unavailable?"unavailable":""}`}>
      <div className="skill-row-head" onClick={onToggle}>
        <div className={`mesh mesh-monogram ${hue==="default"?"":hue}`} style={{width:56,height:56,borderRadius:12,flexShrink:0}}>
          <span>{initials}</span>
        </div>

        <div style={{flex:1,minWidth:0}}>
          <div style={{display:"flex",gap:10,alignItems:"center",marginBottom:6,flexWrap:"wrap"}}>
            <span className="chip" style={{fontSize:10,letterSpacing:".06em",color:"var(--fg-3)"}}>{skill.level.toUpperCase()}</span>
            {unavailable && <span className="chip" style={{fontSize:10,letterSpacing:".06em",color:"var(--warn)",borderColor:"rgba(245,158,11,.3)",background:"rgba(245,158,11,.08)"}}>NIEDOSTĘPNY</span>}
            {inPrograms > 0 && <span className="chip accent" style={{fontSize:10,letterSpacing:".04em"}}>W {inPrograms} {inPrograms===1?"programie":"programach"}</span>}
            <span className="muted" style={{fontSize:11,fontFamily:"var(--mono)",letterSpacing:".04em"}}>~{skill.time}</span>
          </div>
          <div style={{fontFamily:"var(--serif)",fontSize:20,letterSpacing:"-.005em",lineHeight:1.25,marginBottom:6}}>{skill.name}</div>
          <div className="muted" style={{fontSize:12,display:"flex",gap:8,alignItems:"center",flexWrap:"wrap"}}>
            <span>{series?.title}</span>
            <span>·</span>
            <span>odc. {ep?.n}: {ep?.title}</span>
          </div>
        </div>

        <div style={{textAlign:"right",display:"flex",flexDirection:"column",gap:4,minWidth:160,alignItems:"flex-end"}}>
          <div style={{fontSize:12,color:"var(--fg-2)",fontFamily:"var(--mono)"}}>{scenarioCount} scenariuszy · {variantCount} wariantów</div>
          <div style={{fontSize:11,color:activeUsers>0?"var(--accent-3)":"var(--fg-4)",fontFamily:"var(--mono)",letterSpacing:".04em"}}>
            {activeUsers>0 ? `${activeUsers} osób ćwiczy` : "jeszcze nikt nie ćwiczy"}
          </div>
        </div>

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

      {expanded && (
        <div className="skill-row-body fade-in">
          <div className="eyebrow" style={{marginBottom:12}}>Scenariusze ({scenarioCount})</div>
          <div className="stack-8">
            <ScenarioPreview title={`Spóźnienia Marka — rozmowa korygująca`} npc="Marek Kowalski · Senior Developer" turns={12} mood="W defensywie"/>
            <ScenarioPreview title={`Aneta nie raportuje postępów`} npc="Aneta Nowak · Team Lead" turns={10} mood="Unikająca"/>
            <ScenarioPreview title={`Team nie dostarcza w terminie`} npc="Bartek Wolski · Product Engineer" turns={14} mood="Obronny, sarkastyczny"/>
          </div>
          <div style={{marginTop:16,paddingTop:14,borderTop:"1px solid var(--line)",display:"flex",justifyContent:"space-between",alignItems:"center",fontSize:12}}>
            <span className="muted">Każdy scenariusz ma ~2-3 warianty (inna postać, inny kontekst).</span>
            <button className="btn link sm">Podgląd przykładowej rozmowy →</button>
          </div>
        </div>
      )}
    </div>
  );
};

const ScenarioPreview = ({title, npc, turns, mood}) => (
  <div style={{padding:"12px 14px",border:"1px solid var(--line)",borderRadius:10,display:"flex",justifyContent:"space-between",alignItems:"center",gap:16}}>
    <div style={{flex:1}}>
      <div style={{fontSize:14,fontWeight:500,marginBottom:4}}>{title}</div>
      <div className="muted" style={{fontSize:12,display:"flex",gap:8,flexWrap:"wrap"}}>
        <span>{npc}</span><span>·</span><span>~{turns} tur</span><span>·</span><span>{mood}</span>
      </div>
    </div>
    <span className="chip ok" style={{fontSize:10,letterSpacing:".04em"}}>approved</span>
  </div>
);

Object.assign(window, { HrCatalog });