'use client';

import { useRouter } from 'next/navigation';
import { FormEvent, useState } from 'react';
import { Button } from '@/components/ui/Button';

export function AnswerForm({ questionId }: { questionId: number }) {
  const router = useRouter();
  const [answer, setAnswer] = useState('');
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  async function onSubmit(e: FormEvent) {
    e.preventDefault();
    setError(null);
    setLoading(true);
    const res = await fetch('/api/answers', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ questionId, answer }),
    });
    const json = await res.json();
    setLoading(false);
    if (!res.ok || !json.ok) {
      setError(json.error || 'Failed to submit answer');
      return;
    }
    setAnswer('');
    router.refresh();
  }

  return (
    <form onSubmit={onSubmit} className="card p-4">
      <textarea
        className="textarea"
        placeholder="Share what worked for you..."
        value={answer}
        onChange={(e) => setAnswer(e.target.value)}
        required
        minLength={2}
      />
      {error ? (
        <div className="mt-3 rounded-md bg-red-50 p-2 text-sm text-red-700">{error}</div>
      ) : null}
      <div className="mt-3 flex justify-end">
        <Button type="submit" disabled={loading || !answer.trim()}>
          {loading ? 'Posting...' : 'Post answer'}
        </Button>
      </div>
    </form>
  );
}