// @ts-nocheck
import {
  FilterIcon,
  formatRequestSubmittedDate,
  getRequestDisplayStateClassName,
  getRequestDisplayStateLabel,
} from "../utils";

export function LauncherPublicRequestBoard({
  requestCount,
  queuedPendingRequestCount,
  needsReviewRequestCount,
  activeRequestCount,
  implementedRequestCount,
  requestDraftOpen,
  requestSubmitting,
  requestSearchText,
  requestFilterMenuOpen,
  requestStatusFilterOptions,
  requestTagFilterOptions,
  requestStatusFilters,
  requestTagFilters,
  requestsLoading,
  requests,
  filteredRequests,
  expandedRequestIds,
  setRequestDraftOpen,
  handleAdminPanelToggle,
  setRequestSearchText,
  setRequestFilterMenuOpen,
  setRequestStatusFilters,
  setRequestTagFilters,
  toggleStringSelection,
  handleToggleExpandedRequest,
  requestDraft,
  setRequestDraft,
  handleAddRequest,
}) {
  return (
    <div className="changelog-splash-card">
      <div className="changelog-splash-hero">
        <div className="changelog-splash-kicker">Shared Request Board</div>
        <div className="changelog-splash-title" id="launcher-requests-title">Requests</div>
        <div className="changelog-splash-meta">
          {requestCount} saved request{requestCount === 1 ? "" : "s"}: {queuedPendingRequestCount} queued, {needsReviewRequestCount} in review, {activeRequestCount} active, and {implementedRequestCount} implemented.
        </div>
        <div className="launcher-request-hero-actions">
          <div className="launcher-request-toolbar-buttons">
            <button
              type="button"
              className="launcher-primary-btn"
              onClick={() => {
                setRequestDraftOpen((value) => !value);
              }}
              disabled={requestSubmitting}
            >
              {requestDraftOpen ? "Hide Request Form" : "Add New Request"}
            </button>
            <button
              type="button"
              className="launcher-secondary-btn"
              onClick={() => void handleAdminPanelToggle()}
            >
              Open Admin Window
            </button>
          </div>
          <div className="launcher-request-filter-bar">
            <input
              type="text"
              className="launcher-request-search-input"
              value={requestSearchText}
              onChange={(event) => setRequestSearchText(event.target.value)}
              placeholder="Search requests..."
            />
            <div className="launcher-request-filter-menu-wrap">
              <button
                type="button"
                className={`launcher-secondary-btn launcher-request-filter-icon-btn ${requestFilterMenuOpen ? "is-active" : ""}`}
                onClick={() => setRequestFilterMenuOpen((current) => !current)}
                title="Open request filters"
                aria-label="Open request filters"
              >
                <FilterIcon />
              </button>
              {requestFilterMenuOpen ? (
                <div className="launcher-request-filter-menu">
                  {requestStatusFilterOptions.length > 0 ? (
                    <div className="launcher-request-filter-group">
                      <div className="launcher-request-filter-group-title">Status</div>
                      {requestStatusFilterOptions.map((option) => (
                        <label key={`public-status-${option.id}`} className="launcher-request-filter-option">
                          <input
                            type="checkbox"
                            checked={requestStatusFilters.includes(option.id)}
                            onChange={() => setRequestStatusFilters((current) => toggleStringSelection(current, option.id))}
                          />
                          <span>({option.count}) {option.label}</span>
                        </label>
                      ))}
                    </div>
                  ) : null}
                  {requestTagFilterOptions.length > 0 ? (
                    <div className="launcher-request-filter-group">
                      <div className="launcher-request-filter-group-title">Tags</div>
                      {requestTagFilterOptions.map(({ tag, count }) => (
                        <label key={`public-tag-${tag}`} className="launcher-request-filter-option">
                          <input
                            type="checkbox"
                            checked={requestTagFilters.includes(tag)}
                            onChange={() => setRequestTagFilters((current) => toggleStringSelection(current, tag))}
                          />
                          <span>({count}) {tag}</span>
                        </label>
                      ))}
                    </div>
                  ) : null}
                </div>
              ) : null}
            </div>
          </div>
        </div>
      </div>
      {requestDraftOpen ? (
        <section className="launcher-request-composer">
          <label className="launcher-request-composer-label" htmlFor="launcher-request-draft">
            What should be added or improved?
          </label>
          <textarea
            id="launcher-request-draft"
            className="launcher-request-textarea"
            value={requestDraft}
            onChange={(event) => setRequestDraft(event.target.value)}
            placeholder="Type a request for the board..."
            maxLength={1000}
          />
          <div className="launcher-request-composer-actions">
            <button
              type="button"
              className="launcher-primary-btn"
              onClick={() => void handleAddRequest()}
              disabled={requestSubmitting}
            >
              {requestSubmitting ? "Saving Request..." : "Save Request"}
            </button>
            <button
              type="button"
              className="launcher-secondary-btn"
              onClick={() => {
                setRequestDraft("");
                setRequestDraftOpen(false);
              }}
              disabled={requestSubmitting}
            >
              Cancel
            </button>
          </div>
        </section>
      ) : null}
      <div className="launcher-request-list">
        {requestsLoading ? (
          <section className="launcher-request-entry">
            <div className="launcher-request-empty">Loading saved requests...</div>
          </section>
        ) : null}
        {!requestsLoading && filteredRequests.length === 0 ? (
          <section className="launcher-request-entry">
            <div className="launcher-request-empty">
              {requests.length === 0
                ? "No requests yet. Add the first one to start the board."
                : "No requests match the current filter."}
            </div>
          </section>
        ) : null}
        {!requestsLoading ? filteredRequests.map((requestEntry) => {
          const isExpanded = expandedRequestIds.includes(requestEntry.id);
          const isActiveRequest = requestEntry.status === "active" || requestEntry.status === "implemented";
          const requestDisplayState = getRequestDisplayStateLabel(requestEntry);
          const requestDisplayStateClassName = getRequestDisplayStateClassName(requestEntry);
          return (
            <section
              key={requestEntry.id}
              className={`launcher-request-entry is-${requestEntry.status} ${isExpanded ? "is-expanded" : ""} ${isActiveRequest ? "is-clickable" : ""}`}
              onClick={isActiveRequest ? () => handleToggleExpandedRequest(requestEntry.id) : undefined}
            >
              <div className="launcher-request-entry-head">
                <div className="launcher-request-entry-head-main">
                  <div className={`launcher-request-status-pill is-${requestDisplayStateClassName}`}>
                    {requestDisplayState}
                  </div>
                  <div className="launcher-request-entry-title-block">
                    <h3 className="launcher-request-entry-title">{requestEntry.title}</h3>
                  </div>
                </div>
                <div className="launcher-request-entry-date" title={`Submitted ${formatRequestSubmittedDate(requestEntry.createdAt)}`}>
                  {formatRequestSubmittedDate(requestEntry.createdAt)}
                </div>
              </div>
              {requestEntry.tags.length > 0 ? (
                <div className="launcher-request-tags">
                  {requestEntry.tags.map((tag) => (
                    <span key={`${requestEntry.id}-${tag}`} className="launcher-request-tag">{tag}</span>
                  ))}
                </div>
              ) : null}
              {isActiveRequest && isExpanded ? (
                <div className="launcher-request-expanded">
                  <div className="launcher-request-expanded-block">
                    <div className="launcher-request-expanded-label">Parsed interpretation</div>
                    <p className="launcher-request-expanded-copy">{requestEntry.summary}</p>
                  </div>
                  <div className="launcher-request-expanded-block">
                    <div className="launcher-request-expanded-label">How we could do that</div>
                    <p className="launcher-request-expanded-copy">{requestEntry.implementationNotes}</p>
                  </div>
                  {requestEntry.sourceText ? (
                    <div className="launcher-request-expanded-block">
                      <div className="launcher-request-expanded-label">Original submission</div>
                      <p className="launcher-request-expanded-copy">{requestEntry.sourceText}</p>
                    </div>
                  ) : null}
                </div>
              ) : null}
            </section>
          );
        }) : null}
      </div>
      <div className="changelog-splash-footer">
        <div className="changelog-splash-footnote">
          Requests are saved and shared from this launcher. Public rows stay focused on the request itself, while moderation tools and logs stay behind protected admin access.
        </div>
      </div>
    </div>
  );
}
