import React from "react";

export function EntityKpiCards({ items = [] }) {
  return (
    <div className="bp-cards bp-entity-index__kpis">
      {items.map((item) => (
        <div key={item.label} className="bp-card bp-entity-index__kpi">
          <div className="bp-card-label">{item.label}</div>
          <div className="bp-card-value">{item.value}</div>
        </div>
      ))}
    </div>
  );
}

export function EntityStateCard({ children }) {
  return <div className="bp-card bp-state-card bp-state-card--inline bp-entity-index__state">{children}</div>;
}

function renderOptionLabel(option, mode) {
  if (!option || typeof option !== "object") return "";
  if (mode === "toolbar" && option.toolbarLabel) return option.toolbarLabel;
  if (mode === "sheet" && option.sheetLabel) return option.sheetLabel;
  return option.label || option.toolbarLabel || option.sheetLabel || option.value || "";
}

export function EntitySearchFilters({
  searchPlaceholder,
  searchValue,
  onSearchChange,
  statusValue,
  onStatusChange,
  statusOptions = [],
  sortValue,
  onSortChange,
  sortOptions = [],
  filtersOpen,
  setFiltersOpen,
  onClear,
  shownCount,
  loading,
  desktopClassName = "",
  mobileClassName = "",
  sheetTitle = "Filters",
  searchLabel = "Search",
  statusLabel = "Status",
  sortLabel = "Sort",
}) {
  const shownLabel = loading ? "..." : `${shownCount} shown`;
  const desktopClasses = ["bp-card", "bp-entity-index__filters", desktopClassName].filter(Boolean).join(" ");
  const mobileClasses = ["bp-entity-index__toolbar", mobileClassName].filter(Boolean).join(" ");

  return (
    <>
      <div className={desktopClasses}>
        <div className="bp-filters bp-entity-index__filtersRow">
          <input
            type="text"
            placeholder={searchPlaceholder}
            value={searchValue}
            onChange={(event) => onSearchChange(event.target.value)}
            className="bp-input bp-entity-index__searchInput"
          />
          <select className="bp-input" value={statusValue} onChange={(event) => onStatusChange(event.target.value)}>
            {statusOptions.map((option) => (
              <option key={option.value} value={option.value}>
                {renderOptionLabel(option, "toolbar")}
              </option>
            ))}
          </select>
          <select className="bp-input" value={sortValue} onChange={(event) => onSortChange(event.target.value)}>
            {sortOptions.map((option) => (
              <option key={option.value} value={option.value}>
                {renderOptionLabel(option, "toolbar")}
              </option>
            ))}
          </select>
        </div>
      </div>

      <div className={mobileClasses}>
        <button className="bp-top-btn" type="button" onClick={() => setFiltersOpen(true)}>
          Filters
        </button>
        <div className="bp-entity-index__toolbarMeta">{shownLabel}</div>
      </div>

      {filtersOpen ? (
        <div
          className="bp-sheet"
          onMouseDown={(event) => {
            if (event.target.classList.contains("bp-sheet")) setFiltersOpen(false);
          }}
        >
          <div className="bp-sheet-card">
            <div className="bp-sheet-head">
              <div className="bp-entity-index__sheetTitle">{sheetTitle}</div>
              <button className="bp-top-btn" type="button" onClick={() => setFiltersOpen(false)}>
                Close
              </button>
            </div>
            <div className="bp-sheet-body">
              <div className="bp-sheet-grid2">
                <div>
                  <label className="bp-filter-label">{searchLabel}</label>
                  <input
                    className="bp-input"
                    placeholder={searchPlaceholder}
                    value={searchValue}
                    onChange={(event) => onSearchChange(event.target.value)}
                  />
                </div>
                <div>
                  <label className="bp-filter-label">{statusLabel}</label>
                  <select className="bp-input" value={statusValue} onChange={(event) => onStatusChange(event.target.value)}>
                    {statusOptions.map((option) => (
                      <option key={option.value} value={option.value}>
                        {renderOptionLabel(option, "sheet")}
                      </option>
                    ))}
                  </select>
                </div>
              </div>
              <div className="bp-sheet-grid2 bp-entity-index__sheetRow">
                <div>
                  <label className="bp-filter-label">{sortLabel}</label>
                  <select className="bp-input" value={sortValue} onChange={(event) => onSortChange(event.target.value)}>
                    {sortOptions.map((option) => (
                      <option key={option.value} value={option.value}>
                        {renderOptionLabel(option, "sheet")}
                      </option>
                    ))}
                  </select>
                </div>
                <div />
              </div>
              <div className="bp-sheet-actions">
                <button className="bp-btn" type="button" onClick={onClear}>
                  Clear
                </button>
                <button className="bp-primary-btn" type="button" onClick={() => setFiltersOpen(false)}>
                  Apply
                </button>
              </div>
            </div>
          </div>
        </div>
      ) : null}
    </>
  );
}