type EmptyStateProps = {
  title: string;
  body: string;
  actionLabel?: string;
  onAction?: () => void;
};

function EmptyState({ title, body, actionLabel, onAction }: EmptyStateProps) {
  return (
    <section aria-labelledby="empty-title" className="empty">
      <h2 id="empty-title">{title}</h2>
      <p>{body}</p>
      {actionLabel && onAction ? (
        <button type="button" onClick={onAction}>{actionLabel}</button>
      ) : null}
    </section>
  );
}

function UserSearch({ users }: { users: User[] }) {
  const [query, setQuery] = useState("");

  const visibleUsers = users.filter((user) => {
    const haystack = `${user.name} ${user.handle}`.toLowerCase();
    return haystack.includes(query.trim().toLowerCase());
  });

  return (
    <>
      <label htmlFor="user-search">Search users</label>
      <input
        id="user-search"
        value={query}
        onChange={(event) => setQuery(event.currentTarget.value)}
      />

      {visibleUsers.length === 0 ? (
        <p role="status">No users match "{query}".</p>
      ) : (
        <ul>
          {visibleUsers.map((user) => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      )}
    </>
  );
}

function InviteForm({ onInvite }: { onInvite: (email: string) => Promise<void> }) {
  const [email, setEmail] = useState("");
  const [status, setStatus] = useState<"idle" | "saving" | "done" | "error">("idle");

  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const nextEmail = email.trim();
    if (!nextEmail) return;

    setStatus("saving");
    try {
      await onInvite(nextEmail);
      setEmail("");
      setStatus("done");
    } catch {
      setStatus("error");
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="invite-email">Email</label>
      <input
        id="invite-email"
        type="email"
        value={email}
        onChange={(event) => setEmail(event.currentTarget.value)}
      />
      <button disabled={status === "saving" || !email.trim()}>
        {status === "saving" ? "Inviting..." : "Invite"}
      </button>
      {status === "error" ? <p role="alert">Could not send invite.</p> : null}
    </form>
  );
}

type State = {
  status: "idle" | "loading" | "success" | "error";
  items: Item[];
  error: string | null;
};

type Action =
  | { type: "load" }
  | { type: "success"; items: Item[] }
  | { type: "error"; message: string };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case "load":
      return { ...state, status: "loading", error: null };
    case "success":
      return { status: "success", items: action.items, error: null };
    case "error":
      return { ...state, status: "error", error: action.message };
    default:
      return state;
  }
}

function useUsers(url: string) {
  const [state, setState] = useState<{
    status: "idle" | "loading" | "success" | "error";
    users: User[];
    error: string | null;
  }>({ status: "idle", users: [], error: null });

  const latestRequestId = useRef(0);

  useEffect(() => {
    const requestId = ++latestRequestId.current;
    const controller = new AbortController();

    setState((prev) => ({ ...prev, status: "loading", error: null }));

    async function run() {
      try {
        const response = await fetch(url, { signal: controller.signal });
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        const users = (await response.json()) as User[];

        if (requestId === latestRequestId.current) {
          setState({ status: "success", users, error: null });
        }
      } catch (error) {
        if (controller.signal.aborted) return;
        if (requestId === latestRequestId.current) {
          setState({
            status: "error",
            users: [],
            error: error instanceof Error ? error.message : "Unknown error"
          });
        }
      }
    }

    run();
    return () => controller.abort();
  }, [url]);

  return state;
}

function useDebouncedValue<T>(value: T, delayMs: number) {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const timerId = window.setTimeout(() => setDebounced(value), delayMs);
    return () => window.clearTimeout(timerId);
  }, [value, delayMs]);

  return debounced;
}

function SearchBox() {
  const [query, setQuery] = useState("");
  const debouncedQuery = useDebouncedValue(query, 250);
  const url = `/api/search?q=${encodeURIComponent(debouncedQuery)}`;
  const results = useSearchResults(url);

  return (
    <div>
      <label htmlFor="search">Search</label>
      <input
        id="search"
        value={query}
        onChange={(event) => setQuery(event.currentTarget.value)}
      />
      <Results state={results} />
    </div>
  );
}

function ChatComposer() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [draft, setDraft] = useState("");
  const [isSending, setIsSending] = useState(false);

  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const text = draft.trim();
    if (!text || isSending) return;

    const optimisticMessage: Message = {
      id: crypto.randomUUID(),
      role: "user",
      text,
      status: "sending"
    };

    setDraft("");
    setMessages((prev) => [...prev, optimisticMessage]);
    setIsSending(true);

    try {
      const saved = await sendMessage(text);
      setMessages((prev) =>
        prev.map((message) =>
          message.id === optimisticMessage.id ? saved : message
        )
      );
    } catch {
      setMessages((prev) =>
        prev.map((message) =>
          message.id === optimisticMessage.id
            ? { ...message, status: "error" }
            : message
        )
      );
    } finally {
      setIsSending(false);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="draft">Message</label>
      <textarea
        id="draft"
        value={draft}
        onChange={(event) => setDraft(event.currentTarget.value)}
      />
      <button disabled={!draft.trim() || isSending}>Send</button>
    </form>
  );
}

function MessageList({ messages }: { messages: Message[] }) {
  const endRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    endRef.current?.scrollIntoView({ block: "end" });
  }, [messages.length]);

  return (
    <section aria-label="Conversation">
      <ol>
        {messages.map((message) => (
          <li key={message.id}>{message.text}</li>
        ))}
      </ol>
      <div ref={endRef} />
    </section>
  );
}

function CommandResults({ items, onChoose }: Props) {
  const [activeIndex, setActiveIndex] = useState(0);

  function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
    if (event.key === "ArrowDown") {
      event.preventDefault();
      setActiveIndex((index) => Math.min(index + 1, items.length - 1));
    }
    if (event.key === "ArrowUp") {
      event.preventDefault();
      setActiveIndex((index) => Math.max(index - 1, 0));
    }
    if (event.key === "Enter") {
      const item = items[activeIndex];
      if (item) onChoose(item);
    }
  }

  return (
    <div role="listbox" tabIndex={0} onKeyDown={handleKeyDown}>
      {items.map((item, index) => (
        <button
          key={item.id}
          type="button"
          role="option"
          aria-selected={index === activeIndex}
          onClick={() => onChoose(item)}
        >
          {item.label}
        </button>
      ))}
    </div>
  );
}

function HighlightedText({ text, query }: { text: string; query: string }) {
  const needle = query.trim();
  if (!needle) return <>{text}</>;

  const lowerText = text.toLowerCase();
  const lowerNeedle = needle.toLowerCase();
  const index = lowerText.indexOf(lowerNeedle);

  if (index === -1) return <>{text}</>;

  return (
    <>
      {text.slice(0, index)}
      <mark>{text.slice(index, index + needle.length)}</mark>
      {text.slice(index + needle.length)}
    </>
  );
}

setMessages((previousMessages) => [
  ...previousMessages,
  { id: crypto.randomUUID(), text: draft }
]);

async function getJson<T>(url: string, signal?: AbortSignal): Promise<T> {
  const response = await fetch(url, {
    method: "GET",
    headers: { Accept: "application/json" },
    signal
  });

  // fetch only rejects for network-level failures, not HTTP 404/500.
  if (!response.ok) {
    throw new Error(`Request failed: ${response.status}`);
  }

  return (await response.json()) as T;
}

function scheduleChunkedWork(items: Item[], visit: (item: Item) => void) {
  let index = 0;

  function runChunk(deadline: IdleDeadline) {
    while (index < items.length && deadline.timeRemaining() > 4) {
      visit(items[index]);
      index += 1;
    }

    if (index < items.length) {
      requestIdleCallback(runChunk);
    }
  }

  requestIdleCallback(runChunk);
}

/*
Live coding loop:
1. Restate goal in one sentence.
2. Define data shape and stable IDs.
3. Write minimum state:
   - input/draft state
   - selected/open/focused UI state
   - server status/data/error state
4. Derive visible UI during render.
5. Add handlers by user intent.
6. Add edge states:
   - loading
   - empty
   - error
   - disabled/pending
7. Add hardening:
   - AbortController
   - latestRequestId
   - keyboard/focus
   - response.ok
   - retry path
8. Close with tests and tradeoffs.
*/