import { useState, type FormEvent } from "react";
import { ArrowUpRight } from "lucide-react";
import { cn } from "@/lib/utils";
import { classifyIntent } from "./classifyIntent";
import type { WorkshopSlug } from "./workshops";

interface StudioPromptBarProps {
  /**
   * Called when the prompt was successfully classified into a workshop.
   * Receives the target slug and the prefilled prompt text.
   */
  onClassified: (slug: WorkshopSlug, prefilledPrompt: string) => void;
  /**
   * Called when the prompt could not be classified (classifier returned
   * null). Receives the raw prompt; the parent page should navigate the
   * user to the Assistant with the prompt pre-loaded.
   */
  onFallbackToAssistant: (prompt: string) => void;
}

/**
 * Phase 10 — freeform input at the bottom of the Studio home page.
 *
 * Spec (§6.5): the user types "I need a 1920×1080 wallpaper of …", the
 * classifier maps that to the `wallpapers` workshop, and this component
 * calls `onClassified("wallpapers", prompt)`. If no workshop matches, the
 * prompt falls through to the Assistant via `onFallbackToAssistant`.
 *
 * This component owns the input state; routing is the parent's job.
 */
export function StudioPromptBar({ onClassified, onFallbackToAssistant }: StudioPromptBarProps) {
  const [value, setValue] = useState("");

  const handleSubmit = (event?: FormEvent) => {
    event?.preventDefault();
    const prompt = value.trim();
    if (!prompt) return;
    const result = classifyIntent(prompt);
    if (result) {
      onClassified(result.slug, result.prefilledPrompt);
    } else {
      onFallbackToAssistant(prompt);
    }
    setValue("");
  };

  return (
    <form
      data-testid="studio-prompt-bar"
      onSubmit={handleSubmit}
      className="flex w-full items-center gap-3 border-t border-border pt-6"
    >
      <label htmlFor="studio-prompt-input" className="sr-only">
        Describe what you need
      </label>
      <input
        id="studio-prompt-input"
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder={'Or just describe it: "I need a 1920×1080 wallpaper of …"'}
        autoComplete="off"
        className={cn(
          "flex-1 border-none bg-transparent px-0 py-2",
          "text-[16px] text-foreground placeholder:text-muted-foreground",
          "focus:outline-none focus-visible:outline-none",
        )}
      />
      <button
        type="submit"
        aria-label="Submit prompt"
        disabled={value.trim().length === 0}
        className={cn(
          "inline-flex h-10 w-10 items-center justify-center rounded-md",
          "text-primary transition-colors duration-100",
          "hover:bg-card disabled:cursor-not-allowed disabled:opacity-40",
          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
        )}
      >
        <ArrowUpRight className="h-5 w-5" strokeWidth={1.5} aria-hidden="true" />
      </button>
    </form>
  );
}
