const { useState, useEffect, useRef, useCallback } = React;

// ---------- Header ----------
function Header({ query, setQuery, onSearch, isSearching, hasSearched, activeJob, setActiveJob, placeholderIdx, activeQuery, activeMode, collapseAfterSearch, onEditQuery, forcedMode, setForcedMode }) {
  const divergedFromJob = !!(activeJob && query.trim() && query.trim() !== activeJob.description.trim());
  const onJob = !!activeJob && !divergedFromJob;
  const autoMode = onJob ? "ai" : window.detectMode(query);
  const effectiveMode = forcedMode || autoMode;
  const [focused, setFocused] = useState(false);
  const [jobOpen, setJobOpen] = useState(false);
  const [editing, setEditing] = useState(!hasSearched);
  const pickerRef = useRef(null);
  const inputRef = useRef(null);

  useEffect(() => {
    // When a new search runs, re-collapse if tweak is on (but never collapse for keyword/boolean)
    if (hasSearched && collapseAfterSearch && activeMode !== "kb") setEditing(false);
    if (!hasSearched) setEditing(true);
  }, [hasSearched, activeQuery, activeMode, collapseAfterSearch]);

  useEffect(() => {
    const onClick = (e) => {
      if (pickerRef.current && !pickerRef.current.contains(e.target)) setJobOpen(false);
    };
    document.addEventListener("mousedown", onClick);
    return () => document.removeEventListener("mousedown", onClick);
  }, []);

  const selectJob = (job) => {
    setActiveJob(job);
    setQuery(job.description);
    setForcedMode?.(null);
    setJobOpen(false);
    setTimeout(() => inputRef.current?.focus(), 50);
  };

  const clearJob = () => {
    setActiveJob(null);
    setQuery("");
    setTimeout(() => inputRef.current?.focus(), 50);
  };

  const clearQuery = () => {
    if (activeJob && query.trim() !== activeJob.description.trim()) {
      setQuery(activeJob.description);
    } else {
      setQuery("");
    }
    setTimeout(() => inputRef.current?.focus(), 0);
  };

  const pickMode = (v) => {
    if (forcedMode === v) {
      setForcedMode(null);
    } else {
      setForcedMode(v);
      if (activeJob) setActiveJob(null);
    }
  };

  const onKeyDown = (e) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      onSearch();
    }
  };

  const useExample = (ex) => {
    setQuery(ex);
    setTimeout(() => inputRef.current?.focus(), 30);
  };

  return (
    <div className="hdr" style={{ backgroundColor: "rgb(15, 23, 42)" }}>
      <div className="hdr-top">
        <div className="hdr-title">
          Talent Search
        </div>
      </div>

      <div className="search-wrap">
        {/* Collapsed-query pill disabled — input stays visible and editable after submit.
              Restore by flipping this to the original condition:
              hasSearched && collapseAfterSearch && !editing && !activeJob && activeMode !== "kb" */}
        {false ?
        <div className="collapsed-query" onClick={() => {setEditing(true);onEditQuery?.();setTimeout(() => inputRef.current?.focus(), 30);}}>
            <>
                {activeMode &&
            <span className={"mode-badge mode-" + activeMode}>
                    {activeMode === "ai" && <Icon name="spark" size={11} />}
                    {activeMode === "kb" && <span style={{ fontWeight: 800, fontSize: 11 }}>#</span>}
                    <span>{activeMode === "ai" ? "Natural language" : "Keywords & Boolean"}</span>
                  </span>
            }
                <span className="cq-query">{activeQuery}</span>
            </>
            <button className="cq-edit" onClick={(e) => {e.stopPropagation();setEditing(true);setTimeout(() => inputRef.current?.focus(), 30);}}>
              <Icon name="edit" size={13} /> Edit
            </button>
          </div> :

        <>
        {activeJob &&
          <div className="job-banner">
            <Icon name="briefcase" size={14} />
            <span className="jb-label">Searching based on:</span>
            <span className="jb-title">{activeJob.title}</span>
            <span className="jb-meta">{activeJob.location}</span>
            <button className="jb-x" onClick={clearJob} aria-label="Clear job context">
              <Icon name="x" size={14} />
            </button>
          </div>
          }

        <div className={"search-input-row" + (focused ? " focused" : "") + (effectiveMode === "ai" ? " mode-ai" : "")}>
          <div className="search-icon-box">
            {query.trim() ? <Icon name="spark" size={18} /> : <Icon name="search" size={18} />}
          </div>
          <input
              ref={inputRef}
              className="search-input"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              onFocus={() => setFocused(true)}
              onBlur={() => setFocused(false)}
              onKeyDown={onKeyDown}
              placeholder={window.ROTATING_EXAMPLES[placeholderIdx]}
              aria-label="Search candidates" />
            
          <div className="search-actions">
            {query.trim() &&
              <button
                type="button"
                className="search-clear"
                onClick={clearQuery}
                aria-label="Clear search"
                title="Clear">
                
                <Icon name="x" size={14} />
              </button>
              }
            <button className="btn-search" onClick={onSearch} disabled={!query.trim() || isSearching}>
              Search
            </button>
          </div>
        </div>

        <div className="mode-chips">
          {[
            { v: "ai", label: "Natural language", icon: "spark", tip: "Describe candidates in plain language" },
            { v: "kb", label: "Keywords & Boolean", icon: "hash", tip: "Exact terms, AND/OR/NOT, quotes" }].
            map((m) => {
              const isAuto = !forcedMode && !onJob && autoMode === m.v && query.trim();
              const isForced = forcedMode === m.v;
              return (
                <button
                  key={m.v}
                  className={"mode-chip" + (isAuto ? " auto" : "") + (isForced ? " forced" : "")}
                  onClick={() => pickMode(m.v)}
                  title={m.tip}>
                  
                {m.icon === "hash" ?
                  <span style={{ fontWeight: 800, fontSize: 12 }}>#</span> :
                  <Icon name={m.icon} size={12} />}
                {m.label}
                {isForced && <span className="mode-chip-x" onClick={(e) => {e.stopPropagation();setForcedMode(null);}}><Icon name="x" size={10} /></span>}
              </button>);

            })}
          <div className="rel" ref={pickerRef}>
            <button
                className={"mode-chip" + (onJob ? " forced" : "") + (jobOpen ? " open" : "")}
                onClick={() => setJobOpen(!jobOpen)}
                title="Use a job posting as your search">
                
              <Icon name="briefcase" size={12} />
              Search from a job
              <Icon name="chevron-down" size={11} style={{ opacity: 0.7 }} />
            </button>
            {jobOpen &&
              <div className="job-picker">
                <div className="job-picker-header"><span>Your posted jobs</span></div>
                <div className="job-picker-list">
                  {window.JOBS.map((job) =>
                  <button key={job.id} className="job-picker-item" onClick={() => selectJob(job)}>
                      <div className="jp-icon">
                        <Icon name="briefcase" size={14} />
                      </div>
                      <div style={{ minWidth: 0, flex: 1 }}>
                        <div className="jp-title">{job.title}</div>
                        <div className="jp-meta">
                          <span>{job.location}</span>
                          <span className="jp-sep">·</span>
                          <span>{job.department}</span>
                          <span className="jp-sep">·</span>
                          <span>{job.postedAgo}</span>
                        </div>
                      </div>
                    </button>
                  )}
                </div>
              </div>
              }
          </div>
          <span className="mode-chips-hint">
            {onJob ? "" : forcedMode ? "Forced — click to unset" : query.trim() ? "Auto-detected" : ""}
          </span>
        </div>
        </>
        }
      </div>
    </div>);

}

// ---------- Interpretation strip ----------
function Interpretation({ chips, setChips, rephraseHtml, style, compact }) {
  if (!chips.length) return null;
  const removeChip = (id) => setChips(chips.filter((c) => c.id !== id));

  if (compact) {
    return (
      <div className="interp-compact">
        <div className="interp-compact-head">
          <span className="interp-compact-badge">
            <Icon name="spark" size={11} />
            From your search
          </span>
        </div>
        <div className="interp-compact-chips">
          {chips.map((c) =>
          <span key={c.id} className="chip chip-sm">
              <span className="chip-label">{c.label}</span>
              {c.value}
              <button className="chip-x" onClick={() => removeChip(c.id)} aria-label={`Remove ${c.label}`}>
                <Icon name="x" size={10} />
              </button>
            </span>
          )}
          <button className="chip-add chip-add-sm">
            <Icon name="plus" size={11} />
            Add
          </button>
        </div>
      </div>);

  }

  return (
    <div className="interp">
      {style !== "chips" && rephraseHtml &&
      <div className="interp-rephrase">
          <span className="interp-rephrase-badge">
            <Icon name="spark" size={11} /> Understood as
          </span>
          <span dangerouslySetInnerHTML={{ __html: rephraseHtml }} />
        </div>
      }
      {style !== "rephrase" &&
      <>
          <div className="interp-top">
            <span className="interp-badge">
              <Icon name="spark" size={12} />
              What we understood
            </span>
            <span style={{ color: "var(--b700)", fontSize: 12, marginLeft: "auto" }}>
              Not right? Click a chip to remove, or refine below.
            </span>
          </div>
          <div className="interp-chips">
            {chips.map((c) =>
          <span key={c.id} className="chip">
                <span className="chip-label">{c.label}</span>
                {c.value}
                <button className="chip-x" onClick={() => removeChip(c.id)} aria-label={`Remove ${c.label}`}>
                  <Icon name="x" size={11} />
                </button>
              </span>
          )}
            <button className="chip-add">
              <Icon name="plus" size={12} />
              Add constraint
            </button>
          </div>
        </>
      }
    </div>);

}

// ---------- Unified filters sidebar ----------
function Filters({ state, setState, chips, setChips }) {
  const toggle = (k) => setState({ ...state, [k]: !state[k] });
  const setDist = (d) => setState({ ...state, distance: d });
  const setActive = (a) => setState({ ...state, lastActive: a });

  // chips come in as [{id, label: "Role"|"Near"|"Skill", value}]
  const findChip = (label) => chips.find((c) => c.label === label);
  const nearChip = findChip("Near");

  const removeChip = (id) => setChips(chips.filter((c) => c.id !== id));

  const inferredCount = chips.length;
  const totalActive = inferredCount + (state.insightsOnly ? 1 : 0);

  const insightsAvailable = window.CANDIDATES.filter((c) => (c.insights || []).length > 0).length;

  const clearAll = () => {
    setChips([]);
    setState({
      distance: "30mi",
      lastActive: "Last 30 days",
      insightsOnly: false
    });
  };

  const FromSearchTag = () =>
  <span className="from-search-tag" title="From search" aria-label="Inferred from your search">
      <Icon name="spark" size={11} />
    </span>;


  return (
    <aside className="filters">
      <div className="filters-head">
        <div className="filters-title">
          Filters
          <span className="count">
            · {totalActive}
          </span>
        </div>
        <button className="filters-clear" onClick={clearAll} disabled={totalActive === 0}>
          Clear all
        </button>
      </div>

      {/* Location */}
      <div className="filter-group">
        <div className="filter-label-row">
          <label>Location</label>
          {nearChip && <FromSearchTag />}
        </div>
        <input
          className="filter-input"
          defaultValue={nearChip ? nearChip.value.replace(/\s*·\s*\d+mi$/, "") : ""}
          placeholder="City, state" />
        
      </div>

      {/* Distance */}
      <div className="filter-group">
        <div className="filter-label-row">
          <label>Distance</label>
        </div>
        <select className="filter-input filter-select" value={state.distance} onChange={(e) => setDist(e.target.value)}>
          {["10mi", "20mi", "30mi", "40mi", "50mi", "60mi", "70mi", "80mi", "90mi", "100mi", "100+mi"].map((d) =>
          <option key={d} value={d}>{d.replace("mi", " miles")}</option>
          )}
        </select>
      </div>

      {/* Last active */}
      <div className="filter-group">
        <div className="filter-label-row">
          <label>Last active</label>
        </div>
        <select className="filter-input filter-select" value={state.lastActive} onChange={(e) => setActive(e.target.value)}>
          <option>Any time</option>
          <option>Last 7 days</option>
          <option>Last 30 days</option>
          <option>Last 90 days</option>
        </select>
      </div>

      {/* FactoryFix insights — candidate-memory signals from dossiers */}
      <div className="filter-group ins-filter">
        <div className="filter-label-row">
          <label className="ins-filter-label">
            <Icon name="spark" size={11} />
            FactoryFix insights
          </label>
        </div>
        <Toggle
          size="sm"
          checked={!!state.insightsOnly}
          onChange={() => toggle("insightsOnly")}
          label={<span>Only candidates with insights <span className="ins-filter-count">{insightsAvailable}</span></span>}
          description="Candidate preferences FactoryFix has on file" />

      </div>

    </aside>);

}

window.Header = Header;
window.Interpretation = Interpretation;
window.Filters = Filters;