import { useState } from 'react';
import { AccountOwnerBadge } from '../../components/account-owner-badge.js';
import { RedditUsernameLink, redditUsernameLabel } from '../../components/reddit-username-link.js';
import { useProcessedPostsQuery } from './conversation-queries.js';

export function ProcessedUserLookup() {
  const [input, setInput] = useState('');
  const [username, setUsername] = useState('');
  const postsQuery = useProcessedPostsQuery(username);
  // Only show results that belong to the current lookup; switching the
  // username changes the query key, which clears stale data automatically.
  const showResults = postsQuery.data !== undefined && !postsQuery.isFetching;

  return (
    <details className="new-conversation-panel processed-user-lookup">
      <summary>
        <h2 id="processed-user-heading">Processed user lookup</h2>
      </summary>
      <form
        className="start-conversation-form processed-user-form"
        onSubmit={(event) => { event.preventDefault(); setUsername(input.trim().replace(/^u\//i, '')); }}
      >
        <div className="conversation-field">
          <label htmlFor="processed-user">Lookup Reddit username</label>
          <input autoComplete="off" id="processed-user" onChange={(event) => setInput(event.target.value)} value={input} />
        </div>
        <button className="conversation-primary" disabled={input.trim().length === 0} type="submit">Look up user</button>
      </form>
      {postsQuery.isFetching && username ? <p role="status">Looking up processed posts...</p> : null}
      {postsQuery.isError ? <p className="conversation-inline-error" role="alert">{postsQuery.error.message}</p> : null}
      {showResults && postsQuery.data ? (
        postsQuery.data.length === 0 ? <p>No processed posts found for <RedditUsernameLink username={username} />.</p> : (
          <ol aria-label={`Processed posts for ${redditUsernameLabel(username)}`}>
            {postsQuery.data.map((post) => <li key={`${post.owner?.accountId ?? 'legacy'}:${post.id}`}><strong>{post.title}</strong><AccountOwnerBadge owner={post.owner} /><span>r/{post.subreddit} · {post.messageSent ? 'Message sent' : post.error ?? 'Processed'}</span></li>)}
          </ol>
        )
      ) : null}
    </details>
  );
}