import { INK, PAPER, SKY, MUTE, BLUE, FONT_MONO } from "../../theme";
import { GENDER_LABEL, SEARCH_RESULTS_MAX } from "../../constants";
import EmptyState from "../../components/EmptyState";
import Notice from "../../components/Notice";
import ProfileCard from "./ProfileCard";

/* Zoeken: fulltext in profielteksten, alleen wederzijds passende profielen (de server bepaalt) */
export default function SearchView({ me, query, onQueryChange, results, truncated = false, loading, error, onRetry, onWrite, onReport, onEditProfile }) {
  return (
    <main className="app-main">
      {!me.text.trim() && (
        <p style={{ background: SKY, border: `1px solid ${INK}`, padding: "10px 12px", fontSize: 13, margin: "0 0 14px", lineHeight: 1.5 }}>
          Je profieltekst is nog leeg — zo vindt niemand je op woorden.{" "}
          <button
            onClick={onEditProfile}
            style={{ background: "none", border: "none", color: BLUE, fontWeight: 700, fontSize: 13, padding: 0, textDecoration: "underline" }}
          >
            Schrijf je profiel
          </button>
        </p>
      )}
      <input
        type="search"
        value={query}
        onChange={(e) => onQueryChange(e.target.value)}
        placeholder="Zoek in profielteksten…"
        aria-label="Zoek in profielteksten"
        style={{
          width: "100%", padding: "12px 14px", fontSize: 15, border: `2px solid ${INK}`,
          borderRadius: 0, background: PAPER,
        }}
      />
      <p style={{ fontFamily: FONT_MONO, fontSize: 11, color: MUTE, margin: "10px 0 18px" }}>
        filter: {me.filter.genders.map((g) => GENDER_LABEL[g]).join(", ")} · {me.filter.ageMin}–{me.filter.ageMax} jr
        {me.filter.seekRelatie && <> · ook in een relatie</>}
        {me.filter.seekTrans && <> · ook trans</>}
        {me.filter.radiusKm != null && <> · binnen {me.filter.radiusKm} km</>}
        &nbsp;·&nbsp; alleen wederzijds passende profielen
      </p>

      {/* Verdwijnt vanzelf zodra er genoeg mensen zijn om te tonen */}
      {!query.trim() && !loading && results.length < 10 && (
        <p style={{ background: SKY, border: `1px solid ${INK}`, padding: "10px 12px", fontSize: 13, margin: "0 0 18px", lineHeight: 1.5 }}>
          Deze app is net open, dus er zitten nog niet veel mensen in. Heb geduld en laat de app op je
          telefoon staan — er komen er vanzelf meer bij. Tip: zet notificaties aan bij Mijn profiel,
          dan hoor je het zodra er post voor je ligt.
        </p>
      )}

      <Notice loading={loading} error={error} onRetry={onRetry} />

      {!loading && !error && results.length === 0 && (
        <EmptyState title="Geen profielen gevonden.">
          Pas je zoekterm of je filters aan. Je ziet alleen mensen bij wie jullie filters wederzijds passen.
        </EmptyState>
      )}

      {results.map((u) => (
        <ProfileCard key={u.id} user={u} onWrite={() => onWrite(u.id)} onReport={() => onReport(u)} />
      ))}

      {/* Er waren er meer dan de server in één keer geeft — dat hoort er te staan, anders lijkt dit alles */}
      {truncated && !loading && !error && (
        <p style={{ fontFamily: FONT_MONO, fontSize: 11, color: MUTE, margin: "18px 0 0", lineHeight: 1.6 }}>
          Dit zijn de eerste {SEARCH_RESULTS_MAX} profielen. Er passen er meer bij je filters — zoek op een
          woord uit een profieltekst om gerichter te vinden wie je zoekt.
        </p>
      )}
    </main>
  );
}