/**
 * SearchResults component for displaying podcast search results
 */

import { For, Show } from "solid-js"
import type { SearchResult } from "../types/source"
import { ResultCard } from "./ResultCard"
import { ResultDetail } from "./ResultDetail"

type SearchResultsProps = {
  results: SearchResult[]
  selectedIndex: number
  focused: boolean
  onSelect?: (result: SearchResult) => void
  onChange?: (index: number) => void
  isSearching?: boolean
  error?: string | null
}

export function SearchResults(props: SearchResultsProps) {
  const handleSelect = (index: number) => {
    props.onChange?.(index)
  }

  return (
    <Show when={!props.isSearching} fallback={
      <box padding={1}>
        <text fg="yellow">Searching...</text>
      </box>
    }>
      <Show
        when={!props.error}
        fallback={
          <box padding={1}>
            <text fg="red">{props.error}</text>
          </box>
        }
      >
        <Show
          when={props.results.length > 0}
          fallback={
            <box padding={1}>
              <text fg="gray">No results found. Try a different search term.</text>
            </box>
          }
        >
          <box flexDirection="row" gap={1} height="100%">
            <box flexDirection="column" flexGrow={1}>
              <scrollbox height="100%">
                <box flexDirection="column" gap={1}>
                  <For each={props.results}>
                    {(result, index) => (
                      <ResultCard
                        result={result}
                        selected={index() === props.selectedIndex}
                        onSelect={() => handleSelect(index())}
                        onSubscribe={() => props.onSelect?.(result)}
                      />
                    )}
                  </For>
                </box>
              </scrollbox>
            </box>
            <box width={36}>
              <ResultDetail
                result={props.results[props.selectedIndex]}
                onSubscribe={(result) => props.onSelect?.(result)}
              />
            </box>
          </box>
        </Show>
      </Show>
    </Show>
  )
}