/**
 * SearchResultsView Component
 * Displays a list of filtered settings matching the search query.
 * Works with the schema-based search system for iOS-like settings discovery.
 */

import type { RequiresToggle } from "../settingsSchema";

export interface SearchableFieldData {
  id: string;
  label: string;
  description?: string;
  tabId: string;
  tabLabel: string;
  section?: string;
  /** Sub-tab within the main tab (for tabs with nested navigation) */
  subTab?: string;
  /** Keywords for search matching (not displayed, used for discovery) */
  keywords?: string[];
  /** If this field requires a toggle to be enabled, contains redirect info */
  requiresToggle?: RequiresToggle;
}

export interface SearchResultsViewProps {
  query: string;
  results: SearchableFieldData[];
  onSelectResult: (result: SearchableFieldData) => void;
  onClearSearch: () => void;
  /** Function to check if a field's required toggle is enabled */
  isToggleEnabled?: (result: SearchableFieldData) => boolean;
}

export function SearchResultsView({
  query,
  results,
  onSelectResult,
  onClearSearch,
  isToggleEnabled,
}: SearchResultsViewProps) {
  return (
    <div className="b3-wvs-space-y-6">
      {/* Header */}
      <div className="b3-wvs-flex b3-wvs-items-center b3-wvs-justify-between">
        <div>
          <h2 className="b3-wvs-text-xl b3-wvs-font-semibold b3-wvs-text-gray-900">
            Search Results
          </h2>
          <p className="b3-wvs-mt-1 b3-wvs-text-sm b3-wvs-text-gray-500">
            Showing {results.length}{" "}
            {results.length === 1 ? "match" : "matches"} for{" "}
            <span className="b3-wvs-font-medium b3-wvs-text-gray-700">
              “{query}”
            </span>
          </p>
        </div>
        <button
          type="button"
          onClick={onClearSearch}
          className="b3-wvs-shell-btn is-secondary b3-wvs-gap-2"
        >
          <svg
            className="b3-wvs-w-4 b3-wvs-h-4"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
          Clear Search
        </button>
      </div>

      {/* Results List */}
      {results.length === 0 ? (
        <div className="b3-wvs-bg-gray-50 b3-wvs-border b3-wvs-border-gray-200 b3-wvs-rounded-lg b3-wvs-p-12 b3-wvs-text-center">
          <svg
            className="b3-wvs-mx-auto b3-wvs-h-12 b3-wvs-w-12 b3-wvs-text-gray-400"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={1.5}
              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
            />
          </svg>
          <h3 className="b3-wvs-mt-4 b3-wvs-text-lg b3-wvs-font-medium b3-wvs-text-gray-900">
            No settings found
          </h3>
          <p className="b3-wvs-mt-2 b3-wvs-text-sm b3-wvs-text-gray-500">
            Try adjusting your search terms or browse settings by category.
          </p>
        </div>
      ) : (
        <div className="b3-wvs-space-y-2">
          {results.map((result) => {
            // Check if this field requires a toggle that's currently disabled
            const requiresDisabledToggle =
              result.requiresToggle &&
              isToggleEnabled &&
              !isToggleEnabled(result);

            return (
              <button
                key={result.id}
                type="button"
                onClick={() => onSelectResult(result)}
                className="b3-wvs-w-full b3-wvs-text-left b3-wvs-bg-white b3-wvs-border b3-wvs-border-gray-200 b3-wvs-rounded-lg b3-wvs-p-4 b3-wvs-transition-all hover:b3-wvs-border-admin hover:b3-wvs-shadow-md focus:b3-wvs-outline-none focus:b3-wvs-ring-2 focus:b3-wvs-ring-offset-2 focus:b3-wvs-ring-admin"
              >
                <div className="b3-wvs-flex b3-wvs-items-start b3-wvs-justify-between b3-wvs-gap-4">
                  <div className="b3-wvs-flex-1 b3-wvs-min-w-0">
                    {/* Label */}
                    <h3 className="b3-wvs-text-sm b3-wvs-font-semibold b3-wvs-text-gray-900">
                      {result.label}
                    </h3>

                    {/* Description */}
                    {result.description && (
                      <p className="b3-wvs-mt-1 b3-wvs-text-sm b3-wvs-text-gray-600 b3-wvs-line-clamp-2">
                        {result.description}
                      </p>
                    )}

                    {/* Toggle required indicator */}
                    {requiresDisabledToggle &&
                      result.requiresToggle?.message && (
                        <p className="b3-wvs-mt-1 b3-wvs-text-xs b3-wvs-text-blue-600 b3-wvs-italic">
                          {result.requiresToggle.message}
                        </p>
                      )}

                    {/* Breadcrumb */}
                    <div className="b3-wvs-flex b3-wvs-items-center b3-wvs-gap-2 b3-wvs-mt-2 b3-wvs-text-xs b3-wvs-text-gray-500">
                      <span className="b3-wvs-font-medium">
                        {result.tabLabel}
                      </span>
                      {result.section && (
                        <>
                          <svg
                            className="b3-wvs-w-3 b3-wvs-h-3"
                            fill="currentColor"
                            viewBox="0 0 20 20"
                          >
                            <path
                              fillRule="evenodd"
                              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                              clipRule="evenodd"
                            />
                          </svg>
                          <span>{result.section}</span>
                        </>
                      )}
                    </div>
                  </div>

                  {/* Arrow Icon */}
                  <svg
                    className="b3-wvs-w-5 b3-wvs-h-5 b3-wvs-text-gray-400 b3-wvs-flex-shrink-0"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M9 5l7 7-7 7"
                    />
                  </svg>
                </div>
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}