/**
 * WorthDoing.ai
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * File: src/components/wd/ObjectiveForm.tsx
 * Description: Discover-page objective input — creates an investigation and routes to the live view.
 */
"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";

const SUGGESTIONS = [
  "Find things worth doing in local AI",
  "What's worth building for independent booksellers?",
  "Underexplored opportunities in home energy monitoring",
  "What should exist for parents of kids with ADHD?",
];

export function ObjectiveForm() {
  const router = useRouter();
  const [objective, setObjective] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const start = async (text: string) => {
    if (submitting || text.trim().length < 8) return;
    setSubmitting(true);
    setError(null);
    try {
      const res = await fetch("/api/investigations", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ objective: text.trim() }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error ?? "Failed to start the investigation.");
      router.push(`/investigate/${data.id}`);
    } catch (e) {
      setError(e instanceof Error ? e.message : "Something went wrong.");
      setSubmitting(false);
    }
  };

  return (
    <div className="w-full">
      <form
        onSubmit={(e) => {
          e.preventDefault();
          void start(objective);
        }}
        className="flex flex-col gap-2 sm:flex-row"
      >
        <input
          value={objective}
          onChange={(e) => setObjective(e.target.value)}
          placeholder="What domain should the agent investigate?"
          maxLength={500}
          className="min-h-[52px] flex-1 rounded-xl border border-line bg-card px-4 text-[15px] text-ink shadow-sm outline-none transition-colors placeholder:text-ink-soft/60 focus:border-verdict focus:ring-2 focus:ring-verdict/20"
        />
        <button
          type="submit"
          disabled={submitting || objective.trim().length < 8}
          className="min-h-[52px] rounded-xl bg-ink px-6 text-[15px] font-medium text-paper transition-opacity hover:opacity-85 disabled:opacity-40"
        >
          {submitting ? "Launching…" : "Investigate"}
        </button>
      </form>
      {error && <p className="mt-2 text-sm text-rust">{error}</p>}
      <div className="mt-4 flex flex-wrap gap-2">
        {SUGGESTIONS.map((s) => (
          <button
            key={s}
            type="button"
            disabled={submitting}
            onClick={() => {
              setObjective(s);
              void start(s);
            }}
            className="min-h-[44px] rounded-full border border-line bg-card px-4 py-2 text-left text-[13px] text-ink-soft transition-colors hover:border-verdict/50 hover:text-ink disabled:opacity-40"
          >
            {s}
          </button>
        ))}
      </div>
    </div>
  );
}