RedditBot/apps/dashboard/src/features/conversations/start-conversation-form.tsx

import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { RedditUsernameLink } from '../../components/reddit-username-link.js';
import { useStartConversationMutation } from './conversation-queries.js';
import { useRedditAccountsQuery } from '../settings/settings-queries.js';
import { ownedConversationId } from './conversation-identity.js';

const SUCCESS_NOTICE_DISMISS_MS = 5_000;

interface StartConversationFormProps {
  onStarted(conversationId: string): void;
}

export function StartConversationForm({ onStarted }: StartConversationFormProps) {
  const [username, setUsername] = useState('');
  const [message, setMessage] = useState('');
  const accountsQuery = useRedditAccountsQuery();
  const runningAccounts = (accountsQuery.data ?? []).filter((account) => account.isRunning);
  const [selectedAccountId, setSelectedAccountId] = useState('');
  const accountId = selectedAccountId || runningAccounts[0]?.accountId || '';
  const [successUsername, setSuccessUsername] = useState<string | null>(null);
  const mutation = useStartConversationMutation();
  const canSubmit = accountId.length > 0 && username.trim().length > 0 && message.trim().length > 0 && !mutation.isPending;

  useEffect(() => {
    if (successUsername === null) return;
    const timer = window.setTimeout(() => setSuccessUsername(null), SUCCESS_NOTICE_DISMISS_MS);
    return () => window.clearTimeout(timer);
  }, [successUsername]);

  if (accountsQuery.isPending) {
    return <p className="conversation-form-hint" role="status">Loading Reddit accounts…</p>;
  }
  if (accountsQuery.isError) {
    return <div className="conversation-inline-error" role="alert">{accountsQuery.error.message}</div>;
  }
  if (runningAccounts.length === 0) {
    return (
      <p className="conversation-form-hint">
        No running accounts — start one in <Link to="/accounts">Accounts</Link>.
      </p>
    );
  }

  function submit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!canSubmit) return;
    mutation.mutate(
      { accountId, username, message },
      {
        onSuccess(chat) {
          setSuccessUsername(chat.username);
          setUsername('');
          setMessage('');
          onStarted(ownedConversationId(chat));
        },
      },
    );
  }

  return (
    <form className="start-conversation-form" onSubmit={submit}>
      <div className="conversation-field">
        <label htmlFor="new-conversation-account">Send from account</label>
        <select id="new-conversation-account" onChange={(event) => setSelectedAccountId(event.target.value)} value={accountId}>
          {runningAccounts.map((account) => <option key={account.accountId} value={account.accountId}>u/{account.redditUsername}</option>)}
        </select>
      </div>
      <div className="conversation-field">
        <label htmlFor="new-conversation-username">Reddit username</label>
        <input
          autoComplete="off"
          id="new-conversation-username"
          onChange={(event) => setUsername(event.target.value)}
          placeholder="username"
          value={username}
        />
      </div>
      <div className="conversation-field">
        <label htmlFor="new-conversation-message">Opening message</label>
        <textarea
          id="new-conversation-message"
          onChange={(event) => setMessage(event.target.value)}
          placeholder="Write a personal opening message"
          rows={4}
          value={message}
        />
      </div>
      {mutation.isError ? <div className="conversation-inline-error" role="alert">{mutation.error.message}</div> : null}
      {successUsername ? (
        <div aria-label="Conversation started" className="conversation-inline-success" role="status">
          Conversation started with <RedditUsernameLink username={successUsername} />
        </div>
      ) : null}
      <button className="conversation-primary" disabled={!canSubmit} type="submit">
        {mutation.isPending ? 'Starting…' : 'Start conversation'}
      </button>
    </form>
  );
}