// Home page — tool grid

const { useState: useStateHome, useMemo } = React;

function HomePage({ onOpenTool, user, allowedToolIds }) {
  const { SPECIALISMS, TOOLS: ALL_TOOLS, RECENT, FAVORITES, ToolIcons } = window.SER_DATA;
  const TOOLS = allowedToolIds ? ALL_TOOLS.filter(t => allowedToolIds.includes(t.id)) : ALL_TOOLS;
  const [activeFilter, setActiveFilter] = useStateHome('all');
  const [query, setQuery] = useStateHome('');
  const [favs, setFavs] = useStateHome(new Set(FAVORITES));

  const toggleFav = (id) => {
    const next = new Set(favs);
    next.has(id) ? next.delete(id) : next.add(id);
    setFavs(next);
  };

  const filtered = useMemo(() => {
    return TOOLS.filter(t => {
      if (activeFilter !== 'all' && t.spec !== activeFilter) return false;
      if (query) {
        const q = query.toLowerCase();
        return t.name.toLowerCase().includes(q) || t.desc.toLowerCase().includes(q);
      }
      return true;
    });
  }, [activeFilter, query]);

  const counts = useMemo(() => {
    const c = { all: TOOLS.length };
    SPECIALISMS.forEach(s => { c[s.id] = TOOLS.filter(t => t.spec === s.id).length; });
    return c;
  }, []);

  const grouped = useMemo(() => {
    if (activeFilter !== 'all' || query) return null;
    return SPECIALISMS.map(s => ({
      ...s,
      tools: TOOLS.filter(t => t.spec === s.id)
    })).filter(g => g.tools.length > 0);
  }, [activeFilter, query]);

  const recentTools = RECENT.map(id => TOOLS.find(t => t.id === id)).filter(Boolean);

  return (
    <div className="page fade-up">
      <div className="page-header">
        <div className="page-title-stack">
          <span className="page-eyebrow">{user?.kind === 'staff' ? 'Automation Hub' : 'Klant Portal'}</span>
          <h1>Goedemorgen, {user?.name?.split(' ')[0] || 'collega'}.</h1>
          <p className="page-subtitle">{user?.kind === 'staff'
            ? 'Kies een tool om te starten. Alle scripts uit de teamrepository, herbruikbaar als web-interfaces.'
            : `Welkom bij het SER Automation Platform. Hier zie je de tools die voor ${user.name} zijn vrijgegeven.`}</p>
        </div>
        <div style={{display:'flex', gap:8}}>
          <button className="btn btn-ghost">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>
            Nieuwe tool toevoegen
          </button>
          <button className="btn btn-primary">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
            Documentatie
          </button>
        </div>
      </div>

      {/* Recent strip */}
      <div className="section-header" style={{marginTop: 8}}>
        <div className="section-header-left">
          <h2>Recent gebruikt</h2>
          <span className="count">laatste 4</span>
        </div>
      </div>
      <div className="recent-strip">
        {recentTools.map(t => {
          const spec = SPECIALISMS.find(s => s.id === t.spec);
          return (
            <div key={t.id} className="recent-card" onClick={() => onOpenTool(t.id)}>
              <div className="tool-icon-sm" style={{background: spec.color}}>
                {ToolIcons[t.icon]}
              </div>
              <div className="stack">
                <span className="name">{t.name}</span>
                <span className="when">{t.lastUsed}</span>
              </div>
            </div>
          );
        })}
      </div>

      {/* Filter bar */}
      <div className="section-header">
        <div className="section-header-left">
          <h2>Alle tools</h2>
          <span className="count">{filtered.length} van {TOOLS.length}</span>
        </div>
        <div style={{display:'flex', gap:8, alignItems:'center'}}>
          <div className="topnav-search" style={{width: 240}}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
            <input
              placeholder="Zoek tools…"
              value={query}
              onChange={e => setQuery(e.target.value)}
            />
          </div>
        </div>
      </div>

      <div className="filter-bar">
        <button
          className={`filter-chip ${activeFilter === 'all' ? 'active' : ''}`}
          onClick={() => setActiveFilter('all')}
        >
          Alle <span className="count">{counts.all}</span>
        </button>
        {SPECIALISMS.map(s => (
          <button
            key={s.id}
            className={`filter-chip ${activeFilter === s.id ? 'active' : ''}`}
            onClick={() => setActiveFilter(s.id)}
          >
            <span style={{width:8, height:8, borderRadius:'50%', background: s.color}}></span>
            {s.label} <span className="count">{counts[s.id]}</span>
          </button>
        ))}
      </div>

      {/* Grid: grouped or flat */}
      {grouped ? (
        grouped.map(g => (
          <div key={g.id} style={{marginBottom: 32}}>
            <div className="section-header" style={{margin: '8px 0 14px'}}>
              <div className="section-header-left">
                <span className={`pill ${g.pillClass}`}>
                  <span className="pill-dot"></span>
                  {g.label}
                </span>
                <span className="count">{g.tools.length} tools</span>
              </div>
            </div>
            <div className="tool-grid">
              {g.tools.map(t => (
                <ToolCard key={t.id} tool={t} fav={favs.has(t.id)} onToggleFav={() => toggleFav(t.id)} onOpen={() => onOpenTool(t.id)} />
              ))}
            </div>
          </div>
        ))
      ) : (
        <div className="tool-grid">
          {filtered.map(t => (
            <ToolCard key={t.id} tool={t} fav={favs.has(t.id)} onToggleFav={() => toggleFav(t.id)} onOpen={() => onOpenTool(t.id)} />
          ))}
          {filtered.length === 0 && (
            <div className="card" style={{gridColumn: '1 / -1', textAlign:'center', padding: 48}}>
              <p style={{fontWeight: 600, color: 'var(--ink-700)'}}>Geen tools gevonden voor "{query}"</p>
              <p className="muted" style={{fontSize: 13, marginTop: 4}}>Probeer een ander zoekwoord of reset het filter.</p>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

function ToolCard({ tool, fav, onToggleFav, onOpen }) {
  const { SPECIALISMS, ToolIcons } = window.SER_DATA;
  const spec = SPECIALISMS.find(s => s.id === tool.spec);

  return (
    <div className={`tool-card t-${tool.spec}`} onClick={onOpen}>
      <div className="accent-bar"></div>
      <div className="tool-card-head">
        <div className="tool-icon">{ToolIcons[tool.icon]}</div>
        <div style={{display:'flex', alignItems:'center', gap:6}}>
          {tool.badge && (
            <span className="pill pill-warn">
              <svg width="9" height="9" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 7h7l-5.5 4.5L18 22l-6-4-6 4 1.5-8.5L2 9h7z"/></svg>
              {tool.badge}
            </span>
          )}
          <button
            className={`fav-btn ${fav ? 'active' : ''}`}
            onClick={(e) => { e.stopPropagation(); onToggleFav(); }}
            aria-label="Toggle favorite"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill={fav ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2l3 7h7l-5.5 4.5L18 22l-6-4-6 4 1.5-8.5L2 9h7z"/></svg>
          </button>
        </div>
      </div>

      <div>
        <h3>{tool.name}</h3>
        <p className="desc">{tool.desc}</p>
      </div>

      <div style={{display:'flex', alignItems:'center', gap:6, flexWrap:'wrap'}}>
        <span className={`pill ${spec.pillClass}`}>
          <span className="pill-dot"></span>
          {spec.label}
        </span>
      </div>

      <div className="tool-card-foot">
        <div className="meta">
          <span title="Aantal runs">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
            {tool.runs} runs
          </span>
          <span title="Laatst gebruikt">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
            {tool.lastUsed}
          </span>
        </div>
        <span style={{display:'inline-flex', alignItems:'center', gap:4, color:'var(--ser-navy)', fontWeight:600}}>
          Open
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
        </span>
      </div>
    </div>
  );
}

window.HomePage = HomePage;