import type { FormEvent } from "react";
import type { SearchResult } from "@/types/api";

type Props = {
  query: string;
  searching: boolean;
  results: SearchResult[];
  marketStatus: { isOpen: boolean; status: string; time: string };
  onChangeQuery: (value: string) => void;
  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
  onSelectTicker: (symbol: string) => void;
};

export function TopBar({ query, searching, results, marketStatus, onChangeQuery, onSubmit, onSelectTicker }: Props) {
  const showDropdown = query.trim().length >= 2;

  return (
    <header className="psm-top">
      <div className="psm-search-shell">
        <form className="psm-search-form" onSubmit={onSubmit}>
          <span className="psm-icon icon-search" aria-hidden />
          <input value={query} onChange={(event) => onChangeQuery(event.target.value)} placeholder="Search ticker or company" aria-label="Search ticker" />
          <span className="psm-kbd">Enter</span>
        </form>

        {showDropdown ? (
          <div className="psm-search-dropdown">
            {searching ? <div className="psm-search-status">Searching...</div> : null}
            {!searching && results.length === 0 ? <div className="psm-search-status">No matches</div> : null}
            {!searching
              ? results.map((result) => (
                  <button key={`${result.symbol}-${result.exchange}`} type="button" className="psm-search-result" onClick={() => onSelectTicker(result.symbol)}>
                    <span className="psm-search-result-symbol">{result.symbol}</span>
                    <span className="psm-search-result-copy">
                      {result.name}
                      {result.exchange ? ` · ${result.exchange}` : ""}
                    </span>
                  </button>
                ))
              : null}
          </div>
        ) : null}
      </div>

      <div className="psm-clock-group">
        <div className="psm-market-status">
          <span className={`psm-market-dot${marketStatus.isOpen ? " open" : ""}`} aria-hidden />
          <span>{marketStatus.status}</span>
          <span>{marketStatus.time}</span>
        </div>

        <div className="psm-account">
          <span className="psm-icon icon-user" aria-hidden />
          <span className="psm-account-avatar">T</span>
          <span>Local Profile</span>
        </div>
      </div>
    </header>
  );
}