import { FormEvent, useState } from 'react';
import { useAddToWatchlist } from '../../hooks/useWatchlist';

export function AddTickerForm() {
  const [symbol, setSymbol] = useState('');
  const addMutation = useAddToWatchlist();

  function handleSubmit(e: FormEvent) {
    e.preventDefault();
    const trimmed = symbol.trim().toUpperCase();
    if (!trimmed) return;
    addMutation.mutate(trimmed, { onSuccess: () => setSymbol('') });
  }

  return (
    <form onSubmit={handleSubmit} className="flex gap-2">
      <input
        type="text"
        value={symbol}
        onChange={(e) => setSymbol(e.target.value)}
        placeholder="Add symbol (e.g. AAPL)"
        className="input-glass px-3 py-2 text-sm"
      />
      <button
        type="submit"
        disabled={addMutation.isPending || !symbol.trim()}
        className="btn-gradient px-4 py-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
      >
        <span>{addMutation.isPending ? 'Adding…' : 'Add'}</span>
      </button>
    </form>
  );
}