import React from "react";
import FilterInput from "./FilterInput";

function RefreshButton({ onClick }) {
  return (
    <button
      onClick={onClick}
      title="Refresh"
      style={{
        alignSelf: "flex-end",
        background: "none",
        border: "1px solid var(--border)",
        borderRadius: 6,
        padding: "8px 10px",
        color: "var(--text-dim)",
        cursor: "pointer",
        fontFamily: "inherit",
        fontSize: 14,
        lineHeight: 1,
        flexShrink: 0,
        display: "flex",
        alignItems: "center",
      }}
      onMouseEnter={(e) => { e.currentTarget.style.color = "var(--text)"; e.currentTarget.style.borderColor = "var(--text-dim)"; }}
      onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text-dim)"; e.currentTarget.style.borderColor = "var(--border)"; }}
    >
      ↻
    </button>
  );
}

export { RefreshButton };

export default function FilterBar({ filters, onFilterChange, columns, highlightOptions, onHighlightOptionToggle, onRefresh }) {
  const configs = [
    { key: "include", label: "Include", color: "var(--green)", bgColor: "var(--green-bg)" },
    { key: "exclude", label: "Exclude", color: "var(--red)", bgColor: "var(--red-bg)" },
    { key: "highlight", label: "Highlight", color: "var(--yellow)", bgColor: "var(--yellow-bg)", plainText: true },
    { key: "columns", label: "Columns", color: "var(--purple)", bgColor: "var(--purple-bg)", columnsOnly: true },
  ];

  return (
    <div
      style={{
        display: "flex",
        gap: 12,
        padding: "16px 20px",
        background: "var(--panel)",
        borderBottom: "1px solid var(--border)",
        flexWrap: "wrap",
      }}
    >
      {configs.map((cfg) => (
        <FilterInput
          key={cfg.key}
          label={cfg.label}
          color={cfg.color}
          bgColor={cfg.bgColor}
          value={filters[cfg.key]}
          onChange={(val) => onFilterChange(cfg.key, val)}
          columns={columns}
          columnsOnly={cfg.columnsOnly || false}
          plainText={cfg.plainText || false}
          highlightOptions={cfg.key === "highlight" ? highlightOptions : undefined}
          onHighlightOptionToggle={cfg.key === "highlight" ? onHighlightOptionToggle : undefined}
        />
      ))}
      {onRefresh && <RefreshButton onClick={onRefresh} />}
    </div>
  );
}
